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

@@ -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.
 

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 }

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 }

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 }

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 }

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 }

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\');' +
+                    var onClickStr = 'var x = document.getElementById(\'impress-console-button\');' +
-                                     'x.parentNode.removeChild(x);impressConsole().open();';
+                                     '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();
         } );
 
         /**
@@ -2519,7 +2520,8 @@
 
     // This initializes impressConsole automatically when initializing impress itself
     document.addEventListener( 'impress:init', function( event ) {
-        // impressConsole wants the id string, not the DOM element directly
+
+        // Note: impressConsole wants the id string, not the DOM element directly
         impressConsole( event.target.id )._init();
 
         // Add 'P' to the help popup
@@ -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" ) &&

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;

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\');' +
+                    var onClickStr = 'var x = document.getElementById(\'impress-console-button\');' +
-                                     'x.parentNode.removeChild(x);impressConsole().open();';
+                                     '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();
         } );
 
         /**

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" ) &&