j1-template 2022.3.0 → 2022.3.3

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

@@ -83,6 +83,9 @@ j1.adapter.nbinteract = (function (j1, window) {
   var moduleOptions   = {};
   var moduleSettings  = {};
   var message         = {};
+  var flags            = {
+    checkURL:   false
+  };
   var spinnerOpts     = {                                                       // (default) options for a spinner
     lines:      13,                                                             // number of lines to draw
     length:     38,                                                             // length of each line
@@ -103,16 +106,23 @@ 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
   var nbiContentModalErrorID      = 'nbiModalErrorBody';                        // ID of the content (messages) for the SUCCESS modal
-  var nbiModalInfoID              = '#' + 'nbiModalTopInfo';                    // ID of the SUCCESS modal
+  var nbiModalTopInfo             = '#' + 'nbiModalTopInfo';                    // ID of the TopInfo modal
+  var nbiModalTRInfo              = '#' + 'nbiModalTRInfo';                     // ID of the TRInfo modal
   var nbiModalSuccessID           = '#' + 'nbiModalTRSuccess';                  // ID of the SUCCESS modal
   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
@@ -129,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
@@ -144,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
       // -----------------------------------------------------------------------
@@ -165,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
@@ -172,20 +200,24 @@ 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;
@@ -209,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
 
     // -------------------------------------------------------------------------
@@ -391,98 +436,124 @@ j1.adapter.nbinteract = (function (j1, window) {
     // controlled by nbinteract_prepared.
     // -------------------------------------------------------------------------
     interactNbiTextbooks: function (options) {
+      var state;
       var textbook = options;
 
       // initialize state flag
       _this.setState('started');
       logger.debug('\n' + 'state: ' + _this.getState());
 
+      // check if the Binder Service is available
+      //
+      _this.checkURL(options.baseUrl, flags);
+
       var log_text = '\n' + 'nbinteract is being initialized';
       logger.info(log_text);
 
-      // var nbiButtonsFound = document.querySelectorAll('.js-nbinteract-widget')
-
-      {% comment %} initialize nbinteract per textbook
-      {% assign textbook_spec     = item.textbook.spec %}
-      {% assign textbook_baseUrl  = item.textbook.baseUrl %}
-      {% assign textbook_provider = item.textbook.provider %}
-      -------------------------------------------------------------------------- {% endcomment %}
-      {% for item in nbinteract_options.textbooks %} {% if item.textbook.enabled %}
-      {% assign textbook_id       = item.textbook.id %}
-
-      if ($('#{{textbook_id}}').length) {
-        var dependencies_met_nb_loaded = setInterval(function() {
-          if ($('#{{textbook_id}}').attr('data-nb-textbook') == 'loaded') {
-
-            var nbiButtonsFound = document.querySelectorAll('.js-nbinteract-widget').length
-            if (nbiIndicateNbiActivity && nbiButtonsFound == 1) {
-              var log_text = '\n' + 'non-nbi textbook found, skip NBI initialization for: {{textbook_id}}';
-              logger.warn(log_text);
-              spinner.stop();
-            }
-
-            if(!nbinteract_prepared && nbiButtonsFound > 1) {
-              logText = '\n' + 'jupyter kernel is being generated ...';
-              logger.info(logText);
+      var dependencies_met_binder_responsive = setInterval(function() {
+        state = _this.getState();
+        if (state == 'finished_checks') {
+          clearInterval(dependencies_met_binder_responsive);
+          if (flags.checkURL) {
+            {% comment %} initialize nbinteract per textbook
+            {% assign textbook_spec     = item.textbook.spec %}
+            {% assign textbook_baseUrl  = item.textbook.baseUrl %}
+            {% assign textbook_provider = item.textbook.provider %}
+            -------------------------------------------------------------------------- {% endcomment %}
+            {% for item in nbinteract_options.textbooks %} {% if item.textbook.enabled %}
+            {% assign textbook_id       = item.textbook.id %}
+
+            if ($('#{{textbook_id}}').length) {
+              var dependencies_met_nb_loaded = setInterval(function() {
+                if ($('#{{textbook_id}}').attr('data-nb-textbook') == 'loaded') {
+
+                  var nbiButtonsFound = document.querySelectorAll('.js-nbinteract-widget').length
+                  if (nbiIndicateNbiActivity && nbiButtonsFound == 1) {
+                    var log_text = '\n' + 'non-nbi textbook found, skip NBI initialization for: {{textbook_id}}';
+                    logger.warn(log_text);
+                    spinner.stop();
+                  }
 
-              // create nbInteract (core) instance
-              //
-              coreLogger = log4javascript.getLogger('nbinteract.core');
-              interact = new NbInteract({
-                spec:     options.spec,
-                baseUrl:  options.baseUrl,
-                provider: options.provider,
-                logger:   coreLogger,
-                j1API:    j1,
-              });
-
-              // generate a jupyter kernel via BinderHub
-              interact.prepare();
-              nbinteract_prepared = true;
-
-              // issue an error if the NBI (init) button never removed by
-              // nbInteract-core (util or manager)
-              // TODO:  The 'timeout' condition should be replaced
-              //        state-based triggered from nbInteract-core.
-              //
-              window.setTimeout(function() {
-                var nbiButtonState = _this.getNbiButtonState();
-                if (nbiButtonState) {
-                  // button NOT removed
-                  logger.warn('NBI initialialization failed on textbook: {{textbook_id}}');
-                  // hide the info modal
-                  $(nbiModalSuccessID).modal('hide');
-
-                  // show the error modal
-                  $(nbiModalSuccessID).on('hidden.bs.modal', function () {
-                    if ($(nbiModalErrorID).is(':hidden')) {
-                      var messageErrorUL = document.getElementById(nbiModalErrorMessagesID);
-                      _this.appendModalMessage(messageErrorUL, 'NBI initialialization failed for textbook: {{textbook_id}}')
-                      $(nbiModalErrorID).modal('show');
-
-                      // auto-close the error modal
-                      if (nbiModalAutoClose) {
-                        window.setTimeout(function() {
-                          $(nbiModalErrorID).modal('hide');
-                        }, nbiModalAutoCloseDelay);
+                  if(!nbinteract_prepared && nbiButtonsFound > 1) {
+                    logText = '\n' + 'jupyter kernel is being generated ...';
+                    logger.info(logText);
+
+                    // create nbInteract (core) instance
+                    //
+                    coreLogger = log4javascript.getLogger('nbinteract.core');
+                    interact = new NbInteract({
+                      spec:     options.spec,
+                      baseUrl:  options.baseUrl,
+                      provider: options.provider,
+                      logger:   coreLogger,
+                      j1API:    j1,
+                    });
+
+                    // generate a jupyter kernel via BinderHub
+                    interact.prepare();
+                    nbinteract_prepared = true;
+
+                    // issue an error if the NBI (init) button never removed by
+                    // nbInteract-core (util or manager)
+                    // TODO:  The 'timeout' condition should be replaced
+                    //        state-based triggered from nbInteract-core.
+                    //
+                    window.setTimeout(function() {
+                      var nbiButtonState = _this.getNbiButtonState();
+                      if (nbiButtonState) {
+                        // button NOT removed
+                        logger.warn('NBI initialialization failed on textbook: {{textbook_id}}');
+                        // hide the info modal
+                        $(nbiModalSuccessID).modal('hide');
+
+                        // show the error modal
+                        $(nbiModalSuccessID).on('hidden.bs.modal', function () {
+                          if ($(nbiModalErrorID).is(':hidden')) {
+                            var messageErrorUL = document.getElementById(nbiModalErrorMessagesID);
+                            _this.appendModalMessage(messageErrorUL, 'NBI initialialization failed for textbook: {{textbook_id}}')
+                            $(nbiModalErrorID).modal('show');
+
+                            // auto-close the error modal
+                            if (nbiModalAutoClose) {
+                              window.setTimeout(function() {
+                                $(nbiModalErrorID).modal('hide');
+                              }, nbiModalAutoCloseDelay);
+                            }
+                          }
+                        });
+                      } else {
+                        // button removed
+                        logger.info('NBI initialized successfully.');
                       }
-                    }
-                  });
-                } else {
-                  // button removed
-                  logger.info('NBI initialized successfully.');
-                }
-              }, nbiInitTimeout);
+                    }, nbiInitTimeout);
 
+                  }
+
+                  clearInterval(dependencies_met_nb_loaded);
+                } // END dependencies_met_nb_loaded
+              }, 25);
+              return;
+            }
+            // END textbook_id: {{ textbook_id }}
+            {% endif %} {% endfor %}
+          } else {
+            spinner.stop();
+            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');
             }
+            clearInterval(dependencies_met_binder_responsive);
+          }
+
+        }
+      }, 25);  // END dependencies_met_binder_responsive
 
-            clearInterval(dependencies_met_nb_loaded);
-          } // END dependencies_met_nb_loaded
-        }, 25);
-        return;
-      }
-      // END textbook_id: {{ textbook_id }}
-      {% endif %} {% endfor %}
     },
 
     // -------------------------------------------------------------------------
@@ -533,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
@@ -815,6 +886,45 @@ j1.adapter.nbinteract = (function (j1, window) {
           </div>
         </div>
       `
+
+      const nbiModalTRInfo = `
+        <div id="nbiModalTRInfo"
+          class="modal fade right"
+          tabindex="-1"
+          role="dialog"
+          aria-labelledby="myModalLabel" aria-hidden="true"
+          data-bs-keyboard="false"
+          data-bs-backdrop="static">
+          <div class="modal-dialog modal-dialog-scrollable modal-side-2x modal-top-right modal-notify modal-success" role="document">
+            <!-- Content -->
+            <div class="modal-content">
+              <!-- Header -->
+              <div class="modal-header">
+                <p class="lead">Information</p>
+                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                  <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+                </button>
+              </div>
+              <!-- Icon -->
+              <div class="text-center">
+                <i class="mdi mdi-10x mdi-information-variant mdi-spin md-green mb-1"></i>
+              </div>
+              <!-- Body -->
+              <div id="nbiModalTRInfoBody" class="modal-body">
+                <div>
+                  <p> Placeholder </p>
+                </div>
+              </div>
+              <!-- Footer -->
+              <div class="modal-footer justify-content-center">
+                <a type="button" class="btn btn-primary" data-bs-dismiss="modal">OK, thanks</a>
+              </div>
+            </div>
+            <!-- END Content -->
+          </div>
+        </div>
+      `
+
       const nbiModalTRSuccess = `
         <div id="nbiModalTRSuccess"
           class="modal fade right"
@@ -828,7 +938,7 @@ j1.adapter.nbinteract = (function (j1, window) {
             <div class="modal-content">
               <!-- Header -->
               <div class="modal-header">
-                <p class="lead">Info - NbInteract</p>
+                <p class="lead">NBI - Information</p>
                 <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                   <i class="mdi mdi-close mdi-dark mdi-48px"></i>
                 </button>
@@ -853,6 +963,7 @@ j1.adapter.nbinteract = (function (j1, window) {
           </div>
         </div>
       `
+
       const nbiModalTLDanger = `
         <div id="nbiModalTLDanger"
           class="modal fade left"
@@ -866,7 +977,7 @@ j1.adapter.nbinteract = (function (j1, window) {
             <div id="nbiModalErrorBody" class="modal-content">
               <!--Header-->
               <div class="modal-header">
-                <p class="lead">Error - NbInteract</p>
+                <p class="lead">NBI - Error</p>
                 <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                   <i class="mdi mdi-close mdi-dark mdi-48px"></i>
                 </button>
@@ -897,6 +1008,12 @@ j1.adapter.nbinteract = (function (j1, window) {
       nbiModal.innerHTML      = nbiModalTopInfo;
       document.body.appendChild(nbiModal);
 
+      nbiModal                = document.createElement('div');
+      nbiModal.id             = 'nbi-modal-info';
+      nbiModal.className      = 'nbi-modal';
+      nbiModal.innerHTML      = nbiModalTRInfo;
+      document.body.appendChild(nbiModal);
+
       nbiModal                = document.createElement('div');
       nbiModal.id             = 'nbi-modal-success';
       nbiModal.className      = 'nbi-modal';
@@ -930,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) {
@@ -946,21 +1059,47 @@ j1.adapter.nbinteract = (function (j1, window) {
           }
         }
 
-        if (nbiIndicateNbiActivity) {
-          spinner.stop();
+        if (nbiNotebookReady == 'first_widget') {
+          if (nbiIndicateNbiActivity) spinner.stop();
+          $('.fab-btn').show();
         }
 
-      } // END message command/nbi_init_finished
+        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
 
+        // ---------------------------------------------------------------------
+        // 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');
@@ -974,15 +1113,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];
@@ -991,7 +1138,6 @@ j1.adapter.nbinteract = (function (j1, window) {
         }
 
         _this.appendModalMessage(messageSuccessUL, message.text)
-
         logger.debug('\n' + message.text);
 
         // show the info modal
@@ -1006,10 +1152,29 @@ 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') ||
+            messageTS.contains('ImagePullBackOff') ||
+            messageTS.contains('failed to connect')
+        ) {
+          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];
@@ -1018,14 +1183,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
@@ -1096,6 +1260,141 @@ j1.adapter.nbinteract = (function (j1, window) {
       return _this.state;
     }, // END getState
 
+    // -------------------------------------------------------------------------
+    // getState()
+    // Returns the current (processing) state of the module
+    // -------------------------------------------------------------------------
+    checkURL: function (uri, flags) {
+      _this.setState('process_checks');
+      $.get(uri).done(function () {
+        _this.setState('finished_checks');
+        flags.checkURL = true;
+        return true;
+      }).fail(function () {
+        _this.setState('finished_checks');
+        flags.checkURL = false;
+      });
+
+    }, // 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