salix/client/core/src/icon-menu/icon-menu.js

import {module} from '../module';
import './style.scss';

export default class IconMenu {
    constructor($element, $http, $timeout) {
        this.$element = $element;
        this.$http = $http;
        this.$timeout = $timeout;
        this._showDropDown = false;
        this.finding = false;
        this.findMore = false;
        this.element = $element[0];
    }

    get showDropDown() {
        return this._showDropDown;
    }

    set showDropDown(value) {
        this._showDropDown = value;
    }

    findItems(search) {
        if (!this.url)
            return this.items ? this.items : [];

        if (search && !this.finding) {
            let filter = {where: {name: {regexp: search}}};
            let json = JSON.stringify(filter);
            this.finding = true;
            this.$http.get(`${this.url}?filter=${json}`).then(
                json => {
                    this.items = json.data;
                    this.finding = false;
                },
                () => {
                    this.finding = false;
                }
            );
        } else if (!search && !this.finding) {
            this.maxRow = 10;
            this.items = [];
            this.getItems();
        }
    }

    getItems() {
        let filter = {};

        if (this.maxRow) {
            if (this.items) {
                filter.skip = this.items.length;
            }
            filter.limit = this.maxRow;
            filter.order = 'name ASC';
        }

        let json = JSON.stringify(filter);

        this.$http.get(`${this.url}?filter=${json}`).then(
            json => {
                if (json.data.length)
                    json.data.forEach(
                        el => {
                            this.items.push(el);
                        }
                    );
                else
                    this.maxRow = false;
            }
        );
    }

    $onInit() {
        if (!this.items && this.url) {
            this.items = [];
            this.getItems();
        }

        this.findMore = this.url && this.maxRow;

        this.mouseFocus = false;
        this.focused = false;

        this.$element.bind('mouseover', e => {
            this.$timeout(() => {
                this.mouseFocus = true;
                this.showDropDown = this.focused;
            });
        });

        this.$element.bind('mouseout', () => {
            this.$timeout(() => {
                this.mouseFocus = false;
                this.showDropDown = this.focused;
            });
        });
        this.$element.bind('focusin', e => {
            this.$timeout(() => {
                this.focused = true;
                this.showDropDown = true;
            });
        });
        this.$element.bind('focusout', e => {
            this.$timeout(() => {
                this.focused = false;
                this.showDropDown = this.mouseFocus;
            });
        });
    }

    $onDestroy() {
        this.$element.unbind('mouseover');
        this.$element.unbind('mouseout');
        this.$element.unbind('focusin');
        this.$element.unbind('focusout');
    }
}

IconMenu.$inject = ['$element', '$http', '$timeout'];

module.component('vnIconMenu', {
    template: require('./icon-menu.html'),
    bindings: {
        url: '@?',
        items: '<?',
        icon: '@',
        maxRow: '@?',
        selected: '='
    },
    controller: IconMenu
});