From: Andrew Gundersen Date: Fri, 5 Mar 2021 15:44:07 +0000 (-0600) Subject: inputItem starting position X-Git-Tag: v0.9~58 X-Git-Url: https://andrewgundersen.net/repos?a=commitdiff_plain;h=a2effc7337f652f91603ccd08625029fcf1c21df;p=mime-chat inputItem starting position --- diff --git a/crash.log b/crash.log index 787cc3a..3d7e5c0 100644 --- a/crash.log +++ b/crash.log @@ -41,3 +41,5 @@ PID 60328 received SIGSEGV for address: 0x7f900fab4000 10 CoreAudio 0x00007fff22129f2a _ZN13HALB_IOThread5EntryEPv + 72 11 libsystem_pthread.dylib 0x00007fff205fb950 _pthread_start + 224 12 libsystem_pthread.dylib 0x00007fff205f747b thread_start + 15 +PID 65740 received SIGSEGV for address: 0x7fbddef00000 +0 segfault-handler.node 0x0000000116e6ae60 _ZL16segfault_handleriP9__siginfoPv + 304 diff --git a/src/components/inputItem.vue b/src/components/inputItem.vue index 9181989..3516682 100644 --- a/src/components/inputItem.vue +++ b/src/components/inputItem.vue @@ -1,7 +1,9 @@ @@ -12,9 +14,10 @@ import { calcSideProximity, calcPosition } from "./helpers" export default defineComponent({ name: "InputItem", - setup() { + let element: HTMLElement | null; + // Cords of inputItem. const inputItemX = ref(0) const inputItemY = ref(0) @@ -29,14 +32,9 @@ export default defineComponent({ //---Event Handlers----------------------------------------------- - // Add an event listener for dragging. - const onMouseDown = (e: any) => { - window.addEventListener('mousemove', onMouseMove, true); - } - // Update the position of inputItem on mouse dragging. const onMouseMove = (e: any) => { - const element = document.getElementById('inputItem') + element = document.getElementById('inputItem') if (element) { @@ -45,16 +43,21 @@ export default defineComponent({ inputItemY.value = inputItemRect.top + e.movementY } - + + } + + // Add an event listener for dragging. + const onMouseDown = (_e: any) => { + window.addEventListener('mousemove', onMouseMove, true); } // Update position references when user is done moving inputItem. - const onMouseUp = (e: any) => { + const onMouseUp = (_e: any) => { window.removeEventListener('mousemove', onMouseMove, true); const winW = window.innerWidth const winH = window.innerHeight - + xShort = calcSideProximity(inputItemX.value, winW) yShort = calcSideProximity(inputItemY.value, winH) @@ -68,7 +71,7 @@ export default defineComponent({ } // Update position of inputItem on windowResize. - const onWindowResize = (e: any) => { + const onWindowResize = (_e: any) => { const winW = window.innerWidth const winH = window.innerHeight @@ -80,7 +83,7 @@ export default defineComponent({ //--------------------------------------------------------------- onMounted(() => { - const element = document.getElementById('inputItem') + element = document.getElementById('inputItem') if (element) { element.addEventListener('mousedown', onMouseDown, false); @@ -100,8 +103,15 @@ export default defineComponent({ }); // Initialize the coordinants. - inputItemX.value = 200 - inputItemY.value = 200 + inputItemX.value = 600 - 38 - 20 + inputItemY.value = 500 - 38 - 20 + + // remove event listeners + onUnmounted(() => { + window.removeEventListener('resize', onWindowResize); + window.removeEventListener('mouseup', onMouseUp); + if (element) element.removeEventListener('mousedown', onMouseDown); + }) return { inputItemX, @@ -128,12 +138,101 @@ export default defineComponent({ top: 200px; right: 0px; - border-style: solid; - border-width: 4px; - border-color: #C3C3C3; background-color: white; - + border: 4px solid #C3C3C3; } - - \ No newline at end of file + .player-controls { + .play, .pause { + z-index: 5; + &::before, &::after { + -webkit-border-radius: 1000px; + -moz-border-radius: 1000px; + border-radius: 1000px; + content: ""; + position: absolute; + height: 2.4em; + width: 2.4em; + left: 50%; + transform: translate(-50%, -50%); + top: 50%; + z-index: 0; + } + } + .play::before { + box-shadow: 0 0 0 rgba(255, 255, 255, 0); + } + .pause { + opacity: 0; + } + &.playing { + .play { + opacity: 0; + } + .pause { + opacity: 1; + &::before { + -moz-animation: audio1 1.5s infinite ease-in-out; + -o-animation: audio1 1.5s infinite ease-in-out; + -webkit-animation: audio1 1.5s infinite ease-in-out; + animation: audio1 1.5s infinite ease-in-out; + } + &::after { + -moz-animation: audio2 2.2s infinite ease-in-out; + -o-animation: audio2 2.2s infinite ease-in-out; + -webkit-animation: audio2 2.2s infinite ease-in-out; + animation: audio2 2.2s infinite ease-in-out; + } + } + } + &:hover { + .play::before { + box-shadow: 0 0 12px rgba(255, 238, 125, 0.8); + } + } +} + +.animate-audio1 { + -moz-animation: audio1 1.5s infinite ease-in-out; + -o-animation: audio1 1.5s infinite ease-in-out; + -webkit-animation: audio1 1.5s infinite ease-in-out; + animation: audio1 1.5s infinite ease-in-out; +} +@keyframes audio1 { + 0%, + 100% { + box-shadow: 0 0 0 0.4em rgba(255, 255, 255, 0.4); + } + 25% { + box-shadow: 0 0 0 0.15em rgba(255, 255, 255, 0.15); + } + 50% { + box-shadow: 0 0 0 0.55em rgba(255, 255, 255, 0.55); + } + 75% { + box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.25); + } +} +.animate-audio2 { + -moz-animation: audio2 2.2s infinite ease-in-out; + -o-animation: audio2 2.2s infinite ease-in-out; + -webkit-animation: audio2 2.2s infinite ease-in-out; + animation: audio2 2.2s infinite ease-in-out; +} +@keyframes audio2 { + 0%, + 100% { + box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.15); + } + 25% { + box-shadow: 0 0 0 0.4em rgba(255, 255, 255, 0.3); + } + 50% { + box-shadow: 0 0 0 0.15em rgba(255, 255, 255, 0.05); + } + 75% { + box-shadow: 0 0 0 0.55em rgba(255, 255, 255, 0.45); + } +} + +