add history

src/pages/_partials/NodesHistory.vue

@@ -0,0 +1,228 @@
+<template>
+  <footer class="nodes-history no-events-container" v-if="history.length">
+    <b-dropdown
+      :text="$t('history')"
+      variant="outline-dark"
+      dropup no-flip
+      boundary="main"
+      class="no-events-container"
+      @shown="scrollToEnd"
+    >
+      <b-dropdown-text class="dropdown-item-arrow left">
+        <b-button variant="link" @click="onArrowClick('left')" :disabled="leftDisabled">&lt;</b-button>
+      </b-dropdown-text>
+
+      <b-dropdown-item-button
+        v-for="node in history" :key="'history-' + node.id"
+        @click="onOpenNode(node)"
+      >
+        <div
+          class="font-weight-bold"
+          :class="'text-' + (node.variant === 'depart' ? 'black' : node.variant)"
+        >
+          {{ $t('variants.' + node.variant) }}
+        </div>
+        <node-view-title
+          :node="node.type === 'ref' ? node : node.parents[0]"
+          link edition block
+          tag="div"
+        />
+      </b-dropdown-item-button>
+
+      <b-dropdown-text style="width: 70px;" aria-hidden="true" class="ml-auto" />
+
+      <b-dropdown-text class="dropdown-item-arrow right">
+        <b-button variant="link" @click="onArrowClick('right')" :disabled="rightDisabled">&gt;</b-button>
+      </b-dropdown-text>
+    </b-dropdown>
+  </footer>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+import { getRelation } from '@/store/utils'
+import { NodeViewTitle } from '@/components/nodes'
+
+
+export default {
+  name: 'NodesHistory',
+
+  components: {
+    NodeViewTitle
+  },
+
+  data () {
+    return {
+      leftDisabled: false,
+      rightDisabled: false
+    }
+  },
+
+  computed: {
+    ...mapGetters(['history'])
+  },
+
+  methods: {
+    onOpenNode (node) {
+      this.$store.dispatch('OPEN_NODE', getRelation(node))
+    },
+
+    updateBtnDir () {
+      const container = this.$el.querySelector('.dropdown-menu')
+      this.leftDisabled = container.scrollLeft < 5
+      this.rightDisabled = container.scrollLeft + container.offsetWidth + 5 > container.scrollWidth
+    },
+
+    scrollToEnd () {
+      const container = this.$el.querySelector('.dropdown-menu')
+      container.scrollTo({ left: container.scrollWidth })
+      this.updateBtnDir()
+    },
+
+    onArrowClick (dir) {
+      const container = this.$el.querySelector('.dropdown-menu')
+      const width = container.offsetWidth
+      const items = Array.from(container.querySelectorAll('.dropdown-item'))
+      let left = 0
+      if (dir === 'right') {
+        const nextItem = items.find(item => {
+          return item.offsetLeft + 300 > container.scrollLeft + width
+        })
+        if (nextItem) {
+          left = nextItem.offsetLeft + 370 - width
+        }
+      } else {
+        const nextItem = items.reverse().find(item => {
+          return item.offsetLeft < container.scrollLeft
+        })
+        if (nextItem) {
+          left = nextItem.offsetLeft - 70
+        }
+      }
+      container.scrollTo({ left, behavior: 'smooth' })
+      setTimeout(this.updateBtnDir, 500)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.nodes-history {
+  margin: 0;
+
+  .dropdown {
+    width: 100%;
+
+    @include media-breakpoint-up($size-bp) {
+      height: 100%;
+      display: block;
+    }
+  }
+
+  .dropdown-toggle {
+    background-color: $white;
+    border-radius: 0 !important;
+    padding: .5rem;
+    font-weight: $font-weight-bold;
+    text-align: left;
+    border-bottom: 0;
+
+    @include media-breakpoint-up($size-bp) {
+      position: absolute !important;
+      bottom: 0;
+      right: 2rem;
+      z-index: 9999;
+    }
+  }
+
+  .dropdown-menu {
+    margin-left: 0;
+    margin-bottom: 0 !important;
+    max-width: 100vw;
+
+    @include media-breakpoint-down($size-bp-down) {
+      width: 100vw;
+      max-height: calc(100vh - 38px);
+      overflow-y: auto;
+      border-bottom: 0;
+      border-left: 0;
+      border-right: 0;
+    }
+
+    @include media-breakpoint-up($size-bp) {
+      width: 100vw;
+      transform: none !important;
+      top: 70% !important;
+      border-left: 0;
+      border-right: 0;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      overflow-y: hidden;
+      scrollbar-width: none;
+
+      &.show {
+        display: flex;
+      }
+    }
+
+    .dropdown-item {
+      padding: $node-view-spacer-sm-x !important;
+      color: $black;
+      white-space: normal;
+
+      &:hover {
+        background-color: $white;
+      }
+
+      @include media-breakpoint-up($size-bp) {
+        width: 300px;
+      }
+    }
+
+    .dropdown-item-arrow {
+      display: none;
+      position: sticky;
+      background-color: $white;
+
+      &.left {
+        left: 0;
+      }
+
+      &.right {
+        right: 0;
+      }
+
+      .b-dropdown-text {
+        height: 100%;
+        padding: 0;
+
+        .btn {
+          padding: 0;
+          height: 100%;
+          text-decoration: none;
+          font-size: 3.5rem;
+          width: 70px;
+        }
+      }
+
+      @include media-breakpoint-up($size-bp) {
+        display: block;
+      }
+    }
+
+    .edition {
+      font-size: .7rem;
+      margin-top: .15rem;
+    }
+  }
+
+  @include media-breakpoint-up($size-bp) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>