2176 - Added contextmenu

front/core/components/contextmenu/index.html

@@ -0,0 +1,5 @@
+<section vn-id="contextmenu" style="position: absolute">
+    <vn-menu vn-id="menu">
+        <vn-list ng-transclude="menu"></vn-list>
+    </vn-menu>
+</section>

front/core/components/contextmenu/index.js

@@ -0,0 +1,68 @@
+import ngModule from '../../module';
+export default class Contextmenu {
+    constructor($element, $, $window) {
+        this.$element = $element;
+        this.element = $element[0];
+        this.$ = $;
+        this.$window = $window;
+        // this.displayMode = 'relative';
+
+        // Foreach element, apply an addEventListener???
+        /*
+        document.body.addEventListener('contextmenu', event => {
+            if (!event.defaultPrevented)
+                event.preventDefault();
+
+            const target = event.target;
+            const rect = target.getBoundingClientRect();
+
+            console.log('ScreenY', event.pageY);
+            console.log('OffsetY', event.pageX);
+
+            const parent = $.contextmenu;
+            parent.style.top = event.pageY + 'px';
+            parent.style.left = event.pageX + 'px';
+
+            $.menu.show(parent);
+        }); */
+    }
+
+    get target() {
+        return this._target;
+    }
+
+    set target(value) {
+        this._target = value;
+
+        if (!value) return;
+
+        const target = document.querySelector(value);// Find elements
+        console.log(this.element);
+
+        if (!target) return;
+
+        target.addEventListener('contextmenu', event => {
+            if (!event.defaultPrevented)
+                event.preventDefault();
+
+            const parent = this.$.contextmenu;
+            parent.style.top = event.pageY + 'px';
+            parent.style.left = event.pageX + 'px';
+
+            this.$.menu.show(parent);
+        });
+    }
+}
+
+Contextmenu.$inject = ['$element', '$scope', '$window'];
+
+ngModule.vnComponent('vnContextmenu', {
+    controller: Contextmenu,
+    template: require('./index.html'),
+    bindings: {
+        target: '@?'
+    },
+    transclude: {
+        menu: '?slotMenu'
+    }
+});

front/core/components/index.js

@@ -50,3 +50,4 @@ import './th';
 import './treeview';
 import './wday-picker';
 import './datalist';
+import './contextmenu';

modules/client/front/index/index.js

@@ -19,6 +19,10 @@ export default class Controller extends Section {
         this.$state.go(`ticket.index`,
             {q: JSON.stringify({clientFk: client.id})});
     }
+
+    filterBySelection() {
+        console.log('Filtro por seleccion');
+    }
 }
 
 ngModule.component('vnClientIndex', {

modules/item/front/index/index.html

@@ -122,4 +122,13 @@
     <vn-item-summary
         item="$ctrl.itemSelected">
     </vn-item-summary>
-</vn-popup>
+</vn-popup>
+<vn-contextmenu target="vn-data-viewer">
+    <slot-menu>
+        <vn-item ng-click="$ctrl.filterBySelection()">Filter by selection</vn-item>
+        <vn-item>Exclude selection</vn-item>
+        <vn-item>Remove filter by selection</vn-item>
+        <vn-item>Order DESC</vn-item>
+        <vn-item>Order ASC</vn-item>
+    </slot-menu>
+</vn-contextmenu>