2017-06-13 11:08:06 +00:00
|
|
|
import {module} from '../module';
|
2017-06-15 09:22:47 +00:00
|
|
|
import './style.scss';
|
2017-06-13 11:08:06 +00:00
|
|
|
|
|
|
|
export default class IconMenu {
|
|
|
|
constructor($element, $http, $timeout) {
|
|
|
|
this.$element = $element;
|
|
|
|
this.$http = $http;
|
|
|
|
this.$timeout = $timeout;
|
|
|
|
this._showDropDown = false;
|
|
|
|
}
|
|
|
|
get showDropDown() {
|
|
|
|
return this._showDropDown;
|
|
|
|
}
|
|
|
|
set showDropDown(value) {
|
|
|
|
this._showDropDown = value;
|
|
|
|
}
|
|
|
|
|
|
|
|
getItems() {
|
|
|
|
this.$http.get(this.url).then(
|
|
|
|
json => {
|
|
|
|
this.items = json.data;
|
|
|
|
}
|
|
|
|
);
|
|
|
|
}
|
|
|
|
$onInit() {
|
|
|
|
if (!this.items && this.url) {
|
|
|
|
this.getItems();
|
|
|
|
}
|
|
|
|
|
2017-06-15 05:45:01 +00:00
|
|
|
this.$element.bind('mouseover', e => {
|
2017-06-13 11:08:06 +00:00
|
|
|
this.$timeout(() => {
|
|
|
|
this.showDropDown = true;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
this.$element.bind('mouseout', () => {
|
|
|
|
this.$timeout(() => {
|
|
|
|
this.showDropDown = false;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
2017-06-15 05:45:01 +00:00
|
|
|
$onDestroy() {
|
|
|
|
this.$element.unbind('mouseover');
|
|
|
|
this.$element.unbind('mouseout');
|
|
|
|
}
|
2017-06-13 11:08:06 +00:00
|
|
|
}
|
|
|
|
IconMenu.$inject = ['$element', '$http', '$timeout'];
|
|
|
|
|
|
|
|
module.component('vnIconMenu', {
|
|
|
|
template: require('./icon-menu.html'),
|
|
|
|
bindings: {
|
|
|
|
url: '@?',
|
|
|
|
items: '=?',
|
|
|
|
icon: '@',
|
|
|
|
selected: '='
|
|
|
|
},
|
|
|
|
controller: IconMenu,
|
|
|
|
controllerAs: 'im'
|
|
|
|
});
|