rangeSlider.js in j1-template-2022.4.0

- old
+ new

@@ -91,14 +91,22 @@
 
   // ---------------------------------------------------------------------------
   // Helper functions
   // ---------------------------------------------------------------------------
 
-  function insertAfter(newNode, referenceNode) {
-      referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+  function prepend(newNode, referenceNode) {
+    referenceNode.parentNode.insertBefore(newNode, referenceNode);
   }
 
+  function append(newNode, referenceNode) {
+    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+  }
+
+  function insert(newNode, referenceNode) {
+    referenceNode.appendChild(newNode);
+  }
+
   // ---------------------------------------------------------------------------
   // Main object
   // ---------------------------------------------------------------------------
   return {
 
@@ -131,11 +139,11 @@
 
       var dependencies_met_j1_finished = setInterval(function() {
         if (j1.getState() == 'finished') {
 
           logger.info('\n' + 'module is being initialized');
-          
+
           // initialize state flag
           _this.setState('started');
           logger.debug('\n' + 'state: ' + _this.getState());
 
           var dependencies_met_elms_loaded = setInterval(function() {
@@ -161,12 +169,14 @@
                 {% assign range_min         = range_slider_options.options.range.min %}
                 {% assign range_max         = range_slider_options.options.range.max %}
                 {% assign format_decimals   = range_slider_options.options.format.decimals %}
                 {% assign cbOnUpdate        = range_slider_options.options.cbOnUpdate %}
 
+
                 {% comment %} overload defaults by slider options
-                -------------------------------------------------------------------- {% endcomment %}
+                ---------------------------------------------------------------- {% endcomment %}
+                {% if item.slider.options.title %}            {% assign title           = item.slider.options.title %}            {% endif %}
                 {% if item.slider.options.label %}            {% assign label           = item.slider.options.label %}            {% endif %}
                 {% if item.slider.options.start %}            {% assign start           = item.slider.options.start %}            {% endif %}
                 {% if item.slider.options.connect %}          {% assign connect         = item.slider.options.connect %}          {% endif %}
                 {% if item.slider.options.step %}             {% assign step            = item.slider.options.step %}             {% endif %}
                 {% if item.slider.options.orientation %}      {% assign orientation     = item.slider.options.orientation %}      {% endif %}
@@ -174,11 +184,12 @@
                 {% if item.slider.options.range.max %}        {% assign range_max       = item.slider.options.range.max %}        {% endif %}
                 {% if item.slider.options.format.decimals %}  {% assign format_decimals = item.slider.options.format.decimals %}  {% endif %}
                 {% if item.slider.options.cbOnUpdate %}       {% assign cbOnUpdate      = item.slider.options.cbOnUpdate %}       {% endif %}
 
                 elms.forEach(function (elm) {
-                  var id = elm.id;
+                  var id      = elm.id;
+                  var parent  = document.getElementById(id);
 
                   if (id === '{{slider_id}}') {
                     // processing rangeSlider: {{slider_id}}
                     //
                     logger.info('\n' + 'configure rangeSlider: ' + id);
@@ -196,14 +207,20 @@
                        format: wNumb({
                          decimals:  {{format_decimals}}
                        })
                     });
 
-                    var el = document.createElement("label");
-                    el.classList.add('range-slider-label');
-                    el.innerHTML = '{{label}}';
-                    var div = document.getElementById(id);
-                    insertAfter(el, div);
+                    if ('{{title}}'.length) {
+                      var title = document.createElement('div');
+                      title.classList.add('range-slider-title');
+                      title.innerHTML = '{{title}}';
+                      prepend(title, parent);
+                    }
+
+                    var label = document.createElement('label');
+                    label.classList.add('range-slider-label');
+                    label.innerHTML = '{{label}}';
+                    insert(label, parent);
 
                     slider_{{slider_id}}.noUiSlider.on('update', function (values, handle) {
                       var logger = log4javascript.getLogger('j1.adapter.rangeSlider.cbOnUpdate');
                       logger.debug('\n' + 'current value: ' + values[handle]);
                     });