From b1260dd18f50ae84dec149ebc39be52de6fc5c7a Mon Sep 17 00:00:00 2001
From: riqo <hernandeze2@xavier.edu>
Date: Sat, 6 Mar 2021 12:55:27 -0600
Subject: [PATCH] add inputItem audio keyframes animation

---
 src/components/inputItem.vue | 96 +++++++++++++++++-------------------
 1 file changed, 45 insertions(+), 51 deletions(-)

diff --git a/src/components/inputItem.vue b/src/components/inputItem.vue
index 3516682..e9d9844 100644
--- a/src/components/inputItem.vue
+++ b/src/components/inputItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div id=inputItem
-    class="player-controls playing"
+    class="input-item playing"
     :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }">
     <span :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }" class="play"></span>
     <span :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }" class="pause"></span>
@@ -19,29 +19,27 @@ export default defineComponent({
     let element: HTMLElement | null;
 
     // Cords of inputItem.
-    const inputItemX = ref(0)
-    const inputItemY = ref(0)
+    const inputItemX = ref(0);
+    const inputItemY = ref(0);
 
     // Position of inputItem on terms of percentage of window.
-    let percentX: number
-    let percentY: number
+    let percentX: number;
+    let percentY: number;
 
     // How close inputItem is to closest X or Y side.
-    let xShort: number
-    let yShort: number
+    let xShort: number;
+    let yShort: number;
 
     //---Event Handlers-----------------------------------------------
 
     // Update the position of inputItem on mouse dragging.
     const onMouseMove = (e: any) => {
-      element = document.getElementById('inputItem')
+      element = document.getElementById('inputItem');
 
       if (element) {
-
-        const inputItemRect = element.getBoundingClientRect()
-        inputItemX.value = inputItemRect.left + e.movementX
-        inputItemY.value = inputItemRect.top + e.movementY
-
+        const inputItemRect = element.getBoundingClientRect();
+        inputItemX.value = inputItemRect.left + e.movementX;
+        inputItemY.value = inputItemRect.top + e.movementY;
       }
 
     }
@@ -55,56 +53,52 @@ export default defineComponent({
     const onMouseUp = (_e: any) => {
       window.removeEventListener('mousemove', onMouseMove, true);
 
-      const winW = window.innerWidth
-      const winH = window.innerHeight
+      const winW = window.innerWidth;
+      const winH = window.innerHeight;
 
-      xShort = calcSideProximity(inputItemX.value, winW)
-      yShort = calcSideProximity(inputItemY.value, winH)
+      xShort = calcSideProximity(inputItemX.value, winW);
+      yShort = calcSideProximity(inputItemY.value, winH);
 
-      percentX = inputItemX.value / winW
-      percentY = inputItemY.value / winH
+      percentX = inputItemX.value / winW;
+      percentY = inputItemY.value / winH;
 
-      console.log(`Pos refs updated: \n
-          percentX: ${percentX}, percentY: ${percentY} \n
-          xShort: ${xShort}, yShort: ${yShort}`
-      )
     }
 
     // Update position of inputItem on windowResize.
     const onWindowResize = (_e: any) => {
-      const winW = window.innerWidth
-      const winH = window.innerHeight
+      const winW = window.innerWidth;
+      const winH = window.innerHeight;
 
-      inputItemX.value = calcPosition(inputItemX.value, percentX, xShort, winW)
-      inputItemY.value = calcPosition(inputItemY.value, percentY, yShort, winH)
+      inputItemX.value = calcPosition(inputItemX.value, percentX, xShort, winW);
+      inputItemY.value = calcPosition(inputItemY.value, percentY, yShort, winH);
 
     }
 
     //---------------------------------------------------------------
 
     onMounted(() => {
-      element = document.getElementById('inputItem')
+      element = document.getElementById('inputItem');
 
       if (element) {
         element.addEventListener('mousedown', onMouseDown, false);
       }
 
-      window.addEventListener("mouseup", onMouseUp, false)
+      window.addEventListener("mouseup", onMouseUp, false);
 
       // Initialize the positional references.
-      percentX = inputItemX.value / window.innerWidth
-      percentY = inputItemY.value / window.innerHeight
+      percentX = inputItemX.value / window.innerWidth;
+      percentY = inputItemY.value / window.innerHeight;
 
-      xShort = calcSideProximity(inputItemX.value, window.innerWidth)
-      yShort = calcSideProximity(inputItemX.value, window.innerHeight)
+      xShort = calcSideProximity(inputItemX.value, window.innerWidth);
+      yShort = calcSideProximity(inputItemX.value, window.innerHeight);
 
       // Then, we can listen for window resize.
-      window.addEventListener('resize', onWindowResize, false)
+      window.addEventListener('resize', onWindowResize, false);
     });
 
     // Initialize the coordinants.
-    inputItemX.value = 600 - 38 - 20
-    inputItemY.value = 500 - 38 - 20
+    inputItemX.value = 600 - 38 - 20;
+    inputItemY.value = 500 - 38 - 20;
 
     // remove event listeners
     onUnmounted(() => {
@@ -125,7 +119,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 
-  #inputItem {
+ .input-item {
+
     position: absolute;
 
     width: 30px;
@@ -141,8 +136,7 @@ export default defineComponent({
 
     background-color: white;
     border: 4px solid #C3C3C3;
-  }
- .player-controls {
+
    .play, .pause {
       z-index: 5;  
       &::before, &::after {
@@ -151,8 +145,8 @@ export default defineComponent({
          border-radius: 1000px;
          content: "";
          position: absolute;
-         height: 2.4em;
-         width: 2.4em;
+         height: 2.35em;
+         width: 2.35em;
          left: 50%;
          transform: translate(-50%, -50%); 
          top: 50%;
@@ -160,7 +154,7 @@ export default defineComponent({
       }
    }
    .play::before {
-      box-shadow: 0 0 0 rgba(255, 255, 255, 0);
+      box-shadow: 0 0 0 rgba(195, 195, 195, 0);
    }
    .pause {
       opacity: 0;
@@ -187,7 +181,7 @@ export default defineComponent({
    }
    &:hover {
       .play::before {
-         box-shadow: 0 0 12px rgba(255, 238, 125, 0.8);
+         box-shadow: 0 0 12px rgba(195, 195, 195, 0.8);
       }
    }
 }
@@ -201,16 +195,16 @@ export default defineComponent({
 @keyframes audio1 {
    0%,
    100% {
-      box-shadow: 0 0 0 0.4em rgba(255, 255, 255, 0.4);
+      box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.4);
    }
    25% {
-      box-shadow: 0 0 0 0.15em rgba(255, 255, 255, 0.15);
+      box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.15);
    }
    50% {
-      box-shadow: 0 0 0 0.55em rgba(255, 255, 255, 0.55);
+      box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.55);
    }
    75% {
-      box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.25);
+      box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.25);
    }
 }
 .animate-audio2 {
@@ -222,16 +216,16 @@ export default defineComponent({
 @keyframes audio2 {
    0%,
    100% {
-      box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.15);
+      box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.15);
    }
    25% {
-      box-shadow: 0 0 0 0.4em rgba(255, 255, 255, 0.3);
+      box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.3);
    }
    50% {
-      box-shadow: 0 0 0 0.15em rgba(255, 255, 255, 0.05);
+      box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.05);
    }
    75% {
-      box-shadow: 0 0 0 0.55em rgba(255, 255, 255, 0.45);
+      box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.45);
    }
 } 
 
-- 
2.43.0