production refactor

src/render/components/control/draggify.js

@@ -0,0 +1,199 @@
+const saveLocation = "input_item_position";
+const defaultPosition = { x: 15, y: window.innerHeight - 300 };
+
+//---Dragabble Helper Funcs--------------------------------------
+
+// Calculate distance to nearest side.
+function calcSideProximity (elementX, elementLength, winW) {
+
+  // Calc right short.
+  let short = winW - elementX - elementLength;
+
+  // See if it's left short.
+  if (elementX + 20 < winW / 2) {
+    short = elementX
+  }
+
+  return short
+}
+
+// Update elementX or elementY value on window resize
+function calcPosition (elementPosition, elementLength, percent, short, win) {
+
+    // Is it close to the right/bottom side?
+    if (percent > 0.75) {
+        elementPosition = win - short - elementLength;
+    }
+
+    // Is it not close to a side?
+    if (percent < 0.75 && percent > 0.25) {
+        elementPosition = win * percent
+    }
+
+    return elementPosition
+}
+
+function draggify(elementId, margin) {
+
+    let element;
+
+    /* only compatible with elements having equal width and height */
+    let elementLength;
+
+    // Cords of inputItem.
+    const elementX = Vue.ref();
+    const elementY = Vue.ref();
+
+    // Position of inputItem on terms of percentage of window.
+    let percentX;
+    let percentY;
+
+    // How close inputItem is to closest X or Y side.
+    let xShort;
+    let yShort;
+
+    // Keep track of window size;
+    let winW = window.innerWidth;
+    let winH = window.innerHeight;
+
+    //---Reposition Anime-----------------------------------------------
+
+    // Move element to target smoothly.
+    const repositionAnime = (xChange, yChange) => {
+        const xStep = xChange / 6000;
+        const yStep = yChange / 6000;
+
+        for (let i = 1; i <= 6000; i++) {
+
+          setTimeout(() => {
+            elementX.value += xStep;
+            elementY.value += yStep;
+          }, 16) // 60fps
+
+        }
+    }
+
+    //---Event Handlers-----------------------------------------------
+
+    // Update the position of inputItem on mouse dragging.
+    const onMouseMove = (e) => {
+      e.preventDefault();
+
+      const inputItemRect = element.getBoundingClientRect();
+      elementX.value = inputItemRect.left + e.movementX;
+      elementY.value = inputItemRect.top + e.movementY;
+    }
+
+    // Add an event listener for dragging.
+    const onMouseDown = (e) => {
+      e.preventDefault();
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('mouseup', onMouseUp);
+    }
+
+    // Update position references when user is done moving targetEl.
+    const onMouseUp = (e) => {
+      e.preventDefault();
+
+      console.log("onMouseUp");
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+
+      // See if and calculate reposition.
+      let x = 0; // vector change
+      let y = 0;
+
+      if (elementX.value < 0) {
+        x = (elementX.value - margin)*-1
+      }
+
+      if (elementX.value > winW - elementLength) {
+        const b = winW - elementLength - margin;
+        x = (elementX.value - b)*-1
+      }
+
+      // Reposition y
+      if (elementY.value < 0) {
+        y = (elementY.value - margin)*-1
+      }
+
+      if (elementY.value > winH - elementLength) {
+        const d = winH - elementLength - margin;
+        y = (elementY.value - d)*-1
+      }
+
+      // Reposition if needed.
+      if (x !== 0 || y !== 0) repositionAnime(x, y);
+
+      xShort = calcSideProximity(elementX.value, elementLength, winW);
+      yShort = calcSideProximity(elementY.value, elementLength, winH);
+
+      // Update percentages.
+      percentX = elementX.value / winW;
+      percentY = elementY.value / winH;
+
+      // Save position.
+      savePosition();
+    }
+
+    // Update position of targetEl on windowResize.
+    const onWindowResize = (_e) => {
+
+      // Update window dimensions.
+      winW = window.innerWidth;
+      winH = window.innerHeight;
+
+      elementX.value = calcPosition(elementX.value, elementLength, percentX, xShort, winW);
+      elementY.value = calcPosition(elementY.value, elementLength, percentY, yShort, winH);
+
+      savePosition();
+    }
+
+    const savePosition = () => {
+      window.localStorage.setItem(saveLocation, JSON.stringify({
+        x: elementX.value,
+        y: elementY.value
+      }));
+    }
+
+    //---------------------------------------------------------------
+
+    Vue.onMounted(() => {
+
+      element = document.getElementById(elementId);
+
+      elementLength = element.offsetWidth;
+
+      // Initialize the positional references.
+      percentX = elementX.value / window.innerWidth;
+      percentY = elementY.value / window.innerHeight;
+
+      xShort = calcSideProximity(elementX.value, elementLength, window.innerWidth);
+      yShort = calcSideProximity(elementX.value, elementLength, window.innerHeight);
+
+      // Then, we can listen for window resize (and mousedown).
+      element.addEventListener("mousedown", onMouseDown);
+      window.addEventListener('resize', onWindowResize)
+    });
+
+    // remove event listeners on component dismount.
+    Vue.onUnmounted(() => {
+        element.removeEventListener('mousedown', onMouseDown);
+        window.removeEventListener('resize', onWindowResize)
+        window.removeEventListener('mouseup', onMouseUp)
+        window.removeEventListener('mousemove', onMouseMove);
+    });
+
+    // Try loading initPosition, otherwise set default values
+    let initPosition;
+    const rawData = window.localStorage.getItem("saveLocation")
+    rawData ? initPosition = JSON.parse(rawData) : initPosition = defaultPosition;
+
+    elementX.value = initPosition.x;
+    elementY.value = initPosition.y;
+
+    return { elementX, elementY };
+
+}
+
+export default draggify;