Updates to Henrik's engine & scrollbar in whiteboard

- For details, see merge rquest !191

resource/support/js/engine.js

@@ -2,7 +2,7 @@ export { contactEngine };
 
 // TODO Make into a proper Reveal 4 plugin
 
-// Start with a 0.5 s retry interval. Back off exponentally.
+// Start with a 0.5 s retry interval. Back off exponentially.
 var timeout = 500;
 
 let engine = {
@@ -55,19 +55,6 @@ function prepareEngine() {
           buildInterface();
         });
       }
-
-      // Build the menu, once Reval and the menu are ready.
-      if (
-        Reveal.isReady() &&
-        Reveal.hasPlugin("menu") &&
-        Reveal.getPlugin("menu").isInit()
-      ) {
-        buildMenu();
-      } else {
-        Reveal.addEventListener("menu-ready", _ => {
-          buildMenu();
-        });
-      }
     })
     .catch(e => {
       // Nothing goes without a token
@@ -237,12 +224,56 @@ function buildInterface() {
   };
 
   let renderSubmit = () => {
-    updateComments();
+    updateCommentsAndMenu();
     text.value = "";
     text.commentId = null;
     text.answered = null;
   };
 
+  // given the list of questions, update question counter of menu items
+  let updateMenuItems = (list) => {
+    document.querySelectorAll('ul.slide-menu-items > li.slide-menu-item').forEach( (li) => {
+      li.removeAttribute('data-questions');
+    });
+
+    for (let comment of list) {
+      // get slide info
+      const slideID = comment.slide;
+      const slide = document.getElementById(slideID);
+      if (slide) {
+        const indices = Reveal.getIndices(slide);
+
+        // build query string, get menu item
+        let query = 'ul.slide-menu-items > li.slide-menu-item';
+        if (indices.h) query += '[data-slide-h=\"' + indices.h + '\"]';
+        if (indices.v) query += '[data-slide-v=\"' + indices.v + '\"]';
+        let li = document.querySelector(query);
+
+        // update question counter
+        if (li) {
+          li.setAttribute('data-questions', li.hasAttribute('data-questions') ? parseInt(li.getAttribute('data-questions')) + 1 : 1);
+        }
+      }
+      else {
+        // slide not found. should not happen. user probably used wrong (duplicate) deckID.
+        console.warn("Could not find slide " + slideID);
+      }
+    }
+  };
+
+  // query list of questions, then update menu items
+  let updateMenu = () => {
+    engine.api
+      .getComments(engine.deckId)
+      .then(updateMenuItems)
+      .catch(console.log);
+  };
+
+  let updateCommentsAndMenu = () => {
+    updateComments();
+    updateMenu();
+  };
+
   let canDelete = comment => {
     return engine.token.admin !== null || comment.author === user.value;
   };
@@ -308,7 +339,7 @@ function buildInterface() {
         del.addEventListener("click", _ => {
           engine.api
             .deleteComment(comment.id, engine.token.admin || user.value)
-            .then(updateComments);
+            .then(updateCommentsAndMenu);
         });
         // Edit button
         let mod = document.createElement("button");
@@ -434,42 +465,8 @@ function buildInterface() {
     }
   });
 
-  Reveal.addEventListener("slidechanged", _ => {
-    updateComments();
-  });
+  Reveal.addEventListener("slidechanged", updateCommentsAndMenu);
 
   initUser();
-  updateComments();
-}
-
-function buildMenu() {
-  let updateMenu = list => {
-    for (let comment of list) {
-      // get slide info
-      const slideID = comment.slide;
-      const slide = document.getElementById(slideID);
-      const indices = Reveal.getIndices(slide);
-
-      // build query string, get menu item
-      let query = "ul.slide-menu-items > li.slide-menu-item";
-      if (indices.h) query += '[data-slide-h="' + indices.h + '"]';
-      if (indices.v) query += '[data-slide-v="' + indices.v + '"]';
-      let li = document.querySelector(query);
-
-      // update question counter
-      if (li) {
-        li.setAttribute(
-          "data-questions",
-          li.hasAttribute("data-questions")
-            ? parseInt(li.getAttribute("data-questions")) + 1
-            : 1
-        );
-      }
-    }
-  };
-
-  engine.api
-    .getComments(engine.deckId)
-    .then(updateMenu)
-    .catch(console.log);
+  updateCommentsAndMenu();
 }

resource/support/plugins/print/print.js

@@ -50,7 +50,7 @@ var RevealPrint = (function(){
 
         if (slideHeight > configHeight)
         {
-            console.error("slide " + slideNumber() + " is " + (slideHeight-configHeight) + "px too high");
+            console.warn("slide " + slideNumber() + " is " + (slideHeight-configHeight) + "px too high");
             slide.style.border = "1px dashed red";
         }
         else

resource/support/plugins/quiz/quiz.js

@@ -417,7 +417,7 @@ var RevealQuiz = (function(){
                 break;
 
             default:
-                console.log("should not happen");
+                console.error("this should not happen");
                 hideChart();
                 hideVotes();
                 ballotState = "not_init";

resource/support/plugins/whiteboard/whiteboard.css

@@ -72,6 +72,12 @@
 }
 
 
+/* animate scroll down */
+.reveal .slides.animateScroll {
+    scroll-behavior: smooth;
+}
+
+
 /* style for SVG whiteboard pages */
 .reveal svg.whiteboard {
     border:     none;
@@ -129,23 +135,23 @@
     display:        flex;
     flex-direction: column-reverse;
 }
-#whiteboardButtons.active {
+#whiteboardButtons.whiteboardActive {
     border:         1px solid #eeeeee;
     background:     var(--whiteboard-background-color);
 }
 
 
-/* toggle whiteboard buttons with .active on container */
+/* toggle whiteboard buttons with .whiteboardActive on container */
 #whiteboardButtons>button {
     display: none;
 }
-#whiteboardButtons.active>button {
+#whiteboardButtons.whiteboardActive>button {
     display: inline-block;
 }
 
 /* button tooltips, specified by data-tooltip
  * use :after, since :before is used by fontawesome */
-#whiteboardButtons.active>button[data-tooltip]::after {
+#whiteboardButtons.whiteboardActive>button[data-tooltip]::after {
     content:       attr(data-tooltip);
     padding:       0.5em;
     border-radius: 0.25em;
@@ -163,12 +169,12 @@
     pointer-events: none;
 }
 /* activate tooltip after 1s delay */
-#whiteboardButtons.active>button[data-tooltip]:hover::after {
+#whiteboardButtons.whiteboardActive>button[data-tooltip]:hover::after {
     opacity: 1;
     transition: opacity 0s linear 1s;
 }
 
-/* toggle main whiteboard button with .active on container */
+/* toggle main whiteboard button with .whiteboardActive on container */
 #whiteboardButtons>#whiteboardButton {
     display: inline-block;
     opacity: 0.5;
@@ -178,7 +184,7 @@
     color:   var(--whiteboard-active-color) !important;
     opacity: 1.0;
 }
-#whiteboardButtons.active>#whiteboardButton {
+#whiteboardButtons.whiteboardActive>#whiteboardButton {
     display: inline-block;
     color:   var(--whiteboard-active-color);
     opacity: 1.0;
@@ -244,3 +250,25 @@
     border:        0;
 }
 
+
+/* MacOS only shows scrollbars when they are used.
+   This prevents dragging them with the Wacom pen (w/o using the mouse).
+   The following setting show the scrollbar when the whiteboard is active.
+   Only works on WebKit browswers (Chrome, Safari), not on Firefox. */
+.reveal .slides.whiteboardActive::-webkit-scrollbar {
+    width:9px;
+}
+.reveal .slides.whiteboardActive::-webkit-scrollbar-track {
+    -webkit-border-radius:5px;
+    border-radius:5px;
+    background:rgba(0,0,0,0.1);
+}
+.reveal .slides.whiteboardActive::-webkit-scrollbar-thumb {
+    -webkit-border-radius:5px;
+    border-radius:5px;
+    background:rgba(0,0,0,0.2);
+}
+.reveal .slides.whiteboardActive::-webkit-scrollbar-thumb:hover {
+    background:rgba(0,0,0,0.4);
+}
+

resource/support/plugins/whiteboard/whiteboard.js

@@ -495,8 +495,11 @@ let RevealWhiteboard = (function(){
         
         if (!whiteboardActive)
         {
+            // hide scrollbar
+            slides.classList.remove('whiteboardActive');
+
             // hide buttons
-            buttons.classList.remove('active');
+            buttons.classList.remove('whiteboardActive');
             buttonWhiteboard.style.color = inactiveColor;
             hideColorPicker();
 
@@ -514,8 +517,11 @@ let RevealWhiteboard = (function(){
         {
             if (userShouldBeWarned && !userHasBeenWarned) warnUser();
 
+            // show scrollbar
+            slides.classList.add('whiteboardActive');
+
             // show buttons
-            buttons.classList.add('active');
+            buttons.classList.add('whiteboardActive');
             buttonWhiteboard.style.color = activeColor;
 
             // activate SVG
@@ -544,6 +550,8 @@ let RevealWhiteboard = (function(){
         if (!svg) return;
         let boardHeight = svg.clientHeight;
         setWhiteboardHeight(boardHeight + pageHeight);
+        slides.classList.add('animateScroll');
+        slides.scrollTop = boardHeight;
     }
 
 
@@ -825,7 +833,7 @@ let RevealWhiteboard = (function(){
             reader.readAsText(filename);
         }
         else {
-            console.log("Your browser does not support the File API");
+            console.error("Your browser does not support the File API");
         }
     }
 
@@ -949,21 +957,20 @@ let RevealWhiteboard = (function(){
         if (window.saveAnnotation) {
             if (window.saveAnnotation(annotationData(), annotationURL()))
             {
-                console.log("whiteboard: save success");
+                console.log("whiteboard annotations saved to local file");
                 needToSave(false);
                 return;
             }
         }
 
-        console.log("whiteboard: save annotations to decker");
         let xhr = new XMLHttpRequest();
         xhr.open('put', annotationURL(), true);
         xhr.onloadend = function() {
             if (xhr.status == 200) {
-                console.log("whiteboard: save success");
+                console.log("whiteboard annotations saved to deck directory");
                 needToSave(false);
             } else {
-                console.log("whiteboard: could not save to decker, download instead");
+                console.warn("whiteboard annotation could not be save to decker, trying to download the file instead.");
                 downloadAnnotations();
             }
         };
@@ -982,9 +989,8 @@ let RevealWhiteboard = (function(){
         try {
             a.download = annotationFilename();
             a.href = window.URL.createObjectURL( annotationBlob() );
-
         } catch( error ) {
-            console.error("whiteboard download error: " + error);
+            console.error("whiteboard annotations could not be downloaded: " + error);
         }
         a.click();
         document.body.removeChild(a);
@@ -1321,7 +1327,7 @@ let RevealWhiteboard = (function(){
     }
     else
     {
-        console.err("whiteboard requires PointerEvents");
+        console.error("whiteboard requires support for PointerEvents");
     }
 
 
@@ -1409,6 +1415,7 @@ let RevealWhiteboard = (function(){
             adjustWhiteboardHeight();
 
             // setup slides container
+            slides.classList.remove('animateScroll')
             slides.scrollTop  = 0;
             if (svg.clientHeight > slides.clientHeight)
                 slides.classList.add('needScrollbar');