Merge pull request #1 from Johnathan/feature/menu-position

Don't open the menu on the left if we're at the edge of the screen
Johnathan · Oct 22, 2018 · 1867863 · 1867863
2 parents 57447fc + 25b2fe2
commit 1867863
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 48 deletions.
diff --git a/example/App.vue b/example/App.vue
@@ -6,7 +6,9 @@
             Right Click Me!
         </div>
 
-        <div class="console" v-html="consoleMessage.length ? consoleMessage.join('<br>') : '...'"></div>
+        <div class="console"
+             v-html="consoleMessage.length ? consoleMessage.join('<br>') : '...'">
+        </div>
 
     </div>
 </template>
@@ -18,34 +20,48 @@ export default {
   name: 'app',
   data() {
     return {
-      menuItems: [
-        {
-          label: 'First Menu Item',
-        },
-        {
-          label: 'Disabled Menu Item',
-          disabled: true,
+      menuItems: [],
+      consoleMessage: [],
+    };
+  },
+
+  mounted() {
+    this.menuItems = [
+      {
+        label: 'First Menu Item',
+        handler: () => {
+          this.consoleMessage.unshift('First Menu Item Clicked');
         },
-        {
-          label: 'I have children',
-          children: [
-            {
-              label: 'Child Item 1',
+      },
+      {
+        label: 'Disabled Menu Item',
+        disabled: true,
+      },
+      {
+        label: 'I have children',
+        children: [
+          {
+            label: 'Child Item 1',
+            handler: () => {
+              this.consoleMessage.unshift('Child Item 1 Clicked');
             },
-            {
-              label: 'I also have children',
-              children: [
-                {
-                  label: 'Child Item 2',
+          },
+          {
+            label: 'I also have children',
+            children: [
+              {
+                label: 'Child Item 2',
+                handler: () => {
+                  this.consoleMessage.unshift('Child Item 2 Clicked');
                 },
-              ],
-            },
-          ],
-        },
-      ],
-      consoleMessage: [],
-    };
+              },
+            ],
+          },
+        ],
+      },
+    ];
   },
+
   components: {
     ContextMenu,
   },
@@ -55,6 +71,8 @@ export default {
 <style lang="scss">
     body, html {
         height: 100%;
+        margin: 0;
+        padding: 0;
     }
 
     #app {
@@ -72,8 +90,8 @@ export default {
     }
 
     .context-menu-trigger {
-        width: 50%;
-        margin: 2em auto;
+        width: 100%;
+        /*margin: 2em auto;*/
         padding: 2em;
         background: #c0c0c0;
     }

diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
       "url": "https://github.com/Johnathan/vue-context-menu-popup/issues",
       "email": "johnathan.barrett@gmail.com"
   },
-  "version": "1.0.2",
+  "version": "1.0.4",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve ./example/main.js --open",

diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
@@ -1,6 +1,11 @@
 <template>
-    <div class="context-menu context-menu-container" v-if="visible" :style="contextMenuPosition"
-         v-click-outside="close" @click="close">
+    <div class="context-menu context-menu-container"
+         :class="openPosition"
+         v-if="visible"
+         :style="contextMenuPosition"
+         v-click-outside="close" @click="close"
+         ref="contextMenu"
+    >
         <ul>
             <context-menu-item
                     v-for="(menuItem, index) in menuItems"
@@ -39,6 +44,7 @@ export default {
         top: 0,
         left: 0,
       },
+      openPosition: 'context-menu-open-right',
     };
   },
 
@@ -51,25 +57,37 @@ export default {
      * Accepts an Object with an `x, y` position or an instance of Event
      */
     open(position) {
-      let x = 0;
-      let y = 0;
-
-      if (typeof position !== 'undefined' && typeof position === 'object') {
-        if (position instanceof Event) {
-          x = position.pageX;
-          y = position.pageY;
-        } else {
-          x = position.x;
-          y = position.y;
-        }
-      }
+      this.visible = true;
+
+      this.$nextTick(() => {
+        let x = 0;
+        let y = 0;
+
+        if (typeof position !== 'undefined' && typeof position === 'object') {
+          if (position instanceof Event) {
+            const windowWidth = window.innerWidth;
+            const contextMenuWidth = this.$refs.contextMenu.getBoundingClientRect().width;
+
+            if (position.pageX >= (windowWidth - contextMenuWidth)) {
+              this.openPosition = 'context-menu-open-left';
+              x = windowWidth - contextMenuWidth - 10;
+            } else {
+              this.openPosition = 'context-menu-open-right';
+              x = position.pageX;
+            }
 
-      this.contextMenuPosition = {
-        left: `${x}px`,
-        top: `${y}px`,
-      };
+            y = position.pageY;
+          } else {
+            x = position.x;
+            y = position.y;
+          }
+        }
 
-      this.visible = true;
+        this.contextMenuPosition = {
+          left: `${x}px`,
+          top: `${y}px`,
+        };
+      });
     },
   },
 
@@ -84,7 +102,6 @@ export default {
 </script>
 
 <style lang="scss">
-    // Context Menu Stuff, should probably move this somewhere else.
     $context-menu-border-radius: 4px;
 
     .context-menu-container {
@@ -151,5 +168,18 @@ export default {
                 }
             }
         }
+
+        &.context-menu-open-left {
+            ul {
+                li {
+                    &:hover {
+                        > ul {
+                            left: auto;
+                            right: calc(100% + 2px);
+                        }
+                    }
+                }
+            }
+        }
     }
 </style>