me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

inputItem starting position

Browse source
This commit is contained in:
Andrew Gundersen 2021-03-05 09:44:07 -06:00 • committed by riqo
commit a2effc7337
2 changed files with 123 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
crash.log
View file

@ -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

141
src/components/inputItem.vue
View file

@ -1,7 +1,9 @@
<template>
<div id=inputItem
<div id=inputItem
class="player-controls 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>
</div>
</template>
@ -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;
}
.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);
}
}
}
</style>
.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);
}
}
</style>