j1-template 2022.3.1 → 2022.3.2

data/assets/themes/j1/adapter/js/nbinteract.js

@@ -106,6 +106,11 @@ j1.adapter.nbinteract = (function (j1, window) {
     className:  'spinner',                                                      // CSS class assined to the spinner
     position:   'fixed',                                                        // element positioning:  absolute|fixed
   };
+
+  var nbActions = {
+    "resetLocalStorage":        true
+  };
+
   var spinnerStarted = false;                                                   // switch to indicate a started spinner
   var nbiContentModalInfoID       = 'nbiModalInfoBody';                         // ID of the content (messages) for the INFO modal
   var nbiContentModalSuccessID    = 'nbiModalSuccessBody';                      // ID of the content (messages) for the SUCCESS modal
@@ -116,7 +121,8 @@ j1.adapter.nbinteract = (function (j1, window) {
   var nbiModalErrorID             = '#' + 'nbiModalTLDanger';                   // ID of the ERROR modal
   var nbinteract_prepared         = false;                                      // switch to indicate if ???
   var nbiModalSuccessMessagesID   = 'nbiModalSuccessMessages';                  // UL contalner SUCCESS messages
-  var nbiModalErrorMessagesID     = 'nbiModalErrorMessages';                    // UL contalner ERROR messahes
+  var nbiModalErrorMessagesID     = 'nbiModalErrorMessages';                    // UL contalner ERROR messages
+  var nbiCellsRendered = false;                                                  // flag indicates if all widgets in page are rendered
   var nbiShowMessages;                                                          // switch to show NBI messages
   var nbiIndicateNbiActivity;                                                   // switch to show a spinner while NBI is being initialized
   var nbiModalAutoClose;                                                        // switch to auto-close nbi message modals
@@ -133,6 +139,10 @@ j1.adapter.nbinteract = (function (j1, window) {
   var logger;
   var coreLogger;
   var logText;
+  var widgetCells;
+  var widgetCellsRendered;
+  var nbiNotebookReady;
+  var Events;
 
   // ---------------------------------------------------------------------------
   // Helper functions
@@ -148,6 +158,19 @@ j1.adapter.nbinteract = (function (j1, window) {
     // -------------------------------------------------------------------------
     init: function (options) {
 
+      // -----------------------------------------------------------------------
+      // global event handler
+      // -----------------------------------------------------------------------
+      Events = {
+        documentReady: function (onDocumentReady) {
+          if (document.readyState !== 'loading') {
+            onDocumentReady();
+          } else {
+            document.addEventListener('DOMContentLoaded', onDocumentReady);
+          }
+        }
+      };
+
       // -----------------------------------------------------------------------
       // Default module settings
       // -----------------------------------------------------------------------
@@ -169,6 +192,7 @@ j1.adapter.nbinteract = (function (j1, window) {
       nbiShowMessages         = moduleOptions.show_nbi_messages;
       nbiIndicateNbiActivity  = moduleOptions.indicate_nbi_activity;
       nbiInitMathJax          = moduleOptions.nbi_init_mathjax;
+      nbiNotebookReady        = moduleOptions.notebook_ready;
 
       // -----------------------------------------------------------------------
       // load|configure Mathjax
@@ -176,22 +200,25 @@ j1.adapter.nbinteract = (function (j1, window) {
       if (nbiInitMathJax) {
         _this.initMathJax();
       }
+      // -----------------------------------------------------------------------
+      // load|configure NBI dialog (modal)
+      // -----------------------------------------------------------------------
+      _this.loadDialog(moduleOptions);
 
       // -----------------------------------------------------------------------
-      // load HTML data for all modals used by nbInteract
+      // load all modals (HTML portion) used by NBI
       // -----------------------------------------------------------------------
       _this.loadNbiModals();
 
       // -----------------------------------------------------------------------
-      // load the HTML portion for all textbooks configured|enabled
+      // load all textbooks (HTML portion) configured|enabled
       // -----------------------------------------------------------------------
       _this.loadNbiTextbooks(moduleOptions);
 
-      // -------------------------------------------------------------------
+      // -----------------------------------------------------------------------
       // run a spinner to indicate activity of 'nbInteract' if enabled
-      // -------------------------------------------------------------------
+      // -----------------------------------------------------------------------
       $(document).ready(function() {
-
         if (nbiIndicateNbiActivity && !spinnerStarted) {
           spinnerStarted = true;
           target  = document.getElementById('content');
@@ -214,6 +241,19 @@ j1.adapter.nbinteract = (function (j1, window) {
       // -----------------------------------------------------------------------
       _this.interactNbiTextbooks(moduleOptions);
 
+      // toggle hide|show the FAB button, if to wait on 'last_widget' rendered
+      //
+      if (nbiNotebookReady == 'last_widget') {
+        var dependencies_met_page_rendered = setInterval(function() {
+          if (nbiCellsRendered) {
+            $('.fab-btn').show();
+            clearInterval(dependencies_met_page_rendered);
+          } else {
+            $('.fab-btn').hide();
+          }
+        }, 25);  // END interval dependencies_met_page_rendered
+      }
+
     }, // END init
 
     // -------------------------------------------------------------------------
@@ -564,7 +604,7 @@ j1.adapter.nbinteract = (function (j1, window) {
 
             // ------------------------------------------------------------------
             // see: https://www.codingexercises.com/replace-all-instances-of-css-class-in-vanilla-js
-            // see: https://wiki.selfhtml.org/wiki/JavaScript/Operatoren/Rest-_oder_Spread-Operator
+            // see: https://wiki.thishtml.org/wiki/JavaScript/Operatoren/Rest-_oder_Spread-Operator
             // ------------------------------------------------------------------
 
             // disable (Google) translation for all HTML 'output_wrapper' elements
@@ -1007,13 +1047,9 @@ j1.adapter.nbinteract = (function (j1, window) {
       // -----------------------------------------------------------------------
 
       // -----------------------------------------------------------------------
-      //  command|nbi_init_finished
-      //
-      if (message.type === 'command' && message.action === 'nbi_init_finished') {
-
-        _this.setState('finished');
-        logger.debug('\n' + 'state: ' + _this.getState());
-        logger.info('\n' + 'initializing module finished');
+      //  command|nbi_init_started
+      // -----------------------------------------------------------------------
+      if (message.type === 'command' && message.action === 'nbi_init_started') {
 
         if (nbiShowMessages) {
           if (nbiModalAutoClose) {
@@ -1023,21 +1059,42 @@ j1.adapter.nbinteract = (function (j1, window) {
           }
         }
 
-        if (nbiIndicateNbiActivity) {
-          spinner.stop();
-        }
+        widgetCells = document.querySelectorAll('.output_widget_view').length;
+        var dependencies_met_page_rendered = setInterval(function() {
+          widgetCellsRendered = document.querySelectorAll('.widget-vbox').length;
+          if (widgetCellsRendered >= widgetCells) {
+            logger.info('\n' + 'widgets rendered in page (interactive|total) : ' + widgetCells + '|' + widgetCellsRendered);
+            nbiCellsRendered = true;
+            if (nbiIndicateNbiActivity) spinner.stop();
+            _this.setState('finished');
+            logger.debug('\n' + 'state: ' + _this.getState());
+            logger.info('\n' + 'initializing module finished');
+
+            clearInterval(dependencies_met_page_rendered);
+          }
+        }, 25);  // END interval dependencies_met_page_rendered
 
-      } // END message command/nbi_init_finished
+        // ---------------------------------------------------------------------
+        // show the quicklinks icon
+        // ---------------------------------------------------------------------
+        $('#quickLinksNotebookseButton').show();
+
+      } // END message command/nbi_init_started
 
+      // -----------------------------------------------------------------------
+      //  command|mathjax
+      // -----------------------------------------------------------------------
       if (message.type === 'command' && message.action === 'mathjax') {
         logger.error('\n' + 'New Math, ID: ' + message.text);
 
-        MathJax.Hub.Startup.signal.Interest(function (message) {
-          logger.error("Startup: " + message)
-          // if (message.contains('End')) {
-          //   logger.error("Startup: " + message)
-          // }
-        });
+        // Register a MathJax callback if page is FULLY rendered
+        // TODO: Dosn't for now tha way !!!
+        // MathJax.Hub.Startup.signal.Interest(function (message) {
+        //   logger.error("Startup: " + message)
+        //   if (message.contains('End')) {
+        //     logger.error("Startup: " + message)
+        //   }
+        // });
 
         var dependencies_met_mathjax_rendered = setInterval(function() {
           var elm = document.getElementById('MathJax-Element-6' + '-Frame');
@@ -1051,15 +1108,23 @@ j1.adapter.nbinteract = (function (j1, window) {
           clearInterval(dependencies_met_mathjax_rendered);
         }, 25);  // END interval dependencies_met_mathjax_rendered
 
-      } // END message command/nbi_init_finished
+      } // END message command/mathjax
 
       // -----------------------------------------------------------------------
-      //  command|info
-      //
+      // command|info
+      // TODO:  count messages contain 'Pulling image'.
+      //        Potentially a enless loop
+      // -----------------------------------------------------------------------
       if (message.type === 'command' && message.action === 'info') {
 //      var reMessageTS         = new RegExp('/(?:[1-9]\d{3}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1\d|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[1-9]\d(?:0[48]|[2468][048]|[13579][26])|(?:[2468][048]|[13579][26])00)-02-29)T(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d(?:\.\d{1,9})?(?:Z|[+-][01]\d:[0-5]\d)/');
         var messageTS;
 
+        // widget render info messages for logging
+        //
+        if (message.text.includes('Displaying widget') || message.text.includes('First widget')) {
+          logger.debug('\n' + message.text);
+        }
+
         // remove timestamp|loglevel from message if exists
         //
         messageTS = message.text.split('] ')[1];
@@ -1068,7 +1133,6 @@ j1.adapter.nbinteract = (function (j1, window) {
         }
 
         _this.appendModalMessage(messageSuccessUL, message.text)
-
         logger.debug('\n' + message.text);
 
         // show the info modal
@@ -1083,10 +1147,24 @@ j1.adapter.nbinteract = (function (j1, window) {
 
       // -----------------------------------------------------------------------
       //  command|error
-      //
+      // -----------------------------------------------------------------------
       if (message.type === 'command' && message.action === 'error') {
         var messageTS;
 
+        if (messageTS.contains('Too many users') || messageTS.contains('Insufficent nodes')) {
+          var modaBodyText = `
+            The <i>Binder Service</i> is currently not available or is overloaded.
+            All interactive components on the page are <b>not</b> available.
+            You can reload the page or re-open later again.
+          `;
+          logger.error('\n', 'Binder access: failed');
+          if ($(nbiModalTRInfo).is(':hidden')) {
+            document.getElementById('nbiModalTRInfoBody').innerHTML = modaBodyText;
+            $(nbiModalTRInfo).modal('show');
+          }
+          return;
+        }
+
         // remove timestamp|loglevel from message if exists
         //
         messageTS = message.text.split('] ')[1];
@@ -1095,14 +1173,13 @@ j1.adapter.nbinteract = (function (j1, window) {
         }
 
         _this.appendModalMessage(messageErrorUL, message.text)
-
         logger.error('\n' + message.text);
 
-        // stop the (progress) spinner (currently NOT used)
+        // stop the (progress) spinner
         //
-        // if (moduleOptions.indicate_nbi_activity) {
-        //   spinner.stop();
-        // }
+        if (moduleOptions.indicate_nbi_activity) {
+          spinner.stop();
+        }
 
         if (nbiShowMessages) {
           // hide the info modal if shown
@@ -1189,6 +1266,125 @@ j1.adapter.nbinteract = (function (j1, window) {
       });
 
     }, // END checkURL
+
+    // -------------------------------------------------------------------------
+    // loadDialog()
+    // Loads the NBI dialog (modal)
+    // -------------------------------------------------------------------------
+    loadDialog: function (options) {
+      Events.documentReady(function () {
+
+        _this.modal = document.getElementById(options.dialogContainerID);
+        if (!_this.modal) {
+          logger.info('\n' +  'load consent modal');
+
+          _this.modal = document.createElement('div');
+          _this.modal.id = options.dialogContainerID;
+          _this.modal.style.display = 'none';
+
+          _this.modal.setAttribute('class', 'modal fade');
+          _this.modal.setAttribute('tabindex', '-1');
+          _this.modal.setAttribute('role', 'dialog');
+          _this.modal.setAttribute('aria-labelledby', options.dialogContainerID);
+          document.body.append(_this.modal);
+          _this.$modal = $(_this.modal);
+
+          // -------------------------------------------------------------------
+          // load|initialize the dialog (modal content)
+          // -------------------------------------------------------------------
+          var templateUrl = options.contentURL + '/' + 'index.html';
+          $.get(templateUrl)
+          .done(function (data) {
+            // load ALL modals HTML
+            _this.modal.innerHTML = data;
+            // select only the requested modal
+            _this.modal.innerHTML = $('#' + options.xhrDataElement).eq(0).html();
+
+            // set dialog type to 'modal'
+            //
+            $(_this.modal).modal({
+              backdrop: 'static',
+              keyboard: false
+            });
+
+            // register all button links
+            //
+            _this.$buttonDoNotAgree = $('#nbi-buttonDoNotAgree');
+            _this.$buttonAgree      = $('#nbi-buttonAgree');
+            _this.$buttonSave       = $('#nbi-buttonSave');
+            _this.$buttonAgreeAll   = $('#nbi-buttonAgreeAll');
+
+            // register all actions
+            //
+            _this.registerActions();
+
+            // register button event handler
+            //
+            _this.$buttonDoNotAgree.click(function () {
+              _this.doNotAgree();
+            });
+
+            _this.$buttonAgree.click(function () {
+              _this.agreeAll();
+            });
+          })
+          .fail(function () {
+            logger.error('\n' + 'loading nbi dialog (modal): failed');
+            logger.warn('\n' + 'probably no|wrong `contentURL` set');
+          });
+        }
+      }.bind(_this));
+    },  // END loadDialog
+
+    // -------------------------------------------------------------------------
+    // showDialog()
+    // Show the NBI dialog (modal)
+    // -------------------------------------------------------------------------
+    showDialog: function () {
+      this.$modal.modal('show');
+    },  // END showDialog
+
+    // -------------------------------------------------------------------------
+    // registerActions()
+    // register actions to run
+    // -------------------------------------------------------------------------
+    registerActions: function () {
+
+      $('input:checkbox[name="checkboxClearLocalStorage"]').on('click', function (e) {
+        nbActions.resetLocalStorage = $(this).is(':checked');
+        logText = '\n' + 'action ClearLocalStorage changed to: ' + value;
+        logger.info(logText);
+
+        e.stopPropagation();
+      });
+
+    },  // END registerActions
+
+    // -------------------------------------------------------------------------
+    // doNotAgree()
+    // action to run ...
+    // -------------------------------------------------------------------------
+    doNotAgree: function (elmID, msg) {
+      _this.$modal.modal('hide');
+    },  // END doNotAgree
+
+    // -------------------------------------------------------------------------
+    // agreeAll()
+    // caction to run ...
+    // -------------------------------------------------------------------------
+    agreeAll: function (elmID, msg) {
+
+      if (nbActions.resetLocalStorage) {
+        logText = '\n' + 'run action: "Clear Binder Settings"';
+        logger.info(logText);
+        localStorage.removeItem('serverParams');
+        localStorage.removeItem('kernelId');
+      }
+
+      _this.$modal.modal('hide');
+      location.reload(true);
+    },  // END agreeAll
+
     // -------------------------------------------------------------------------
     // appendModalMessage()
     // Appends a message to given (NBI) modal

data/assets/themes/j1/core/css/themes/unolight/bootstrap.css

@@ -25186,15 +25186,16 @@ li.dropdown.nav-item.nav-sub-item:before {
       transition: all 1s ease-in-out;
       background-color: transparent;
       border-bottom: 0; }
+    nav.navbar.navigator.navbar-transparent .quicklink-nav {
+      padding-left: 15px;
+      margin-left: 30px; }
     nav.navbar.navigator.navbar-transparent.light {
       background-color: rgba(255, 255, 255, 0.3); }
     nav.navbar.navigator.navbar-transparent.dark {
       background-color: rgba(0, 0, 0, 0.3); }
     nav.navbar.navigator.menu-center .container {
       position: relative; }
-    nav.navbar.navigator.menu-center .navbar-header {
-      position: absolute; }
-    nav.navbar.navigator.menu-center .attr-nav {
+    nav.navbar.navigator.menu-center .quicklink-nav {
       position: absolute;
       right: 15px; }
     nav.navbar.navigator.menu-center ul.nav.navbar-center {
@@ -25227,25 +25228,26 @@ li.dropdown.nav-item.nav-sub-item:before {
     background-color: rgba(0, 0, 0, 0.3);
     border-bottom: solid 3px #212121;
     border-left: solid 1px #212121; }
-  .attr-nav {
+  .quicklink-nav {
     margin-left: 0;
     margin-right: -20px;
     float: right;
     position: relative;
     display: inline-block;
     margin-right: 1.5rem; }
-    .attr-nav > ul {
+    .quicklink-nav > ul {
       list-style: none;
       overflow: hidden; }
-      .attr-nav > ul > li {
+      .quicklink-nav > ul > li {
         float: left;
         display: block; }
-        .attr-nav > ul > li > a {
+        .quicklink-nav > ul > li > a {
           color: rgba(255, 255, 255, 0.5);
           display: block;
           padding: 10px 5px;
-          position: relative; }
-          .attr-nav > ul > li > a span.badge {
+          position: relative;
+          border-bottom: unset; }
+          .quicklink-nav > ul > li > a span.badge {
             position: absolute;
             top: 50%;
             margin-top: -15px;
@@ -25255,7 +25257,7 @@ li.dropdown.nav-item.nav-sub-item:before {
             width: 15px;
             height: 15px;
             padding-top: 2px; }
-        .attr-nav > ul > li.dropdown ul.dropdown-menu {
+        .quicklink-nav > ul > li.dropdown ul.dropdown-menu {
           border-radius: 0;
           box-shadow: 0 0 0;
           border: solid 1px #e0e0e0;
@@ -25487,11 +25489,11 @@ li.dropdown.nav-item.nav-sub-item:before {
       border: none;
       margin-bottom: 0; }
       nav.navbar.navigator .navbar-collapse.collapse {
-        display: none !important; }
+        display: none; }
         nav.navbar.navigator .navbar-collapse.collapse.in {
-          display: block !important; }
+          display: block; }
         nav.navbar.navigator .navbar-collapse.collapse.show {
-          display: block !important; }
+          display: block; }
     nav.navbar.navigator .navbar-nav {
       padding-top: 5px;
       padding-left: 15px;
@@ -25621,11 +25623,10 @@ li.dropdown.nav-item.nav-sub-item:before {
       border: 0;
       border-color: transparent;
       border-radius: 0;
+      box-shadow: unset;
       z-index: 2; }
       nav.navbar.navigator .navbar-toggler:hover {
         color: rgba(255, 255, 255, 0.9); }
-      nav.navbar.navigator .navbar-toggler:focus {
-        color: rgba(255, 255, 255, 0.9); }
     nav.navbar.navigator .dropdown-item:focus {
       background-color: rgba(0, 0, 0, 0.5) !important; }
     nav.navbar.navigator .dropdown-item:hover {
@@ -25679,19 +25680,19 @@ li.dropdown.nav-item.nav-sub-item:before {
     nav.navbar.navigator.navbar-transparent.light {
       background-color: rgba(0, 0, 0, 0.4) !important;
       border-bottom: 0; }
-  .attr-nav {
+  .quicklink-nav {
     position: absolute;
     right: 1.5rem;
     margin-right: 0;
     overflow: hidden; }
-    .attr-nav > ul {
+    .quicklink-nav > ul {
       padding: 0;
       margin: 0 -15px -7px 0; }
-      .attr-nav > ul > li > a {
+      .quicklink-nav > ul > li > a {
         padding: 16px 15px 15px; }
-      .attr-nav > ul > li.dropdown > a.dropdown-toggle:before {
+      .quicklink-nav > ul > li.dropdown > a.dropdown-toggle:before {
         display: none; }
-      .attr-nav > ul > li.dropdown ul.dropdown-menu {
+      .quicklink-nav > ul > li.dropdown ul.dropdown-menu {
         margin-top: 2px;
         margin-left: 55px;
         width: 350px;
@@ -25711,45 +25712,17 @@ li.dropdown.nav-item.nav-sub-item:before {
   .nav-item + .nav-item {
     margin-left: 0 !important; } }
 
-@media screen and (min-width: 768px), screen and (max-width: 575px) {
-  nav.navbar.navigator .navbar-header {
-    padding-left: 15px;
-    padding-right: 15px; }
-  nav.navbar.navigator .navbar-nav {
-    padding-top: 5px;
-    padding-left: 15px;
-    padding-right: 35px; }
-  nav.navbar.navigator.navbar-mobile .navbar-collapse {
-    margin-left: 0; }
-  nav.navbar.navigator.navbar-mobile.navbar-sidebar .share {
-    padding: 30px 15px !important;
-    margin-bottom: 0; }
-  nav.navbar.navigator.navbar-mobile ul.nav {
-    margin-left: -15px;
-    border-top: solid 1px #ffffff; }
-  nav.navbar.navigator.navbar-sidebar .share {
-    padding: 30px 15px !important;
-    padding: 30px 0 !important;
-    margin-bottom: 0; }
-  nav.navigator.navbar-full .navbar-collapse {
-    left: 15px; }
-  nav.navigator.navbar-full .navbar-header {
-    padding-right: 0; }
-  nav.navigator.navbar-full .navbar-toggle {
-    margin-right: -15px; }
-  nav.navigator.navbar-full ul.nav > li > a {
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 18px !important;
-    line-height: 24px !important;
-    padding: 5px 10px !important; }
-  .attr-nav > ul {
+@media screen and (max-width: 992px), screen and (max-width: 575px) {
+  ul#desktop_menu {
+    display: none; }
+  .quicklink-nav > ul {
     margin-right: -10px; }
-    .attr-nav > ul > li > a {
+    .quicklink-nav > ul > li > a {
       color: rgba(255, 255, 255, 0.5);
       padding: 16px 10px 15px;
       padding-left: 0;
       border-bottom: unset; }
-    .attr-nav > ul > li.dropdown ul.dropdown-menu {
+    .quicklink-nav > ul > li.dropdown ul.dropdown-menu {
       left: -275px; }
   .top-search .container {
     padding: 0 15px; }