enfrancais-app/src/components/layouts/NodeBook.vue

<template>
  <div
    class="node-book"
  >
    <section
      class="node-book-stack no-events-container"
      :style="`--count: ${nodes.length - 1}; --h: ${stackHeight}px;`"
    >
      <div
        v-for="({ parent, children }, i) in nodes" :key="parent.id"
        class="node-book-stack-item node-book-stack-item-parent splitted no-events-container"
        :class="{ active: i === nodes.length - 1 }"
        :style="`--nth: ${i}`"
      >
        <node-view-child-list
          v-if="parent.children && parent.children.length"
          :children="parent.children"
          smartphone
          @open-child="$emit('open-node', { parentId: parent.id, ...$event })"
        />

        <node-view
          :node="parent"
          type="ref"
          mode="view"
          @open-node="$emit('open-node', $event)"
          @open-child="$emit('open-node', { parentId: parent.id, ...$event })"
          @close-node="$emit('close-node', { parentId: $event })"
          @click.native="onNodeViewClick($event, i)"
        />

        <section
          class="node-book-stack no-events-container"
          :style="`--count: ${children.length }; --h: ${getChildrenStackHeight(children.length)}px;`"
        >
          <div
            v-for="(child, j) in children" :key="child.id + '-cont'"
            class="node-book-stack-item"
            :class="{ active: j === children.length - 1 }"
            :style="`--nth: ${j}`"
          >
            <node-view
              :key="child.id"
              :node="child"
              mode="view"
              type="prod"
              @open-node="$emit('open-node', $event)"
              @close-node="$emit('close-node', { parentId: parent.id, childId: $event })"
              @click.native="onNodeViewClick($event, i, j)"
            />
          </div>
        </section>
      </div>
    </section>
  </div>
</template>

<script>
import { NodeViewChildList, NodeView } from '@/components/nodes'


export default {
  name: 'NodeBook',

  components: {
    NodeViewChildList,
    NodeView
  },

  props: {
    nodes: { type: Array, required: true }
  },

  computed: {
    stackHeight () {
      return Math.min(150 / (this.nodes.length - 1), 75)
    }
  },

  methods: {
    getChildrenStackHeight (childrenLen) {
      return this.stackHeight / childrenLen || this.stackHeight
    },

    onNodeViewClick (e, parentIndex, childIndex) {
      if (e.target.classList.contains('btn') || window.innerWidth < 1024) return
      const parentIsLast = parentIndex === this.nodes.length - 1
      const childIsLast = childIndex !== undefined
        ? childIndex === this.nodes[parentIndex].children.length - 1
        : true
      if (parentIsLast && childIsLast) return
      const ids = { parentId: this.nodes[parentIndex].parent.id }
      if (childIndex !== undefined) {
        ids.childId = this.nodes[parentIndex].children[childIndex].id
      }
      this.$emit('select-node', ids)
    }
  },

  updated () {
    const smarphoneStickyNav = document.querySelector('.node-view-child-list.smartphone')
    const offset = smarphoneStickyNav ? smarphoneStickyNav.getBoundingClientRect().height : 0
    const nodeviews = this.$el.querySelectorAll('.node-view')
    document.querySelector('main').scrollTo(0, nodeviews[nodeviews.length - 1].offsetTop - offset)
  }
}
</script>

<style lang="scss" scoped>
.node-book {
  min-height: 100%;

  @include media-breakpoint-down($layout-bp-down) {
    background-color: $white;
  }

  @include media-breakpoint-up($layout-bp) {
    height: 100%;

    // ╭─╴╶┬╴╭─┐╭─╴╷ ╭
    // ╰─╮ │ ├─┤│  ├┴╮
    // ╶─╯ ╵ ╵ ╵╰─╴╵ ╵

    &-stack {
      position: relative;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;

      &-item {
        width: 100%;
        height: 100%;
        position: absolute;
        top: calc(var(--h) * var(--nth));
        height: calc(100% - (var(--h) * var(--nth)));

        &-parent > .node-view {
          border-right: $line;
        }

        &-parent > .node-view {
          border-top: $line;
        }

        &:not(.node-book-stack-item-parent):first-child {
          border-top: $line;
        }


        // BLURS
        &-parent:not(.active) {
          &::before,
          &::after {
            content: '';
            pointer-events: none;
            position: absolute;
            z-index: 1;
            display: block;
            top: $border-width;
            height: calc(var(--h) - #{$border-width});
            background-color: rgba($white, .5);
          }
          &::before {
            width: calc(50% - #{$border-width});
            left: 0;
          }
          &::after {
            width: 50%;
            left: 50%;
          }
        }

        &-parent.active {
          background-color: rgba($white, .5);
        }

        &:not(.active) {
          .node-view {
            cursor: pointer;
          }

          ::v-deep {
            .node-view {
              // overflow-y: hidden;

              &-header {
                z-index: 0;
              }
            }

            .node-view-child-list {
              display: none;
            }
          }
          // ::v-deep .node-view:not(:hover) {
          //     .node-view-header {
          //       padding-top: $node-view-spacer-sm-y;
          //       padding-bottom: $node-view-spacer-sm-y;
          //     }
          //
          //     h4 {
          //       font-size: 2rem;
          //       > * {
          //         display: inline !important;
          //       }
          //       .edition {
          //         display: none !important;
          //       }
          //       display: block;
          //       display: -webkit-box;
          //       -webkit-line-clamp: 1;
          //       -webkit-box-orient: vertical;
          //       text-overflow: ellipsis;
          //       overflow: hidden;
          //       max-height: 1.5em;
          //     }
          //
          //     .node-view-header-prod h4 {
          //       font-size: 1rem;
          //     }
          // }
          //
          // &:hover {
          //   ::v-deep .node-view:hover .node-view-header {
          //     z-index: calc(var(--count) + 10);
          //     border-bottom: $line;
          //   }
          // }
        }

        &.splitted {
          display: flex;
          flex-basis: 50%;
        }
      }
    }
  }
}
</style>