IMPR: Multi-slider and hover

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
-	"version": "2.3.3",
+	"version": "2.3.4",
 	"author": "Tony Air <tony@twma.pro>",
 	"license": "MIT",
 	"description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",

src/js/_components/_ui.hover.js

@@ -6,6 +6,7 @@
 import $ from 'jquery';
 import Events from '../_events';
 import 'jquery-hoverintent/jquery.hoverIntent.js';
+import MainUI from '../_main';
 
 const HoverUI = (($) => {
   // Constants
@@ -20,6 +21,8 @@ const HoverUI = (($) => {
   class HoverUI {
     // Constructor
     constructor(el) {
+      console.log(`${NAME}: init`);
+
       const ui = this;
       const $el = $(el);
       ui.$el = $el;
@@ -36,8 +39,8 @@ const HoverUI = (($) => {
       $target = $target
         ? $target
         : $parent
-          ? $parent.find('.dropdown-menu').first()
-          : null;
+        ? $parent.find('.dropdown-menu').first()
+        : null;
 
       if (!$target || !$target.length) {
         console.warn(`${NAME}: Missing target for:`);
@@ -52,6 +55,7 @@ const HoverUI = (($) => {
 
       // integrate with dropdown-toggle
       $('[data-toggle="dropdown"]').on('click touch', (e) => {
+        console.log(`${NAME}: dropdown click-touch`);
         ui.hide();
       });
 
@@ -68,11 +72,18 @@ const HoverUI = (($) => {
         });
       }
 
+      $el.off('click touch');
       $el.on('click touch', (e) => {
+        const size = MainUI.detectBootstrapScreenSize();
+        console.log(`${NAME}: click-touch size: ${size}`);
+
         if (
+          size === 'xs' ||
           !$el.data('allow-click') ||
           (W.IsTouchScreen && !$el.data('allow-touch-click'))
         ) {
+          console.log(`${NAME}: click-touch prevent click`);
+          e.stopPropagation();
           e.preventDefault();
         }
 

src/js/_components/_ui.multislider.js

@@ -2,13 +2,13 @@
 
 import $ from 'jquery';
 import Events from '../_events';
+import MainUI from '../_main';
 
 import 'hammerjs/hammer';
 import 'jquery-hammerjs/jquery.hammer';
 
 import '../../scss/_components/_ui.multislider.scss';
 
-import MainUI from '../_main';
 const W = window;
 
 const MultiSlider = (($) => {