Set drag handle on touch screen not miniscreen

client/components/boards/boardBody.js

@@ -193,7 +193,7 @@ BlazeComponent.extendComponent({
     });
 
     this.autorun(() => {
-      if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
         $swimlanesDom.sortable({
           handle: '.js-swimlane-header-handle',
         });

client/components/boards/boardsList.jade

@@ -62,7 +62,7 @@ template(name="boardList")
                     i.fa.js-has-spenttime-cards(
                       class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
                       title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
-                  if isMiniScreenOrShowDesktopDragHandles
+                  if isTouchScreenOrShowDesktopDragHandles
                     i.fa.board-handle(
                         class="fa-arrows"
                         title="{{_ 'Drag board'}}")
@@ -114,7 +114,7 @@ template(name="boardList")
                     i.fa.js-has-spenttime-cards(
                       class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
                       title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
-                  if isMiniScreenOrShowDesktopDragHandles
+                  if isTouchScreenOrShowDesktopDragHandles
                     i.fa.board-handle(
                         class="fa-arrows"
                         title="{{_ 'Drag board'}}")

client/components/boards/boardsList.js

@@ -79,7 +79,7 @@ BlazeComponent.extendComponent({
 
     // Disable drag-dropping if the current user is not a board member or is comment only
     this.autorun(() => {
-      if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
         $boards.sortable({
           handle: '.board-handle',
         });
@@ -323,12 +323,10 @@ BlazeComponent.extendComponent({
                 { $or: [] }
               ]
             };
-            if(selectedTeamsValues.length > 0)
+            if (selectedTeamsValues.length > 0) {
-            {
               query.$and[2].$or.push({ 'teams.teamId': { $in: selectedTeamsValues } });
             }
-            if(selectedOrgsValues.length > 0)
+            if (selectedOrgsValues.length > 0) {
-            {
               query.$and[2].$or.push({ 'orgs.orgId': { $in: selectedOrgsValues } });
             }
 

client/components/cards/cardDetails.js

@@ -306,7 +306,7 @@ BlazeComponent.extendComponent({
         $checklistsDom.data('sortable')
       ) {
         $checklistsDom.sortable('option', 'disabled', disabled);
-        if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+        if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
           $checklistsDom.sortable({ handle: '.checklist-handle' });
         }
       }
@@ -1728,11 +1728,9 @@ EscapeActions.register(
   () => {
     // if card description diverges from database due to editing
     // ask user whether changes should be applied
-    if(currentUser.profile.rescueCardDescription== true)
+    if (currentUser.profile.rescueCardDescription == true) {
-    {
       currentDescription = document.getElementsByClassName("editor js-new-description-input").item(0)
-      if (currentDescription?.value && !(currentDescription.value === Utils.getCurrentCard().getDescription()))
+      if (currentDescription?.value && !(currentDescription.value === Utils.getCurrentCard().getDescription())) {
-      {
         if (confirm(TAPi18n.__('rescue-card-description-dialogue'))) {
           Utils.getCurrentCard().setDescription(document.getElementsByClassName("editor js-new-description-input").item(0).value);
           // Save it!

client/components/cards/checklists.jade

@@ -35,7 +35,7 @@ template(name="checklistDetail")
 
         if canModifyCard
           h2.title.js-open-inlined-form.is-editable
-            if isMiniScreenOrShowDesktopDragHandles
+            if isTouchScreenOrShowDesktopDragHandles
               span.fa.checklist-handle(class="fa-arrows" title="{{_ 'dragChecklist'}}")
             +viewer
               = checklist.title
@@ -104,7 +104,7 @@ template(name='checklistItemDetail')
     if canModifyCard
       .check-box-container
         .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
-      if isMiniScreenOrShowDesktopDragHandles
+      if isTouchScreenOrShowDesktopDragHandles
         span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
       .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
         +viewer

client/components/cards/checklists.js

@@ -61,7 +61,7 @@ BlazeComponent.extendComponent({
       const $itemsDom = $(self.itemsDom);
       if ($itemsDom.data('uiSortable') || $itemsDom.data('sortable')) {
         $(self.itemsDom).sortable('option', 'disabled', !userIsMember());
-        if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+        if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
           $(self.itemsDom).sortable({
             handle: 'span.fa.checklistitem-handle',
           });
@@ -419,8 +419,7 @@ class DialogWithBoardSwimlaneListAndCard extends BlazeComponent {
       if (this.checklistDialogOption.boardId &&
         this.checklistDialogOption.swimlaneId &&
         this.checklistDialogOption.listId
-      )
+      ) {
-      {
         this.selectedBoardId.set(this.checklistDialogOption.boardId)
         this.selectedSwimlaneId.set(this.checklistDialogOption.swimlaneId);
         this.selectedListId.set(this.checklistDialogOption.listId);

client/components/cards/labels.jade

@@ -29,7 +29,7 @@ template(name="cardLabelsPopup")
     each board.labels
       li.js-card-label-item
         a.card-label-edit-button.fa.fa-pencil.js-edit-label
-        if isMiniScreenOrShowDesktopDragHandles
+        if isTouchScreenOrShowDesktopDragHandles
           span.fa.label-handle(class="fa-arrows" title="{{_ 'dragLabel'}}")
         span.card-label.card-label-selectable.js-select-label.card-label-wrapper(class="card-label-{{color}}"
           class="{{# if isLabelSelected ../_id }}active{{/if}}")

client/components/cards/labels.js

@@ -50,8 +50,7 @@ BlazeComponent.extendComponent({
       appendTo: '.edit-labels-pop-over',
       helper(element, currentItem) {
         let ret = currentItem.clone();
-        if (currentItem.closest('.popup-container-depth-0').size() == 0)
+        if (currentItem.closest('.popup-container-depth-0').size() == 0) { // only set css transform at every sub-popup, not at the main popup
-        { // only set css transform at every sub-popup, not at the main popup
           const content = currentItem.closest('.content')[0]
           const offsetLeft = content.offsetLeft;
           const offsetTop = $('.pop-over > .header').height() * -1;
@@ -76,7 +75,7 @@ BlazeComponent.extendComponent({
 
     // Disable drag-dropping if the current user is not a board member or is comment only
     this.autorun(() => {
-      if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
         $labels.sortable({
           handle: '.label-handle',
         });

client/components/cards/minicard.jade

@@ -3,7 +3,7 @@ template(name="minicard")
     class="{{#if isLinkedCard}}linked-card{{/if}}"
     class="{{#if isLinkedBoard}}linked-board{{/if}}"
     class="{{#if colorClass}}minicard-{{colorClass}}{{/if}}")
-    if isMiniScreenOrShowDesktopDragHandles
+    if isTouchScreenOrShowDesktopDragHandles
       .handle
         .fa.fa-arrows
     if cover

client/components/lists/list.js

@@ -121,27 +121,23 @@ BlazeComponent.extendComponent({
         const $boardCanvas = $('.board-canvas');
         const boardCanvas = $boardCanvas[0];
 
-        if (event.pageX < 10)
+        if (event.pageX < 10) { // scroll to the left
-        { // scroll to the left
           boardCanvas.scrollLeft -= 15;
           ui.helper[0].offsetLeft -= 15;
         }
         if (
           event.pageX > boardCanvas.offsetWidth - 10 &&
           boardCanvas.scrollLeft < $boardCanvas.data('scrollLeftMax') // don't scroll more than possible
-        )
+        ) { // scroll to the right
-        { // scroll to the right
           boardCanvas.scrollLeft += 15;
         }
         if (
           event.pageY > boardCanvas.offsetHeight - 10 &&
           event.pageY + boardCanvas.scrollTop < $boardCanvas.data('scrollTopMax') // don't scroll more than possible
-        )
+        ) { // scroll to the bottom
-        { // scroll to the bottom
           boardCanvas.scrollTop += 15;
         }
-        if (event.pageY < 10)
+        if (event.pageY < 10) { // scroll to the top
-        { // scroll to the top
           boardCanvas.scrollTop -= 15;
         }
       },
@@ -157,7 +153,7 @@ BlazeComponent.extendComponent({
     });
 
     this.autorun(() => {
-      if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+      if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
         $cards.sortable({
           handle: '.handle',
         });

client/components/lists/listHeader.jade

@@ -44,7 +44,7 @@ template(name="listHeader")
               a.js-add-card.fa.fa-plus.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
             a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
           if currentUser.isBoardAdmin
-            if isShowDesktopDragHandles
+            if isTouchScreenOrShowDesktopDragHandles
               a.list-header-handle.handle.fa.fa-arrows.js-list-handle
 
 template(name="editListTitleForm")

client/components/swimlanes/swimlaneHeader.jade

@@ -25,10 +25,10 @@ template(name="swimlaneFixedHeader")
       if currentUser.isBoardAdmin
         a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon(title="{{_ 'add-swimlane'}}")
         a.fa.fa-navicon.js-open-swimlane-menu(title="{{_ 'swimlaneActionPopup-title'}}")
-      unless isMiniScreen
+      unless isTouchScreen
         if isShowDesktopDragHandles
           a.swimlane-header-handle.handle.fa.fa-arrows.js-swimlane-header-handle
-      if isMiniScreen
+      if isTouchScreen
         a.swimlane-header-miniscreen-handle.handle.fa.fa-arrows.js-swimlane-header-handle
 
 template(name="editSwimlaneTitleForm")

client/components/swimlanes/swimlanes.js

@@ -114,7 +114,7 @@ function initSortable(boardComponent, $listsDom) {
   //}
 
   boardComponent.autorun(() => {
-    if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+    if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
       $listsDom.sortable({
         handle: '.js-list-handle',
       });
@@ -200,7 +200,7 @@ BlazeComponent.extendComponent({
           // his mouse.
 
           const noDragInside = ['a', 'input', 'textarea', 'p'].concat(
-            Utils.isMiniScreenOrShowDesktopDragHandles()
+            Utils.isTouchScreenOrShowDesktopDragHandles()
               ? ['.js-list-handle', '.js-swimlane-header-handle']
               : ['.js-list-header'],
           );

client/config/blazeHelpers.js

@@ -27,12 +27,14 @@ Blaze.registerHelper('concat', (...args) => args.slice(0, -1).join(''));
 
 Blaze.registerHelper('isMiniScreen', () => Utils.isMiniScreen());
 
+Blaze.registerHelper('isTouchScreen', () => Utils.isTouchScreen());
+
 Blaze.registerHelper('isShowDesktopDragHandles', () =>
   Utils.isShowDesktopDragHandles(),
 );
 
-Blaze.registerHelper('isMiniScreenOrShowDesktopDragHandles', () =>
+Blaze.registerHelper('isTouchScreenOrShowDesktopDragHandles', () =>
-  Utils.isMiniScreenOrShowDesktopDragHandles(),
+  Utils.isTouchScreenOrShowDesktopDragHandles(),
 );
 
 Blaze.registerHelper('moment', (...args) => {

client/lib/tests/Utils.tests.js

@@ -151,7 +151,7 @@ describe('Utils', function() {
     it('has no tests yet');
   });
 
-  describe(Utils.isMiniScreenOrShowDesktopDragHandles.name, function() {
+  describe(Utils.isTouchScreenOrShowDesktopDragHandles.name, function () {
     it('has no tests yet');
   });
 

client/lib/utils.js

@@ -256,11 +256,13 @@ Utils = {
     // OLD WINDOW WIDTH DETECTION:
     this.windowResizeDep.depend();
     return $(window).width() <= 800;
+  },
+
+  isTouchScreen() {
 
     // NEW TOUCH DEVICE DETECTION:
     // https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
 
-    /*
     var hasTouchScreen = false;
     if ("maxTouchPoints" in navigator) {
       hasTouchScreen = navigator.maxTouchPoints > 0;
@@ -281,10 +283,7 @@ Utils = {
         );
       }
     }
-    */
+    return hasTouchScreen;
-    //if (hasTouchScreen)
-    //    document.getElementById("exampleButton").style.padding="1em";
-    //return false;
   },
 
   // returns if desktop drag handles are enabled
@@ -300,8 +299,8 @@ Utils = {
   },
 
   // returns if mini screen or desktop drag handles
-  isMiniScreenOrShowDesktopDragHandles() {
+  isTouchScreenOrShowDesktopDragHandles() {
-    return this.isMiniScreen() || this.isShowDesktopDragHandles();
+    return this.isTouchScreen() || this.isShowDesktopDragHandles();
   },
 
   calculateIndexData(prevData, nextData, nItems = 1) {