Skip to content

Commit

Permalink
Fix key handling in Firefox.
Browse files Browse the repository at this point in the history
  • Loading branch information
@maksverver
maksverver committed Jul 16, 2016
1 parent 6554940 commit 7997d86
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 29 deletions.
65 changes: 37 additions & 28 deletions activate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@
var position = -1; // index in words
var speed = 0; // in words per minute (WPM)
var intervalId = null; // currently scheduled interval timer
var key_map = buildKeyMap();

if (words.length === 0) {
alert("No text selected!");
Expand All @@ -90,6 +89,30 @@
var timeRemainingDiv = newDiv(timeRemainingStyle, wordBoxDiv);
setText(wordCountDiv, words.length + ' words');

// Build the key map.
// Key codes are handled by onKeyDown.
var key_code_map = {
// Escape
27: stop,
// Left arrow
37: previousSentence,
// Right arrow
39: nextSentence};
// Char codes are handled by onKeyPress.
var char_code_map = {
// Space
32: togglePausePlay,
// Plus sign
43: increaseSpeed,
// Minus sign
45: decreaseSpeed,
// Period
46: manualStep,
};
for (var digit = 0; digit < 10; ++digit) {
// Digits: change speed. 1=100 WPM, 2=200 WPM, .. 9=900 WPM, 0=1000 WPM.
char_code_map[48 + digit] = setSpeed.bind(null, digit > 0 ? 100*digit : 1000);
}
// Start reading!
setSpeed(wordsPerMinute);
start();
Expand Down Expand Up @@ -130,45 +153,31 @@
wordBoxDiv.addEventListener('click', togglePausePlay);
document.body.appendChild(containerDiv);
document.addEventListener("keydown", onKeyDown);
document.addEventListener("keypress", onKeyPress);
play();
}

function stop() {
pause();
document.removeEventListener("keypress", onKeyPress);
document.removeEventListener("keydown", onKeyDown);
document.body.removeChild(containerDiv);
}

function buildKeyMap() {
var key_map = {
// Escape
27: stop,
// Space
32: togglePausePlay,
// Left arrow
37: previousSentence,
// Right arrow
39: nextSentence,
// Period
190: manualStep,
// Plus sign
187: increaseSpeed,
// Minus sign
189: decreaseSpeed,
};
for (var digit = 0; digit < 10; ++digit) {
// Digits: change speed. 1=100 WPM, 2=200 WPM, .. 9=900 WPM, 0=1000 WPM.
key_map[48 + digit] = setSpeed.bind(null, digit > 0 ? 100*digit : 1000);
}
return key_map;
function handleKeyEvent(event, map, key) {
var handler = map[key];
if (!handler) return;
event.stopPropagation();
event.preventDefault();
handler();
}

function onKeyDown(keyEvent) {
var handler = key_map[keyEvent.keyCode];
if (!handler) return;
keyEvent.stopPropagation();
keyEvent.preventDefault();
handler();
return handleKeyEvent(keyEvent, key_code_map, keyEvent.keyCode);
}

function onKeyPress(keyEvent) {
return handleKeyEvent(keyEvent, char_code_map, keyEvent.charCode);
}

function formatTime(secs) {
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h1>Read!</h1>
<h4>A speed reading <a href="https://en.wikipedia.org/wiki/Bookmarklet">bookmarklet</a> using rapid serial visual presentation</h4>

<ul>
<li>To install, drag this link to your bookmarks toolbar: <a href="javascript:(function(){function b(a,f){var c=document.createElement(&quot;div&quot;);if(a)for(var d in a)c.style[d]=a[d];f&amp;&amp;f.appendChild(c);return c}function l(a,f){for(;a.lastChild;)a.removeChild(a.lastChild);a.appendChild(document.createTextNode(f))}function v(){k();document.removeEventListener(&quot;keydown&quot;,w);document.body.removeChild(m)}function w(a){var f=A[a.keyCode];f&amp;&amp;(a.stopPropagation(),a.preventDefault(),f())}function p(a){if(0&lt;=a&amp;&amp;a&lt;c.length){l(B,c[a]);C.style.width=(0==a?0:100*a/(c.length-1))+&quot;%25&quot;;var f=D,b=60*(c.length-a-1)/d+.5,e=parseInt(b/60),b=parseInt(b%2560);l(f,e+&quot;:&quot;+(10>b?&quot;0&quot;+b:b)+&quot; remaining&quot;)}h=a}function x(){h+1&lt;c.length?p(h+1):k()}function n(a){d=a;l(E,d+&quot; WPM&quot;);null!==e&amp;&amp;(k(),q())}function q(){null===e&amp;&amp;(e=setInterval(x,6E4/d))}function k(){null!==e&amp;&amp;(clearInterval(e),e=null)}function y(){null===e?q():k()}function F(){null===e?x():k()}function G(){if(0&lt;h){for(var a=h-1;0&lt;a&amp;&amp;!c[a-1].match(z);)--a;p(a)}}function H(){if(h+1&lt;c.length){for(var a=h+1;a+1&lt;c.length&amp;&amp;!c[a-1].match(z);)++a;p(a)}}function I(){if(4E3>d){for(var a=25;20*a&lt;=d;)a*=2;n(d+a)}}function J(){if(25&lt;d){for(var a=25;20*a&lt;d;)a*=2;n(d-a)}}var z=/[.?!]['&quot;\u2019\u201d)]?$/,K=/\s+|\u2014/,r={position:&quot;fixed&quot;,left:0,right:0,top:0,bottom:0,zIndex:1E3},L={background:&quot;black&quot;,opacity:.5,position:&quot;absolute&quot;,left:0,right:0,top:0,bottom:0,zIndex:-1},g={background:&quot;white&quot;,display:&quot;table&quot;,width:&quot;70%25&quot;,height:&quot;70%25&quot;,position:&quot;absolute&quot;,left:&quot;15%25&quot;,right:&quot;15%25&quot;,top:&quot;15%25&quot;,bottom:&quot;15%25&quot;},t={font:&quot;64pt sans-serif&quot;,color:&quot;#444&quot;,display:&quot;table-cell&quot;,textAlign:&quot;center&quot;,verticalAlign:&quot;middle&quot;},M={position:&quot;absolute&quot;,left:&quot;0px&quot;,right:&quot;0px&quot;,bottom:&quot;0px&quot;,background:&quot;#eef&quot;,height:&quot;8pt&quot;},u={position:&quot;absolute&quot;,left:&quot;0px&quot;,top:&quot;0px&quot;,bottom:&quot;0px&quot;,background:&quot;#44f&quot;,width:&quot;0%25&quot;},N={position:&quot;absolute&quot;,top:&quot;1em&quot;,right:&quot;1em&quot;,font:&quot;12pt sans-serif&quot;,color:&quot;#888&quot;},O={position:&quot;absolute&quot;,bottom:&quot;12pt&quot;,left:&quot;1em&quot;,font:&quot;12pt sans-serif&quot;,color:&quot;#888&quot;},P={position:&quot;absolute&quot;,bottom:&quot;12pt&quot;,right:&quot;1em&quot;,font:&quot;12pt sans-serif&quot;,color:&quot;#888&quot;},c=function(a){return a.split(K).filter(function(a){return!!a})}(getSelection().toString()),h=-1,d=0,e=null,A=function(){for(var a={27:v,32:y,37:G,39:H,190:F,187:I,189:J},b=0;10>b;++b)a[48+b]=n.bind(null,0&lt;b?100*b:1E3);return a}();if(0===c.length)alert(&quot;No text selected!&quot;);else{var m=b(r),r=b(L,m),g=b(g,m),B=b(t,g),t=b(M,g),C=b(u,t),E=b(N,g),u=b(O,g),D=b(P,g);l(u,c.length+&quot; words&quot;);n(500);r.addEventListener(&quot;click&quot;,v);g.addEventListener(&quot;click&quot;,y);document.body.appendChild(m);document.addEventListener(&quot;keydown&quot;,w);q()}})();">Read!</a>
<li>To install, drag this link to your bookmarks toolbar: <a href="javascript:(function(){function e(a,b){var c=document.createElement(&quot;div&quot;);if(a)for(var d in a)c.style[d]=a[d];b&amp;&amp;b.appendChild(c);return c}function m(a,b){for(;a.lastChild;)a.removeChild(a.lastChild);a.appendChild(document.createTextNode(b))}function w(){l();document.removeEventListener(&quot;keypress&quot;,x);document.removeEventListener(&quot;keydown&quot;,y);document.body.removeChild(n)}function y(a){var b=D[a.keyCode];b&amp;&amp;(a.stopPropagation(),a.preventDefault(),b())}function x(a){var b=z[a.charCode];b&amp;&amp;(a.stopPropagation(),a.preventDefault(),b())}function q(a){if(0&lt;=a&amp;&amp;a&lt;c.length){m(E,c[a]);F.style.width=(0==a?0:100*a/(c.length-1))+&quot;%25&quot;;var b=60*(c.length-a-1)/d+.5,e=parseInt(b/60),b=parseInt(b%2560);m(G,e+&quot;:&quot;+(10>b?&quot;0&quot;+b:b)+&quot; remaining&quot;)}h=a}function A(){h+1&lt;c.length?q(h+1):l()}function p(a){d=a;m(H,d+&quot; WPM&quot;);null!==f&amp;&amp;(l(),r())}function r(){null===f&amp;&amp;(f=setInterval(A,6E4/d))}function l(){null!==f&amp;&amp;(clearInterval(f),f=null)}function B(){null===f?r():l()}function I(){null===f?A():l()}function J(){if(0&lt;h){for(var a=h-1;0&lt;a&amp;&amp;!c[a-1].match(C);)--a;q(a)}}function K(){if(h+1&lt;c.length){for(var a=h+1;a+1&lt;c.length&amp;&amp;!c[a-1].match(C);)++a;q(a)}}function L(){if(4E3>d){for(var a=25;20*a&lt;=d;)a*=2;p(d+a)}}function M(){if(25&lt;d){for(var a=25;20*a&lt;d;)a*=2;p(d-a)}}var C=/[.?!]['&quot;\u2019\u201d)]?$/,N=/\s+|\u2014/,t={position:&quot;fixed&quot;,left:0,right:0,top:0,bottom:0,zIndex:1E3},O={background:&quot;black&quot;,opacity:.5,position:&quot;absolute&quot;,left:0,right:0,top:0,bottom:0,zIndex:-1},g={background:&quot;white&quot;,display:&quot;table&quot;,width:&quot;70%25&quot;,height:&quot;70%25&quot;,position:&quot;absolute&quot;,left:&quot;15%25&quot;,right:&quot;15%25&quot;,top:&quot;15%25&quot;,bottom:&quot;15%25&quot;},u={font:&quot;64pt sans-serif&quot;,color:&quot;#444&quot;,display:&quot;table-cell&quot;,textAlign:&quot;center&quot;,verticalAlign:&quot;middle&quot;},P={position:&quot;absolute&quot;,left:&quot;0px&quot;,right:&quot;0px&quot;,bottom:&quot;0px&quot;,background:&quot;#eef&quot;,height:&quot;8pt&quot;},v={position:&quot;absolute&quot;,left:&quot;0px&quot;,top:&quot;0px&quot;,bottom:&quot;0px&quot;,background:&quot;#44f&quot;,width:&quot;0%25&quot;},Q={position:&quot;absolute&quot;,top:&quot;1em&quot;,right:&quot;1em&quot;,font:&quot;12pt sans-serif&quot;,color:&quot;#888&quot;},R={position:&quot;absolute&quot;,bottom:&quot;12pt&quot;,left:&quot;1em&quot;,font:&quot;12pt sans-serif&quot;,color:&quot;#888&quot;},k={position:&quot;absolute&quot;,bottom:&quot;12pt&quot;,right:&quot;1em&quot;,font:&quot;12pt sans-serif&quot;,color:&quot;#888&quot;},c=function(a){return a.split(N).filter(function(a){return!!a})}(getSelection().toString()),h=-1,d=0,f=null;if(0===c.length)alert(&quot;No text selected!&quot;);else{var n=e(t),t=e(O,n),g=e(g,n),E=e(u,g),u=e(P,g),F=e(v,u),H=e(Q,g),v=e(R,g),G=e(k,g);m(v,c.length+&quot; words&quot;);for(var D={27:w,37:J,39:K},z={32:B,43:L,45:M,46:I},k=0;10>k;++k)z[48+k]=p.bind(null,0&lt;k?100*k:1E3);p(500);t.addEventListener(&quot;click&quot;,w);g.addEventListener(&quot;click&quot;,B);document.body.appendChild(n);document.addEventListener(&quot;keydown&quot;,y);document.addEventListener(&quot;keypress&quot;,x);r()}})();">Read!</a>
<li>To use, select the text you want to read, then click the <em>Read!</em> link.</li>
</ul>

Expand Down

0 comments on commit 7997d86

Please sign in to comment.