refactoring de dropDown, ya no watchea si no está abierto

This commit is contained in:
Daniel Herrero 2017-12-12 13:38:23 +01:00
parent 34016dfa1e
commit 6d1bbfe6c2
2 changed files with 19 additions and 11 deletions

View File

@ -1,4 +1,4 @@
<vn-vertical class="dropdown-body" ng-show="$ctrl.show"> <vn-vertical class="dropdown-body" ng-if="$ctrl.show">
<vn-auto ng-show="$ctrl.filter" class="filter"> <vn-auto ng-show="$ctrl.filter" class="filter">
<vn-horizontal> <vn-horizontal>
<input vn-one placeholder="{{'Search' | translate}}" type="text" ng-model="$ctrl.search"/> <input vn-one placeholder="{{'Search' | translate}}" type="text" ng-model="$ctrl.search"/>

View File

@ -7,13 +7,16 @@ export default class DropDown {
this.$filter = $filter; this.$filter = $filter;
this.$timeout = $timeout; this.$timeout = $timeout;
this.container = $element[0].querySelector('ul.dropdown');
this._search = null; this._search = null;
this.itemsFiltered = []; this.itemsFiltered = [];
this._activeOption = -1; this._activeOption = -1;
this._focusingFilter = false; this._focusingFilter = false;
this._tryToShow = 0; this._tryToShow = 0;
} }
get container() {
return this.$element[0].querySelector('ul.dropdown');
}
get show() { get show() {
return this._show; return this._show;
} }
@ -70,12 +73,15 @@ export default class DropDown {
_setFocusInFilterInput(value, oldValue) { _setFocusInFilterInput(value, oldValue) {
if (value && !this._focusingFilter && oldValue !== value && this.filter) { if (value && !this._focusingFilter && oldValue !== value && this.filter) {
this.$timeout(() => {
let inputFilterSearch = this.$element[0].querySelector('input'); let inputFilterSearch = this.$element[0].querySelector('input');
this._focusingFilter = true; this._focusingFilter = true;
if (inputFilterSearch)
this.$timeout(() => { this.$timeout(() => {
inputFilterSearch.focus(); inputFilterSearch.focus();
this._focusingFilter = false; this._focusingFilter = false;
}, 250); }, 250);
});
} }
} }
_background(create) { _background(create) {
@ -184,12 +190,14 @@ export default class DropDown {
} }
setScrollPosition() { setScrollPosition() {
let child = this.$element[0].querySelector('ul.dropdown li.active'); let child = this.$element[0].querySelector('ul.dropdown li.active');
if (child) {
let childRect = child.getBoundingClientRect(); let childRect = child.getBoundingClientRect();
let containerRect = this.container.getBoundingClientRect(); let containerRect = this.container.getBoundingClientRect();
if (typeof child.scrollIntoView === 'function' && (childRect.top > containerRect.top + containerRect.height || childRect.top < containerRect.top)) { if (typeof child.scrollIntoView === 'function' && (childRect.top > containerRect.top + containerRect.height || childRect.top < containerRect.top)) {
child.scrollIntoView(); child.scrollIntoView();
} }
} }
}
selectItem(item) { selectItem(item) {
this.selected = item; this.selected = item;
if (this.multiple) { if (this.multiple) {