187 lines
3.6 KiB
Vue
187 lines
3.6 KiB
Vue
<template>
|
|
<div
|
|
id="inputItem"
|
|
class="input-item"
|
|
:class="{ playing: recording }"
|
|
:style="{ top: `${elementY}px`, left: `${elementX}px` }"
|
|
>
|
|
AG
|
|
|
|
<!-- Show audio input on spacebar -->
|
|
<AudioInput />
|
|
|
|
|
|
<span v-if="recording" class="play"></span>
|
|
<span v-if="recording" class="pause">
|
|
<div class="rec-icon"></div>
|
|
</span>
|
|
|
|
<!-- Show text input on key-down -->
|
|
<TextInput />
|
|
|
|
<!-- Show suggestions menu on click -->
|
|
<!-- <Menu /> -->
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
|
|
import { defineComponent } from "vue";
|
|
import draggify from "@/modules/draggify";
|
|
|
|
import TextInput from "@/components/inputItem/textInput.vue"
|
|
import useTextInputController from
|
|
"@/components/inputItem/controllers/textCtrl"
|
|
import useAudioInputController from
|
|
"@/components/inputItem/controllers/audioCtrl"
|
|
|
|
export default defineComponent({
|
|
name: "InputItem",
|
|
components: {
|
|
TextInput
|
|
},
|
|
setup() {
|
|
|
|
// Calculate position of inputItem on drag.
|
|
const { elementX, elementY } = draggify({ elementId: "inputItem" });
|
|
|
|
// Controllers for text and audio.
|
|
useTextInputController(elementX)
|
|
const { recording } = useAudioInputController()
|
|
|
|
return {
|
|
elementX,
|
|
elementY,
|
|
recording
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.input-item {
|
|
position: absolute;
|
|
|
|
opacity: 1.0;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
padding: 0;
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
z-index: 3;
|
|
|
|
// border: 4px solid #C6C6C6;
|
|
border-radius: 20px;
|
|
|
|
background-color: #EBEBEB;
|
|
|
|
cursor: pointer;
|
|
|
|
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
|
|
|
|
.play,
|
|
.pause {
|
|
z-index: 5;
|
|
&::before,
|
|
&::after {
|
|
-webkit-border-radius: 1000px;
|
|
-moz-border-radius: 1000px;
|
|
border-radius: 1000px;
|
|
content: "";
|
|
position: absolute;
|
|
height: 2.35em;
|
|
width: 2.35em;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
top: 50%;
|
|
z-index: 0;
|
|
}
|
|
}
|
|
.play::before {
|
|
box-shadow: 0 0 0 rgba(195, 195, 195, 0);
|
|
}
|
|
.pause {
|
|
opacity: 0;
|
|
}
|
|
&.playing {
|
|
.play {
|
|
opacity: 0;
|
|
}
|
|
.pause {
|
|
opacity: 1;
|
|
&::before {
|
|
-moz-animation: circle1 1.5s infinite ease-in-out;
|
|
-o-animation: circle1 1.5s infinite ease-in-out;
|
|
-webkit-animation: circle1 1.5s infinite ease-in-out;
|
|
animation: circle1 1.5s infinite ease-in-out;
|
|
}
|
|
&::after {
|
|
-moz-animation: circle2 2.2s infinite ease-in-out;
|
|
-o-animation: circle2 2.2s infinite ease-in-out;
|
|
-webkit-animation: circle2 2.2s infinite ease-in-out;
|
|
animation: circle2 2.2s infinite ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rec-icon {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: red;
|
|
transform: translate(14px);
|
|
|
|
animation-name: rec;
|
|
animation-duration: 0.5s;
|
|
}
|
|
|
|
@keyframes rec {
|
|
from {
|
|
transform: translate(14px) scale(0.3);
|
|
}
|
|
to {
|
|
transform: translate(14px) scale(1.0);
|
|
}
|
|
}
|
|
|
|
@keyframes circle1 {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.4);
|
|
}
|
|
25% {
|
|
box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.15);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.55);
|
|
}
|
|
75% {
|
|
box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.25);
|
|
}
|
|
}
|
|
|
|
@keyframes circle2 {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.15);
|
|
}
|
|
25% {
|
|
box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.3);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.05);
|
|
}
|
|
75% {
|
|
box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.45);
|
|
}
|
|
}
|
|
|
|
</style>
|