salix/front/core/components/contextmenu/index.js

import ngModule from '../../module';
export default class Contextmenu {
    constructor($element, $, $transclude) {
        this.$element = $element;
        this.element = $element[0];
        this.$ = $;
        this.$transclude = $transclude;
        // 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);
        }); */
    }

    $onInit() {
        /*         const transcludeElement = this.element.querySelector('vn-menu');
        const content = angular.element(transcludeElement);

        this.$transclude(($clone, $scope) => {
            this.$contentScope = $scope;
            // $scope.$target = 'hola??';
            const list = angular.element('<vn-list></vn-list>');
            list.append($clone);

            content.append(list);
        }, null, 'menu'); */
    }

    get targets() {
        return this._targets;
    }

    set targets(value) {
        this._targets = value;

        if (!value) return;

        for (let selector of value) {
            const target = document.querySelector(selector);// Find elements
            if (!target) continue;

            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.eventTarget = event.target;

                /* const menu = this.element.querySelector('vn-menu');
                const list = document.createElement('vn-list');
                menu.append(list);

                const transcludeElement = this.element.querySelector('vn-list');
                const content = angular.element(transcludeElement);
                console.log(transcludeElement);

                this.$transclude(($clone, $scope) => {
                    this.$contentScope = $scope;
                    $scope.$target = 'hola??';
                    console.log($clone);
                    content.append($clone);
                }, null, 'menu'); */

                this.$.menu.show(parent);
            });
        }
    }

    /*             const transcludeElement = this.element.querySelector('vn-list');
            const content = angular.element(transcludeElement);
            console.log(transcludeElement);

            this.$transclude(($clone, $scope) => {
                this.$contentScope = $scope;
                $scope.$target = 'hola??';
                content.append($clone);
            }); */

    filterBySelection() {
        // const target = $event.target;
        const model = this.model;
        const target = this.eventTarget;
        console.log(target);

        const table = target.closest('.vn-table');
        const headerCols = table.querySelectorAll('vn-thead vn-th');

        const row = target.closest('.vn-tr');
        const col = target.closest('vn-td');

        const rowIndex = row.getAttribute('data-index');

        const columns = Array.from(row.querySelectorAll('vn-td'));

        const fieldIndex = columns.findIndex(column => column == col);
        const fieldName = headerCols[fieldIndex].getAttribute('field');

        const rowData = model.data[rowIndex];

        const filter = {where: {}};
        filter['where'][fieldName] = rowData[fieldName];
        console.log(filter);

        model.addFilter(filter);
    }

    excludeSelection() {
        const model = this.model;
        const target = this.eventTarget;

        const table = target.closest('.vn-table');
        const headerCols = table.querySelectorAll('vn-thead vn-th');

        const row = target.closest('.vn-tr');
        const col = target.closest('vn-td');

        const rowIndex = row.getAttribute('data-index');

        const columns = Array.from(row.querySelectorAll('vn-td'));

        const fieldIndex = columns.findIndex(column => column == col);
        const fieldName = headerCols[fieldIndex].getAttribute('field');

        const rowData = model.data[rowIndex];

        const filter = {where: {}};
        filter['where'][fieldName] = {neq: rowData[fieldName]};
        console.log(filter);

        model.addFilter(filter);
    }

    removeFilter() {
        this.model.removeFilter();
    }
}

Contextmenu.$inject = ['$element', '$scope', '$transclude'];

ngModule.vnComponent('vnContextmenu', {
    controller: Contextmenu,
    template: require('./index.html'),
    bindings: {
        targets: '<?',
        model: '<?'
    },
    transclude: {
        menu: '?slotMenu'
    }
});