add history

src/App.vue

@@ -5,18 +5,22 @@
     <main id="main">
       <router-view />
     </main>
+
+    <nodes-history />
   </div>
 </template>
 
 <script>
 import MainHeader from '@/pages/_partials/MainHeader'
+import NodesHistory from '@/pages/_partials/NodesHistory'
 
 
 export default {
   name: 'App',
 
   components: {
-    MainHeader
+    MainHeader,
+    NodesHistory
   },
 
   metaInfo () {

src/assets/scss/base/_bootstrap-overrides.scss

@@ -47,3 +47,11 @@ a:hover {
 .badge {
   font-size: inherit;
 }
+
+@each $color, $value in $theme-colors {
+  @if $color == 'depart' {
+    @include text-emphasis-variant(".text-#{$color}", $black, true);
+  } @else {
+    @include text-emphasis-variant(".text-#{$color}", darken($value, 30%), true);
+  }
+}

src/components/nodes/NodeViewFooter.vue

@@ -119,10 +119,10 @@ export default {
 
 .popover-siblings {
   background-color: $white;
-  border: $line;
   max-width: 350px;
 
   .popover-body {
+    border: $line;
     max-height: 70vh;
     overflow: auto;
     color: $black;

src/messages/fr.json

@@ -45,5 +45,6 @@
   "text": {
     "read": "Voir le texte"
   },
+  "history": "Historique de consultation",
   "from": "à partir de :"
 }

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>

src/store/modules/library.js

@@ -134,8 +134,10 @@ export default {
     async 'UPDATE_NODEBOOK' ({ state, commit, dispatch }, query) {
       const { mode = 'tree', nodebook } = parseNodesQueryParams(query)
       commit('SET_MODE', mode)
-      await dispatch('GET_NODES', { ids: [].concat(...nodebook), dataLevel: 'full' })
+      const ids = [].concat(...nodebook)
+      await dispatch('GET_NODES', { ids, dataLevel: 'full' })
       commit('SET_NODEBOOK', nodebook)
+      commit('ADD_HISTORY_ENTRIES', ids)
     },
 
     // ╭╮╷╭─╮┌─╮┌─╴╭─╴
@@ -157,6 +159,7 @@ export default {
       const stack = state.nodebook.find(stack => stack[0] === parentId)
       commit('ADD_NODEBOOK_NODE', [stack, parentId, childId])
       dispatch('UPDATE_QUERY_NODES')
+      commit('ADD_HISTORY_ENTRIES', [childId || parentId])
     },
 
     'CLOSE_NODE' ({ state, commit, dispatch }, { parentId, childId }) {

src/store/nodes.js

@@ -84,6 +84,14 @@ export default {
       }
     },
 
+    'ADD_HISTORY_ENTRIES' (state, ids) {
+      for (const id of ids) {
+        if (!state.history.includes(id)) {
+          state.history.push(id)
+        }
+      }
+    },
+
     'UPDATE_OPTIONS_VISIBILITY' (state, visible) {
       state.optionsVisible = visible
     }
@@ -144,6 +152,7 @@ export default {
     // Args getters
     nodes: state => ids => ids.map(id => state.nodes[id]),
     node: state => id => state.nodes[id],
-    optionsVisible: state => state.optionsVisible
+    optionsVisible: state => state.optionsVisible,
+    history: state => state.history.map(id => state.nodes[id])
   }
 }