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

Calculator: Fix text selection/copy for Firefox (#4351) 

* Ensure mouseup doesn't remove focus for Firefox

* Use hover and selected classes to style calc input

* Ignore meta keys to allow copying in Firefox
master
Zaahir Moolla 2017-07-14 04:44:29 -04:00 committed by PJ Hampton
parent 9c581d9564
commit db434a22d0
3 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -184,7 +184,7 @@ input:checked+.tile__ctrl__toggle-slider:before {
.zci--calculator .tile__calc .tile__ctrl__toggle:focus, .zci--calculator .tile__calc .tile__ctrl__toggle:focus,
.zci--calculator .tile__calc .tile__ctrl__btn:active, .zci--calculator .tile__calc .tile__ctrl__btn:active,
.zci--calculator .tile__calc .tile__ctrl__toggle:active { .zci--calculator .tile__calc .tile__ctrl__toggle:active {
outline: 0; outline: none;
} }
.no-touch .tile__calc .tile__ctrl__btn:hover, .no-touch .tile__calc .tile__ctrl__btn:hover,
@ -260,11 +260,18 @@ input:checked+.tile__ctrl__toggle-slider:before {
white-space: nowrap; white-space: nowrap;
} }
.zci--calculator .tile__calc .tile__input-trap:focus+.tile__display, .zci--calculator .tile__calc .tile__display:hover {
.zci--calculator .tile__calc .tile__display:focus { box-shadow: inset -1px -1px 0px #999, inset 1px 1px 0px #999;
}
.zci--calculator .tile__calc .tile__display.selected {
box-shadow: inset -1px -1px 0px #61a0c7, inset 1px 1px 0px #61a0c7; box-shadow: inset -1px -1px 0px #61a0c7, inset 1px 1px 0px #61a0c7;
} }
.zci--calculator .tile__calc .tile__display:focus {
outline: none;
}
.zci--calculator .tile__calc .tile__display__aside--wrap { .zci--calculator .tile__calc .tile__display__aside--wrap {
position: relative; position: relative;
overflow: hidden; overflow: hidden;

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

@ -903,7 +903,8 @@ DDH.calculator = DDH.calculator || {};
onShow: function() { onShow: function() {
var $calc = $(".zci--calculator"); var $calc = $(".zci--calculator");
var $calcInputTrap = $calc.find(".tile__input-trap"); var inputTrapClass = ".tile__display";
var $calcInputTrap = $calc.find(inputTrapClass);
function setFocus() { function setFocus() {
$calcInputTrap.focus(); $calcInputTrap.focus();
@ -949,12 +950,21 @@ DDH.calculator = DDH.calculator || {};
/** /**
* Sets focus when the calculator is clicked * Sets focus when the calculator is clicked
* *
* Sets the focus on the calculator when the Instant answer is first opened.
*/ */
$.each([$calc, $calcInputTrap], function(i,v) { $($calc).on('click mousedown', function(e) {
v.click(function(){ setFocus();
setFocus() });
})
$calcInputTrap
.focus(function() {
$calcInputTrap.addClass('selected');
})
.blur(function() {
$calcInputTrap.removeClass('selected');
});
$($calc, $calcInputTrap).mouseup(function (e) {
e.preventDefault();
}); });
/** /**
@ -990,6 +1000,10 @@ DDH.calculator = DDH.calculator || {};
*/ */
$calcInputTrap.keypress(function(e){ $calcInputTrap.keypress(function(e){
if (e.altKey || e.metaKey || e.ctrlKey) {
return;
}
var key = e.keyCode || e.charCode; var key = e.keyCode || e.charCode;
var evt = ""; var evt = "";

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

@ -1,12 +1,11 @@
<div class="calculator--wrap tile--calculator"> <div class="calculator--wrap tile--calculator">
<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>
<button class="tile__input-trap"></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>
<span class="tile__display__main" id="display" tabindex="0"></span> <span class="tile__display__main" id="display"></span>
<ul class="tile__options"> <ul class="tile__options">
<li class="tile__option tile__option__sci" data-tab="sci"><span>Scientific</span></li> <li class="tile__option tile__option__sci" data-tab="sci"><span>Scientific</span></li>