Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-10 08:14:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Keep menu content inside viewport

Browse source
This commit is contained in:
Marcos Moura 2016-10-24 19:43:55 -02:00
parent 75a55ef398
commit b564e48c0a
2 changed files with 55 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
docs/src/pages/components/Menu.vue
View file

@ -49,16 +49,6 @@
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu>
<md-button md-menu-trigger>Options</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
</demo-example>
</div>

107
src/components/mdMenu/mdMenu.vue
View file

@ -59,6 +59,57 @@
this.close();
}
},
isAboveOfViewport(pos) {
return pos.top <= this.margin;
},
isBelowOfViewport(pos) {
return pos.top + this.menuContent.offsetHeight + this.margin >= window.innerHeight;
},
isOnTheLeftOfViewport(pos) {
return pos.left <= this.margin;
},
isOnTheRightOfViewport(pos) {
return pos.left + this.menuContent.offsetWidth + this.margin >= window.innerWidth;
},
getInViewPosition(position) {
if (this.isAboveOfViewport(position)) {
position.top = this.margin;
position.origin = 'center top';
if (this.isOnTheLeftOfViewport(position)) {
position.origin = 'left top';
}
if (this.isOnTheRightOfViewport(position)) {
position.origin = 'right top';
}
}
if (this.isOnTheLeftOfViewport(position)) {
position.left = this.margin;
position.origin = 'left';
}
if (this.isOnTheRightOfViewport(position)) {
position.left = window.innerWidth - this.margin - this.menuContent.offsetWidth;
position.origin = 'right';
}
if (this.isBelowOfViewport(position)) {
position.top = window.innerHeight - this.margin - this.menuContent.offsetHeight;
position.origin = 'center bottom';
if (this.isOnTheLeftOfViewport(position)) {
position.origin = 'left bottom';
}
if (this.isOnTheRightOfViewport(position)) {
position.origin = 'right bottom';
}
}
return position;
},
getBottomRightPos() {
let menuTriggerRect = this.menuTrigger.getBoundingClientRect();
let position = {
@ -67,19 +118,7 @@
origin: 'left top'
};
if (position.left <= this.margin) {
position.left = this.margin;
position.origin = 'center top';
}
if (position.top <= this.margin) {
position.top = this.margin;
position.origin = 'left center';
}
if (position.left <= this.margin && position.top <= this.margin) {
position.origin = 'center';
}
this.getInViewPosition(position);
return position;
},
@ -91,19 +130,7 @@
origin: 'right top'
};
if (position.left <= this.margin) {
position.left = this.margin;
position.origin = 'center top';
}
if (top <= this.margin) {
position.top = this.margin;
position.origin = 'right center';
}
if (position.left <= this.margin && top <= this.margin) {
position.origin = 'center';
}
this.getInViewPosition(position);
return position;
},
@ -115,19 +142,7 @@
origin: 'left bottom'
};
if (position.left <= this.margin) {
position.left = this.margin;
position.origin = 'center bottom';
}
if (top <= this.margin) {
top = this.margin;
position.origin = 'left center';
}
if (position.left <= this.margin && position.top <= this.margin) {
position.origin = 'center';
}
this.getInViewPosition(position);
return position;
},
@ -139,19 +154,7 @@
origin: 'right bottom'
};
if (position.left <= this.margin) {
position.left = this.margin;
position.origin = 'center bottom';
}
if (position.top <= this.margin) {
position.top = this.margin;
position.origin = 'right center';
}
if (position.left <= this.margin && position.top <= this.margin) {
position.origin = 'center';
}
this.getInViewPosition(position);
return position;
},