Reactivity improvements

src/components/Board.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @contextmenu="showMenu" @click="hideMenu" class="board flex flex-col md:flex-row mb-2">
+  <div  class="board flex flex-col md:flex-row mb-2">
     <column v-for="(col, i) in columns" :key="col">
       <draggable
         v-model="data[i]"
@@ -25,15 +25,13 @@
         </transition-group>
       </draggable>
     </column>
-    <contextMenu :show="menuVisible" :cardId="focusedCard" :text="selectedText" />
   </div>
 </template>
 
 <script>
 import draggable from "vuedraggable";
 import column from "@/components/Column";
 import card from "@/components/Card";
-import contextMenu from "@/components/ContextMenu";
 import { mapState } from "vuex";
 
 export default {
@@ -42,15 +40,8 @@ export default {
     draggable,
     column,
     card,
-    contextMenu,
-  },
-  data: function () {
-    return {
-      menuVisible: false,
-      focusedCard: undefined,
-      selectedText: undefined,
-    };
   },
+  
   computed: {
     ...mapState({
       data: "cardData",
@@ -61,73 +52,6 @@ export default {
     reorderTodo(list, col) {
       this.$store.commit("reorderCards", { list, col });
     },
-    showMenu(e) {
-      e.preventDefault();
-      const origin = {
-        left: e.pageX,
-        top: e.pageY,
-      };
-
-      let levels = 3;
-      let target = e.target;
-      this.focusedCard = undefined;
-      while (levels--) {
-        if (target.hasAttribute("card")) {
-          this.focusedCard = parseInt(target.getAttribute("card"));
-          break;
-        } else target = target.parentElement;
-      }
-
-      this.setPosition(origin);
-      this.selectedText = this.copyText();
-    },
-    setPosition({ top, left }) {
-      const menu = document.querySelector(".menu");
-      // menu.style.left = `${left}px`;
-      // menu.style.top = `${top}px`;
-
-      let menuWidth = menu.offsetWidth + 4;
-      let menuHeight = menu.offsetHeight + 4;
-
-      let windowWidth = window.innerWidth;
-      let windowHeight = window.innerHeight;
-
-      if (windowWidth - left < menuWidth) {
-        menu.style.left = windowWidth - menuWidth + "px";
-      } else {
-        menu.style.left = left + "px";
-      }
-
-      if (windowHeight - top < menuHeight) {
-        menu.style.top = windowHeight - menuHeight + "px";
-      } else {
-        menu.style.top = top + "px";
-      }
-
-      this.menuVisible = true;
-    },
-    hideMenu() {
-      this.menuVisible = false;
-    },
-    copyText() {
-      let text = "";
-      let activeEl = document.activeElement;
-      let activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
-      if (
-        activeElTagName == "textarea" ||
-        (activeElTagName == "input" &&
-          /^(?:text|search|password|tel|url)$/i.test(activeEl.type) &&
-          typeof activeEl.selectionStart == "number")
-      ) {
-        text = activeEl.value.slice(
-          activeEl.selectionStart,
-          activeEl.selectionEnd
-        );
-      } else if (window.getSelection) {
-        text = window.getSelection().toString();
-      }
-      return text;
-    },
   },
 };
 </script>

src/services/contextMenu.js

@@ -0,0 +1,69 @@
+function showMenu(e, focusedCard, selectedText) {
+    e.preventDefault();
+    const origin = {
+        left: e.pageX,
+        top: e.pageY,
+    };
+
+    let levels = 3;
+    let target = e.target;
+    focusedCard = undefined;
+    while (levels--) {
+        if (target.hasAttribute("card")) {
+            focusedCard = parseInt(target.getAttribute("card"));
+            break;
+        } else target = target.parentElement;
+    }
+
+    setPosition(origin);
+    selectedText = copyText();
+}
+
+function setPosition({ top, left }) {
+    const menu = document.querySelector(".menu");
+    // menu.style.left = `${left}px`;
+    // menu.style.top = `${top}px`;
+
+    let menuWidth = menu.offsetWidth + 4;
+    let menuHeight = menu.offsetHeight + 4;
+
+    let windowWidth = window.innerWidth;
+    let windowHeight = window.innerHeight;
+
+    if (windowWidth - left < menuWidth) {
+        menu.style.left = windowWidth - menuWidth + "px";
+    } else {
+        menu.style.left = left + "px";
+    }
+
+    if (windowHeight - top < menuHeight) {
+        menu.style.top = windowHeight - menuHeight + "px";
+    } else {
+        menu.style.top = top + "px";
+    }
+
+    this.menuVisible = true;
+}
+function hideMenu() {
+    this.menuVisible = false;
+}
+
+function copyText() {
+    let text = "";
+    let activeEl = document.activeElement;
+    let activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
+    if (
+        activeElTagName == "textarea" ||
+        (activeElTagName == "input" &&
+            /^(?:text|search|password|tel|url)$/i.test(activeEl.type) &&
+            typeof activeEl.selectionStart == "number")
+    ) {
+        text = activeEl.value.slice(
+            activeEl.selectionStart,
+            activeEl.selectionEnd
+        );
+    } else if (window.getSelection) {
+        text = window.getSelection().toString();
+    }
+    return text;
+}

src/store/index.js

@@ -129,7 +129,7 @@ export default new Store({
                 let cardIndex = cards.findIndex(card => card.id == id);
                 if (cardIndex != -1) {
                     let newCardList = cards.filter(card => card.id != id);
-                    state.cardData[i] = newCardList;
+                    Vue.set(state.cardData, i, newCardList);
                     break;
                 }
             }

src/views/NewTab.vue

@@ -1,22 +1,102 @@
 <template>
-  <div>
+  <div @click="hideMenu">
     <navigation />
-    <favBar />
-    <board />
+    <favBar @contextmenu.native="showMenu" />
+    <board @contextmenu.native="showMenu" />
+    <contextMenu :show="menuVisible" :cardId="focusedCard" :text="selectedText" />
   </div>
 </template>
 
 <script>
 import navigation from "@/components/NavBar";
 import board from "@/components/Board";
 import favBar from "@/components/FavBar";
+import contextMenu from "@/components/ContextMenu";
 
 export default {
   name: "newtab",
   components: {
     navigation,
     board,
     favBar,
+    contextMenu,
+  },
+  data: function () {
+    return {
+      menuVisible: false,
+      focusedCard: undefined,
+      selectedText: undefined,
+    };
+  },
+  methods: {
+    showMenu(e) {
+      e.preventDefault();
+      const origin = {
+        left: e.pageX,
+        top: e.pageY,
+      };
+
+      let levels = 3;
+      let target = e.target;
+      this.focusedCard = undefined;
+      while (levels--) {
+        if (target.hasAttribute("card")) {
+          this.focusedCard = parseInt(target.getAttribute("card"));
+          break;
+        } else target = target.parentElement;
+      }
+
+      this.setPosition(origin);
+      this.selectedText = this.copyText();
+    },
+    setPosition({ top, left }) {
+      console.log(top, left);
+      const menu = document.querySelector(".menu");
+      // menu.style.left = `${left}px`;
+      // menu.style.top = `${top}px`;
+
+      let menuWidth = menu.offsetWidth + 4;
+      let menuHeight = menu.offsetHeight + 4;
+
+      let windowWidth = window.innerWidth;
+      let windowHeight = window.innerHeight;
+
+      if (windowWidth - left < menuWidth) {
+        menu.style.left = windowWidth - menuWidth + "px";
+      } else {
+        menu.style.left = left + "px";
+      }
+
+      if (windowHeight - top < menuHeight) {
+        menu.style.top = windowHeight - menuHeight + "px";
+      } else {
+        menu.style.top = top + "px";
+      }
+
+      this.menuVisible = true;
+    },
+    hideMenu() {
+      this.menuVisible = false;
+    },
+    copyText() {
+      let text = "";
+      let activeEl = document.activeElement;
+      let activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
+      if (
+        activeElTagName == "textarea" ||
+        (activeElTagName == "input" &&
+          /^(?:text|search|password|tel|url)$/i.test(activeEl.type) &&
+          typeof activeEl.selectionStart == "number")
+      ) {
+        text = activeEl.value.slice(
+          activeEl.selectionStart,
+          activeEl.selectionEnd
+        );
+      } else if (window.getSelection) {
+        text = window.getSelection().toString();
+      }
+      return text;
+    },
   },
   beforeCreate() {
     const stateString = window.localStorage.getItem("app-state");