IMPROVEMENT: Detect touch screen

src/js/_components/_ui.hover.js

@@ -7,7 +7,7 @@ import $ from 'jquery';
 import Events from '../_events';
 import 'jquery-hoverintent/jquery.hoverIntent.js';
 
-const HoverUI = (($) => {
+const HoverUI = ($ => {
   // Constants
   const W = window;
   const D = document;
@@ -36,8 +36,8 @@ const HoverUI = (($) => {
       $target = $target
         ? $target
         : $parent
-          ? $parent.find('.dropdown-menu')
-          : null;
+        ? $parent.find('.dropdown-menu')
+        : null;
 
       if (!$target || !$target.length) {
         console.warn(`${NAME}: Missing target for:`);
@@ -51,7 +51,7 @@ const HoverUI = (($) => {
       ui.$triger = $triger;
 
       // integrate with dropdown-toggle
-      $('[data-toggle="dropdown"]').on('click touch', (e) => {
+      $('[data-toggle="dropdown"]').on('click touch', e => {
         ui.hide();
       });
 
@@ -68,8 +68,11 @@ const HoverUI = (($) => {
         });
       }
 
-      $el.on('click touch', (e) => {
-        if (!$el.data('allow-click')) {
+      $el.on('click touch', e => {
+        if (
+          !$el.data('allow-click') ||
+          (W.IsTouchScreen && !$el.data('allow-touch-click'))
+        ) {
           e.preventDefault();
         }
 
@@ -151,7 +154,7 @@ const HoverUI = (($) => {
   });
 
   // rewrite 'bootstrap/js/dist/dropdown'
-  $('[data-toggle="dropdown"]').on('click touch', (e) => {
+  $('[data-toggle="dropdown"]').on('click touch', e => {
     e.preventDefault();
 
     const $el = $(e.currentTarget);

src/js/_main.js

@@ -15,7 +15,7 @@ import FormBasics from './_components/_ui.form.basics';
 import SmoothScroll from 'smooth-scroll';
 const smoothScroll = SmoothScroll();
 
-const MainUI = (($) => {
+const MainUI = ($ => {
   // Constants
   const W = window;
   const D = document;
@@ -126,6 +126,8 @@ const MainUI = (($) => {
     hash: '',
   };
 
+  W.IsTouchScreen = 'ontouchstart' in window || navigator.msMaxTouchPoints;
+
   class MainUI {
     // Static methods
 
@@ -174,7 +176,7 @@ const MainUI = (($) => {
       //
 
       // scroll links
-      $('.js-scrollTo').on('click', (e) => {
+      $('.js-scrollTo').on('click', e => {
         e.preventDefault();
         const el = e.currentTarget;
         const $el = $(e.currentTarget);
@@ -203,7 +205,7 @@ const MainUI = (($) => {
       }
 
       // data-set links
-      $('[data-set-target]').on('click', (e) => {
+      $('[data-set-target]').on('click', e => {
         const $el = $(e.currentTarget);
         const $target = $($el.data('set-target'));
 
@@ -227,7 +229,7 @@ const MainUI = (($) => {
       });
 
       // emulate links
-      $('.a[data-href]').on('click', (e) => {
+      $('.a[data-href]').on('click', e => {
         const $el = $(e.currentTarget);
         const href = $el.data('href');
         if (!href.length) {