|
@@ -1,16 +1,16 @@
|
|
|
<template>
|
|
|
<div class="h-100 position-relative">
|
|
|
<!-- BACKGROUND (mode) -->
|
|
|
- <component :is="mode" />
|
|
|
+ <component :is="mode" @open="openText" />
|
|
|
|
|
|
<!-- FOREGROUND (texts) -->
|
|
|
<section v-for="parent in parents" :key="parent.id" class="split-screen">
|
|
|
- <text-card :id="parent.id" @open="openText(parent, $event)" @close="closeText(parent)" />
|
|
|
+ <text-card :id="parent.id" @open="openText" @close="closeText" />
|
|
|
<div>
|
|
|
<text-card
|
|
|
v-for="id in parent.children" :key="id"
|
|
|
:id="id"
|
|
|
- @close="closeText(parent, id)"
|
|
|
+ @close="closeText(parent.id, $event)"
|
|
|
/>
|
|
|
</div>
|
|
|
</section>
|
|
@@ -47,17 +47,24 @@ export default {
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
- openText (parent, id) {
|
|
|
- if (parent.children.includes(id)) return
|
|
|
- parent.children.push(id)
|
|
|
+ openText (id, childId) {
|
|
|
+ const parent = this.parents.find(p => p.id === id)
|
|
|
+ if (parent && (childId === undefined || parent.children.includes(childId))) return
|
|
|
+
|
|
|
+ if (!parent) {
|
|
|
+ this.parents.push({ id, children: childId ? [childId] : [] })
|
|
|
+ } else if (childId) {
|
|
|
+ parent.children.push(childId)
|
|
|
+ }
|
|
|
this.updateQuery(this.parents)
|
|
|
},
|
|
|
|
|
|
- closeText (parent, id) {
|
|
|
- if (!id) {
|
|
|
+ closeText (id, childId) {
|
|
|
+ const parent = this.parents.find(p => p.id === id)
|
|
|
+ if (!childId) {
|
|
|
this.updateQuery(this.parents.filter(p => p !== parent))
|
|
|
} else {
|
|
|
- parent.children = parent.children.filter(id_ => id_ !== id)
|
|
|
+ parent.children = parent.children.filter(childId_ => childId_ !== childId)
|
|
|
this.updateQuery(this.parents)
|
|
|
}
|
|
|
},
|