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

add input item to UI index

Browse source
This commit is contained in:
riqo 2020-10-25 11:22:23 -05:00
commit 0a3bf4ca42
3 changed files with 125 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/UI/UIDetails/messageItem.vue
View file

@ -72,10 +72,11 @@ import { defineComponent, computed, onMounted, ref, reactive } from 'vue';
const contentTag = ref(`content${msgID.value}`); const contentTag = ref(`content${msgID.value}`);
let bubble: any; let bubble: any;
let content: any; let content: any;
console.log(props)
const textFill = computed(() => { const textFill = computed(() => {
switch (props.item.modifier) { switch (props.item.modifier) {
case "ai": case "ai" || "sf":
return "#fff"; return "#fff";
default: default:
return "#000"; return "#000";

228
src/components/UI/index.vue
View file

@ -37,24 +37,24 @@
</clipPath> </clipPath>
</defs> </defs>
<g id="cardsDiv"> <g id="cardsDiv">
<g <g
v-for="(item, index) in renderArr" v-for="(item, index) in renderArr"
:key="index" :key="index"
id="cards" id="cards"
transform="translate(0, 0)" transform="translate(0, 0)"
>
<transition
appear
v-on:before-appear="beforeEnter"
v-on:appear="enter"
v-on:appear-cancelled="leave"
> >
<transition <MessageItem
appear :item="item"
v-on:before-appear="beforeEnter" :key="index"
v-on:appear="enter" />
v-on:appear-cancelled="leave" </transition>
> </g>
<MessageItem
:item="item"
:key="index"
/>
</transition>
</g>
</g> </g>
<g id="titlebar" transform="translate(0, 0)"> <g id="titlebar" transform="translate(0, 0)">
<g data-name="Group 73" transform="translate(20 20)"> <g data-name="Group 73" transform="translate(20 20)">
@ -84,117 +84,111 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, inject, onMounted, reactive } from "vue"; import { defineComponent, inject, onMounted, reactive } from "vue";
import MessageItem from './UIDetails/messageItem.vue'; import MessageItem from './UIDetails/messageItem.vue';
import Messages from "./UIDetails/messages"; import InputItem from "@/components/UI/UIDetails/inputItem.vue";
export default defineComponent({ import Messages from "./UIDetails/messages";
name: 'UIindex', export default defineComponent({
components: { MessageItem }, name: 'UIindex',
setup() { components: { MessageItem, InputItem },
setup() {
interface ProtectedRef { const anime: object | any = inject('animejs');
readonly el: SVGElement | HTMLElement; const timeline: typeof anime = anime.timeline({ loop: true });
reference: any; const renderArr: Message[] = reactive([])
height: number | null; const messages = Messages;
const msgOffset = {
x: 0 ,
y: 0
} }
const anime: object | any = inject('animejs'); let messenger: any;
const timeline: typeof anime = anime.timeline({ loop: true }); let winW: number;
const renderArr: Message[] = reactive([]) let modifier: string;
const messages = Messages; let msg: any;
const msgOffset = { let cardsDiv: any;
x: 0 , let prevCardH = 0;
y: 0
}
let messenger: any;
let winW: number;
let modifier: string;
let msg: any;
let cardsDiv: any;
let prevCardH = 0;
function renderMsg(i: number): void { function renderMsg(i: number): void {
setTimeout(() => { setTimeout(() => {
renderArr.push(messages[i]); renderArr.push(messages[i]);
}, 2000); }, 2000);
} }
function runAnim(): void { function runAnim(): void {
for (let i = 0; i < messages.length; i++) { for (let i = 0; i < messages.length; i++) {
renderMsg(i); renderMsg(i);
} }
} }
async function beforeEnter(el: any) { async function beforeEnter(el: any) {
modifier = el.className.baseVal.substring(0, 2); modifier = el.className.baseVal.substring(0, 2);
} }
async function enter(el: any, done: any) { async function enter(el: any, done: any) {
const paddingLeft = 40; const paddingLeft = 40;
msg = await document.getElementById(el.id); msg = await document.getElementById(el.id);
const rect = msg.getBoundingClientRect(); const rect = msg.getBoundingClientRect();
const msgW = rect.width; const msgW = rect.width;
const msgH = rect.height; const msgH = rect.height;
cardsDiv = await document.getElementById("cardsDiv"); cardsDiv = await document.getElementById("cardsDiv");
const cdBox = cardsDiv.getBBox(); const cdBox = cardsDiv.getBBox();
if (prevCardH === 0) { if (prevCardH === 0) {
msgOffset.y += cdBox.height; msgOffset.y += cdBox.height;
} else if (prevCardH > msgH) { } else if (prevCardH > msgH) {
// cardsDiv is offset by 17.5 // cardsDiv is offset by 17.5
msgOffset.y += prevCardH + msgH / 2 + 17.5; msgOffset.y += prevCardH + msgH / 2 + 17.5;
} else { } else {
msgOffset.y += cdBox.height - 20; msgOffset.y += cdBox.height - 20;
} }
prevCardH = msgH; prevCardH = msgH;
switch (modifier) { switch (modifier) {
case "sf": case "sf":
msgOffset.x = winW - msgW; msgOffset.x = winW - msgW;
break; break;
case "ai": case "ai":
msgOffset.x = (winW - msgW) / 2; msgOffset.x = (winW - msgW) / 2;
break; break;
default: default:
msgOffset.x = paddingLeft; msgOffset.x = paddingLeft;
} }
const translateUp = `translate(${msgOffset.x} ${msgOffset.y})`; const translateUp = `translate(${msgOffset.x} ${msgOffset.y})`;
const translateDown = `translate(${msgOffset.x} ${msgOffset.y + 5})`; const translateDown = `translate(${msgOffset.x} ${msgOffset.y + 5})`;
timeline timeline
.add({ .add({
targets: el, targets: el,
transform: translateUp, transform: translateUp,
easing: "easeInOutQuad", easing: "easeInOutQuad",
duration: 1000 duration: 1000
}) })
.add({ .add({
targets: el, targets: el,
transform: translateDown, transform: translateDown,
easing: "easeInOutQuad", easing: "easeInOutQuad",
duration: 500, duration: 500,
offset: 1000 offset: 1000
}); });
done(); done();
} }
function leave() { function leave() {
} }
onMounted(() => { onMounted(() => {
messenger = document.getElementById('messenger'); messenger = document.getElementById('messenger');
winW = messenger.clientWidth; winW = messenger.clientWidth;
runAnim(); runAnim();
}); });
return { return {
// timeline, renderArr,
renderArr, msgOffset,
msgOffset, beforeEnter,
beforeEnter, enter,
enter, leave
leave }
} },
}, });
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

31
src/views/home/index.vue
View file

@ -1,25 +1,18 @@
<template> <template>
<!-- <UIindex /> <UIindex />
<Microphone /> -->
<InputItem />
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, inject } from 'vue'; import { defineComponent, inject } from 'vue';
// import UIindex from "@/components/UI/index.vue"; import UIindex from "@/components/UI/index.vue";
// import Microphone from "@/components/microphone/index.vue"; // import Microphone from "@/components/microphone/index.vue";
import InputItem from "@/components/UI/UIDetails/inputItem.vue";
export default defineComponent({
name: "HomeIndex",
components: { InputItem },
setup() {
const emitter: any = inject("mitt");
emitter.on('newSelfMessage', (payload: any) => console.log('foo', payload) )
}
});
export default defineComponent({
name: "HomeIndex",
components: { UIindex },
setup() {
const emitter: any = inject("mitt");
emitter.on('newSelfMessage', (payload: any) => console.log('foo', payload) )
}
});
</script> </script>
<style></style>