nouislider plugin, form improvements

js/tabler.js

@@ -1,18 +1,15 @@
 'use strict';
 
-import {CountUp} from "countup.js";
-import noUiSlider from "nouislider";
 import {Dropdown, Tooltip, Popover} from 'bootstrap';
 import 'popper.js';
+import {CountUp} from "countup.js";
 
-
-(function() {
+(function () {
 	/**
 	 * Dropdown
 	 */
 	var dropdownElementList = [].slice.call(document.querySelectorAll('[data-toggle="dropdown"]'))
 	dropdownElementList.map(function (dropdownToggleEl) {
-		console.log('dropdownToggleEl', dropdownToggleEl);
 		return new Dropdown(dropdownToggleEl, {})
 	});
 
@@ -34,21 +31,6 @@ import 'popper.js';
 		})
 	});
 
-	/*
-	NoUiSlider
-	*/
-	let sliders = document.querySelectorAll("[data-slider]");
-		for (let i = 0; i < sliders.length; i++) {
-			let dataSlider;
-			if (sliders[i].getAttribute("data-slider")) {
-				dataSlider = JSON.parse(sliders[i].getAttribute("data-slider"));
-		}
-		let slider = noUiSlider.create(sliders[i],dataSlider);
-		if(dataSlider['js-name']){
-			window[dataSlider['js-name']] = slider;
-		}
-	}
-
 	/*
 	CountUp
 	*/

pages/_includes/forms/form-elements-6.html

@@ -19,7 +19,7 @@
 <div class="mb-3">
 	<label class="form-label">Form control rounded</label>
 	<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
-	{% include ui/form/input-icon.html class="form-control-rounded" %}
+	{% include ui/form/input-icon.html input-class="form-control-rounded" %}
 </div>
 
 <div class="mb-3">

pages/_includes/parts/input-range.html

@@ -1,4 +1,8 @@
 <div class="mb-3">
-   <label class="form-label">Range input</label>
-   <input type="range" class="form-range" min="0" max="10" step="1">
+	<label class="form-label">Range input</label>
+
+	{% include ui/slider.html value=40 %}
+	{% include ui/slider.html value="20" id="simple" connect=true %}
+	{% include ui/slider.html value="60,90" id="connect" %}
+	{% include ui/slider.html value="40" id="color" class="text-green" connect=true %}
 </div>

pages/_includes/ui/form/input-icon.html

@@ -16,7 +16,7 @@
 		{{ addon }}
 	{% endif %}
 
-	<input type="text" class="form-control{% if include.light %} form-control-light{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}">
+	<input type="text" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}">
 
 	{% unless include.prepend %}
 		{{ addon }}

pages/_includes/ui/form/selectize.html

@@ -4,7 +4,10 @@
 <select name="{{ key }}" id="select-{{ key }}" class="form-select">
 	{% if options == 'people' %}
 		{% for person in site.data.people limit: 20 %}
-		<option value="{{ person.id }}" data-data='{"image": "{{ site.base }}/{{ person.photo }}"}'{% if person.id == value %} selected{% endif %}>{{ person.full_name }}</option>
+		{% capture avatar %}
+			{% include ui/avatar.html person=person class="avatar-xs rounded mr-2 ml-n1" %}
+		{% endcapture %}
+		<option value="{{ person.id }}" data-data='{"avatar": "{{ avatar | strip  | replace: '"', '\"' }}"}'{% if person.id == value %} selected{% endif %}>{{ person.full_name }}</option>
 		{% endfor %}
 
 	{% else %}
@@ -40,10 +43,10 @@
 		{% elsif key == "people" %}
 			render: {
 				option: function (data, escape) {
-					return '<div class="option"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url({{ site.base }}/' + data.image + ')"></span>' + escape(data.text) + '</div>';
+					return '<div class="option">' + data.avatar + '' + escape(data.text) + '</div>';
 				},
 				item: function (data, escape) {
-					return '<div class="d-flex align-items-center"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url({{ site.base }}/' + data.image + ')"></span>' + escape(data.text) + '</div>';
+					return '<div class="d-flex align-items-center">' + data.avatar + '' + escape(data.text) + '</div>';
 				}
 			}
 		{% endif %}

pages/_includes/ui/form/textarea-autosize.html

@@ -4,16 +4,14 @@
 
 {% capture_once scripts %}
 <script>
-	if (window.autosize) {
-		(function () {
-			const elements = document.querySelectorAll('[data-toggle="autosize"]');
+	(function () {
+		const elements = document.querySelectorAll('[data-toggle="autosize"]');
 
-			if (elements.length) {
-				elements.forEach(function (element) {
-					autosize(element);
-				});
-			}
-		})();
-	}
+		if (elements.length) {
+			elements.forEach(function (element) {
+				autosize(element);
+			});
+		}
+	})();
 </script>
 {% endcapture_once %}

pages/_includes/ui/slider.html

@@ -0,0 +1,34 @@
+{% assign min = include.min | default: 0 %}
+{% assign max = include.max | default: 100 %}
+{% assign step = include.step | default: 10 %}
+{% assign value = include.value | default: 50 %}
+{% assign id = include.id %}
+
+{% if id %}
+	{% append_lib nouislider %}
+
+	<div class="form-range mb-2{% if include.class %} {{ include.class }}{% endif %}" id="slider-{{ id }}" data-slider='{"start": {{ value }}, "connect": [true, false], "step": {{ step }}, "range": {"min": {{ min }}, "max": {{ max }}}}'></div>
+
+	{% capture_global scripts %}
+	<script>
+		// @formatter:off
+		{% assign value = value | split: ',' %}
+
+		{{ value }}
+		noUiSlider.create(document.getElementById('slider-{{ id }}'), {
+			start: {% if value.size > 1 %}[{{ value | join: ', ' }}]{% else %}{{ value }}{% endif %},
+			{% if value.size > 1 or include.connect %}
+			connect: [{% for i in (2..value.size) %}{% cycle 'false', 'true' %}, {% endfor %}true, false],
+			{% endif %}
+			step: {{ step }},
+			range: {
+				min: {{ min }},
+				max: {{ max }}
+			}
+		});
+		// @formatter:on
+	</script>
+	{% endcapture_global %}
+{% else %}
+	<input type="range" class="form-range mb-2{% if include.class %} {{ include.class }}{% endif %}" value="{{ value }}" min="{{ min }}" max="{{ max }}" step="{{ step }}">
+{% endif %}

scss/_variables.scss

@@ -403,6 +403,10 @@ $form-switch-width: 1.75rem !default;
 $form-switch-padding-left: $form-switch-width + .5rem !default;
 
 $form-range-track-height: .25rem !default;
+$form-range-track-bg: $light-mix !default;
+$form-range-thumb-border: 2px solid $white !default;
+$form-range-thumb-height: 1rem !default;
+$form-range-thumb-focus-box-shadow-width: .125rem !default;
 
 $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default;
 $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;

scss/tabler.scss

@@ -42,7 +42,6 @@
 @import "ui/login";
 @import "ui/modals";
 @import "ui/nav";
-@import "ui/noUiSlider";
 @import "ui/stars";
 @import "ui/pagination";
 @import "ui/popovers";
@@ -63,6 +62,7 @@
 @import "vendor/jqvmap";
 @import "vendor/apexcharts";
 @import "vendor/fullcalendar";
+@import "vendor/nouislider";
 
 @import "utils/border";
 @import "utils/background";

scss/vendor/_nouislider.scss

@@ -0,0 +1,49 @@
+.noUi-target {
+  border: 0;
+  box-shadow: none;
+  background: none;
+  border-radius: 0;
+  color: $form-range-thumb-bg;
+}
+
+.noUi-horizontal {
+  height: add($form-range-track-height, 1rem);
+  padding: .5rem 0;
+}
+
+.noUi-base {
+  background: $form-range-track-bg;
+  border-radius: $form-range-track-border-radius;
+}
+
+.noUi-handle {
+  width: $form-range-thumb-width;
+  height: $form-range-thumb-height;
+  border: $form-range-thumb-border;
+  box-shadow: $form-range-thumb-box-shadow;
+  border-radius: $form-range-thumb-border-radius;
+  background: currentColor;
+  outline: 0;
+
+  &:before,
+  &:after {
+    content: none;
+  }
+
+  .noUi-horizontal & {
+    width: $form-range-thumb-width;
+    height: $form-range-thumb-height;
+    top: (-$form-range-thumb-height / 2);
+    right: (-$form-range-thumb-height / 2);
+    margin: 1px 1px 0 0;
+  }
+
+  &.noUi-active,
+  &:focus {
+    box-shadow: $form-range-thumb-focus-box-shadow;
+  }
+}
+
+.noUi-connect {
+  background: currentColor;
+}