diff --git a/client/components/boards/boardsList.js b/client/components/boards/boardsList.js index fc8331b8c..290b45c32 100644 --- a/client/components/boards/boardsList.js +++ b/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()) { diff --git a/client/components/cards/labels.js b/client/components/cards/labels.js index 2b599aa66..fc48f75f4 100644 --- a/client/components/cards/labels.js +++ b/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(() => { diff --git a/client/lib/jquery-ui.js b/client/lib/jquery-ui.js index 91f7b38aa..6bdcf2f5a 100644 --- a/client/lib/jquery-ui.js +++ b/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') diff --git a/client/lib/tests/Utils.tests.js b/client/lib/tests/Utils.tests.js index 5a368876c..1ffcd8105 100644 --- a/client/lib/tests/Utils.tests.js +++ b/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'); }); diff --git a/client/lib/utils.js b/client/lib/utils.js index 6395fe741..fba13c74d 100644 --- a/client/lib/utils.js +++ b/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') { diff --git a/package-lock.json b/package-lock.json index 63fb378c5..88f497d66 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index c849a4d7a..68d6b3356 100644 --- a/package.json +++ b/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",