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

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

* Remove unneeded mousedown handler

* Clean trailing spaces

share/goodie/calculator/calculator.css

@@ -12,6 +12,7 @@
 
 .zci--calculator .tile--calculator {
     display: block !important;
+    outline: none;
 }
 
 
@@ -669,13 +670,13 @@ input:checked+.tile__ctrl__toggle-slider:before {
     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 {
     background: #111;
     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 {
     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 {
     background: #111;
 }
-

share/goodie/calculator/calculator.js

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

share/goodie/calculator/content.handlebars

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