[Menu API] All our drop down menus should use the new menu api #3607 (#3620)

* [Menu API] All our drop down menu's now use the new menu api #3607

Co-authored-by: charlesh88 <charles.f.hacskaylo@nasa.gov>
Co-authored-by: Andrew Henry <akhenry@gmail.com>

src/api/menu/menu.js

@@ -21,32 +21,33 @@
  *****************************************************************************/
 import EventEmitter from 'EventEmitter';
 import MenuComponent from './components/Menu.vue';
+import SuperMenuComponent from './components/SuperMenu.vue';
 import Vue from 'vue';
 
+export const MENU_PLACEMENT = {
+    TOP: 'top',
+    TOP_LEFT: 'top-left',
+    TOP_RIGHT: 'top-right',
+    BOTTOM: 'bottom',
+    BOTTOM_LEFT: 'bottom-left',
+    BOTTOM_RIGHT: 'bottom-right',
+    LEFT: 'left',
+    RIGHT: 'right'
+};
+
 class Menu extends EventEmitter {
     constructor(options) {
         super();
 
         this.options = options;
-
-        this.component = new Vue({
-            components: {
-                MenuComponent
-            },
-            provide: {
-                actions: options.actions
-            },
-            template: '<menu-component />'
-        });
-
         if (options.onDestroy) {
             this.once('destroy', options.onDestroy);
         }
 
         this.dismiss = this.dismiss.bind(this);
         this.show = this.show.bind(this);
-
-        this.show();
+        this.showMenu = this.showMenu.bind(this);
+        this.showSuperMenu = this.showSuperMenu.bind(this);
     }
 
     dismiss() {
@@ -60,7 +61,7 @@ class Menu extends EventEmitter {
         this.component.$mount();
         document.body.appendChild(this.component.$el);
 
-        let position = this._calculatePopupPosition(this.options.x, this.options.y, this.component.$el);
+        let position = this._calculatePopupPosition(this.component.$el);
 
         this.component.$el.style.left = `${position.x}px`;
         this.component.$el.style.top = `${position.y}px`;
@@ -68,11 +69,97 @@ class Menu extends EventEmitter {
         document.addEventListener('click', this.dismiss);
     }
 
+    showMenu() {
+        this.component = new Vue({
+            provide: {
+                options: this.options
+            },
+            components: {
+                MenuComponent
+            },
+            template: '<menu-component />'
+        });
+
+        this.show();
+    }
+
+    showSuperMenu() {
+        this.component = new Vue({
+            provide: {
+                options: this.options
+            },
+            components: {
+                SuperMenuComponent
+            },
+            template: '<super-menu-component />'
+        });
+
+        this.show();
+    }
+
     /**
      * @private
      */
-    _calculatePopupPosition(eventPosX, eventPosY, menuElement) {
+    _calculatePopupPosition(menuElement) {
         let menuDimensions = menuElement.getBoundingClientRect();
+
+        if (!this.options.placement) {
+            this.options.placement = MENU_PLACEMENT.BOTTOM_RIGHT;
+        }
+
+        const menuPosition = this._getMenuPositionBasedOnPlacement(menuDimensions);
+
+        return this._preventMenuOverflow(menuPosition, menuDimensions);
+    }
+
+    /**
+     * @private
+     */
+    _getMenuPositionBasedOnPlacement(menuDimensions) {
+        let eventPosX = this.options.x;
+        let eventPosY = this.options.y;
+
+        // Adjust popup menu based on placement
+        switch (this.options.placement) {
+        case MENU_PLACEMENT.TOP:
+            eventPosX = this.options.x - Math.floor(menuDimensions.width / 2);
+            eventPosY = this.options.y - menuDimensions.height;
+            break;
+        case MENU_PLACEMENT.BOTTOM:
+            eventPosX = this.options.x - Math.floor(menuDimensions.width / 2);
+            break;
+        case MENU_PLACEMENT.LEFT:
+            eventPosX = this.options.x - menuDimensions.width;
+            eventPosY = this.options.y - Math.floor(menuDimensions.height / 2);
+            break;
+        case MENU_PLACEMENT.RIGHT:
+            eventPosY = this.options.y - Math.floor(menuDimensions.height / 2);
+            break;
+        case MENU_PLACEMENT.TOP_LEFT:
+            eventPosX = this.options.x - menuDimensions.width;
+            eventPosY = this.options.y - menuDimensions.height;
+            break;
+        case MENU_PLACEMENT.TOP_RIGHT:
+            eventPosY = this.options.y - menuDimensions.height;
+            break;
+        case MENU_PLACEMENT.BOTTOM_LEFT:
+            eventPosX = this.options.x - menuDimensions.width;
+            break;
+        case MENU_PLACEMENT.BOTTOM_RIGHT:
+            break;
+        }
+
+        return {
+            x: eventPosX,
+            y: eventPosY
+        };
+    }
+
+    /**
+     * @private
+     */
+    _preventMenuOverflow(menuPosition, menuDimensions) {
+        let { x: eventPosX, y: eventPosY } = menuPosition;
         let overflowX = (eventPosX + menuDimensions.width) - document.body.clientWidth;
         let overflowY = (eventPosY + menuDimensions.height) - document.body.clientHeight;
 
@@ -84,6 +171,14 @@ class Menu extends EventEmitter {
             eventPosY = eventPosY - overflowY;
         }
 
+        if (eventPosX < 0) {
+            eventPosX = 0;
+        }
+
+        if (eventPosY < 0) {
+            eventPosY = 0;
+        }
+
         return {
             x: eventPosX,
             y: eventPosY