nuevo comportamiento para dropDown, abrir arriba
This commit is contained in:
Daniel Herrero
parent
5ad2c70400
commit
00bd4a7696
|
|
@ -1,11 +1,11 @@
|
|||
<vn-vertical class="dropdown-body" ng-show="$ctrl.show">
|
||||
<vn-one ng-show="$ctrl.filter" class="filter">
|
||||
<vn-auto ng-show="$ctrl.filter" class="filter">
|
||||
<vn-horizontal>
|
||||
<input vn-one placeholder="{{'Search' | translate}}" type="text" ng-model="$ctrl.search"/>
|
||||
<vn-icon vn-none icon="clear" ng-click="$ctrl.clearSearch()"></vn-icon>
|
||||
</vn-horizontal>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
</vn-auto>
|
||||
<vn-auto>
|
||||
<ul class="dropdown">
|
||||
<li tabIndex="-1"
|
||||
ng-repeat="item in $ctrl.itemsFiltered track by $index"
|
||||
|
|
@ -25,5 +25,5 @@
|
|||
translate="{{$ctrl.showLoadMore ? 'Show More' : 'No more results'}}"
|
||||
></li>
|
||||
</ul>
|
||||
</vn-one>
|
||||
</vn-auto>
|
||||
</vn-vertical>
|
||||
|
|
@ -12,6 +12,7 @@ export default class DropDown {
|
|||
this.itemsFiltered = [];
|
||||
this._activeOption = -1;
|
||||
this._focusingFilter = false;
|
||||
this._tryToShow = 0;
|
||||
}
|
||||
get show() {
|
||||
return this._show;
|
||||
|
|
@ -19,11 +20,20 @@ export default class DropDown {
|
|||
|
||||
set show(value) {
|
||||
let oldValue = this.show;
|
||||
this._show = value;
|
||||
this._setFocusInFilterInput(value, oldValue);
|
||||
this.$timeout(() => {
|
||||
this._calculatePosition(value, oldValue);
|
||||
});
|
||||
// I wait up to 1 second if the dropdown opens but there is no data to show
|
||||
if (value && !oldValue && !this.itemsFiltered.length && this._tryToShow < 4) {
|
||||
this.$timeout(() => {
|
||||
this._tryToShow++;
|
||||
this.show = true;
|
||||
}, 250);
|
||||
} else {
|
||||
this._tryToShow = 0;
|
||||
this._show = value;
|
||||
this._setFocusInFilterInput(value, oldValue);
|
||||
this.$timeout(() => {
|
||||
this._calculatePosition(value, oldValue);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
get search() {
|
||||
|
|
@ -68,21 +78,42 @@ export default class DropDown {
|
|||
}, 250);
|
||||
}
|
||||
}
|
||||
_background(create) {
|
||||
let el = document.getElementById('ddBack');
|
||||
if (el) {
|
||||
el.parentNode.removeChild(el);
|
||||
}
|
||||
|
||||
if (create) {
|
||||
el = document.createElement('div');
|
||||
el.id = 'ddBack';
|
||||
document.body.appendChild(el);
|
||||
}
|
||||
}
|
||||
_calculatePosition(value, oldValue) {
|
||||
if (value && value !== oldValue && !this.top) {
|
||||
if (value && !oldValue) {
|
||||
if (this.parent === undefined) {
|
||||
this.parent = this.$element.parent().parent();
|
||||
}
|
||||
|
||||
let parentRect = this.parent.getBoundingClientRect();
|
||||
let elemetRect = this.$element[0].getBoundingClientRect();
|
||||
let instOffset = parentRect.bottom + elemetRect.height;
|
||||
|
||||
if (parentRect.y + parentRect.height + elemetRect.height > window.innerHeight) {
|
||||
let height = this.parent.nodeName === 'VN-AUTOCOMPLETE' ? elemetRect.height : elemetRect.height + parentRect.height;
|
||||
this.$element.css('margin-top', `-${height}px`);
|
||||
} else {
|
||||
this.$element.css('margin-top', ``);
|
||||
if (instOffset >= window.innerHeight) {
|
||||
this._background(true);
|
||||
this.$element.addClass('fixed-dropDown');
|
||||
this.$element.css('top', `${(parentRect.top - elemetRect.height)}px`);
|
||||
this.$element.css('left', `${(parentRect.x)}px`);
|
||||
this.$element.css('height', `${elemetRect.height}px`);
|
||||
}
|
||||
} else if (!value && oldValue) {
|
||||
this.$element.removeAttr('style');
|
||||
if (this.itemWidth) {
|
||||
this.$element.css('width', this.itemWidth + 'px');
|
||||
}
|
||||
this.$element.removeClass('fixed-dropDown');
|
||||
this._background();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -181,9 +212,6 @@ export default class DropDown {
|
|||
}
|
||||
}
|
||||
$onChanges(changesObj) {
|
||||
if (changesObj.show && changesObj.top && changesObj.top.currentValue) {
|
||||
this.$element.css('top', changesObj.top.currentValue + 'px');
|
||||
}
|
||||
if (changesObj.show && changesObj.itemWidth && changesObj.itemWidth.currentValue) {
|
||||
this.$element.css('width', changesObj.itemWidth.currentValue + 'px');
|
||||
}
|
||||
|
|
@ -220,7 +248,6 @@ module.component('vnDropDown', {
|
|||
removeLoadMore: '<?',
|
||||
filterAction: '&?',
|
||||
showLoadMore: '<?',
|
||||
top: '<?',
|
||||
itemWidth: '<?',
|
||||
parent: '<?',
|
||||
multiple: '<?'
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ vn-drop-down {
|
|||
padding: 0 15px;
|
||||
margin-left: -15px;
|
||||
background: transparent;
|
||||
max-height: 446px;
|
||||
overflow: hidden;
|
||||
.dropdown-body{
|
||||
background: white;
|
||||
border: 1px solid #A7A7A7;
|
||||
|
|
@ -27,7 +29,7 @@ vn-drop-down {
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
background: white;
|
||||
max-height: 400px;
|
||||
max-height: 378px;
|
||||
overflow-y: auto;
|
||||
li {
|
||||
outline: none;
|
||||
|
|
@ -55,4 +57,24 @@ vn-drop-down {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#ddBack {
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
vn-drop-down.fixed-dropDown {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.dropdown-body{
|
||||
height: 100%;
|
||||
ul{
|
||||
border-bottom: 1px solid #A7A7A7;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue