duckduckgo/zeroclickinfo-goodies
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Calculator: Fix text selection across all browsers (#4417)

Browse Source 
* Listen to calc--wrap and apply selected class as needed

* Remove unneeded mousedown handler

* Clean trailing spaces
This commit is contained in:
Zaahir Moolla 2017-08-10 17:36:26 -04:00 committed by PJ Hampton
parent e31c2260f0
commit 03ec6b3650
3 changed files with 26 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
share/goodie/calculator/calculator.css
View File

@ -12,6 +12,7 @@
.zci--calculator .tile--calculator { .zci--calculator .tile--calculator {
display: block !important; display: block !important;
outline: none;
} }
@ -669,13 +670,13 @@ input:checked+.tile__ctrl__toggle-slider:before {
background: rgba(88, 88, 88, 0.75); background: rgba(88, 88, 88, 0.75);
} }
.dark-bg .zci--calculator .tile__calc .tile__ctrl--ops, .dark-bg .zci--calculator .tile__calc .tile__ctrl--ops,
.dark-bg .zci--calculator .tile__calc .tile__tab__sci .tile__ctrl__btn { .dark-bg .zci--calculator .tile__calc .tile__tab__sci .tile__ctrl__btn {
background: #111; background: #111;
font-weight: lighter; font-weight: lighter;
} }
.dark-bg .zci--calculator .tile__calc .tile__ctrl--ops:hover, .dark-bg .zci--calculator .tile__calc .tile__ctrl--ops:hover,
.dark-bg .zci--calculator .tile__calc .tile__tab__sci .tile__ctrl__btn:hover { .dark-bg .zci--calculator .tile__calc .tile__tab__sci .tile__ctrl__btn:hover {
background: rgba(17, 17, 17, 0.7); background: rgba(17, 17, 17, 0.7);
} }
@ -742,4 +743,3 @@ input:checked+.tile__ctrl__toggle-slider:before {
.dark-bg .zci--calculator .tile__calc .tile__past-calc:hover { .dark-bg .zci--calculator .tile__calc .tile__past-calc:hover {
background: #111; background: #111;
} }

47
share/goodie/calculator/calculator.js
View File

@ -474,9 +474,9 @@ DDH.calculator = DDH.calculator || {};
evaluated = true; evaluated = true;
setCButtonState("C"); setCButtonState("C");
DDG.pixel.fire( DDG.pixel.fire(
'iafd', 'iafd',
'calculator', { 'calculator', {
q: DDG.get_query_encoded() q: DDG.get_query_encoded()
}); });
} }
return false; return false;
@ -660,14 +660,14 @@ DDH.calculator = DDH.calculator || {};
// handles the display like a normal calculator // handles the display like a normal calculator
// If a new number / function / clear, bail and start new calculation // If a new number / function / clear, bail and start new calculation
if( (evaluated === true && expressionFromSearchBar === false) && (Utils.isNumber(element) || Utils.isMathFunction(element) || Utils.isConstant(element) || Utils.isClear(element)) ) { if( (evaluated === true && expressionFromSearchBar === false) && (Utils.isNumber(element) || Utils.isMathFunction(element) || Utils.isConstant(element) || Utils.isClear(element)) ) {
// only show Ans if it wasn't an error // only show Ans if it wasn't an error
if(display.value !== "") { if(display.value !== "") {
ExpressionParser.setExpression("Ans: " + display.value); ExpressionParser.setExpression("Ans: " + display.value);
} else { } else {
ExpressionParser.setExpression(""); ExpressionParser.setExpression("");
} }
display.value = ""; display.value = "";
usingState = false; usingState = false;
evaluated = false; evaluated = false;
@ -874,9 +874,9 @@ DDH.calculator = DDH.calculator || {};
} catch(_err) { } catch(_err) {
display.value = ""; display.value = "";
DDG.pixel.fire( DDG.pixel.fire(
'iafd', 'iafd',
'calculator', { 'calculator', {
q: DDG.get_query_encoded() q: DDG.get_query_encoded()
} }
); );
} }
@ -902,12 +902,12 @@ DDH.calculator = DDH.calculator || {};
signal: "high", signal: "high",
onShow: function() { onShow: function() {
var $calc = $(".zci--calculator"); var $calc = $(".zci--calculator .calculator--wrap");
var inputTrapClass = ".tile__display"; var inputClass = ".tile__display";
var $calcInputTrap = $calc.find(inputTrapClass); var $calcInput = $calc.find(inputClass);
function setFocus() { function setFocus() {
$calcInputTrap.focus(); $calcInput.focus();
} }
DDG.require('math.js', function() { DDG.require('math.js', function() {
@ -951,20 +951,15 @@ DDH.calculator = DDH.calculator || {};
* Sets focus when the calculator is clicked * Sets focus when the calculator is clicked
* *
*/ */
$($calc).on('click mousedown', function(e) { $calc
setFocus(); .on('click mousedown', function(e) {
}); if (!$calcInput.hasClass('selected')){
$calcInput.addClass('selected');
$calcInputTrap setFocus();
.focus(function() { }
$calcInputTrap.addClass('selected');
}) })
.blur(function() { .blur(function() {
$calcInputTrap.removeClass('selected'); $calcInput.removeClass('selected');
});
$($calc, $calcInputTrap).mouseup(function (e) {
e.preventDefault();
}); });
/** /**
@ -998,7 +993,7 @@ DDH.calculator = DDH.calculator || {};
* If a key is pressed the below code is fired and the key reference * If a key is pressed the below code is fired and the key reference
* is looked up in the KEYCODES hash. * is looked up in the KEYCODES hash.
*/ */
$calcInputTrap.keypress(function(e){ $calc.keypress(function(e){
if (e.altKey || e.metaKey || e.ctrlKey) { if (e.altKey || e.metaKey || e.ctrlKey) {
return; return;
@ -1019,7 +1014,7 @@ DDH.calculator = DDH.calculator || {};
e.preventDefault(); e.preventDefault();
}); });
$calcInputTrap.keydown(function(e){ $calc.keydown(function(e){
// Handle Backspace // Handle Backspace
if(e.keyCode === 8) { if(e.keyCode === 8) {
calculator("C_OPT"); calculator("C_OPT");

4
share/goodie/calculator/content.handlebars
View File

@ -1,7 +1,7 @@
<div class="calculator--wrap tile--calculator"> <div class="calculator--wrap tile--calculator" tabindex="0">
<div class="tile__calc clearfix"> <div class="tile__calc clearfix">
<button class="tile__skip-calc">Skip calculator</button> <button class="tile__skip-calc">Skip calculator</button>
<div class="tile__display" tabindex="0"> <div class="tile__display">
<div class="tile__display__aside--wrap"> <div class="tile__display__aside--wrap">
<span class="tile__display__aside" id="expression"></span> <span class="tile__display__aside" id="expression"></span>
</div> </div>