diff --git a/docs/src/pages/components/Menu.vue b/docs/src/pages/components/Menu.vue
index 20bdf9e..4cc4237 100644
--- a/docs/src/pages/components/Menu.vue
+++ b/docs/src/pages/components/Menu.vue
@@ -49,16 +49,6 @@
My Item 3
-
-
- Options
-
-
- My Item 1
- My Item 2
- My Item 3
-
-
diff --git a/src/components/mdMenu/mdMenu.vue b/src/components/mdMenu/mdMenu.vue
index 7025afa..7f09967 100644
--- a/src/components/mdMenu/mdMenu.vue
+++ b/src/components/mdMenu/mdMenu.vue
@@ -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;
},