contextmenu - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

lib/index.js

@@ -6,2 +6,40 @@ "use strict";
     function default_1(items) {
+        var _this = this;
+        this.cancelListener = function (e) { return _this.hide(); };
+        this.handler = function (event) {
+            event.preventDefault();
+            console.log('target', event.target, event.target['parentNode']);
+            _this.container.innerHTML = '';
+            for (var _i = 0, _a = _this.items; _i < _a.length; _i++) {
+                var item = _a[_i];
+                if (item.trigger !== undefined && !item.trigger(event.target)) {
+                    console.log(item.trigger(event.target));
+                    continue;
+                }
+                var cell = document.createElement('div');
+                if (item.extra !== undefined && item.extra.disabled) {
+                    cell.setAttribute('disabled', '');
+                }
+                else {
+                    cell.setAttribute('data-event', item.event);
+                }
+                cell.textContent = item.text;
+                _this.container.appendChild(cell);
+            }
+            // defined here so that the marker gets set here (TODO: fix later)
+            _this.container.onclick = function (e) {
+                var cell = e.target;
+                var eventType = cell.getAttribute('data-event');
+                if (eventType) {
+                    _this.hide();
+                }
+            };
+            var _b = _this.container.getBoundingClientRect(), width = _b.width, height = _b.height;
+            var _c = document.documentElement, clientWidth = _c.clientWidth, clientHeight = _c.clientHeight;
+            var clientX = event.clientX, clientY = event.clientY;
+            var tx = clientX + width > clientWidth ? clientWidth - width : clientX;
+            var ty = clientY + height > clientHeight ? clientY - height : clientY;
+            _this.container.style.transform = "translate(" + tx + "px, " + ty + "px)";
+            _this.show();
+        };
         this.items = items;
@@ -16,56 +54,19 @@ // this._extraItems = new Map();
     }
-    default_1.prototype.add = function () {
+    default_1.prototype.add = function (parent) {
         var _this = this;
-        if (map === undefined) {
-            throw new Error('cannot add map editor to metro map: leaflet map is missing');
-        }
-        var mapPane = map.getPanes().mapPane;
-        var mapContainer = map.getContainer();
-        var listener = function (e) { return _this.handler(e); };
+        if (parent === void 0) { parent = document.body; }
         var cancelListener = function (e) { return _this.hide(); };
-        mapPane.addEventListener('contextmenu', listener, false);
+        parent.addEventListener('contextmenu', this.handler, false);
         // objectsPane.addEventListener('contextmenu', listener, true); // 'true' prevents propagation
-        mapContainer.addEventListener('mousedown', cancelListener);
-        mapContainer.addEventListener('touchstart', cancelListener);
-        if (!L.Browser.mobile) {
-            map.on('movestart', cancelListener);
-        }
-        document.body.appendChild(this.container);
+        parent.addEventListener('mousedown', cancelListener);
+        parent.addEventListener('touchstart', cancelListener);
+        parent.appendChild(this.container);
+        this.parent = parent;
     };
-    default_1.prototype.handler = function (event) {
-        var _this = this;
-        event.preventDefault();
-        console.log('target', event.target, event.target['parentNode']);
-        this.container.innerHTML = '';
-        for (var _i = 0, _a = this.items; _i < _a.length; _i++) {
-            var item = _a[_i];
-            if (item.trigger !== undefined && !item.trigger(event.target)) {
-                console.log(item.trigger(event.target));
-                continue;
-            }
-            var cell = document.createElement('div');
-            if (item.extra !== undefined && item.extra.disabled) {
-                cell.setAttribute('disabled', '');
-            }
-            else {
-                cell.setAttribute('data-event', item.event);
-            }
-            cell.textContent = item.text;
-            this.container.appendChild(cell);
-        }
-        // defined here so that the marker gets set here (TODO: fix later)
-        this.container.onclick = function (e) {
-            var cell = e.target;
-            var eventType = cell.getAttribute('data-event');
-            if (eventType) {
-                _this.hide();
-            }
-        };
-        var _b = this.container.getBoundingClientRect(), width = _b.width, height = _b.height;
-        var _c = document.documentElement, clientWidth = _c.clientWidth, clientHeight = _c.clientHeight;
-        var clientX = event.clientX, clientY = event.clientY;
-        var tx = clientX + width > clientWidth ? clientWidth - width : clientX;
-        var ty = clientY + height > clientHeight ? clientY - height : clientY;
-        this.container.style.transform = "translate(" + tx + "px, " + ty + "px)";
-        this.show();
+    default_1.prototype.remove = function () {
+        parent.removeEventListener('contextmenu', this.handler);
+        parent.removeEventListener('mousedown', this.cancelListener);
+        parent.removeEventListener('touchstart', this.cancelListener);
+        this.parent.removeChild(this.container);
+        this.parent = null;
     };
@@ -95,11 +96,5 @@ default_1.prototype.insertItem = function (event, text, trigger, extra, index) {
         this.container.style.visibility = null;
-        if (L.Browser.mobile) {
-            this.map.dragging.disable();
-        }
     };
     default_1.prototype.hide = function () {
         this.container.style.visibility = 'hidden';
-        if (L.Browser.mobile) {
-            this.map.dragging.enable();
-        }
     };
@@ -106,0 +101,0 @@ return default_1;

package.json

 {
   "name": "contextmenu",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A simple context menu for JavaScript",
@@ -5,0 +5,0 @@ "main": "index.js",

src/index.ts

 import { remove } from 'lodash'
 
+import ContextMenuItem from './item'
+import Extra from './extra'
+
 import * as style from './style.css'
 
-// TODO: merge items & extra items, introduce item index
-interface Extra {
-    icon?: string,
-    disabled?: boolean,
-}
-interface ContextMenuItem {
-    text: string,
-    event: string,
-    trigger?: (target: EventTarget) => boolean,
-    extra?: Extra,
-}
-
-export default class implements L.ILayer {
+export default class {
     private readonly items: ContextMenuItem[]
     private readonly container: HTMLDivElement
+    private parent: Node
 
@@ -33,21 +25,23 @@ constructor(items: ContextMenuItem[]) {
 
-    add() {
-        if (map === undefined) {
-            throw new Error('cannot add map editor to metro map: leaflet map is missing')
-        }
-        const { mapPane } = map.getPanes()
-        const mapContainer = map.getContainer()
-        const listener = e => this.handler(e)
+    add(parent: Node = document.body) {
         const cancelListener = e => this.hide()
-        mapPane.addEventListener('contextmenu', listener, false)
+        parent.addEventListener('contextmenu', this.handler, false)
         // objectsPane.addEventListener('contextmenu', listener, true); // 'true' prevents propagation
-        mapContainer.addEventListener('mousedown', cancelListener)
-        mapContainer.addEventListener('touchstart', cancelListener)
-        if (!L.Browser.mobile) {
-            map.on('movestart', cancelListener)
-        }
-        document.body.appendChild(this.container)
+        parent.addEventListener('mousedown', cancelListener)
+        parent.addEventListener('touchstart', cancelListener)
+        parent.appendChild(this.container)
+        this.parent = parent
     }
 
-    private handler(event: MouseEvent) {
+    remove() {
+        parent.removeEventListener('contextmenu', this.handler)
+        parent.removeEventListener('mousedown', this.cancelListener)
+        parent.removeEventListener('touchstart', this.cancelListener)
+        this.parent.removeChild(this.container)
+        this.parent = null
+    }
+
+    private cancelListener = e => this.hide()
+
+    private handler = (event: MouseEvent) => {
         event.preventDefault()
@@ -117,5 +111,2 @@ console.log('target', event.target, event.target['parentNode'])
         this.container.style.visibility = null
-        if (L.Browser.mobile) {
-            this.map.dragging.disable()
-        }
     }
@@ -125,6 +116,3 @@
         this.container.style.visibility = 'hidden'
-        if (L.Browser.mobile) {
-            this.map.dragging.enable()
-        }
     }
 }

No alert changes

Improved metrics

Total package byte prevSize

17371

increased by6.28%

Number of package files

21

increased by75%

Lines of code

304

increased by8.96%

No dependency changes