From e92e02ccb4aa8552efb892eda41974e28f6f9417 Mon Sep 17 00:00:00 2001
From: Henrik Ingo <henrik.ingo@mongodb.com>
Date: Mon, 1 Jan 2018 15:05:55 +0200
Subject: [PATCH] Make impress-console-button actually clickable (#651)

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
---
 css/impress-demo.css                          |  1 +
 examples/2D-navigation/css/presentation.css   |  1 +
 examples/3D-rotations/css/3D-rotations.css    |  1 +
 .../classic-slides/css/classic-slides.css     |  1 +
 examples/cube/css/cube.css                    |  1 +
 examples/markdown/css/markdown-slides.css     |  1 +
 js/impress.js                                 | 32 +++++++++++++++----
 src/plugins/README.md                         |  6 +++-
 src/plugins/impressConsole/impressConsole.js  |  9 +++---
 src/plugins/navigation/navigation.js          | 16 ++++++++++
 10 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/css/impress-demo.css b/css/impress-demo.css
index e478573..b92c76c 100644
--- a/css/impress-demo.css
+++ b/css/impress-demo.css
@@ -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.
 
diff --git a/examples/2D-navigation/css/presentation.css b/examples/2D-navigation/css/presentation.css
index 8a03a7e..036addc 100644
--- a/examples/2D-navigation/css/presentation.css
+++ b/examples/2D-navigation/css/presentation.css
@@ -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 }
diff --git a/examples/3D-rotations/css/3D-rotations.css b/examples/3D-rotations/css/3D-rotations.css
index c8fadb8..9c12fd2 100644
--- a/examples/3D-rotations/css/3D-rotations.css
+++ b/examples/3D-rotations/css/3D-rotations.css
@@ -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 }
diff --git a/examples/classic-slides/css/classic-slides.css b/examples/classic-slides/css/classic-slides.css
index b491cf0..cbd821c 100644
--- a/examples/classic-slides/css/classic-slides.css
+++ b/examples/classic-slides/css/classic-slides.css
@@ -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 }
diff --git a/examples/cube/css/cube.css b/examples/cube/css/cube.css
index 931113e..4ea33c9 100644
--- a/examples/cube/css/cube.css
+++ b/examples/cube/css/cube.css
@@ -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 }
diff --git a/examples/markdown/css/markdown-slides.css b/examples/markdown/css/markdown-slides.css
index ed1e23a..db79088 100644
--- a/examples/markdown/css/markdown-slides.css
+++ b/examples/markdown/css/markdown-slides.css
@@ -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 }
diff --git a/js/impress.js b/js/impress.js
index 338b2f7..1ea0aa7 100644
--- a/js/impress.js
+++ b/js/impress.js
@@ -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" ) &&
diff --git a/src/plugins/README.md b/src/plugins/README.md
index cdb65db..2b9fd56 100644
--- a/src/plugins/README.md
+++ b/src/plugins/README.md
@@ -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;
diff --git a/src/plugins/impressConsole/impressConsole.js b/src/plugins/impressConsole/impressConsole.js
index 104dbb6..6dc37e1 100644
--- a/src/plugins/impressConsole/impressConsole.js
+++ b/src/plugins/impressConsole/impressConsole.js
@@ -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();
         } );
 
         /**
diff --git a/src/plugins/navigation/navigation.js b/src/plugins/navigation/navigation.js
index 60f75ad..818108d 100644
--- a/src/plugins/navigation/navigation.js
+++ b/src/plugins/navigation/navigation.js
@@ -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" ) &&