enfrancais-app/src/pages/Library.vue

<template>
  <div class="library">
    <!-- BACKGROUND (mode) -->
    <component :is="mode" @open="openText" />

    <!-- FOREGROUND (texts) -->
    <div v-if="parents.length" class="main-texts-container">
      <section
        v-for="(parent, i) in parents" :key="parent.id"
        class="main-text-container text-break"
        :style="`--n: ${i};`"
        :class="{ 'text-blur': i !== parents.length - 1 }"
      >
        <text-card
          :id="parent.id"
          :children="parent.children"
          class="text-card-main"
          @open="openText" @close="closeText"
          @click.native="onMainTextClick(i)"
        />

        <section class="sub-texts-container">
          <text-card
            v-for="(id, j) in parent.children" :key="id"
            :id="id"
            class="text-card-sub text-break"
            :style="`--n: ${j};`"
            @close="closeText(parent.id, $event)"
            @click.native="onSubTextClick(i, j)"
          />
          <!-- :class="{ 'text-blur': i !== parents.length - 1 || j !== parent.children.length - 1 }" -->
        </section>
      </section>
    </div>
  </div>
</template>

<script>
import { CardList, CardMap, TreeMap } from './library'
import TextCard from '@/components/text/TextCard'


export default {
  name: 'Library',

  components: {
    CardList,
    CardMap,
    TreeMap,
    TextCard
  },

  props: {
    mode: { type: String, required: true },
    texts: { type: Array, required: true }
  },

  computed: {
    parents () {
      return this.texts.map(text => {
        const [id, ...children] = text
        return { id, children }
      })
    }
  },

  methods: {
    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 (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(childId_ => childId_ !== childId)
        this.updateQuery(this.parents)
      }
    },

    updateQuery (parents) {
      // Update the route's query (will not reload the page) and let vue determine what changed.
      this.$router.push({
        query: {
          mode: this.mode,
          texts: parents.map(parent => [parent.id, ...parent.children])
        }
      })
    },

    onMainTextClick (mainTextIndex) {
      if (mainTextIndex === this.texts.length - 1) return
      this.parents.push(this.parents.splice(mainTextIndex, 1)[0])
      this.updateQuery(this.parents)
    },

    onSubTextClick (mainTextIndex, subTextIndex) {
      // FIXME clean this
      const children = this.parents[mainTextIndex].children
      let needUpdate = false
      if (subTextIndex !== children.length - 1) {
        children.push(children.splice(subTextIndex, 1)[0])
        needUpdate = true
      }
      if (mainTextIndex !== this.texts.length - 1) {
        this.parents.push(this.parents.splice(mainTextIndex, 1)[0])
        needUpdate = true
      }

      if (needUpdate) {
        this.updateQuery(this.parents)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.library {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.main-texts-container {
  position: relative;
  top: -100%;

  height: 100%;
  pointer-events: none;
}

.main-text-container {
  border-top: 2px solid $black;
  display: flex;
  width: 100%;

  > * {
    flex-basis: 50%;
  }
}

.sub-texts-container {
  position: relative;
  height: 100%;
}

.text-card {
  pointer-events: auto;
  width: 100%;
}

.text-break {
  position: absolute;
  height: calc(100% - (var(--n) * #{$text-card-header-height}));
  top: calc(var(--n) * #{$text-card-header-height});
  z-index: var(--n);
}

.text-blur::before {
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba($white, .5);
}
</style>