Merge remote-tracking branch 'origin/dev-nouislider' into dev

# Conflicts:
#	js/tabler.js

build/rollup.config.js

@@ -41,6 +41,7 @@ module.exports = {
 	input: {
 		tabler: path.resolve(__dirname, '../js/tabler.js'),
 		// 'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
+		'tabler-range-sliders': path.resolve(__dirname, '../js/tabler-range-sliders.js')
 	},
 	output: {
 		banner,

dist/js/tabler-charts.js

@@ -0,0 +1,185 @@
+/*!
+  * Tabler v0.9.0 (https://tabler.io)
+  * Copyright 2018-2020 codecalm
+  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+  */
+'use strict';
+
+(function ($) {
+  $(document).ready(function () {
+    $().peity &&
+    $('[data-spark]').each(function () {
+      const $this = $(this),
+        data = $this.attr('data-spark'),
+        color = $this.attr('data-spark-color') || 'blue',
+        type = $this.attr('data-spark-type') || 'line';
+
+      const $div = $('<div />').html(data);
+      $this.append($div);
+
+      let strokeColor = tabler.colors[color],
+        fillColor = tabler.colors[color];
+
+      if (type === 'donut' || type === 'pie') {
+        fillColor = [fillColor, tabler.hexToRgbA(fillColor, 0.1)];
+      } else if (type === 'bar') {
+        fillColor = [fillColor];
+      } else if (type === 'line') {
+        fillColor = tabler.hexToRgbA(fillColor, 0.1);
+      }
+
+      $div.peity(type, {
+        width: $this.width(),
+        height: $this.height(),
+        // max: 100,
+        // min: 0,
+        stroke: strokeColor,
+        strokeWidth: 2,
+        fill: fillColor,
+        padding: 0.2,
+        innerRadius: type === 'donut' ? 17 : 0,
+      });
+    });
+  });
+})(jQuery);
+
+/*
+charts default configuration
+ */
+if (window.Apex) {
+  const borderColor = 'rgba(0, 0, 0, 0.09)';
+  const mutedColor = '#888e9a';
+
+  window.Apex = {
+    chart: {
+      fontFamily: 'inherit',
+      foreColor: 'currentColor',
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+      animations: {
+        enabled: false,
+      },
+    },
+
+    grid: {
+      show: false,
+      position: 'back',
+      borderColor: borderColor,
+      padding: {
+        right: 0,
+        left: 0,
+        bottom: 0,
+        top: 0,
+      },
+    },
+
+    dataLabels: {
+      enabled: false,
+      dropShadow: {
+        enabled: false,
+      },
+    },
+
+    plotOptions: {
+      pie: {
+        customScale: 1,
+        expandOnClick: false,
+        dataLabels: {
+          minAngleToShowLabel: 10,
+        },
+        donut: {
+          size: '80%'
+        }
+      },
+    },
+
+    stroke: {
+      width: 2,
+      curve: 'smooth',
+      lineCap: "round",
+    },
+
+    fill: {
+      type: 'solid',
+      opacity: 1,
+    },
+
+    markers: {
+      size: 0,
+      strokeWidth: 1,
+      radius: 2,
+      hover: {
+        size: 4,
+      },
+    },
+
+    legend: {
+      show: true,
+      fontSize: '14px',
+      markers: {
+        width: 8,
+        height: 8,
+      },
+      itemMargin: {
+        horizontal: 0,
+        vertical: 8,
+      },
+    },
+
+    title: {
+      margin: 0,
+      floating: true,
+      offsetX: 10,
+      style: {
+        fontSize: '18px',
+      },
+    },
+
+    subtitle: {
+      margin: 0,
+    },
+
+    tooltip: {
+      fillSeriesColor: false,
+    },
+
+    xaxis: {
+      labels: {
+        style: {
+          colors: mutedColor,
+          fontSize: '12px',
+        },
+        datetimeFormatter: {
+          year: 'yyyy',
+          month: 'MMM \'yy',
+          day: 'd MMM',
+          hour: 'HH:mm'
+        }
+      },
+      tooltip: {
+        enabled: false,
+      },
+      axisBorder: {
+        color: borderColor,
+        height: 0,
+      },
+      axisTicks: {
+        show: true,
+        height: 4,
+        color: borderColor,
+      },
+    },
+
+    yaxis: {
+      show: false,
+      labels: {
+        show: false,
+      },
+    },
+  };
+}
+//# sourceMappingURL=tabler-charts.js.map

dist/js/tabler.js

@@ -0,0 +1,186 @@
+/*!
+  * Tabler v0.9.0 (https://tabler.io)
+  * Copyright 2018-2020 codecalm
+  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+  */
+'use strict';
+
+const tabler = {
+  colorVariation: function(color, variation) {
+    const colorValue = this.colors[color];
+
+    if (colorValue) {
+      switch (variation) {
+        case 'light':
+          return this.mixColors(colorValue, '#ffffff', 70);
+        case 'lighten':
+          return this.mixColors(colorValue, '#ffffff', 30);
+        case 'lightest':
+          return this.mixColors(colorValue, '#ffffff', 10);
+        case 'dark':
+          return this.mixColors(colorValue, '#000000', 80);
+        case 'darken':
+          return this.mixColors(colorValue, '#000000', 40);
+        case 'darkest':
+          return this.mixColors(colorValue, '#000000', 20);
+      }
+
+      return colorValue;
+    }
+
+    throw new Error('Wrong color: ' + color);
+  },
+
+  hexToRgbA: function(hex, opacity) {
+    let c;
+
+    opacity = opacity || 1;
+
+    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+      c = hex.substring(1).split('');
+      if (c.length === 3) {
+        c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+      }
+      c = '0x' + c.join('');
+      return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + opacity + ')';
+    }
+    throw new Error('Bad Hex');
+  },
+
+  mixColors: function(color_1, color_2, weight) {
+    color_1 = color_1.substr(1);
+    color_2 = color_2.substr(1);
+
+    function d2h(d) {
+      return d.toString(16);
+    }
+
+    function h2d(h) {
+      return parseInt(h, 16);
+    }
+
+    weight = typeof weight !== 'undefined' ? weight : 50;
+
+    let color = '#';
+
+    for (let i = 0; i <= 5; i += 2) {
+      let v1 = h2d(color_1.substr(i, 2)),
+        v2 = h2d(color_2.substr(i, 2));
+
+      let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
+
+      while (val.length < 2) {
+        val = '0' + val;
+      }
+
+      color += val;
+    }
+
+    return color;
+  },
+
+  colors: (window.tabler_colors || []),
+
+  toggleFullscreen: function(elem) {
+    elem = elem || document.documentElement;
+    if (
+      !document.fullscreenElement &&
+      !document.mozFullScreenElement &&
+      !document.webkitFullscreenElement &&
+      !document.msFullscreenElement
+    ) {
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.msRequestFullscreen) {
+        elem.msRequestFullscreen();
+      } else if (elem.mozRequestFullScreen) {
+        elem.mozRequestFullScreen();
+      } else if (elem.webkitRequestFullscreen) {
+        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+      }
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    }
+  },
+};
+
+$(document).ready(function() {
+  const $body = $('body');
+
+  $body.on('click', '[data-toggle="menubar"]', function(e) {
+    $body.toggleClass('aside-visible');
+
+    e.preventDefault();
+    return false;
+  });
+
+  // $('[data-toggle="tooltip"]').tooltip();
+  // $('[data-toggle="popover"]').popover();
+
+  /*
+	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"));
+    }
+		noUiSlider.create(sliders[i],dataSlider);
+	}
+
+  /*
+  Autosize plugin
+   */
+  if (window.autosize) {
+    (function() {
+      const elements = document.querySelectorAll('[data-toggle="autosize"]');
+
+      if (elements.length) {
+        elements.forEach(function(element) {
+          autosize(element);
+        });
+      }
+    })();
+  }
+
+  /*
+  Imask plugin
+   */
+  if (window.IMask) {
+    (function() {
+      const $elem = $('[data-mask]');
+
+      if ($elem) {
+        $elem.each(function() {
+          IMask($(this).get(0), {
+            mask: $(this).attr('data-mask'),
+            lazy: $(this).attr('data-mask-visible') === 'true',
+          });
+        });
+      }
+    })();
+  }
+
+  /**
+   * Seelectize plugin
+   */
+  if (jQuery && jQuery().selectize) {
+    const $elem = $('[data-selectize]');
+
+    if ($elem) {
+      $elem.selectize();
+    }
+  }
+});
+
+window.tabler = tabler;
+//# sourceMappingURL=tabler.js.map

js/tabler-range-sliders.js

@@ -0,0 +1,12 @@
+/* Demo only */
+
+$(document).ready(function() {
+
+    /* Sliders value */
+    let slidersText = document.querySelectorAll('[demo-slider]');
+    for(let i = 0;i<slidersText.length;i++){
+        window[slidersText[i].getAttribute("demo-slider")].on('update',function(values){
+            slidersText[i].innerHTML = values.join(' | ');
+        })
+    }
+});

js/tabler.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import {CountUp} from "countup.js";
+import noUiSlider from "nouislider";
 import {Dropdown, Tooltip, Popover} from 'bootstrap';
 import 'popper.js';
 
@@ -33,6 +34,21 @@ 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
 	*/

package.json

@@ -119,6 +119,7 @@
     "imask": "6.0.1",
     "jquery": "3.4.1",
     "jqvmap": "1.5.1",
+    "nouislider": "14.1.0",
     "peity": "3.3.0",
     "popper.js": "1.16.1",
     "selectize": "0.12.6"

pages/_data/libs.json

@@ -26,7 +26,8 @@
       "daterangepicker/moment.min.js",
       "daterangepicker/daterangepicker.js"
     ],
-    "countup": "countup.js/dist/countUp.min.js"
+    "countup": "countup.js/dist/countUp.min.js",
+    "nouislider": "nouislider/distribute/nouislider.min.js"
   },
   "css": {
     "jqvmap": "jqvmap/dist/jqvmap.min.css",
@@ -37,6 +38,7 @@
       "@fullcalendar/timegrid/main.min.css",
       "@fullcalendar/list/main.min.css"
     ],
-    "daterangepicker": "daterangepicker/daterangepicker.css"
+    "daterangepicker": "daterangepicker/daterangepicker.css",
+    "nouislider": "nouislider/distribute/nouislider.min.css"
   }
 }

pages/_data/menu.yml

@@ -182,6 +182,9 @@ docs:
     payments:
       title: Payments
       url: docs/payments.html
+    range-slider:
+      title: Range slider
+      url: docs/range-slider.html
     ribbons: 
       title: Ribbons
       badge: New

pages/_docs/range-slider.md

@@ -0,0 +1,144 @@
+---
+title: Range slider
+menu: docs.range-slider
+---
+
+All options and features can be found [**here**](https://refreshless.com/nouislider/).
+
+### Basic range slider
+
+{% example %}
+    <div data-slider='{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'></div>
+    <p demo-slider="slider0"></p>
+{% endexample %}
+
+That's how values are displayed:
+
+```js
+/* Demo only */
+
+$(document).ready(function() {
+    /* Sliders value */
+    let slidersText = document.querySelectorAll('[demo-slider]');
+    for(let i = 0;i<slidersText.length;i++){
+        window[slidersText[i].getAttribute("demo-slider")].on('update',function(values){
+            slidersText[i].innerHTML = values.join(' | ');
+        })
+    }
+});
+```
+
+## Basic options
+
+Basic range slider options.
+
+### js-name
+
+By setting `js-name` you can access slider in your js code. **Remember to use it in your code after the page has loaded.**
+```js
+/* Example */
+
+window.onload = slider;
+
+function slider(){
+    let sliderText = document.getElementById('sliderText');
+    slider1.on('update',function(values,handle){
+        sliderText.innerHTML = values[handle];
+    });
+}
+```
+
+{% example %}
+    <div data-slider='{"js-name": "slider1","start": 50,"range": {"min": 0,"max": 100}}'></div>
+    <p id="sliderText" demo-slider="slider1"></p>
+{% endexample %}
+
+### start
+
+The `start` option sets the number of handles and corresponding start positions.
+
+The `start` option uses the slider's `'format'` option to decode the input. Number input will be cast to string and decoded.
+
+{% example %}
+    <div data-slider='{"js-name": "slider2","start": 30,"range": {"min": 0,"max": 100}}'></div>
+    <p demo-slider="slider2"></p>
+    <div data-slider='{"js-name": "slider3","start": [40,65],"range": {"min": 0,"max": 100}}'></div>
+    <p demo-slider="slider3"></p>
+    <div data-slider='{"js-name": "slider4","start": [25,50,75],"range": {"min": 0,"max": 100}}'></div>
+    <p demo-slider="slider4"></p>
+{% endexample %}
+
+### range
+
+All values on the slider are part of a range. The range has a minimum and maximum value. **The minimum value cannot be equal to the maximum value.**
+
+{% example %}
+    <div data-slider='{"js-name": "slider5","start": 500,"range": {"min": -2000,"max": 10000}}'></div>
+    <p demo-slider="slider5"></p>
+    <div data-slider='{"js-name": "slider6","start": [-250,800],"range": {"min": -500,"max": 1000}}'></div>
+    <p demo-slider="slider6"></p>
+    <div data-slider='{"js-name": "slider7","start": [0.1,0.4,0.9],"range": {"min": 0.1,"max": 1}}'></div>
+    <p demo-slider="slider7"></p>
+{% endexample %}
+
+### step
+
+By default, the slider slides fluently. In order to make the handles jump between intervals, you can use the step option.
+
+{% example %}
+    <div data-slider='{"js-name": "slider8","start": 5000,"range": {"min": 1000,"max": 10000},"step": 1000}'></div>
+    <p demo-slider="slider8"></p>
+    <div data-slider='{"js-name": "slider9","start": 500,"range": {"min": 100,"max": 1000},"step": 125}'></div>
+    <p demo-slider="slider9"></p>
+    <div data-slider='{"js-name": "slider10","start": 50,"range": {"min": 10,"max": 100},"step": 5}'></div>
+    <p demo-slider="slider10"></p>
+{% endexample %}
+
+### connect
+
+The connect option can be used to control the bar between the handles or the edges of the slider.
+
+If you are using one handle, set the value to either `'upper'` or `'lower'`.
+For sliders with 2 or more handles, pass an array with a boolean for every connecting element, including the edges of the slider. The length of this array must match the handle count + 1.
+
+Setting true sets the bars between the handles, but not between the handles and the sliders edges.
+
+{% example %}
+    <div data-slider='{"js-name": "slider11","start": 8000,"connect": "lower","range": {"min": [2000],"max": [20000]}}'></div>
+    <p demo-slider="slider11"></p>
+    <div data-slider='{"js-name": "slider12","start": 8000,"connect": "upper","range": {"min": [2000],"max": [20000]}}'></div>
+    <p demo-slider="slider12"></p>
+    <div data-slider='{"js-name": "slider13","start": [4000, 8000, 12000, 16000],"connect": [false, true, true, false, true],"range": {"min": [2000],"max": [20000]}}'></div>
+    <p demo-slider="slider13"></p>
+{% endexample %}
+
+### margin
+
+When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'. This option is only available on linear sliders.
+
+{% example %}
+    <div data-slider='{"js-name": "slider14","start": [20,80],"range": {"min": 0,"max": 100},"margin":30}'></div>
+    <p demo-slider="slider14"></p>
+    <div data-slider='{"js-name": "slider15","start": [20,80],"range": {"min": 0,"max": 100},"margin":50}'></div>
+    <p demo-slider="slider15"></p>
+{% endexample %}
+
+### limit
+
+The `limit` option is the oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the `limit` option can only be used on linear sliders.
+
+{% example %}
+    <div data-slider='{"js-name": "slider16","start": [10,120],"connect":true,"range": {"min": 0,"max": 100},"limit":40,"behaviour":"drag"}'></div>
+    <p demo-slider="slider16"></p>
+{% endexample %}
+
+### padding
+
+Padding limits how close to the slider edges handles can be.
+
+{% example %}
+    <div data-slider='{"js-name": "slider17","start": [20,80],"range": {"min": 0,"max": 100},"padding":[10,15]}'></div>
+    <p demo-slider="slider17"></p>
+{% endexample %}
+
+That's only the basic features and options of range slider. More possibilities can be found [**here**](https://refreshless.com/nouislider/).

pages/_includes/layout/js.html

@@ -10,3 +10,4 @@
 <!-- Tabler Core -->
 
 <script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
+<script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler-range-sliders{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>

pages/tmp.html

@@ -58,3 +58,13 @@ menu: a.b.c
 		</div>
 	</div>
 </div>
+<div class="row">
+   <div class="col-md-6">
+      <div class="card">
+         <div class="card-body">
+            <div data-slider='{"start": [20, 80],"connect": true,"range": {"min": 0,"max": 100}}'></div>
+         </div>
+      </div>
+   </div>
+</div>
+

scss/tabler.scss

@@ -42,6 +42,7 @@
 @import "ui/login";
 @import "ui/modals";
 @import "ui/nav";
+@import "ui/noUiSlider";
 @import "ui/stars";
 @import "ui/pagination";
 @import "ui/popovers";