janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set stopPropagation() event handlers for text input fields

Browse Source 
Fixes #525 #140
This commit is contained in:
Henrik Ingo
2018-01-06 18:28:34 +02:00
parent 8b14eda98f
commit 4b5fe0fbf8
5 changed files with 74 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
js/impress.js
View File

@@ -1497,22 +1497,18 @@
var gc = api.lib.gc;
gc.addEventListener( document, "keydown", function( event ) {
if ( event.ctrlKey && event.keyCode === 66 ) {
if ( event.keyCode === 66 ) {
event.preventDefault();
if ( !blackedOut ) {
blackout();
} else {
// Note: This doesn't work on Firefox. It will set display:block,
// but slides only become visible again upon next transition, which
// forces some kind of redraw. Works as intended on Chrome.
removeBlackout();
}
}
}, false );
gc.addEventListener( document, "keyup", function( event ) {
if ( event.ctrlKey && event.keyCode === 66 ) {
if ( event.keyCode === 66 ) {
event.preventDefault();
}
}, false );
@@ -1601,7 +1597,12 @@
*
* Functionality to better support use of input, textarea, button... elements in a presentation.
*
* Currently this does only one single thing: On impress:stepleave, de-focus any potentially active
* This plugin does two things:
*
* Set stopPropagagation on any element that might take text input. This allows users to type, for
* example, the letter 'P' into a form field, without causing the presenter console to spring up.
*
* On impress:stepleave, de-focus any potentially active
* element. This is to prevent the focus from being left in a form element that is no longer visible
* in the window, and user therefore typing garbage into the form.
*
@@ -1617,6 +1618,32 @@
/* global document */
( function( document ) {
"use strict";
var root;
var api;
document.addEventListener( "impress:init", function(event) {
root = event.target;
api = event.detail.api;
var gc = api.lib.gc;
var selectors = ["input[type=text]", "textarea", "select", "[contenteditable=true]"];
for ( var selector of selectors ) {
var elements = document.querySelectorAll(selector);
if ( ! elements ) {
continue;
}
for ( var i = 0; i < elements.length; i++) {
var e = elements[i];
gc.addEventListener( e, "keydown", function( event ) {
event.stopPropagation();
} );
gc.addEventListener( e, "keyup", function( event ) {
event.stopPropagation();
} );
}
}
}, false );
document.addEventListener( "impress:stepleave", function() {
document.activeElement.blur();
@@ -1864,13 +1891,10 @@
document.addEventListener( "keyup", function( event ) {
// Check that event target is html or body element.
if ( event.target.nodeName === "BODY" || event.target.nodeName === "HTML" ) {
if ( event.keyCode === 72 ) { // "h"
event.preventDefault();
toggleHelp();
}
}
}, false );
// API
@@ -2907,13 +2931,6 @@
return false;
}
// For arrows, etc, check that event target is html or body element. This is to allow
// presentations to have, for example, forms with input elements where user can type
// text, including space, and not move to next step.
if ( event.target.nodeName !== "BODY" && event.target.nodeName !== "HTML" ) {
return false;
}
if ( ( event.keyCode >= 32 && event.keyCode <= 34 ) ||
( event.keyCode >= 37 && event.keyCode <= 40 ) ) {
return true;

8
src/plugins/blackout/blackout.js
View File

@@ -84,22 +84,18 @@
var gc = api.lib.gc;
gc.addEventListener( document, "keydown", function( event ) {
if ( event.ctrlKey && event.keyCode === 66 ) {
if ( event.keyCode === 66 ) {
event.preventDefault();
if ( !blackedOut ) {
blackout();
} else {
// Note: This doesn't work on Firefox. It will set display:block,
// but slides only become visible again upon next transition, which
// forces some kind of redraw. Works as intended on Chrome.
removeBlackout();
}
}
}, false );
gc.addEventListener( document, "keyup", function( event ) {
if ( event.ctrlKey && event.keyCode === 66 ) {
if ( event.keyCode === 66 ) {
event.preventDefault();
}
}, false );

33
src/plugins/form/form.js
View File

@@ -3,7 +3,12 @@
*
* Functionality to better support use of input, textarea, button... elements in a presentation.
*
* Currently this does only one single thing: On impress:stepleave, de-focus any potentially active
* This plugin does two things:
*
* Set stopPropagagation on any element that might take text input. This allows users to type, for
* example, the letter 'P' into a form field, without causing the presenter console to spring up.
*
* On impress:stepleave, de-focus any potentially active
* element. This is to prevent the focus from being left in a form element that is no longer visible
* in the window, and user therefore typing garbage into the form.
*
@@ -19,6 +24,32 @@
/* global document */
( function( document ) {
"use strict";
var root;
var api;
document.addEventListener( "impress:init", function( event ) {
root = event.target;
api = event.detail.api;
var gc = api.lib.gc;
var selectors = [ "input[type=text]", "textarea", "select", "[contenteditable=true]" ];
for ( var selector of selectors ) {
var elements = document.querySelectorAll( selector );
if ( !elements ) {
continue;
}
for ( var i = 0; i < elements.length; i++ ) {
var e = elements[ i ];
gc.addEventListener( e, "keydown", function( event ) {
event.stopPropagation();
} );
gc.addEventListener( e, "keyup", function( event ) {
event.stopPropagation();
} );
}
}
}, false );
document.addEventListener( "impress:stepleave", function() {
document.activeElement.blur();

3
src/plugins/help/help.js
View File

@@ -58,13 +58,10 @@
document.addEventListener( "keyup", function( event ) {
// Check that event target is html or body element.
if ( event.target.nodeName === "BODY" || event.target.nodeName === "HTML" ) {
if ( event.keyCode === 72 ) { // "h"
event.preventDefault();
toggleHelp();
}
}
}, false );
// API

7
src/plugins/navigation/navigation.js
View File

@@ -67,13 +67,6 @@
return false;
}
// For arrows, etc, check that event target is html or body element. This is to allow
// presentations to have, for example, forms with input elements where user can type
// text, including space, and not move to next step.
if ( event.target.nodeName !== "BODY" && event.target.nodeName !== "HTML" ) {
return false;
}
if ( ( event.keyCode >= 32 && event.keyCode <= 34 ) ||
( event.keyCode >= 37 && event.keyCode <= 40 ) ) {
return true;