assets/themes/j1/adapter/js/rangeSlider.js in j1-template-2022.1.0 vs assets/themes/j1/adapter/js/rangeSlider.js in j1-template-2022.1.1
- old
+ new
@@ -82,10 +82,11 @@
------------------------------------------------------------------------------ {% endcomment %}
var environment = '{{environment}}';
var moduleOptions = {};
var instances = [];
var frontmatterOptions;
+ var elms;
var _this;
var logger;
var logText;
// ---------------------------------------------------------------------------
@@ -118,103 +119,116 @@
// Global variable settings
// -----------------------------------------------------------------------
_this = j1.adapter.rangeSlider;
logger = log4javascript.getLogger('j1.adapter.rangeSlider');
-
- // initialize state flag
- _this.setState('started');
- logger.info('\n' + 'state: ' + _this.getState());
- logger.info('\n' + 'module is being initialized');
-
// create settings object from frontmatterOptions
frontmatterOptions = options != null ? $.extend({}, options) : {};
moduleOptions = $.extend({}, {{range_slider_options | replace: 'nil', 'null' | replace: '=>', ':' }});
if (typeof frontmatterOptions !== 'undefined') {
moduleOptions = j1.mergeData(moduleOptions, frontmatterOptions);
}
var dependencies_met_j1_finished = setInterval(function() {
if (j1.getState() == 'finished') {
- var elms = document.querySelectorAll('.range-slider');
- // -------------------------------------------------------------------
- // slider initializer
- // -------------------------------------------------------------------
- var log_text = '\n' + 'rangeSliders are being initialized';
- logger.info(log_text);
+ logger.info('\n' + 'module is being initialized');
+
+ // initialize state flag
+ _this.setState('started');
+ logger.debug('\n' + 'state: ' + _this.getState());
- {% for item in range_slider_options.sliders %} {% if item.slider.enabled %}
- {% assign slider_id = item.slider.id %}
+ var dependencies_met_elms_loaded = setInterval(function() {
+ elms = document.querySelectorAll('.range-slider');
+ if (elms.length) {
+ logger.info('\n' + 'number of rangeSlider elements found: ' + elms.length);
- {% comment %} load default options
- ---------------------------------------------------------------------- {% endcomment %}
- {% assign start = range_slider_options.options.start %}
- {% assign connect = range_slider_options.options.connect %}
- {% assign step = range_slider_options.options.step %}
- {% assign orientation = range_slider_options.options.orientation %}
- {% 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 %}
+ // -------------------------------------------------------------------
+ // slider initializer
+ // -------------------------------------------------------------------
+ var log_text = '\n' + 'rangeSlider elements are being initialized';
+ logger.info(log_text);
- {% comment %} overload defaults by slider options
- -------------------------------------------------------------------- {% endcomment %}
- {% 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 %}
- {% if item.slider.options.range.min %} {% assign range_min = item.slider.options.range.min %} {% endif %}
- {% 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 %}
+ {% for item in range_slider_options.sliders %} {% if item.slider.enabled %}
+ {% assign slider_id = item.slider.id %}
- elms.forEach(function (elm) {
- var id = elm.id;
+ {% comment %} load default options
+ ---------------------------------------------------------------------- {% endcomment %}
+ {% assign start = range_slider_options.options.start %}
+ {% assign connect = range_slider_options.options.connect %}
+ {% assign step = range_slider_options.options.step %}
+ {% assign orientation = range_slider_options.options.orientation %}
+ {% 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 %}
- if (id === '{{slider_id}}') {
- // processing: {{slider_id}}
- //
- logger.info('configure range slider: ' + id);
+ {% comment %} overload defaults by slider options
+ -------------------------------------------------------------------- {% endcomment %}
+ {% 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 %}
+ {% if item.slider.options.range.min %} {% assign range_min = item.slider.options.range.min %} {% endif %}
+ {% 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 %}
- var slider_{{slider_id}} = document.getElementById('{{slider_id}}');
- var instance = noUiSlider.create(slider_{{slider_id}}, {
- start: [{{start}}],
- connect: {{connect}},
- step: {{step}},
- orientation: '{{orientation}}',
- range: {
- 'min': {{range_min}},
- 'max': {{range_max}}
- },
- format: wNumb({
- decimals: {{format_decimals}}
- })
- });
+ elms.forEach(function (elm) {
+ var id = elm.id;
- var el = document.createElement("label");
- el.classList.add('range-slider-label');
- el.innerHTML = '{{label}}';
- var div = document.getElementById(id);
- insertAfter(el, div);
+ if (id === '{{slider_id}}') {
+ // processing rangeSlider: {{slider_id}}
+ //
+ logger.info('\n' + 'configure rangeSlider: ' + id);
- slider_{{slider_id}}.noUiSlider.on('update', function (values, handle) {
- var logger = log4javascript.getLogger('j1.adapter.rangeSlider.cbOnUpdate');
- logger.debug('current value: ' + values[handle]);
- });
- }
- instances.push(instance);
- }); // END forEach
+ var slider_{{slider_id}} = document.getElementById('{{slider_id}}');
+ var instance = noUiSlider.create(slider_{{slider_id}}, {
+ start: [{{start}}],
+ connect: {{connect}},
+ step: {{step}},
+ orientation: '{{orientation}}',
+ range: {
+ 'min': {{range_min}},
+ 'max': {{range_max}}
+ },
+ format: wNumb({
+ decimals: {{format_decimals}}
+ })
+ });
- {% assign item.slider.options = nil %}
- {% endif %} {% endfor %}
+ var el = document.createElement("label");
+ el.classList.add('range-slider-label');
+ el.innerHTML = '{{label}}';
+ var div = document.getElementById(id);
+ insertAfter(el, div);
- _this.setState('finished');
- logger.info('\n' + 'state: ' + _this.getState());
+ slider_{{slider_id}}.noUiSlider.on('update', function (values, handle) {
+ var logger = log4javascript.getLogger('j1.adapter.rangeSlider.cbOnUpdate');
+ logger.debug('\n' + 'current value: ' + values[handle]);
+ });
+ instances.push(instance);
+ }
+ }); // END forEach
+ {% assign item.slider.options = nil %}
+ {% endif %} {% endfor %}
+
+ if (instances.length) {
+ logger.info('\n' + 'number of rangeSlider instances configured: ' + instances.length);
+ _this.setState('finished');
+ logger.debug('\n' + 'state: ' + _this.getState());
+ logger.info('\n' + 'initializing module finished');
+ } else {
+ logger.error('\n' + 'no configured rangeSlider instances found');
+ logger.warning('\n' + 'initializing module failed');
+ }
+ } // ENF if elms
+ clearInterval(dependencies_met_elms_loaded);
+ }, 25);
clearInterval(dependencies_met_j1_finished);
} // END dependencies_met_j1_finished
}, 25);
}, // END init
@@ -225,10 +239,9 @@
// is clicked
// -------------------------------------------------------------------------
cbOnclick: function (event) {
var logger = log4javascript.getLogger('j1.adapter.rangeSlider.cbOnClick');
var itemEl = $(event.target).closest('li')[0];
-
// logText = '\n' + 'entered cbOnClick on id: ' + id;
// logger.info(logText);
return true;