1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<template>
<div class="fm-breadcrumb">
<nav aria-label="breadcrumb">
<ol
class="breadcrumb"
v-bind:class="[
manager === activeManager ? 'active-manager' : 'bg-light',
]"
>
<li class="breadcrumb-item" v-on:click="selectMainDirectory">
<span class="badge badge-secondary">
<i class="far fa-hdd" />
</span>
</li>
<li
class="breadcrumb-item text-truncate"
v-for="(item, index) in breadcrumb"
v-bind:key="index"
v-bind:class="[breadcrumb.length === index + 1 ? 'active' : '']"
v-on:click="selectDirectory(index)"
>
<span>{{ item }}</span>
</li>
</ol>
</nav>
</div>
</template>
<script>
export default {
name: "Breadcrumb",
props: {
manager: { type: String, required: true },
},
computed: {
/**
* Active manager name
* @returns {default.computed.activeManager|(function())|string|activeManager}
*/
activeManager() {
return this.$store.state.fm.activeManager;
},
/**
* Selected Disk for this manager
* @returns {default.computed.selectedDisk|(function())|default.selectedDisk|null}
*/
selectedDisk() {
return this.$store.state.fm[this.manager].selectedDisk;
},
/**
* Selected directory for this manager
* @returns {default.computed.selectedDirectory|(function())|default.selectedDirectory|null}
*/
selectedDirectory() {
return this.$store.state.fm[this.manager].selectedDirectory;
},
/**
* Breadcrumb
* @returns {*}
*/
breadcrumb() {
return this.$store.getters[`fm/${this.manager}/breadcrumb`];
},
},
methods: {
/**
* Load selected directory
* @param index
*/
selectDirectory(index) {
const path = this.breadcrumb.slice(0, index + 1).join("/");
// only if this path not selected
if (path !== this.selectedDirectory) {
// load directory
this.$store.dispatch(`fm/${this.manager}/selectDirectory`, {
path,
history: true,
});
}
},
/**
* Select main directory
*/
selectMainDirectory() {
if (this.selectedDirectory) {
this.$store.dispatch(`fm/${this.manager}/selectDirectory`, {
path: null,
history: true,
});
}
},
},
};
</script>
<style scoped lang="scss">
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
.fm-breadcrumb {
.breadcrumb {
display: flex;
flex-wrap: nowrap;
padding: 0.2rem 0.3rem;
margin-bottom: 0.5rem;
@include font-size($breadcrumb-font-size);
list-style: none;
background-color: $breadcrumb-bg;
@include border-radius($breadcrumb-border-radius);
.breadcrumb-item {
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item {
padding-left: $breadcrumb-item-padding;
&::before {
float: left; // Suppress inline spacings and underlining of the separator
padding-right: $breadcrumb-item-padding;
color: $breadcrumb-divider-color;
content: escape-svg($breadcrumb-divider);
}
}
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
// without `<ul>`s. The `::before` pseudo-element generates an element
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
//
// To trick IE into suppressing the underline, we give the pseudo-element an
// underline and then immediately remove it.
+ .breadcrumb-item:hover::before {
text-decoration: underline;
}
// stylelint-disable-next-line no-duplicate-selectors
+ .breadcrumb-item:hover::before {
text-decoration: none;
}
&.active {
color: $breadcrumb-active-color;
}
}
&.active-manager {
background-color: #c2e5eb;
}
.breadcrumb-item:not(.active):hover {
cursor: pointer;
font-weight: normal;
color: #6d757d;
}
}
}
</style>