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

Make impress-console-button actually clickable (#651)

Browse Source 
Changed the onclick handler to trigger the impress:console:open event
and not use the impressConsole() global function any more. The latter
is considered deprecated now that impressConsole is integrated into
impress.js itself.

Also catch some errors that appear in event handlers when the target
for the click event was immediately removed from DOM.

Fixes #651
This commit is contained in:
Henrik Ingo
2018-01-01 15:05:55 +02:00
parent b86214c6e9
commit e92e02ccb4
10 changed files with 57 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
css/impress-demo.css
View File

@@ -715,6 +715,7 @@ body.impress-mouse-timeout {
.impress-enabled { pointer-events: none }
.impress-enabled #impress { pointer-events: auto }
.impress-enabled #impress-toolbar { pointer-events: auto }
.impress-enabled #impress-console-button { pointer-events: auto }
/*
There is one funny thing I just realized.

1
examples/2D-navigation/css/presentation.css
View File

@@ -338,3 +338,4 @@ body.impress-mouse-timeout {
.impress-enabled { pointer-events: none }
.impress-enabled #impress { pointer-events: auto }
.impress-enabled #impress-toolbar { pointer-events: auto }
.impress-enabled #impress-console-button { pointer-events: auto }

1
examples/3D-rotations/css/3D-rotations.css
View File

@@ -277,3 +277,4 @@ body.impress-mouse-timeout {
.impress-enabled { pointer-events: none }
.impress-enabled #impress { pointer-events: auto }
.impress-enabled #impress-toolbar { pointer-events: auto }
.impress-enabled #impress-console-button { pointer-events: auto }

1
examples/classic-slides/css/classic-slides.css
View File

@@ -462,3 +462,4 @@ body.impress-mouse-timeout {
.impress-enabled { pointer-events: none }
.impress-enabled #impress { pointer-events: auto }
.impress-enabled #impress-toolbar { pointer-events: auto }
.impress-enabled #impress-console-button { pointer-events: auto }

1
examples/cube/css/cube.css
View File

@@ -254,3 +254,4 @@ body.impress-mouse-timeout {
.impress-enabled { pointer-events: none }
.impress-enabled #impress { pointer-events: auto }
.impress-enabled #impress-toolbar { pointer-events: auto }
.impress-enabled #impress-console-button { pointer-events: auto }

1
examples/markdown/css/markdown-slides.css
View File

@@ -231,3 +231,4 @@ body.impress-mouse-timeout {
.impress-enabled { pointer-events: none }
.impress-enabled #impress { pointer-events: auto }
.impress-enabled #impress-toolbar { pointer-events: auto }
.impress-enabled #impress-console-button { pointer-events: auto }

32
js/impress.js
View File

@@ -2309,15 +2309,16 @@
// ... so I add a button to klick.
// workaround on firefox
var message = document.createElement( 'div' );
message.id = 'consoleWindowError';
message.id = 'impress-console-button';
message.style.position = 'fixed';
message.style.left = 0;
message.style.top = 0;
message.style.right = 0;
message.style.bottom = 0;
message.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
var onClickStr = 'var x = document.getElementById(\'consoleWindowError\');' +
'x.parentNode.removeChild(x);impressConsole().open();';
var onClickStr = 'var x = document.getElementById(\'impress-console-button\');' +
'x.parentNode.removeChild(x);var root = document.getElementById(\'' + rootId + '\');' +
'impress(\'' + rootId + '\').lib.util.triggerEvent(root, \'impress:console:open\', {})';
message.innerHTML = '<button style="margin: 25vh 25vw;width:50vw;height:50vh;" ' +
'onclick="' + onClickStr + '">' +
lang.clickToOpen +
@@ -2496,7 +2497,7 @@
// New API for impress.js plugins is based on using events
root.addEventListener( 'impress:console:open', function() {
window.open();
open();
} );
/**
@@ -2518,9 +2519,10 @@
};
// This initializes impressConsole automatically when initializing impress itself
document.addEventListener( 'impress:init', function(event) {
// impressConsole wants the id string, not the DOM element directly
impressConsole(event.target.id)._init();
document.addEventListener( 'impress:init', function( event ) {
// Note: impressConsole wants the id string, not the DOM element directly
impressConsole( event.target.id )._init();
// Add 'P' to the help popup
triggerEvent( document, 'impress:help:add',
@@ -2959,6 +2961,16 @@
// Event delegation with "bubbling"
// check if event target (or any of its parents is a link)
var target = event.target;
try {
// For example, when clicking on the button to launch speaker console, the button
// is immediately deleted from the DOM. In this case target is a DOM element when
// we get it, but turns out to be null if you try to actually do anything with it.
foo = target.id;
}
catch(err) {
return;
}
while ( ( target.tagName !== "A" ) &&
( target !== document.documentElement ) ) {
target = target.parentNode;
@@ -2982,6 +2994,12 @@
// Delegated handler for clicking on step elements
gc.addEventListener( document, "click", function( event ) {
var target = event.target;
try {
foo = target.id;
}
catch(err) {
return;
}
// Find closest step element that is not active
while ( !( target.classList.contains( "step" ) &&

6
src/plugins/README.md
View File

@@ -115,8 +115,12 @@ plugins that you may want to use or adapt.
.impress-enabled div#impress-toolbar.impress-toolbar-hide {
display: none;
}
/* If you disable pointer-events (like in the impress.js official demo), you need to re-enable them for the toolbar. */
/* If you disable pointer-events (like in the impress.js official demo), you need to re-enable them for the toolbar.
And the speaker console while at it.*/
.impress-enabled #impress-toolbar { pointer-events: auto }
.impress-enabled #impress-console-button { pointer-events: auto }
/* Progress bar */
.impress-enabled .impress-progressbar {
position: absolute;

9
src/plugins/impressConsole/impressConsole.js
View File

@@ -380,15 +380,16 @@
// ... so I add a button to klick.
// workaround on firefox
var message = document.createElement( 'div' );
message.id = 'consoleWindowError';
message.id = 'impress-console-button';
message.style.position = 'fixed';
message.style.left = 0;
message.style.top = 0;
message.style.right = 0;
message.style.bottom = 0;
message.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
var onClickStr = 'var x = document.getElementById(\'consoleWindowError\');' +
'x.parentNode.removeChild(x);impressConsole().open();';
var onClickStr = 'var x = document.getElementById(\'impress-console-button\');' +
'x.parentNode.removeChild(x);var root = document.getElementById(\'' + rootId + '\');' +
'impress(\'' + rootId + '\').lib.util.triggerEvent(root, \'impress:console:open\', {})';
message.innerHTML = '<button style="margin: 25vh 25vw;width:50vw;height:50vh;" ' +
'onclick="' + onClickStr + '">' +
lang.clickToOpen +
@@ -567,7 +568,7 @@
// New API for impress.js plugins is based on using events
root.addEventListener( 'impress:console:open', function() {
window.open();
open();
} );
/**

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

@@ -124,6 +124,16 @@
// Event delegation with "bubbling"
// check if event target (or any of its parents is a link)
var target = event.target;
try {
// For example, when clicking on the button to launch speaker console, the button
// is immediately deleted from the DOM. In this case target is a DOM element when
// we get it, but turns out to be null if you try to actually do anything with it.
foo = target.id;
}
catch(err) {
return;
}
while ( ( target.tagName !== "A" ) &&
( target !== document.documentElement ) ) {
target = target.parentNode;
@@ -147,6 +157,12 @@
// Delegated handler for clicking on step elements
gc.addEventListener( document, "click", function( event ) {
var target = event.target;
try {
foo = target.id;
}
catch(err) {
return;
}
// Find closest step element that is not active
while ( !( target.classList.contains( "step" ) &&