Add calculator widget #956
Conversation
There was a problem hiding this comment.
Thanks for taking the time to implement this!
I did a quick review of the functionality and everything and had a few comments. Everything seems to work great (except on Safari, see below), with the exception of the conflict with the existing / keyboard shortcut on the result page. If you have any ideas to resolve that, let me know, otherwise I'll try to think of something whenever I get a bit more time.
| .replace("π", "(Math.PI)") | ||
| .replace("ℇ", "(Math.E)") | ||
| // turns 3(1+2) into 3*(1+2) (for example) | ||
| .replace(/(?<=[0-9\)])(?<=[^+\-x*\/%^])\(/, "x(") |
There was a problem hiding this comment.
Just to note: Safari doesn't support the regex lookbehind feature at the moment, so this throws a syntax error and the calculator doesn't work in that browser. But since it looks like Safari Technology Preview release 161 supports it, and it isn't a critical feature, I'm fine with leaving it as is.
| case "+": | ||
| case "-": | ||
| case "x": | ||
| case "/": |
There was a problem hiding this comment.
Since the / key currently highlights the search bar on the page, that key can't really be used for calculations since it just appends to the original search query (and grabs focus of the Enter key again).
I'm not really sure of the best solution for that yet. The simplest approach would be to just deactivate that keyboard shortcut when the calculator widget is visible, but idk if that's the right way to go. Let me know if you have any ideas.
There was a problem hiding this comment.
Interesting, I didn't think to check for that issue. I did check out Google's calculator widget, and what they seem to have done is only activate keyboard shortcuts for the calculator if the user is focused on that element; in other words they have to click on it before the keyboard is active. Similarly, when clicking away from the calculator, the default / to the search bar shortcut works as normal. I think that is the solution I will go with, unless you have a different idea you would like me to use.
Co-authored-by: Ben Busby <contact@benbusby.com>
This PR adds a simple calculator widget, somewhat similar to the one presented when searching
calculatoron Google. It is definitely not as fancy as Google's, and probably has a couple bugs that I wasn't able to find, but it works for the most part.Also, it adds somewhat of a template for making the addition of new widgets easier via the
app/utils/widgets.pyfile. My eventual plan is to use this to create more widgets that appear in Google, such as a color picker, timer, etc.Also as you probably have noticed this is my first PR here and I'm not too familiar with the code base. So if you see anything that doesn't look up to standards or out of place feel free to let me know.
Thanks!