j1-template 2020.0.13 → 2020.0.18

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

@@ -68,8 +68,8 @@ j1.adapter['clipboard'] = (function (j1, window) {
   // ---------------------------------------------------------------------------
   // globals
   // ---------------------------------------------------------------------------
-  var environment         = '{{environment}}';
-  var moduleOptions       = {};
+  var environment   = '{{environment}}';
+  var moduleOptions = {};
   var logger;
   var logText;
   var _this;
@@ -84,8 +84,12 @@ j1.adapter['clipboard'] = (function (j1, window) {
     // module initializer
     // -------------------------------------------------------------------------
     init: function (options) {
-      // initialize state flag
-      j1.adapter.clipboard.state = 'pending';
+
+      // -----------------------------------------------------------------------
+      // globals
+      // -----------------------------------------------------------------------
+      _this   = j1.adapter.clipboard;
+      logger  = log4javascript.getLogger('j1.adapter.clipboard');
 
       // -----------------------------------------------------------------------
       // defaults
@@ -95,11 +99,8 @@ j1.adapter['clipboard'] = (function (j1, window) {
         generated:   '{{site.time}}'
       }, options);
 
-      // -----------------------------------------------------------------------
-      // globals
-      // -----------------------------------------------------------------------
-      _this   = j1.adapter.clipboard;
-      logger  = log4javascript.getLogger('j1.adapter.clipboard');
+      // initialize state flag
+      _this.state = 'started';
       logText = 'initialization: started';
       logger.info(logText);
 
@@ -119,8 +120,10 @@ j1.adapter['clipboard'] = (function (j1, window) {
           _this.initEventHandler(clipboardJS);
 
           clearInterval(dependencies_met_j1_finished);
-          logText = 'initialization: finished';
-          logger.info(logText);
+          logger.info('met dependencies for: j1');
+          _this.setState('finished');
+          logger.info('state: ' + _this.getState());
+          logger.info('module initialized successfully');
         }
       }, 25); // END dependencies_met_j1_finished
     },
@@ -203,20 +206,20 @@ j1.adapter['clipboard'] = (function (j1, window) {
     }, // END messageHandler
 
     // -------------------------------------------------------------------------
-    // setState
-    // Set the current (processing) state of the module
+    // setState()
+    // Sets the current (processing) state of the module
     // -------------------------------------------------------------------------
     setState: function (stat) {
-      j1.adapter.clipboard.state = stat;
+      _this.state = stat;
     }, // END setState
 
     // -------------------------------------------------------------------------
-    // getState
+    // getState()
     // Returns the current (processing) state of the module
     // -------------------------------------------------------------------------
     getState: function () {
-      return j1.adapter.clipboard.state;
-    } // END state
+      return _this.state;
+    } // END getState
 
   }; // END return
 })(j1, window);

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

@@ -0,0 +1,205 @@
+---
+regenerate: true
+---
+
+{% capture cache %}
+
+{% comment %}
+ # -----------------------------------------------------------------------------
+ # ~/assets/themes/j1/adapter/js/cookiebar.js
+ # Liquid template to create the Template Adapter for J1 Cookiebar
+ #
+ # Product/Info:
+ # http://jekyll.one
+ #
+ # Copyright (C) 2020 Juergen Adams
+ #
+ # J1 Template is licensed under the MIT License.
+ # For details, see https://jekyll.one
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #  {{ liquid_var | debug }}
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid var initialization
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Set config files
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign environment           = site.environment %}
+{% assign modules               = site.data.modules %}
+
+{% comment %} Set config data
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign cookiebar_settings    = modules.cookiebar.settings %}
+{% assign cookiebar_defaults    = modules.defaults.cookiebar.defaults %}
+
+{% comment %} Set config options
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign cookiebar_options     = cookiebar_defaults | merge: cookiebar_settings %}
+
+{% assign production = false %}
+{% if environment == 'prod' or environment == 'production' %}
+  {% assign production = true %}
+{% endif %}
+
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/themes/j1/adapter/js/cookiebar.js
+ # JS Adapter for Cookiebar
+ #
+ # Product/Info:
+ # http://jekyll.one
+ # http://www.primebox.co.uk/projects/jquery-cookiebar/
+ #
+ # Copyright (C) 2020 Juergen Adams
+ # Copyright (C) 2016 Ant Parsons (primebox.co.uk)
+ #
+ # J1 Template is licensed under the MIT License.
+ # For details, see https://jekyll.one
+ # jQuery Cookibar is licensed under Creative Commons Attribution 3.0 Unported License.
+ # For details, see http://www.primebox.co.uk/projects/jquery-cookiebar/
+ #
+ # -----------------------------------------------------------------------------
+ #  Adapter generated: {{site.time}}
+ # -----------------------------------------------------------------------------
+*/
+'use strict';
+
+{% comment %} Main
+--------------------------------------------------------------- {% endcomment %}
+j1.adapter['cookiebar'] = (function (j1, window) {
+
+  var environment   = '{{environment}}';
+  var moduleOptions = {};
+  var _this;
+  var logger;
+  var logText;
+
+  // ---------------------------------------------------------------------------
+  // Helper functions
+  // ---------------------------------------------------------------------------
+
+  // ---------------------------------------------------------------------------
+  // Main object
+  // ---------------------------------------------------------------------------
+  return {
+
+    // -------------------------------------------------------------------------
+    // Initializer
+    // -------------------------------------------------------------------------
+    init: function (options) {
+
+      // -----------------------------------------------------------------------
+      // Default module settings
+      // -----------------------------------------------------------------------
+      var settings = $.extend({
+        module_name: 'j1.adapter.algolia',
+        generated:   '{{site.time}}'
+      }, options);
+
+      {% comment %} Load module config from yml data
+      -------------------------------------------------------------------------- {% endcomment %}
+      // Load  module DEFAULTS|CONFIG
+      /* eslint-disable */
+      moduleOptions = $.extend({}, {{cookiebar_options | replace: '=>', ':' | replace: 'nil', '""'}});
+      /* eslint-enable */
+
+      if (typeof settings !== 'undefined') {
+        moduleOptions = j1.mergeData(moduleOptions, settings);
+      }
+
+      // -----------------------------------------------------------------------
+      // initializer
+      // -----------------------------------------------------------------------
+      _this   = j1.adapter.cookiebar;
+      logger  = log4javascript.getLogger('j1.adapter.cookiebar');
+
+      _this.setState('started');
+      logger.info('state: ' + _this.getState());
+      logger.info('module is being initialized');
+
+      j1.core.cookiebar.init({
+        expireDays:             {{ cookiebar_options.expireDays | json }},
+        renewOnVisit:           {{ cookiebar_options.renewOnVisit | json }},
+        forceShow:              {{ cookiebar_options.forceShow | json }},
+        domain:                 {{ cookiebar_options.domain | json }},
+        referrer:               {{ cookiebar_options.referrer | json }}
+      });
+
+      j1.xhrData(moduleOptions, 'j1.adapter.cookiebar', 'data_loaded');
+
+      // ---------------------------------------------------------------------
+      // Initialize events if all modals loaded
+      // ---------------------------------------------------------------------
+      var dependencies_met_modals_loaded = setInterval (function () {
+        if (j1.xhrDataState['#{{cookiebar_options.xhr_container_id}}'] == 'success') {
+          logger.info('load HTML data (AJAX): finished');
+          j1.core.cookiebar.eventHandler(moduleOptions);
+          _this.setState('finished');
+          logger.info('state: ' + _this.getState());
+          logger.info('initializing module finished');
+          clearInterval(dependencies_met_modals_loaded);
+          logger.info('met dependencies for: xhrData');
+        }
+        if (j1.xhrDataState['#{{cookiebar_options.xhr_container_id}}'] == 'not loaded') {
+          logger.error('load HTML data (AJAX): failed');
+          _this.setState('finished');
+          logger.info('state: ' + _this.getState());
+          logger.info('initializing module finished');
+          clearInterval(dependencies_met_modals_loaded);
+        }
+      }, 25); // END dependencies_met_modals_loaded
+    }, // END init
+
+
+    // -------------------------------------------------------------------------
+    // messageHandler: MessageHandler for J1 CookieConsent module
+    // Manage messages send from other J1 modules
+    // -------------------------------------------------------------------------
+    messageHandler: function (sender, message) {
+      var json_message = JSON.stringify(message, undefined, 2);
+
+      logText = 'received message from ' + sender + ': ' + json_message;
+      logger.debug(logText);
+
+      // -----------------------------------------------------------------------
+      //  Process commands|actions
+      // -----------------------------------------------------------------------
+      if (message.type === 'command' && message.action === 'module_initialized') {
+        //
+        // Place handling of command|action here
+        //
+        logger.info(message.text);
+      }
+
+      //
+      // Place handling of other command|action here
+      //
+
+      return true;
+    }, // END messageHandler
+
+    // -------------------------------------------------------------------------
+    // setState()
+    // Sets the current (processing) state of the module
+    // -------------------------------------------------------------------------
+    setState: function (stat) {
+      _this.state = stat;
+    }, // END setState
+
+    // -------------------------------------------------------------------------
+    // getState()
+    // Returns the current (processing) state of the module
+    // -------------------------------------------------------------------------
+    getState: function () {
+      return _this.state;
+    } // END getState
+
+  }; // END return
+})(j1, window);
+
+{% endcapture %}
+{{ cache | strip_empty_lines }}
+{% assign cache = nil %}

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

@@ -108,8 +108,17 @@ j1.adapter['framer'] = (function (j1, window) {
     // Initializer
     // -------------------------------------------------------------------------
     init: function (options) {
+
+      // -----------------------------------------------------------------------
+      // globals
+      // -----------------------------------------------------------------------
+      _this   = j1.adapter.framer;
+      logger  = log4javascript.getLogger('j1.adapter.framer');
+
       // initialize state flag
-      j1.adapter.framer.state = 'pending';
+      _this.setState('started');
+      logger.info('state: ' + _this.getState());
+      logger.info('module is being initialized');
 
       // -----------------------------------------------------------------------
       // Default module settings
@@ -130,15 +139,6 @@ j1.adapter['framer'] = (function (j1, window) {
         moduleOptions = j1.mergeData(moduleOptions, settings);
       }
 
-      {% comment %} Set global variables
-      -------------------------------------------------------------------------- {% endcomment %}
-      _this   = j1.adapter.framer;
-      logger  = log4javascript.getLogger('j1.adapter.framer');
-
-      _this.setState('started');
-      logger.info('state: ' + _this.getState());
-      logger.info('module is being initialized');
-
       iFrameResize({
         log:                      moduleOptions.log,
         autoResize:               moduleOptions.autoResize,
@@ -196,20 +196,28 @@ j1.adapter['framer'] = (function (j1, window) {
     }, // END messageHandler
 
     // -------------------------------------------------------------------------
-    // setState
-    // Set the current (processing) state of the module
+    // getState
+    // Returns the current (processing) state of the module
+    // -------------------------------------------------------------------------
+    getState: function () {
+      return j1.adapter.navigator.state;
+    }, // END getState
+
+    // -------------------------------------------------------------------------
+    // setXhrState
+    // Set the final (loading) state of an element (partial) loaded via Xhr
     // -------------------------------------------------------------------------
-    setState: function (stat) {
-      j1.adapter.framer.state = stat;
-    }, // END setState
+    setXhrState: function (obj, stat) {
+      j1.adapter.navigator.xhrData[obj] = stat;
+    }, // END setXhrState
 
     // -------------------------------------------------------------------------
     // getState
-    // Returns the current (processing) state of the module
+    // Returns the final (loading) state of an element (partial) loaded via Xhr
     // -------------------------------------------------------------------------
-    getState: function () {
-      return j1.adapter.framer.state;
-    } // END state
+    getXhrState: function (obj) {
+      return j1.adapter.navigator.xhrData[obj];
+    } // END getXhrState
 
   }; // END return
 })(j1, window);

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

@@ -112,21 +112,6 @@ j1.adapter['gallery_customizer'] = (function (j1, window) {
   var logger;
   var logText;
 
-  // ---------------------------------------------------------------------------
-  // Helper functions
-  // ---------------------------------------------------------------------------
-  function executeFunctionByName(functionName, context /*, args */) {
-    // See: https://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string
-    //
-    var args = Array.prototype.slice.call(arguments, 2);
-    var namespaces = functionName.split('.');
-    var func = namespaces.pop();
-    for(var i = 0; i < namespaces.length; i++) {
-      context = context[namespaces[i]];
-    }
-    return context[func].apply(context, args);
-  }
-
   // ---------------------------------------------------------------------------
   // Main object
   // ---------------------------------------------------------------------------
@@ -136,8 +121,17 @@ j1.adapter['gallery_customizer'] = (function (j1, window) {
     // initializer
     // -------------------------------------------------------------------------
     init: function (options) {
+
+      // -----------------------------------------------------------------------
+      // globals
+      // -----------------------------------------------------------------------
+      _this   = j1.adapter.gallery_customizer;
+      logger  = log4javascript.getLogger('j1.adapter.gallery_customizer');
+
       // initialize state flag
-      j1.adapter.gallery_customizer.state = 'pending';
+      _this.setState('started');
+      logger.info('state: ' + _this.getState());
+      logger.info('module is being initialized');
 
       // -----------------------------------------------------------------------
       // Default module settings
@@ -154,239 +148,217 @@ j1.adapter['gallery_customizer'] = (function (j1, window) {
       customizerOptions = $.extend({}, {{customizer_options | replace: '=>', ':' | replace: 'nil', '""'}});
       /* eslint-enable */
 
-      {% comment %} Set global variables
-      -------------------------------------------------------------------------- {% endcomment %}
-      _this   = j1.adapter.gallery_customizer;
-      logger  = log4javascript.getLogger('j1.adapter.gallery_customizer');
-
-      _this.setState('started');
-      logger.info('state: ' + _this.getState());
-      logger.info('module is being initialized');
-
       // ---------------------------------------------------------------------
       // data loader
       // ---------------------------------------------------------------------
-      $.when (
-        j1.xhrData (
-          'j1.adapter.gallery_customizer', {
-          xhr_container_id: customizerOptions.xhr_container_id,
-          xhr_data_path:    customizerOptions.xhr_data_path },
-          'data_loaded'))
-      .then (function (success) {
-        if (success) {
-          logger.info('loading customizer started on id: #' + customizerOptions.xhr_container_id);
+      j1.xhrData ({
+        xhr_container_id: customizerOptions.xhr_container_id,
+        xhr_data_path:    customizerOptions.xhr_data_path },
+        'j1.adapter.gallery_customizer',
+        'null');
+
+      // -------------------------------------------------------------------
+      // initializer
+      // -------------------------------------------------------------------
+      var dependencies_met_data_loaded = setInterval(function() {
+        if (j1.xhrDOMState['#customizer'] == 'success') {
+          var environment     = '{{site.environment}}';
+          var galleryId       = '#jg_customizer';
+          var $formId         = $('#jg-customizer-form');
+          var $instance       = $('#jg_customizer');
+          var kbdDelay        = 750;
+          var imageHeightMin  = 40;
+
+          logger.info('loading customizer finished on id: #' + customizerOptions.xhr_container_id);
 
           // -------------------------------------------------------------------
-          // initializer
-          // -------------------------------------------------------------------
-          var dependencies_met_data_loaded = setInterval(function() {
-            if (_this.getState() == 'data_loaded') {
-              var environment     = '{{site.environment}}';
-              var galleryId       = '#jg_customizer';
-              var $formId         = $('#jg-customizer-form');
-              var $instance       = $('#jg_customizer');
-              var kbdDelay        = 750;
-              var imageHeightMin  = 40;
-
-              logger.info('loading customizer finished on id: #' + customizerOptions.xhr_container_id);
-
-              // -------------------------------------------------------------------
-              // load gallery data
-              j1.adapter.jf_gallery.initialize(galleryOptions);
-
-              logger.info('initialize customizer ui|forms');
-
-              if ($formId.length) {
-                var timerid;
-
-                $('input[name="rowHeight"]').on('input', function (e) {
-                  var value = $(this).val();
-
-                  if (value < imageHeightMin) { return false; }
-
-                  if($(this).data('lastval') != value){
-                      $(this).data('lastval', value);
-                      clearTimeout(timerid);
-                      //change action
-                      timerid = setTimeout(function() {
-                        $instance.justifiedGallery({rowHeight: value});
-                        if (environment === 'development') {
-                          logText = 'Gallery on ID ' +galleryId+ ' changed rowHeight to: ' +value;
-                          logger.info(logText);
-                        }
-                      }, kbdDelay);
-                  };
-                  e.stopPropagation();
-                });
-
-                $('input[name="rowHeightMax"]').on('input', function (e) {
-                  var value = $(this).val();
-
-                  if($(this).data('lastval') != value){
-                      $(this).data('lastval', value);
-                      clearTimeout(timerid);
-                      //change action
-                      timerid = setTimeout(function() {
-                        $instance.justifiedGallery({maxRowHeight: value});
-                        if(environment === 'development') {
-                          logText = 'Gallery on ID ' +galleryId+ ' changed maxRowHeight to: ' +value;
-                          logger.info(logText);
-                        }
-                      }, kbdDelay);
-                  };
-                  e.stopPropagation();
-                });
-
-                $('input[name="margins"]').on('input', function (e) {
-                  var value = $(this).val();
-
-                  if($(this).data('lastval') != value){
-                      $(this).data('lastval', value);
-                      clearTimeout(timerid);
-                      //change action
-                      timerid = setTimeout(function() {
-                        $instance.justifiedGallery({margins: value});
-                        if(environment === 'development') {
-                          logText = 'Gallery on ID ' +galleryId+ ' changed margins to: ' +value;
-                          logger.info(logText);
-                        }
-                      }, kbdDelay);
-                  };
-                  e.stopPropagation();
-                });
-
-                $('input[name="border"]').on('input', function (e) {
-                  var value = $(this).val();
-
-                  if($(this).data('lastval') != value){
-                      $(this).data('lastval', value);
-                      clearTimeout(timerid);
-                      //change action
-                      timerid = setTimeout(function() {
-                        $instance.justifiedGallery({border: value});
-                        if(environment === 'development') {
-                          logText = 'Gallery on ID ' +galleryId+ ' changed padding to: ' +value;
-                          logger.info(logText);
-                        }
-                      }, kbdDelay);
-                  };
-                  e.stopPropagation();
-                });
-
-                $('input:checkbox[name="captions"]').on('click', function (e) {
-                  var value = $(this).is(':checked');
-
-                  $instance.justifiedGallery({captions: value});
-                  if(environment === 'development') {
-                    logText = 'Gallery on ID ' +galleryId+ ' changed captions to: ' +value;
-                    logger.info(logText);
-                  }
-                  e.stopPropagation();
-                });
-
-                $('input:checkbox[name="random"]').on('click', function (e) {
-                  var value = $(this).is(':checked');
-
-                  $instance.justifiedGallery({randomize: value});
-                  if(environment === 'development') {
-                    logText = 'Gallery on ID ' +galleryId+ ' changed randomize to: ' +value;
-                    logger.info(logText);
-                  }
-                  e.stopPropagation();
-                });
-
-                $('input:checkbox[name="justify_last_row"]').on('click', function (e) {
-                  var value = $(this).is(':checked');
-
-                  if (value == true) {
-                    value = 'justify';
-                    $instance.justifiedGallery({lastRow: value});
-                  } else {
-                    value = 'nojustify';
-                    $instance.justifiedGallery({lastRow: value});
-                  }
-                  if(environment === 'development') {
-                    logText = 'Gallery on ID ' +galleryId+ ' changed lastRow to: ' +value;
-                    logger.info(logText);
-                  }
-                  e.stopPropagation();
-                });
-
-                $('input:checkbox[name="hide_last_row"]').on('click', function (e) {
-                  var value = $(this).is(':checked');
-
-                  if (value == true) {
-                    value = 'hide';
-                    $instance.justifiedGallery({lastRow: value});
-                  } else {
-                    value = 'nojustify';
-                    $instance.justifiedGallery({lastRow: value});
-                  }
-                  if(environment === 'development') {
-                    logText = 'Gallery on ID ' +galleryId+ ' changed lastRow to: ' +value;
-                    logger.info(logText);
-                  }
-                  e.stopPropagation();
-                });
-
-                $('#jg-customizer-form button[name="reset-defaults"]').on('click', function (e) {
-
-                  $('#rowHeight').val(customizerOptions.gallery_settings.rowHeight);
-                  $('#rowHeightMax').val(customizerOptions.gallery_settings.maxRowHeight);
-                  $('#margins').val(customizerOptions.gallery_settings.margins);
-                  $('#border').val(customizerOptions.gallery_settings.border);
-                  $('input:checkbox[name="captions"]').val('on').filter('[value="on"]').prop('checked', customizerOptions.gallery_settings.captions);
-                  $('input:checkbox[name="random"]').val('off').filter('[value="off"]').prop('checked', customizerOptions.gallery_settings.randomize);
-                  $('input:checkbox[name="justify_last_row"]').val('on').filter('[value="on"]').prop('checked', customizerOptions.gallery_settings.justifyLastRow);
-                  $('input:checkbox[name="hide_last_row"]').val('off').filter('[value="off"]').prop('checked', customizerOptions.gallery_settings.hideLastRow);
-
-                  $instance.justifiedGallery({
-                    rowHeight:          customizerOptions.gallery_settings.rowHeight,
-                    maxRowHeight:       customizerOptions.gallery_settings.maxRowHeight,
-                    lastRow:            customizerOptions.gallery_settings.lastRow,
-                    margins:            customizerOptions.gallery_settings.margins,
-                    border:             customizerOptions.gallery_settings.border,
-                    randomize:          customizerOptions.gallery_settings.randomize,
-                    sort:               customizerOptions.gallery_settings.sort,
-                    refreshTime:        customizerOptions.gallery_settings.refreshTime,
-                    refreshSensitivity: customizerOptions.gallery_settings.refreshSensitivity,
-                    justifyThreshold:   customizerOptions.gallery_settings.justifyThreshold,
-                    captions:           customizerOptions.gallery_settings.captions
-                  });
-
-                  if(environment === 'development') {
-                    logText = 'Gallery on ID ' +galleryId+ ' reset to default values';
-                    logger.info(logText);
-                  }
-                  e.stopPropagation();
-                });
-
-              } // END form events
-
-              // See: https://jsfiddle.net/prathviraj080/vbbbw46a/1/
-              $('button.drawer-toggler').click(function(){
-                $('button.drawer-toggler span.mdi').toggleClass('mdi-menu mdi-close');
-              });
-              $('button.drawer-toggler').click(function(){
-                $('button.drawer-toggler').toggleClass('fadeIn rotateIn');
+          // load gallery data
+          j1.adapter.jf_gallery.initialize(galleryOptions);
+
+          logger.info('initialize customizer ui|forms');
+
+          if ($formId.length) {
+            var timerid;
+
+            $('input[name="rowHeight"]').on('input', function (e) {
+              var value = $(this).val();
+
+              if (value < imageHeightMin) { return false; }
+
+              if($(this).data('lastval') != value){
+                  $(this).data('lastval', value);
+                  clearTimeout(timerid);
+                  //change action
+                  timerid = setTimeout(function() {
+                    $instance.justifiedGallery({rowHeight: value});
+                    if (environment === 'development') {
+                      logText = 'Gallery on ID ' +galleryId+ ' changed rowHeight to: ' +value;
+                      logger.info(logText);
+                    }
+                  }, kbdDelay);
+              };
+              e.stopPropagation();
+            });
+
+            $('input[name="rowHeightMax"]').on('input', function (e) {
+              var value = $(this).val();
+
+              if($(this).data('lastval') != value){
+                  $(this).data('lastval', value);
+                  clearTimeout(timerid);
+                  //change action
+                  timerid = setTimeout(function() {
+                    $instance.justifiedGallery({maxRowHeight: value});
+                    if(environment === 'development') {
+                      logText = 'Gallery on ID ' +galleryId+ ' changed maxRowHeight to: ' +value;
+                      logger.info(logText);
+                    }
+                  }, kbdDelay);
+              };
+              e.stopPropagation();
+            });
+
+            $('input[name="margins"]').on('input', function (e) {
+              var value = $(this).val();
+
+              if($(this).data('lastval') != value){
+                  $(this).data('lastval', value);
+                  clearTimeout(timerid);
+                  //change action
+                  timerid = setTimeout(function() {
+                    $instance.justifiedGallery({margins: value});
+                    if(environment === 'development') {
+                      logText = 'Gallery on ID ' +galleryId+ ' changed margins to: ' +value;
+                      logger.info(logText);
+                    }
+                  }, kbdDelay);
+              };
+              e.stopPropagation();
+            });
+
+            $('input[name="border"]').on('input', function (e) {
+              var value = $(this).val();
+
+              if($(this).data('lastval') != value){
+                  $(this).data('lastval', value);
+                  clearTimeout(timerid);
+                  //change action
+                  timerid = setTimeout(function() {
+                    $instance.justifiedGallery({border: value});
+                    if(environment === 'development') {
+                      logText = 'Gallery on ID ' +galleryId+ ' changed padding to: ' +value;
+                      logger.info(logText);
+                    }
+                  }, kbdDelay);
+              };
+              e.stopPropagation();
+            });
+
+            $('input:checkbox[name="captions"]').on('click', function (e) {
+              var value = $(this).is(':checked');
+
+              $instance.justifiedGallery({captions: value});
+              if(environment === 'development') {
+                logText = 'Gallery on ID ' +galleryId+ ' changed captions to: ' +value;
+                logger.info(logText);
+              }
+              e.stopPropagation();
+            });
+
+            $('input:checkbox[name="random"]').on('click', function (e) {
+              var value = $(this).is(':checked');
+
+              $instance.justifiedGallery({randomize: value});
+              if(environment === 'development') {
+                logText = 'Gallery on ID ' +galleryId+ ' changed randomize to: ' +value;
+                logger.info(logText);
+              }
+              e.stopPropagation();
+            });
+
+            $('input:checkbox[name="justify_last_row"]').on('click', function (e) {
+              var value = $(this).is(':checked');
+
+              if (value == true) {
+                value = 'justify';
+                $instance.justifiedGallery({lastRow: value});
+              } else {
+                value = 'nojustify';
+                $instance.justifiedGallery({lastRow: value});
+              }
+              if(environment === 'development') {
+                logText = 'Gallery on ID ' +galleryId+ ' changed lastRow to: ' +value;
+                logger.info(logText);
+              }
+              e.stopPropagation();
+            });
+
+            $('input:checkbox[name="hide_last_row"]').on('click', function (e) {
+              var value = $(this).is(':checked');
+
+              if (value == true) {
+                value = 'hide';
+                $instance.justifiedGallery({lastRow: value});
+              } else {
+                value = 'nojustify';
+                $instance.justifiedGallery({lastRow: value});
+              }
+              if(environment === 'development') {
+                logText = 'Gallery on ID ' +galleryId+ ' changed lastRow to: ' +value;
+                logger.info(logText);
+              }
+              e.stopPropagation();
+            });
+
+            $('#jg-customizer-form button[name="reset-defaults"]').on('click', function (e) {
+
+              $('#rowHeight').val(customizerOptions.gallery_settings.rowHeight);
+              $('#rowHeightMax').val(customizerOptions.gallery_settings.maxRowHeight);
+              $('#margins').val(customizerOptions.gallery_settings.margins);
+              $('#border').val(customizerOptions.gallery_settings.border);
+              $('input:checkbox[name="captions"]').val('on').filter('[value="on"]').prop('checked', customizerOptions.gallery_settings.captions);
+              $('input:checkbox[name="random"]').val('off').filter('[value="off"]').prop('checked', customizerOptions.gallery_settings.randomize);
+              $('input:checkbox[name="justify_last_row"]').val('on').filter('[value="on"]').prop('checked', customizerOptions.gallery_settings.justifyLastRow);
+              $('input:checkbox[name="hide_last_row"]').val('off').filter('[value="off"]').prop('checked', customizerOptions.gallery_settings.hideLastRow);
+
+              $instance.justifiedGallery({
+                rowHeight:          customizerOptions.gallery_settings.rowHeight,
+                maxRowHeight:       customizerOptions.gallery_settings.maxRowHeight,
+                lastRow:            customizerOptions.gallery_settings.lastRow,
+                margins:            customizerOptions.gallery_settings.margins,
+                border:             customizerOptions.gallery_settings.border,
+                randomize:          customizerOptions.gallery_settings.randomize,
+                sort:               customizerOptions.gallery_settings.sort,
+                refreshTime:        customizerOptions.gallery_settings.refreshTime,
+                refreshSensitivity: customizerOptions.gallery_settings.refreshSensitivity,
+                justifyThreshold:   customizerOptions.gallery_settings.justifyThreshold,
+                captions:           customizerOptions.gallery_settings.captions
               });
 
-              _this.setState('finished');
-              logger.info('state: ' + _this.getState());
-              logger.info('initializing module finished');
-              clearInterval(dependencies_met_data_loaded);
-
-              return true;
-            }
-          }, 25);
-
-        } // END if success
-      })
-      .catch(function(error) {
-        logger.error('loading html data failed at: j1.xhrData');
-        return false;
-      }); // End thenable
-
+              if(environment === 'development') {
+                logText = 'Gallery on ID ' +galleryId+ ' reset to default values';
+                logger.info(logText);
+              }
+              e.stopPropagation();
+            });
+
+          } // END form events
+
+          // See: https://jsfiddle.net/prathviraj080/vbbbw46a/1/
+          $('button.drawer-toggler').click(function(){
+            $('button.drawer-toggler span.mdi').toggleClass('mdi-menu mdi-close');
+          });
+          $('button.drawer-toggler').click(function(){
+            $('button.drawer-toggler').toggleClass('fadeIn rotateIn');
+          });
+
+          _this.setState('finished');
+          logger.info('state: ' + _this.getState());
+          logger.info('initializing module finished');
+          logger.info('met dependencies for: xhrData');
+          clearInterval(dependencies_met_data_loaded);
+        } // END dependencies_met_data_loaded
+      }, 25);
     }, // END init
 
     // -------------------------------------------------------------------------
@@ -417,20 +389,20 @@ j1.adapter['gallery_customizer'] = (function (j1, window) {
     }, // END messageHandler
 
     // -------------------------------------------------------------------------
-    // setState
-    // Set the current (processing) state of the module
+    // setState()
+    // Sets the current (processing) state of the module
     // -------------------------------------------------------------------------
     setState: function (stat) {
-      j1.adapter.gallery_customizer.state = stat;
+      _this.state = stat;
     }, // END setState
 
     // -------------------------------------------------------------------------
-    // getState
+    // getState()
     // Returns the current (processing) state of the module
     // -------------------------------------------------------------------------
     getState: function () {
-      return j1.adapter.gallery_customizer.state;
-    } // END state
+      return _this.state;
+    } // END getState
 
   }; // END return
 })(j1, window);