Merge pull request #19 from prabhuignoto/fixes

👆 touch support

README.md

@@ -19,6 +19,7 @@
 
 - ⚓  Dock your menu with ease.
 - 🤏  Dock the Menubar by dragging and dropping to the edges of the screen.
+- 👆  Touch support.
 - 👍  Support for nested menus up to any levels.
 - 👓  The Menus adjust to any docked position and enables an intuitive menu navigation.
 - ⌨  Keyboard Accessible.

package.json

@@ -50,16 +50,16 @@
     "@vue/compiler-sfc": "^3.0.4",
     "eslint": "^7.15.0",
     "eslint-plugin-vue": "^7.2.0",
-    "husky": "^4.3.5",
+    "husky": "^4.3.6",
     "lint-staged": "^10.5.3",
-    "rollup": "^2.34.2",
+    "rollup": "^2.35.0",
     "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.30.0",
     "stylelint": "^13.8.0",
     "stylelint-config-standard": "^20.0.0",
-    "typescript": "^4.1.2",
+    "typescript": "^4.1.3",
     "vite": "^1.0.0-rc.13",
     "vue": "^3.0.4"
   },

src/components/HelloWorld.vue

@@ -3,9 +3,9 @@
     :items="items"
     :on-selected="selected"
     :theme="{
-      primary: '#b2b2b2',
-      secondary: '#e5e5e5',
-      tertiary: '#008ecc',
+      primary: '#51A2D9',
+      secondary: '#B9E5F3',
+      tertiary: '#53C0F0',
       textColor: '#000',
       textHoverColor: '#fff',
     }"

src/components/Menu.vue

@@ -42,6 +42,14 @@
             disable: item.disable,
           })
         "
+        @touchend="
+          handleSelection({
+            event: $event,
+            name: item.name,
+            isParent: !!item.menu,
+            disable: item.disable,
+          })
+        "
       >
         <template v-if="!item.isDivider">
           <span
@@ -194,6 +202,7 @@ export default defineComponent({
         name,
         path: `${props.parent}>${path ? path : name}`.toLowerCase(),
       });
+
     };
 
     const menuItemStyle = computed(() => ({

src/components/MenuBar.vue

@@ -5,12 +5,12 @@
     :draggable="draggable"
     tabindex="0"
     :style="{ background: theme.primary }"
+    @dragover="handleDragMove"
     @dragstart="handleDragStart"
-    @dragover="handleDrag"
     @dragend="handleDragEnd"
-    @touchEnd="handleDragEnd"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
+    @touchstart="handleDragStart"
+    @touchmove="handleDragMove"
+    @touchend="handleDragEnd"
   >
     <ul
       :class="[dockClass, 'menu-bar-items']"
@@ -115,6 +115,9 @@ export default defineComponent({
     // reference to the main menubar itself
     const menuBarRef = ref<HTMLElement>();
 
+    // tracks if the drag has been started
+    const dragStart = ref(false);
+
     // tracks the drag status of the menubar
     const dragActive = ref(false);
 
@@ -155,12 +158,26 @@ export default defineComponent({
 
     const clientCoords = ref<{ x: number; y: number }>({ x: 0, y: 0 });
 
+    // activate the menu bar
+    const handleMouseEnter = () => {
+      menuBarActive.value = true;
+    };
+
+    // deactivate the menubar if active
+    const handleMouseLeave = () => {
+      if (!isMobileDevice.value && !menuActive.value) {
+        menuBarActive.value = false;
+      }
+    };
+
     const handleMenuClosure = () => {
-      menuActive.value = false;
-      menuBarActive.value = false;
-      activeMenuSelection.value = -1;
-      activeMenuBarId.value = "";
-      highlightFirstElement.value = false;
+      if (unref(menuActive) || unref(menuBarActive)) {
+        menuBarActive.value = false;
+        menuActive.value = false;
+        activeMenuSelection.value = -1;
+        activeMenuBarId.value = "";
+        highlightFirstElement.value = false;
+      }
     };
 
     //** Lifecylce  Methods **
@@ -178,22 +195,48 @@ export default defineComponent({
 
       // check if its a mobile device
       isMobileDevice.value = isMobile();
+      const menuBar = unref(menuBarRef);
+
+      if (isMobileDevice.value) {
+        if (menuBar) {
+          // menuBar.addEventListener('touchmove', handleDragMove);
+        }
+        document.addEventListener("touchend", handleMenuClosure);
+      } else {
+        document.addEventListener("click", handleMenuClosure);
+
+        if(menuBar)  {
+          menuBar.addEventListener('mouseenter', handleMouseEnter);
+          menuBar.addEventListener('mouseleave', handleMouseLeave);
+        }
+      }
 
       document.addEventListener("dragover", updateDragCoords);
-      document.addEventListener("click", handleMenuClosure);
     });
 
     // cleanup
     onUnmounted(() => {
       document.removeEventListener("dragover", updateDragCoords);
-      document.removeEventListener("click", handleMenuClosure);
+
+      const menuBar = unref(menuBarRef);
+
+      if (isMobileDevice.value) {
+        document.removeEventListener("touchend", handleMenuClosure);
+      } else {
+        document.removeEventListener("click", handleMenuClosure);
+
+        if(menuBar)  {
+          menuBar.removeEventListener('mouseenter', handleMouseEnter);
+          menuBar.removeEventListener('mouseleave', handleMouseLeave);
+        }
+      }
+
+      document.removeEventListener("dragover", updateDragCoords);
     });
 
     const handleDragStart = (event: DragEvent | TouchEvent) => {
-      dragActive.value = true;
-
-      // close the menu during drag operation
-      menuActive.value = false;
+      dragStart.value = true;
+      dragActive.value = false;
 
       // set a custom ghost image while dragging
       utils.handleDragStart(event);
@@ -202,13 +245,33 @@ export default defineComponent({
     //** Drag handlers **
 
     const handleDragEnd = (event: DragEvent | TouchEvent) => {
-      const {
-        dragActive: dragActiveNew,
-        dockPosition: positionNew,
-      } = utils.handleDragEnd(event, unref(clientCoords));
+      if (!unref(dragActive)) {
+        return;
+      }
+
+      const dragEndResult = utils.handleDragEnd(event, unref(clientCoords));
 
-      dragActive.value = dragActiveNew;
-      dockPosition.value = positionNew;
+      if (dragEndResult) {
+        const {
+          dragActive: dragActiveNew,
+          dockPosition: positionNew,
+        } = dragEndResult;
+
+        dragActive.value = dragActiveNew;
+        dockPosition.value = positionNew;
+      }
+
+      dragStart.value = false;
+      dragActive.value = false;
+    };
+
+    const handleDragMove = () => {
+      if (dragStart.value) {
+        dragActive.value = true;
+
+        // close the menu during drag operation
+        menuActive.value = false;
+      }
     };
 
     const handleDrag = (event: DragEvent) => {
@@ -244,18 +307,6 @@ export default defineComponent({
       }
     };
 
-    const handleBlur = () => {
-      menuActive.value = false;
-      menuBarActive.value = false;
-      highlightFirstElement.value = false;
-
-      menuItems.value = menuItems.value.map((item) =>
-        Object.assign({}, item, {
-          showMenu: false,
-        })
-      );
-    };
-
     //** computed methods */
 
     // convert to a sidebar when docked to either left or right
@@ -270,26 +321,12 @@ export default defineComponent({
 
     //** final selection handler */
     const handleSelected = (data: any) => {
-      menuActive.value = false;
+      handleMenuClosure();
       props.onSelected(data);
     };
 
     //** keyboard handlers  **
 
-    // activate the menu bar
-    const handleMouseEnter = () => {
-      if (!isMobileDevice.value) {
-        menuBarActive.value = true;
-      }
-    };
-
-    // deactivate the menubar if active
-    const handleMouseLeave = () => {
-      if (!isMobileDevice.value && !menuActive.value) {
-        menuBarActive.value = false;
-      }
-    };
-
     // activates the menu via keyboard
     const handleActivateDir = (id: string, dir: "prev" | "next") => {
       const eleIndex = menuItems.value.findIndex((item) => item.id === id);
@@ -341,30 +378,30 @@ export default defineComponent({
     };
 
     return {
+      activeMenuBarId,
+      activeMenuSelection,
       barHeight,
       barWidth,
       dockClass,
       dockPosition,
+      expandClass,
+      handleActivateDir,
+      handleActivateMenu,
+      handleDrag,
+      handleDragCancel,
       handleDragEnd,
+      handleDragMove,
       handleDragStart,
-      handleOnShowMenu,
-      handleActivateMenu,
       handleMouseEnter,
       handleMouseLeave,
-      handleBlur,
+      handleOnShowMenu,
+      handleSelected,
+      highlightFirstElement,
+      isMobileDevice,
       menuActive,
+      menuBarActive,
       menuBarRef,
       menuItems,
-      handleDragCancel,
-      expandClass,
-      menuBarActive,
-      isMobileDevice,
-      handleDrag,
-      handleActivateDir,
-      activeMenuSelection,
-      activeMenuBarId,
-      handleSelected,
-      highlightFirstElement,
     };
   },
 });

src/components/MenuBarItem.scss

@@ -1,9 +1,9 @@
 .menu-bar-item-container {
   align-items: center;
+  cursor: pointer;
   display: flex;
   justify-content: center;
   position: relative;
-  cursor: pointer;
 
   &:focus {
     outline: 0;
@@ -32,32 +32,32 @@
 }
 
 .name-container {
-  text-transform: capitalize;
   font-size: 0.95rem;
   margin: 0.25rem 0;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-transform: capitalize;
+  white-space: nowrap;
 
   &.left,
   &.right {
     align-items: center;
+    background: none;
     display: flex;
     font-size: 1rem;
-    background: none;
-    width: 100%;
-    justify-content: flex-start;
     height: 1.5rem;
+    justify-content: flex-start;
+    width: 100%;
 
     &.expanded {
       padding-left: 1rem;
     }
 
     &:not(.expanded) {
-      width: 2rem;
       font-size: 1.1rem;
       justify-content: center;
       text-transform: uppercase;
+      width: 2rem;
     }
   }
 }