jquery-ui works now with touch devices

- the "old" implementation at wekan source code didn't work anymore with
  jquery-ui@1.13.0, so it's necessary to use another package to get it
  work again

client/components/boards/boardsList.js

@@ -1,5 +1,4 @@
 const subManager = new SubsManager();
-const { calculateIndex, enableClickOnTouch } = Utils;
 
 Template.boardListHeaderBar.events({
   'click .js-open-archived-board'() {
@@ -56,7 +55,7 @@ BlazeComponent.extendComponent({
         // of the previous and the following card -- if any.
         const prevBoardDom = ui.item.prev('.js-board').get(0);
         const nextBoardBom = ui.item.next('.js-board').get(0);
-        const sortIndex = calculateIndex(prevBoardDom, nextBoardBom, 1);
+        const sortIndex = Utils.calculateIndex(prevBoardDom, nextBoardBom, 1);
 
         const boardDomElement = ui.item.get(0);
         const board = Blaze.getData(boardDomElement);
@@ -73,9 +72,6 @@ BlazeComponent.extendComponent({
       },
     });
 
-    // ugly touch event hotfix
-    enableClickOnTouch(itemsSelector);
-
     // Disable drag-dropping if the current user is not a board member or is comment only
     this.autorun(() => {
       if (Utils.isMiniScreenOrShowDesktopDragHandles()) {

client/components/cards/labels.js

@@ -73,7 +73,6 @@ BlazeComponent.extendComponent({
         card.board().setNewLabelOrder(newLabelOrderOnlyIds);
       },
     });
-    Utils.enableClickOnTouch(itemsSelector);
 
     // Disable drag-dropping if the current user is not a board member or is comment only
     this.autorun(() => {

client/lib/jquery-ui.js

@@ -15,3 +15,6 @@ require('jquery-ui/ui/widgets/draggable')
 
 // everything already required for droppable
 require('jquery-ui/ui/widgets/droppable')
+
+// enable touch on mobile
+require('jquery-ui-touch-punch')

client/lib/tests/Utils.tests.js

@@ -163,18 +163,6 @@ describe('Utils', function() {
     it('has no tests yet');
   });
 
-  describe(Utils.isTouchDevice.name, function() {
-    it('has no tests yet');
-  });
-
-  describe(Utils.calculateTouchDistance.name, function() {
-    it('has no tests yet');
-  });
-
-  describe(Utils.enableClickOnTouch.name, function() {
-    it('has no tests yet');
-  });
-
   describe(Utils.manageCustomUI.name, function() {
     it('has no tests yet');
   });

client/lib/utils.js

@@ -364,67 +364,6 @@ Utils = {
     };
   },
 
-  // Detect touch device
-  isTouchDevice() {
-    const isTouchable = (() => {
-      const prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
-      const mq = function(query) {
-        return window.matchMedia(query).matches;
-      };
-
-      if (
-        'ontouchstart' in window ||
-        (window.DocumentTouch && document instanceof window.DocumentTouch)
-      ) {
-        return true;
-      }
-
-      // include the 'heartz' as a way to have a non matching MQ to help terminate the join
-      // https://git.io/vznFH
-      const query = [
-        '(',
-        prefixes.join('touch-enabled),('),
-        'heartz',
-        ')',
-      ].join('');
-      return mq(query);
-    })();
-    Utils.isTouchDevice = () => isTouchable;
-    return isTouchable;
-  },
-
-  calculateTouchDistance(touchA, touchB) {
-    return Math.sqrt(
-      Math.pow(touchA.screenX - touchB.screenX, 2) +
-        Math.pow(touchA.screenY - touchB.screenY, 2),
-    );
-  },
-
-  enableClickOnTouch(selector) {
-    let touchStart = null;
-    let lastTouch = null;
-
-    $(document).on('touchstart', selector, function(e) {
-      touchStart = e.originalEvent.touches[0];
-    });
-    $(document).on('touchmove', selector, function(e) {
-      const touches = e.originalEvent.touches;
-      lastTouch = touches[touches.length - 1];
-    });
-    $(document).on('touchend', selector, function(e) {
-      if (
-        touchStart &&
-        lastTouch &&
-        Utils.calculateTouchDistance(touchStart, lastTouch) <= 20
-      ) {
-        e.preventDefault();
-        const clickEvent = document.createEvent('MouseEvents');
-        clickEvent.initEvent('click', true, true);
-        e.target.dispatchEvent(clickEvent);
-      }
-    });
-  },
-
   manageCustomUI() {
     Meteor.call('getCustomUI', (err, data) => {
       if (err && err.error[0] === 'var-not-exist') {

package-lock.json

@@ -1815,6 +1815,11 @@
         "jquery": ">=1.8.0 <4.0.0"
       }
     },
+    "jquery-ui-touch-punch": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/jquery-ui-touch-punch/-/jquery-ui-touch-punch-0.2.3.tgz",
+      "integrity": "sha1-7tgiQnM7okP0az6HwYQbMIGR2mg="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -36,6 +36,7 @@
     "gridfs-stream": "https://github.com/wekan/gridfs-stream/tarball/master",
     "jquery": "^2.2.4",
     "jquery-ui": "^1.13.0",
+    "jquery-ui-touch-punch": "^0.2.3",
     "jszip": "^3.7.1",
     "ldapjs": "^2.3.1",
     "markdown-it": "^12.2.0",