<!-- ldgallery - A static generator which turns a collection of tagged -- pictures into a searchable web gallery. -- -- Copyright (C) 2019-2020 Guillaume FOUET -- -- This program is free software: you can redistribute it and/or modify -- it under the terms of the GNU Affero General Public License as -- published by the Free Software Foundation, either version 3 of the -- License, or (at your option) any later version. -- -- This program is distributed in the hope that it will be useful, -- but WITHOUT ANY WARRANTY; without even the implied warranty of -- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -- GNU Affero General Public License for more details. -- -- You should have received a copy of the GNU Affero General Public License -- along with this program. If not, see <https://www.gnu.org/licenses/>. --> <template> <div ref="breadcrumb" v-dragscroll class="ld-breadcrumb flex scrollbar" @click.capture="e => dragScrollClickFix.onClickCapture(e)" @dragscrollstart="dragScrollClickFix.onDragScrollStart()" @dragscrollend="dragScrollClickFix.onDragScrollEnd()" @dragscrollmove="checkForOverflowMask" > <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div> <ul class="ld-breadcrumb"> <li v-for="(item,idx) in currentItemPath" :key="item.path"> <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" /> <router-link :to="item.path" class="link"> <fa-icon :icon="getIcon(item)" size="lg" /> {{item.title}} </router-link> </li> <li v-if="searchMode"> <fa-icon icon="angle-right" class="disabled" /> <router-link :to="$route" class="link"> <fa-icon icon="search" size="lg" class="disabled" /> </router-link> </li> </ul> </div> </template> <script lang="ts"> import { Component, Vue, Ref, Watch, Prop } from "vue-property-decorator"; import DragScrollClickFix from "@/services/dragscrollclickfix"; import Navigation from "@/services/navigation"; @Component export default class LdBreadcrumb extends Vue { @Prop({ type: Array, required: true }) readonly currentItemPath!: Gallery.Item[]; @Prop(Boolean) readonly searchMode!: boolean; @Ref() readonly breadcrumb!: HTMLUListElement; readonly dragScrollClickFix = new DragScrollClickFix(); dragging: boolean = false; overflowMask: boolean = false; mounted() { window.addEventListener("resize", this.checkForOverflowMask); } destroyed() { window.removeEventListener("resize", this.checkForOverflowMask); } checkForOverflowMask() { this.overflowMask = this.breadcrumb.scrollLeft > 1; } @Watch("currentItemPath") changedCurrentItemPath() { this.$nextTick(() => { this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth; this.checkForOverflowMask(); }); } getIcon(item: Gallery.Item) { return Navigation.getIcon(item); } } </script> <style lang="scss"> @import "~@/assets/scss/theme.scss"; .ld-breadcrumb-overflow-mask { position: absolute; width: 100%; height: 100%; background: linear-gradient( to right, rgba($panel-top-bgcolor, 1) $breadcrumb-margins, rgba($panel-top-bgcolor, 0) $breadcrumb-overflow-mask-size ); pointer-events: none; } .ld-breadcrumb { ul { display: flex; white-space: nowrap; } a { padding: $breadcrumb-margins 0; margin-left: $breadcrumb-margins; } li { align-self: center; margin-right: $breadcrumb-margins; } &.scrollbar { overflow-y: hidden; scrollbar-width: none; &::-webkit-scrollbar { height: 0; } } } </style>