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;

src/render/components/control/scroll.js

@@ -0,0 +1,24 @@
+let el;
+
+const initScroll = (elementId) => {
+  el = document.getElementById(elementId);
+  el.addEventListener('adjust-scroll', adjustScroll);
+  window.addEventListener('resize', adjustScroll);
+}
+
+const isBottom = () => {
+  if (el) {
+    return el.scrollHeight - el.clientHeight <= el.scrollTop + 1;
+  }
+}
+
+const adjustScroll = () => {
+  if (el) {
+    el.scrollTo({
+      top: el.scrollHeight - el.clientHeight,
+      behavior: 'smooth'
+    });
+  }
+}
+
+export default initScroll;

src/render/components/control/text.js

@@ -0,0 +1,73 @@
+const inputLength = 230;
+
+const metaKeys = [
+    "Tab",
+    "CapsLock",
+    "Shift",
+    "Control",
+    "Alt",
+    "Meta",
+    " ",
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+    "Enter",
+    "Backspace",
+    "Escape"
+];
+
+function useText(elementId, left, typing)
+{
+    let el;
+
+    const show = Vue.ref(false);
+    const leftSide = Vue.ref(false);
+
+    const calcSide = () => {
+        window.innerWidth - left.value < inputLength ? leftSide.value = true : leftSide.value = false;
+    }
+
+    /* handle user typing */
+    Vue.onMounted(() => {
+
+        el = document.getElementById(elementId);
+
+        window.addEventListener("keydown", (e) => {
+
+            if (!show.value && !metaKeys.includes(e.key))
+            {
+                show.value = true;
+            }
+            else if (show.value && ((el.value.length === 1 && e.key === "Backspace") || e.key === "Escape"))
+            {
+                show.value = false;
+            }
+
+            if (e.key === "Enter" && el.value)
+            {
+                window.mainApi.send("message", { 
+                    text: el.value, audio: false });
+                show.value = false;
+            }
+        });
+
+    });
+
+    Vue.watch(left, calcSide);
+
+    Vue.watch(show, (c, p_) => {
+        if (c) { 
+            el.focus();
+        } else { 
+            el.value = "";
+            el.blur();
+        }
+    });
+
+    calcSide();
+
+    return { leftSide, show };
+}
+
+export default useText;