From 3a6e7cb2ff4424396487baabf09c3120ff055d0a Mon Sep 17 00:00:00 2001 From: Anton Date: Sun, 19 Apr 2020 13:02:04 +0300 Subject: [PATCH] Update tabler.js --- js/tabler.js | 78 ++++++++++++++++++++++++++++++++-------------------- 1 file changed, 48 insertions(+), 30 deletions(-) diff --git a/js/tabler.js b/js/tabler.js index eff7ae7c3..bd6d7c233 100644 --- a/js/tabler.js +++ b/js/tabler.js @@ -1,60 +1,78 @@ 'use strict'; -import {CountUp} from "countup.js"; +import {CountUp} from 'countup.js'; import noUiSlider from 'nouislider'; (function () { /** - * Dropdown + * Bootstrap4 dropdown plugin. + * @link https://getbootstrap.com/docs/4.4/components/dropdowns/ */ - var dropdownElementList = [].slice.call(document.querySelectorAll('[data-toggle="dropdown"]')); + let dropdownElementList = [].slice.call(document.querySelectorAll('[data-toggle="dropdown"]')); dropdownElementList.map(function (dropdownToggleEl) { - return new bootstrap.Dropdown(dropdownToggleEl, {}) + let options = {}; + return new bootstrap.Dropdown(dropdownToggleEl, options); }); /** - * Tooltip + * Bootstrap4 tooltip plugin. + * @link https://getbootstrap.com/docs/4.4/components/tooltips/ */ - var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')); + let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')); tooltipTriggerList.map(function (tooltipTriggerEl) { - return new bootstrap.Tooltip(tooltipTriggerEl, {}) + let options = { + delay: {show: 50, hide: 50}, + html: true, + placement: 'auto' + }; + return new bootstrap.Tooltip(tooltipTriggerEl, options); }); - /* - Popover + /** + * Bootstrap4 popover plugin. + * @link https://getbootstrap.com/docs/4.4/components/popovers/ */ - var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]')); + let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]')); popoverTriggerList.map(function (popoverTriggerEl) { - return new bootstrap.Popover(popoverTriggerEl, { - autoHide: true - }) + let options = { + delay: {show: 50, hide: 50}, + html: true, + placement: 'auto' + }; + return new bootstrap.Popover(popoverTriggerEl, options); }); - /* - NoUiSlider + /** + * noUiSlider - range slider with full touch support. + * @link https://refreshless.com/nouislider/ */ let sliderTriggerList = [].slice.call(document.querySelectorAll("[data-slider]")); - sliderTriggerList.map(function (sliderTriggerEl){ - let dataSlider; + sliderTriggerList.map(function (sliderTriggerEl) { + let options = {}; if (sliderTriggerEl.getAttribute("data-slider")) { - dataSlider = JSON.parse(sliderTriggerEl.getAttribute("data-slider")); + options = JSON.parse(sliderTriggerEl.getAttribute("data-slider")); } - let slider = noUiSlider.create(sliderTriggerEl,dataSlider); - if(dataSlider['js-name']){ - window[dataSlider['js-name']] = slider; + let slider = noUiSlider.create(sliderTriggerEl, options); + if (options['js-name']) { + window[options['js-name']] = slider; } }); - /* - CountUp - */ + /** + * CountUp - animations that display numerical data in a more interesting way. + * @link https://inorganik.github.io/countUp.js/ + */ let countupTriggerList = [].slice.call(document.querySelectorAll("[data-countup]")); countupTriggerList.map(function (countupTriggerEl) { - let dataCountUp; - if(countupTriggerEl.getAttribute("data-countup") !== "") { - dataCountUp = JSON.parse(countupTriggerEl.getAttribute("data-countup")); + let options = {}; + if (countupTriggerEl.getAttribute("data-countup")) { + options = JSON.parse(countupTriggerEl.getAttribute("data-countup")); } - - return (new CountUp(countupTriggerEl, parseFloat(countupTriggerEl.innerText), dataCountUp)).start(); + let countUp = new CountUp(countupTriggerEl, +countupTriggerEl.innerText, options); + if (countUp.error) { + console.error('CountUp: ' + countUp.error); + } + return countUp.start(); }); -})(); \ No newline at end of file + +})();