Aurelia Gist TypeScript Gestures Contextmenu

app.html

<template>
  <require from="oa-contextmenu"></require>
  <table oa-contextmenu.call="onContextmenu()">
    <tr>
      <td>Gesture me!!!</td>
    </tr>
  </table>
</template>

app.ts

export class App {
  public items = Array.from(Array(11), (_, i) => i).map((i) => {
    return {
      name: i
    };
  });
  onTap() {
    console.log('tap');
  }
  onContextmenu() {
    console.log('contextmenu');
  }
}

config.js

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    'typescript': 'https://unpkg.com/[email protected]/lib/typescript.js',
    'tslib': 'https://unpkg.com/tslib',
    
    'aurelia-binding': 'https://unpkg.com/aurelia-binding/dist/amd/aurelia-binding.js',
    'aurelia-bootstrapper': 'https://unpkg.com/aurelia-bootstrapper/dist/amd/aurelia-bootstrapper.js',
    'aurelia-dependency-injection': 'https://unpkg.com/aurelia-dependency-injection/dist/amd/aurelia-dependency-injection.js',
    'aurelia-event-aggregator': 'https://unpkg.com/aurelia-event-aggregator/dist/amd/aurelia-event-aggregator.js',
    'aurelia-framework': 'https://unpkg.com/aurelia-framework/dist/amd/aurelia-framework.js',
    'aurelia-history': 'https://unpkg.com/aurelia-history/dist/amd/aurelia-history.js',
    'aurelia-history-browser': 'https://unpkg.com/aurelia-history-browser/dist/amd/aurelia-history-browser.js',
    'aurelia-loader': 'https://unpkg.com/aurelia-loader/dist/amd/aurelia-loader.js',
    'aurelia-loader-default': 'https://unpkg.com/aurelia-loader-default/dist/amd/aurelia-loader-default.js',
    'aurelia-logging': 'https://unpkg.com/aurelia-logging/dist/amd/aurelia-logging.js',
    'aurelia-logging-console': 'https://unpkg.com/aurelia-logging-console/dist/amd/aurelia-logging-console.js',
    'aurelia-metadata': 'https://unpkg.com/aurelia-metadata/dist/amd/aurelia-metadata.js',
    'aurelia-pal': 'https://unpkg.com/aurelia-pal/dist/amd/aurelia-pal.js',
    'aurelia-pal-browser': 'https://unpkg.com/aurelia-pal-browser/dist/amd/aurelia-pal-browser.js',
    'aurelia-path': 'https://unpkg.com/aurelia-path/dist/amd/aurelia-path.js',
    'aurelia-polyfills': 'https://unpkg.com/aurelia-polyfills/dist/amd/aurelia-polyfills.js',
    'aurelia-router': 'https://unpkg.com/aurelia-router/dist/amd/aurelia-router.js',
    'aurelia-route-recognizer': 'https://unpkg.com/aurelia-route-recognizer/dist/amd/aurelia-route-recognizer.js',
    'aurelia-task-queue': 'https://unpkg.com/aurelia-task-queue/dist/amd/aurelia-task-queue.js',
    'aurelia-templating': 'https://unpkg.com/aurelia-templating/dist/amd/aurelia-templating.js',
    'aurelia-templating-binding': 'https://unpkg.com/aurelia-templating-binding/dist/amd/aurelia-templating-binding.js',
    'aurelia-templating-resources': 'https://unpkg.com/aurelia-templating-resources/dist/amd',
    'aurelia-templating-router': 'https://unpkg.com/aurelia-templating-router/dist/amd',
    
    'oribella-framework': 'https://unpkg.com/oribella-framework/dist/amd',
    'oribella': 'https://unpkg.com/oribella/dist/amd',
    'oribella-aurelia-gestures': 'https://unpkg.com/oribella-aurelia-gestures/dist/amd'
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    },
    'aurelia-templating-resources': { main: 'aurelia-templating-resources.js' },
    'aurelia-templating-router': { main: 'aurelia-templating-router.js' },
    'oribella-framework': { main: 'oribella-framework.js' },
    'oribella': { main: 'oribella.js' },
    'oribella-aurelia-gestures': { main: 'oribella-aurelia-gestures.js' }
  }
});

contextmenu.ts

import { Options, Data, RETURN_FLAG, Gesture, Listener, DefaultListener, isMouse } from 'oribella-framework';
import { OribellaApi, Tap, Longtap, LongtapListener } from 'oribella';

export class ContextmenuOptions extends Options {
}

export class Contextmenu extends Gesture<Data, Listener<ContextmenuOptions, Data>> {
  public unregisterTap: () => void = () => { };
  public unregisterLongtap: () => void = () => { };
  public remove: () => void;

  public bind(target: Element, registerListener: <T extends typeof Gesture>(Type: T, element: Element, listener: Partial<DefaultListener>) => () => void, _: () => void, evt: Event) {
    target.addEventListener('contextmenu', this as any, false);
    target.addEventListener('MSGestureHold', this as any, false);
    if (isMouse(evt)) {
      this.unregisterTap = registerListener(Tap, target, {
        selector: this.listener.selector,
        options: Object.assign(this.listener.options, { which: 3 }),
        end: () => this.callEnd()
      });
    } else {
      this.unregisterLongtap = registerListener(Longtap, target, {
        selector: this.listener.selector,
        options: this.listener.options,
        timeEnd: () => this.callEnd()
      } as LongtapListener);
    }
  }
  handleEvent(evt: Event) {
    evt.preventDefault();
  }
  public unbind() {
    this.target.removeEventListener('contextmenu', this as any, false);
    this.target.removeEventListener('MSGestureHold', this as any, false);
    this.unregisterTap();
    this.unregisterLongtap();
    return RETURN_FLAG.REMOVE;
  }
  public callEnd(evt: Event, data: Data) {
    return this.listener.end(evt, data, this.target);
  }
}

export function registerContextmenu(oribella: OribellaApi) {
  oribella.registerGesture(Contextmenu, ContextmenuOptions);
}

index.html

<!doctype html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta charset="utf-8">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta http-equiv="cleartype" content="on">
  <link rel="stylesheet" href="https://unpkg.com/leonardo-ui/dist/leonardo-ui.min.css" type="text/css" />
  <link rel="stylesheet" href="styles.css" type="text/css" />
  <style>
  </style>
</head>

<body aurelia-app="main">
  <script src="https://unpkg.com/[email protected]/dist/system.js"></script>
  <script src="config.js"></script>
  <script>
    function patchDefaultLoader(DefaultLoader) {
      // fix issue where the map function was using `System.map[id] = source`
      // https://github.com/aurelia/loader-default/blob/1.0.0/src/index.js#L222
      DefaultLoader.prototype.map = function(id, source) {
        // System.map[id] = source;                 // <--- original
        System.config({ map: { [id]: source } });   // <--- fix
      };
    }
    
    System.import('aurelia-loader-default')
      .then(({ DefaultLoader }) => patchDefaultLoader(DefaultLoader))
      .then(() => System.import('aurelia-bootstrapper'));
  </script>
</body>

</html>

main.ts

import { Aurelia } from 'aurelia-framework';
import { DOM, PLATFORM } from 'aurelia-pal';
import { oribella } from 'oribella';
import { registerContextmenu, Contextmenu } from './contextmenu';

registerContextmenu(oribella);

export function configure(aurelia: Aurelia) {
  aurelia.use
         .standardConfiguration()
         .developmentLogging()
         .plugin(PLATFORM.moduleName('oribella-aurelia-gestures'));
  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

oa-contextmenu.ts

import { customAttribute, inject, bindable } from 'aurelia-framework';
import { DOM } from 'aurelia-pal';
import { oribella } from 'oribella';
import { Contextmenu } from './contextmenu';

@customAttribute('oa-contextmenu')
@inject(DOM.Element)
export class OaContextmenu {
  @bindable public selector: string;
  @bindable public options = {};
  @bindable public start = () => { };
  @bindable({ primaryProperty: true }) public end = () => { };
  @bindable public cancel = () => { };
  @bindable public stop = () => { };
  private remove: () => void = () => { };
  constructor(public element: Element) {}

  public attached() {
    this.remove = oribella.on(Contextmenu, this.element, this as any);
  }
  public detached() {
    this.remove();
  }
}

styles.css

@font-face {
  font-family: "LUI icons";
  src: url(https://unpkg.com/[email protected]/dist/lui-icons.woff) format('woff'), url(https://unpkg.com/[email protected]/dist/lui-icons.ttf) format('truetype');
}

@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  color: #595959;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

table {
  height: 100%;
  width: 100%;
}

td {
  text-align: center;
  cursor: default;
}

* {
  user-select: none;
}