fixed messageList import
This commit is contained in:
riqo
parent
c3562172c4
commit
f9de39cbee
403 changed files with 68 additions and 894 deletions
|
|
@ -1,4 +1,12 @@
|
|||
const Messages = [
|
||||
interface Message {
|
||||
content: string;
|
||||
signature: string;
|
||||
outgoing: boolean;
|
||||
modifier: string;
|
||||
imgURL: string;
|
||||
id: string;
|
||||
}
|
||||
const Messages: Message[] = [
|
||||
{
|
||||
content:
|
||||
"I can be there at 5 pm tomorrow to greet you at a Chick file with my almond and chive salad.",
|
||||
|
|
@ -36,27 +36,27 @@
|
|||
<use xlink:href="#rect" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="cardsDiv">
|
||||
<g
|
||||
v-for="(item, index) in renderArr"
|
||||
:key="index"
|
||||
id="cards"
|
||||
transform="translate(0, 0)"
|
||||
>
|
||||
<transition
|
||||
appear
|
||||
v-on:before-appear="beforeEnter"
|
||||
v-on:appear="enter"
|
||||
v-on:appear-cancelled="leave"
|
||||
>
|
||||
<MessageItem
|
||||
:v-if="item"
|
||||
:item="item"
|
||||
:key="index"
|
||||
/>
|
||||
</transition>
|
||||
</g>
|
||||
</g>
|
||||
<!-- <g id="cardsDiv"> -->
|
||||
<!-- <g
|
||||
v-for="(item, index) in renderArr"
|
||||
:key="index"
|
||||
id="cards"
|
||||
transform="translate(0, 0)"
|
||||
>
|
||||
<transition
|
||||
appear
|
||||
v-on:before-appear="beforeEnter"
|
||||
v-on:appear="enter"
|
||||
v-on:appear-cancelled="leave"
|
||||
>
|
||||
<MessageItem
|
||||
:v-if="item"
|
||||
:item="item"
|
||||
:key="index"
|
||||
/>
|
||||
</transition>
|
||||
</g> -->
|
||||
<!-- </g> -->
|
||||
<g id="titlebar" transform="translate(0, 0)">
|
||||
<g data-name="Group 73" transform="translate(20 20)">
|
||||
<ellipse
|
||||
|
|
@ -84,113 +84,42 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject } from "vue";
|
||||
import MessageItem from './UIDetails/messageItem.vue';
|
||||
// @ts-ignore
|
||||
import {Messages} from "./UIDetails/messages.js";
|
||||
import { defineComponent, inject, ref, onMounted } from "vue";
|
||||
// import MessageItem from './UIDetails/messageItem.vue';
|
||||
import Messages from "./UIDetails/messages";
|
||||
export default defineComponent({
|
||||
name: 'UIindex',
|
||||
components: { MessageItem },
|
||||
setup() {
|
||||
const anime = inject('animejs');
|
||||
let timeline;
|
||||
console.log(Messages);
|
||||
const setTimeLine = () => {
|
||||
timeline = anime.timeline({ loop: true });
|
||||
}
|
||||
setTimeLine();
|
||||
return {
|
||||
timeline
|
||||
}
|
||||
},
|
||||
// data() {
|
||||
// return {
|
||||
// renderArr: [],
|
||||
// messages: [],
|
||||
// timeline: null,
|
||||
// msgOffset: {
|
||||
// x: null,
|
||||
// y: null
|
||||
// },
|
||||
// prevCardH: 0
|
||||
// };
|
||||
// },
|
||||
// mounted() {
|
||||
// this.setTimeLine();
|
||||
// this.runAnim();
|
||||
// },
|
||||
// methods: {
|
||||
// setTimeLine() {
|
||||
// this.timeline = this.anime.timeline({ loop: true });
|
||||
// },
|
||||
// runAnim() {
|
||||
// this.messages = Messages;
|
||||
// for (let i = 0; i < this.messages.length; i++) {
|
||||
// this.renderMsg(i);
|
||||
// }
|
||||
// },
|
||||
// renderMsg(i) {
|
||||
// setTimeout(() => {
|
||||
// this.renderArr.push(this.messages[i]);
|
||||
// }, 2000);
|
||||
// },
|
||||
// async beforeEnter(el) {},
|
||||
// async enter(el, done) {
|
||||
// const winW = document.getElementById("messenger").clientWidth;
|
||||
// const modifier = el.className.baseVal.substring(0, 2);
|
||||
// const msg = await document.getElementById(el.id);
|
||||
// const rect = msg.getBoundingClientRect();
|
||||
// const msgW = rect.width;
|
||||
// const msgH = rect.height;
|
||||
// const paddingLeft = 40;
|
||||
// const cardsDiv = await document.getElementById("cardsDiv");
|
||||
// const cdBox = cardsDiv.getBBox();
|
||||
//
|
||||
// if (this.prevCardH === 0) {
|
||||
// this.msgOffset.y += cdBox.height;
|
||||
// } else if (this.prevCardH > msgH) {
|
||||
// // cardsDiv is offset by 17.5
|
||||
// this.msgOffset.y += this.prevCardH + msgH / 2 + 17.5;
|
||||
// } else {
|
||||
// this.msgOffset.y += cdBox.height - 20;
|
||||
// }
|
||||
// this.prevCardH = msgH;
|
||||
//
|
||||
// switch (modifier) {
|
||||
// case "sf":
|
||||
// this.msgOffset.x = winW - msgW;
|
||||
// break;
|
||||
// case "ai":
|
||||
// this.msgOffset.x = (winW - msgW) / 2;
|
||||
// break;
|
||||
// default:
|
||||
// this.msgOffset.x = paddingLeft;
|
||||
// }
|
||||
//
|
||||
// const translateUp = `translate(${this.msgOffset.x} ${this.msgOffset.y})`;
|
||||
// const translateDown = `translate(${this.msgOffset.x} ${this.msgOffset.y +
|
||||
// 5})`;
|
||||
// this.timeline
|
||||
// .add({
|
||||
// targets: el,
|
||||
// transform: translateUp,
|
||||
// easing: "easeInOutQuad",
|
||||
// duration: 1000
|
||||
// })
|
||||
// .add({
|
||||
// targets: el,
|
||||
// transform: translateDown,
|
||||
// easing: "easeInOutQuad",
|
||||
// duration: 500,
|
||||
// offset: 1000
|
||||
// });
|
||||
// done();
|
||||
// },
|
||||
// leave(el, done) {
|
||||
// console.log("leaving");
|
||||
// }
|
||||
// }
|
||||
|
||||
name: 'UIindex',
|
||||
// components: { MessageItem },
|
||||
setup() {
|
||||
const anime = inject('animejs');
|
||||
const timeline = anime.timeline({ loop: true });
|
||||
const renderArr = ref([]);
|
||||
const messages = Messages;
|
||||
const messageOffset = {
|
||||
x: null,
|
||||
y: null
|
||||
}
|
||||
const renderMsg = (i: number) => {
|
||||
setTimeout(() => {
|
||||
renderArr.value.push(messages[i]);
|
||||
}, 2000);
|
||||
}
|
||||
const runAnim = () => {
|
||||
this.messages = Messages;
|
||||
for (let i = 0; i < this.messages.length; i++) {
|
||||
renderMsg(i);
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
// runAnim();
|
||||
console.log(messages);
|
||||
});
|
||||
return {
|
||||
timeline,
|
||||
renderArr,
|
||||
messageOffset
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue