|
@@ -5,9 +5,13 @@
|
|
|
|
|
|
<!-- FOREGROUND (texts) -->
|
|
|
<section v-for="group in groups" :key="group.id" class="split-screen">
|
|
|
- <text-card :id="group.id" />
|
|
|
+ <text-card :id="group.id" @open="openText(group, $event)" @close="closeText(group)" />
|
|
|
<div>
|
|
|
- <text-card v-for="id in group.prod" :key="id" :id="id" />
|
|
|
+ <text-card
|
|
|
+ v-for="id in group.prod" :key="id"
|
|
|
+ :id="id"
|
|
|
+ @close="closeText(group, id)"
|
|
|
+ />
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
@@ -53,11 +57,27 @@ export default {
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
- openText () {
|
|
|
+ openText (group, id) {
|
|
|
+ if (group.prod.includes(id)) return
|
|
|
+ group.prod.push(id)
|
|
|
+ this.updateQuery(this.groups)
|
|
|
+ },
|
|
|
+
|
|
|
+ closeText (group, id) {
|
|
|
+ if (!id) {
|
|
|
+ this.updateQuery(this.groups.filter(grp => grp !== group))
|
|
|
+ } else {
|
|
|
+ group.prod = group.prod.filter(id_ => id_ !== id)
|
|
|
+ this.updateQuery(this.groups)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ updateQuery (groups) {
|
|
|
+ // Update the route's query (will not reload the page) and let vue determine what changed.
|
|
|
this.$router.push({
|
|
|
query: {
|
|
|
mode: this.mode,
|
|
|
- texts: [...this.texts, [50]]
|
|
|
+ texts: groups.map(grp => [grp.id, ...grp.prod])
|
|
|
}
|
|
|
})
|
|
|
}
|