Merge pull request #7219 from opf/fix/30044/boards-double-tap

[30044] Implement double-tap behaivor using hammer.js

[ci skip]

frontend/npm-shrinkwrap.json

@@ -1339,6 +1339,11 @@
         "moment": ">=2.14.0"
       }
     },
+    "@types/hammerjs": {
+      "version": "2.0.36",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.36.tgz",
+      "integrity": "sha512-7TUK/k2/QGpEAv/BCwSHlYu3NXZhQ9ZwBYpzr9tjlPIL2C5BeGhH3DmVavRx3ZNyELX5TLC91JTz/cen6AAtIQ=="
+    },
     "@types/jasmine": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.3.1.tgz",
@@ -5039,6 +5044,11 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
       "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handle-thing": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",

frontend/package.json

@@ -50,6 +50,7 @@
     "@types/codemirror": "0.0.70",
     "@types/dragula": "^2.1.34",
     "@types/es6-shim": "^0.31.39",
+    "@types/hammerjs": "^2.0.36",
     "@types/jquery": "^3.3.22",
     "@types/jqueryui": "^1.12.6",
     "@types/lodash": "^4.14.118",
@@ -88,6 +89,7 @@
     "foundation-apps": "git+https://github.com/opf/foundation-apps.git#921e942c70dd9e50dc576cabdc8fd0616d9dddce",
     "fuse.js": "^3.3.0",
     "glob": "^7.1.3",
+    "hammerjs": "^2.0.8",
     "happypack": "^5.0.0",
     "html-loader": "^0.5.5",
     "jquery": "^3.1.1",

frontend/src/app/components/wp-card-view/wp-card-view.component.html

@@ -12,7 +12,7 @@
        *ngFor="let wp of workPackages; trackBy:trackByHref"
        [attr.data-is-new]="wp.isNew || undefined"
        [attr.data-work-package-id]="wp.id"
-       (dblclick)="handleDblClick(wp)"
+       (doubleClickOrTap)="handleDblClick(wp)"
        [ngClass]="{'-draggable': dragAndDropEnabled }">
 
     <div class="wp-card--highlighting"

frontend/src/app/init-globals.ts

@@ -28,6 +28,7 @@
 
 import {whenDebugging} from 'core-app/helpers/debug_output';
 import {enableReactiveStatesLogging} from "reactivestates";
+import 'hammerjs';
 
 // Global scripts previously part of the application.js
 // Avoid require.context since that crashes angular regularly

frontend/src/app/modules/a11y/double-click-or-tap.directive.ts

@@ -0,0 +1,74 @@
+//-- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2017 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2017 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+//++
+
+import {Directive, EventEmitter, HostListener, Input, Output} from '@angular/core';
+import {keyCodes} from 'core-app/modules/common/keyCodes.enum';
+import {HammerInstance} from "@angular/platform-browser/src/dom/events/hammer_gestures";
+
+@Directive({
+  selector: '[doubleClickOrTap]',
+})
+export class DoubleClickOrTapDirective {
+  @Input('doubleClickOrTapStopEvent') stopEventPropagation:boolean = true;
+  @Output('doubleClickOrTap') eventHandler = new EventEmitter<any>();
+
+  @HostListener('dblclick', ['$event'])
+  @HostListener('tap', ['$event'])
+  public handleClick(event:any):boolean {
+    // Pass along double clicks immediately
+    // Or when the hammer.js event tap count reaches two
+    if (event.type === 'dblclick' || event.tapCount === 2) {
+      this.eventHandler.emit(event);
+      return this.eventStopReturnCode(event);
+    }
+
+
+    return true;
+  }
+
+  /**
+   * If requested to stop event propagation, stop it
+   * and return false.
+   * Otherwise, return true.
+   *
+   * @param event Event being handled
+   */
+  private eventStopReturnCode(event:Event):boolean {
+    if (this.stopEventPropagation) {
+      event.preventDefault();
+
+      if (!!event.stopPropagation) {
+        event.stopPropagation();
+      }
+
+      return false;
+    }
+
+    return true;
+  }
+}

frontend/src/app/modules/a11y/openproject-a11y.module.ts

@@ -33,6 +33,7 @@ import {AccessibleClickDirective} from "core-app/modules/a11y/accessible-click.d
 import {AccessibleByKeyboardComponent} from "core-app/modules/a11y/accessible-by-keyboard.component";
 import {initializeKeyboardShortcuts, KeyboardShortcutService} from "core-app/modules/a11y/keyboard-shortcut-service";
 import {CommonModule} from "@angular/common";
+import {DoubleClickOrTapDirective} from "core-app/modules/a11y/double-click-or-tap.directive";
 
 @NgModule({
   imports: [
@@ -41,6 +42,7 @@ import {CommonModule} from "@angular/common";
   ],
   exports: [
     AccessibleClickDirective,
+    DoubleClickOrTapDirective,
     AccessibleByKeyboardComponent,
   ],
   providers: [
@@ -55,6 +57,7 @@ import {CommonModule} from "@angular/common";
   declarations: [
     AccessibleClickDirective,
     AccessibleByKeyboardComponent,
+    DoubleClickOrTapDirective,
   ]
 })
 export class OpenprojectAccessibilityModule { }