comand-component-library 3.2.1 → 3.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/comand-component-library.css +1 -1
- package/dist/comand-component-library.umd.min.js +1 -1
- package/package.json +2 -1
- package/src/App.vue +34 -9
- package/src/assets/data/main-navigation.json +17 -0
- package/src/assets/data/multistep-form-progress-bar.json +63 -33
- package/src/assets/styles/global-styles.scss +1 -1
- package/src/components/CmdBox.vue +13 -6
- package/src/components/CmdFancyBox.vue +411 -412
- package/src/components/CmdListOfLinks.vue +0 -2
- package/src/components/CmdMainNavigation.vue +53 -15
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<transition name="fade"
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
<!-- <transition name="fade">-->
|
|
3
|
+
<dialog
|
|
4
|
+
ref="dialog"
|
|
5
|
+
:class="['cmd-fancybox', {'show-overlay': showOverlay, 'image' : fancyBoxImageUrl || fancyBoxGallery}]"
|
|
6
|
+
:aria-label="ariaLabelText"
|
|
7
|
+
>
|
|
8
8
|
<!-- begin print buttons -->
|
|
9
9
|
<div class="button-wrapper no-flex"
|
|
10
10
|
v-if="(fancyboxOptions.printButtons && (fancyboxOptions.printButtons.color || fancyboxOptions.printButtons.grayscale)) || fancyboxOptions.closeIcon">
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
11
|
+
<a href="#"
|
|
12
|
+
v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.color && fancyboxOptions.printButtons.color.show"
|
|
13
|
+
:class="['button', fancyboxOptions.printButtons.color.iconClass]"
|
|
14
|
+
:title="fancyboxOptions.printButtons.color.tooltip"
|
|
15
|
+
id="print-color"
|
|
16
|
+
@click.prevent="printInGrayscale = false">
|
|
17
|
+
</a>
|
|
18
|
+
<a href="#"
|
|
19
|
+
v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.grayscale && fancyboxOptions.printButtons.grayscale.show"
|
|
20
|
+
:class="['button', fancyboxOptions.printButtons.grayscale.iconClass]"
|
|
21
|
+
:title="fancyboxOptions.printButtons.grayscale.tooltip"
|
|
22
|
+
id="print-grayscale"
|
|
23
|
+
@click.prevent="printInGrayscale = true">
|
|
24
|
+
</a>
|
|
25
|
+
<!-- end print buttons -->
|
|
26
|
+
|
|
27
|
+
<!-- begin close-icon -->
|
|
28
|
+
<a href="#"
|
|
29
|
+
v-if="fancyboxOptions.closeIcon"
|
|
30
|
+
:class="fancyboxOptions.closeIcon.iconClass"
|
|
31
|
+
:title="fancyboxOptions.closeIcon.tooltip"
|
|
32
|
+
@click.prevent="close">
|
|
33
|
+
</a>
|
|
34
|
+
<!-- end close-icon -->
|
|
35
35
|
</div>
|
|
36
36
|
<div :class="{'grayscale' : printInGrayscale}">
|
|
37
37
|
<!-- begin CmdHeadline -->
|
|
@@ -43,328 +43,337 @@
|
|
|
43
43
|
/>
|
|
44
44
|
<!-- end CmdHeadline -->
|
|
45
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
|
-
|
|
46
|
+
<div v-if="fancyBoxImageUrl" class="content">
|
|
47
|
+
<img :src="fancyBoxImageUrl" :alt="altText"/>
|
|
48
|
+
</div>
|
|
49
|
+
<div v-else-if="fancyBoxContent" class="content" v-html="fancyBoxContent"></div>
|
|
50
|
+
<div v-else-if="fancyBoxElements" class="content"></div>
|
|
51
|
+
<div v-else-if="fancyBoxGallery" class="content">
|
|
52
|
+
|
|
53
|
+
<!-- begin CmdSlideButton -->
|
|
54
|
+
<CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev"/>
|
|
55
|
+
<!-- end CmdSlideButton -->
|
|
56
|
+
|
|
57
|
+
<!-- begin enlarged image -->
|
|
58
|
+
<figure>
|
|
59
|
+
<img :src="fancyBoxGallery[index].srcImageLarge" :alt="fancyBoxGallery[index].alt"/>
|
|
60
|
+
<figcaption>{{ fancyBoxGallery[index].figcaption }}</figcaption>
|
|
61
|
+
</figure>
|
|
62
|
+
<!-- end enlarged image -->
|
|
63
|
+
|
|
64
|
+
<!-- begin CmdSlideButton -->
|
|
65
|
+
<CmdSlideButton @click.prevent="showNextItem"/>
|
|
66
|
+
<!-- end CmdSlideButton -->
|
|
67
|
+
</div>
|
|
68
|
+
<div v-else class="content">
|
|
69
|
+
<!-- begin slot-content -->
|
|
70
|
+
<slot></slot>
|
|
71
|
+
<!-- end slot-content -->
|
|
72
|
+
</div>
|
|
73
73
|
</div>
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
</
|
|
85
|
-
</transition>
|
|
74
|
+
</dialog>
|
|
75
|
+
<!-- begin CmdThumbnailScroller -->
|
|
76
|
+
<CmdThumbnailScroller
|
|
77
|
+
v-if="fancyBoxGallery"
|
|
78
|
+
:thumbnailScrollerItems="[...fancyBoxGallery]"
|
|
79
|
+
:allowOpenFancyBox="false"
|
|
80
|
+
@click="showItem"
|
|
81
|
+
:imgIndex="index"
|
|
82
|
+
/>
|
|
83
|
+
<!-- end CmdThumbnailScroller -->
|
|
84
|
+
<!-- </transition>-->
|
|
86
85
|
</template>
|
|
87
86
|
|
|
88
87
|
<script>
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
88
|
+
import {defineComponent, createApp} from "vue"
|
|
89
|
+
|
|
90
|
+
// import mixins
|
|
91
|
+
import Identifier from "../mixins/Identifier"
|
|
92
|
+
|
|
93
|
+
// import components
|
|
94
|
+
import CmdHeadline from "./CmdHeadline"
|
|
95
|
+
import CmdSlideButton from "./CmdSlideButton.vue"
|
|
96
|
+
import CmdThumbnailScroller from './CmdThumbnailScroller.vue'
|
|
97
|
+
|
|
98
|
+
const openFancyBox = (config) => {
|
|
99
|
+
const node = document.createElement('div');
|
|
100
|
+
document.querySelector('body').appendChild(node);
|
|
101
|
+
const fb = createApp(FancyBox, {
|
|
102
|
+
...config,
|
|
103
|
+
show: true
|
|
104
|
+
})
|
|
105
|
+
fb.mount(node)
|
|
106
|
+
}
|
|
108
107
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
108
|
+
const FancyBox = defineComponent({
|
|
109
|
+
name: "CmdFancyBox",
|
|
110
|
+
components: {
|
|
111
|
+
CmdHeadline,
|
|
112
|
+
CmdSlideButton,
|
|
113
|
+
CmdThumbnailScroller
|
|
114
|
+
},
|
|
115
|
+
mixins: [
|
|
116
|
+
Identifier
|
|
117
|
+
],
|
|
118
|
+
data() {
|
|
119
|
+
return {
|
|
120
|
+
fancyBoxContent: null,
|
|
121
|
+
fancyBoxElements: null,
|
|
122
|
+
fancyBoxImageUrl: null,
|
|
123
|
+
index: this.defaultGalleryIndex,
|
|
124
|
+
printInGrayscale: false,
|
|
125
|
+
showFancyBox: this.show
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
props: {
|
|
129
|
+
/**
|
|
130
|
+
* sets aria-label-text on component
|
|
131
|
+
*
|
|
132
|
+
* @requiredForAccessibility: true
|
|
133
|
+
*/
|
|
134
|
+
ariaLabelText: {
|
|
135
|
+
type: String,
|
|
136
|
+
required: true
|
|
115
137
|
},
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
fancyBoxElements: null,
|
|
123
|
-
fancyBoxImageUrl: null,
|
|
124
|
-
index: this.defaultGalleryIndex,
|
|
125
|
-
printInGrayscale: false,
|
|
126
|
-
showFancyBox: this.show
|
|
127
|
-
}
|
|
138
|
+
/**
|
|
139
|
+
* set if content should be loaded by url
|
|
140
|
+
*/
|
|
141
|
+
url: {
|
|
142
|
+
type: String,
|
|
143
|
+
required: false
|
|
128
144
|
},
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
},
|
|
146
|
-
/**
|
|
147
|
-
* options to show at top (closeIcon, printButtons)
|
|
148
|
-
*/
|
|
149
|
-
fancyboxOptions: {
|
|
150
|
-
type: Object,
|
|
151
|
-
default() {
|
|
152
|
-
return {
|
|
153
|
-
closeIcon: {
|
|
154
|
-
"iconClass": "icon-cancel",
|
|
155
|
-
"tooltip": "Close"
|
|
145
|
+
/**
|
|
146
|
+
* options to show at top (closeIcon, printButtons)
|
|
147
|
+
*/
|
|
148
|
+
fancyboxOptions: {
|
|
149
|
+
type: Object,
|
|
150
|
+
default() {
|
|
151
|
+
return {
|
|
152
|
+
closeIcon: {
|
|
153
|
+
"iconClass": "icon-cancel",
|
|
154
|
+
"tooltip": "Close"
|
|
155
|
+
},
|
|
156
|
+
printButtons: {
|
|
157
|
+
"color": {
|
|
158
|
+
show: true,
|
|
159
|
+
"iconClass": "icon-print",
|
|
160
|
+
"tooltip": "print in color"
|
|
156
161
|
},
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
"tooltip": "print in color"
|
|
162
|
-
},
|
|
163
|
-
"grayscale": {
|
|
164
|
-
show: true,
|
|
165
|
-
"iconClass": "icon-print",
|
|
166
|
-
"tooltip": "print in grayscale"
|
|
167
|
-
}
|
|
162
|
+
"grayscale": {
|
|
163
|
+
show: true,
|
|
164
|
+
"iconClass": "icon-print",
|
|
165
|
+
"tooltip": "print in grayscale"
|
|
168
166
|
}
|
|
169
167
|
}
|
|
170
168
|
}
|
|
171
|
-
},
|
|
172
|
-
/**
|
|
173
|
-
* allow closing fancybox by escape-key
|
|
174
|
-
*/
|
|
175
|
-
allowEscapeKey: {
|
|
176
|
-
type: Boolean,
|
|
177
|
-
default: true
|
|
178
|
-
},
|
|
179
|
-
/**
|
|
180
|
-
* the content shown in the main area
|
|
181
|
-
*/
|
|
182
|
-
content: {
|
|
183
|
-
type: String,
|
|
184
|
-
required: false
|
|
185
|
-
},
|
|
186
|
-
/**
|
|
187
|
-
* list of show elements (not images)
|
|
188
|
-
*/
|
|
189
|
-
elements: {
|
|
190
|
-
type: Array,
|
|
191
|
-
required: false
|
|
192
|
-
},
|
|
193
|
-
/**
|
|
194
|
-
* use if a gallery of images should be opened (and navigated) inside fancybox
|
|
195
|
-
*/
|
|
196
|
-
fancyBoxGallery: {
|
|
197
|
-
type: Array,
|
|
198
|
-
required: false
|
|
199
|
-
},
|
|
200
|
-
/**
|
|
201
|
-
* if gallery is used, you can set default index
|
|
202
|
-
*/
|
|
203
|
-
defaultGalleryIndex: {
|
|
204
|
-
type: Number,
|
|
205
|
-
required: false
|
|
206
|
-
},
|
|
207
|
-
/**
|
|
208
|
-
* show/hide entire fancybox
|
|
209
|
-
*/
|
|
210
|
-
show: {
|
|
211
|
-
type: Boolean,
|
|
212
|
-
default: false
|
|
213
|
-
},
|
|
214
|
-
/**
|
|
215
|
-
* show/hide overlay (around fancybox, above website)
|
|
216
|
-
*
|
|
217
|
-
* @affectsStyling: true
|
|
218
|
-
*/
|
|
219
|
-
showOverlay: {
|
|
220
|
-
type: Boolean,
|
|
221
|
-
default: true
|
|
222
|
-
},
|
|
223
|
-
/**
|
|
224
|
-
* alternative text for large image (required for images)
|
|
225
|
-
*
|
|
226
|
-
* @requiredForAccessibility: true
|
|
227
|
-
*/
|
|
228
|
-
altText: {
|
|
229
|
-
type: String,
|
|
230
|
-
required: false
|
|
231
|
-
},
|
|
232
|
-
/**
|
|
233
|
-
* properties for CmdHeadline-component
|
|
234
|
-
*
|
|
235
|
-
* @requiredForAccessibility: true
|
|
236
|
-
*/
|
|
237
|
-
cmdHeadline: {
|
|
238
|
-
type: Object,
|
|
239
|
-
required: false
|
|
240
169
|
}
|
|
241
170
|
},
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
171
|
+
/**
|
|
172
|
+
* allow closing fancybox by escape-key
|
|
173
|
+
*/
|
|
174
|
+
allowEscapeKey: {
|
|
175
|
+
type: Boolean,
|
|
176
|
+
default: true
|
|
177
|
+
},
|
|
178
|
+
/**
|
|
179
|
+
* the content shown in the main area
|
|
180
|
+
*/
|
|
181
|
+
content: {
|
|
182
|
+
type: String,
|
|
183
|
+
required: false
|
|
184
|
+
},
|
|
185
|
+
/**
|
|
186
|
+
* list of show elements (not images)
|
|
187
|
+
*/
|
|
188
|
+
elements: {
|
|
189
|
+
type: Array,
|
|
190
|
+
required: false
|
|
191
|
+
},
|
|
192
|
+
/**
|
|
193
|
+
* use if a gallery of images should be opened (and navigated) inside fancybox
|
|
194
|
+
*/
|
|
195
|
+
fancyBoxGallery: {
|
|
196
|
+
type: Array,
|
|
197
|
+
required: false
|
|
198
|
+
},
|
|
199
|
+
/**
|
|
200
|
+
* if gallery is used, you can set default index
|
|
201
|
+
*/
|
|
202
|
+
defaultGalleryIndex: {
|
|
203
|
+
type: Number,
|
|
204
|
+
required: false
|
|
205
|
+
},
|
|
206
|
+
/**
|
|
207
|
+
* show/hide entire fancybox
|
|
208
|
+
*/
|
|
209
|
+
show: {
|
|
210
|
+
type: Boolean,
|
|
211
|
+
default: false
|
|
212
|
+
},
|
|
213
|
+
/**
|
|
214
|
+
* show/hide overlay (around fancybox, above website)
|
|
215
|
+
*
|
|
216
|
+
* @affectsStyling: true
|
|
217
|
+
*/
|
|
218
|
+
showOverlay: {
|
|
219
|
+
type: Boolean,
|
|
220
|
+
default: true
|
|
221
|
+
},
|
|
222
|
+
/**
|
|
223
|
+
* alternative text for large image (required for images)
|
|
224
|
+
*
|
|
225
|
+
* @requiredForAccessibility: true
|
|
226
|
+
*/
|
|
227
|
+
altText: {
|
|
228
|
+
type: String,
|
|
229
|
+
required: false
|
|
230
|
+
},
|
|
231
|
+
/**
|
|
232
|
+
* properties for CmdHeadline-component
|
|
233
|
+
*
|
|
234
|
+
* @requiredForAccessibility: true
|
|
235
|
+
*/
|
|
236
|
+
cmdHeadline: {
|
|
237
|
+
type: Object,
|
|
238
|
+
required: false
|
|
239
|
+
}
|
|
240
|
+
},
|
|
241
|
+
created() {
|
|
242
|
+
if (this.allowEscapeKey) {
|
|
243
|
+
this.$_FancyBox_escapeKeyHandler = e => (e.key === "Escape" || e.key === "Esc") && this.close()
|
|
244
|
+
document.querySelector("body").addEventListener("keyup", this.$_FancyBox_escapeKeyHandler)
|
|
245
|
+
}
|
|
247
246
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
247
|
+
/* begin avoid scrolling if fancybox is shown */
|
|
248
|
+
/* register new properties for vue-instance */
|
|
249
|
+
/* get current vertical scroll position */
|
|
250
|
+
// this.$_FancyBox_verticalScrollPosition = window.scrollY
|
|
251
|
+
//
|
|
252
252
|
|
|
253
|
-
|
|
254
|
-
|
|
253
|
+
this.$_FancyBox_scrollHandler = () => {
|
|
254
|
+
window.scrollTo(0, this.$_FancyBox_verticalScrollPosition)
|
|
255
|
+
}
|
|
256
|
+
/* end avoid scrolling if fancybox is shown */
|
|
257
|
+
|
|
258
|
+
this.$watch(
|
|
259
|
+
() => [
|
|
260
|
+
this.url,
|
|
261
|
+
this.content,
|
|
262
|
+
this.elements
|
|
263
|
+
],
|
|
264
|
+
this.updateContentOnPropertyChange,
|
|
265
|
+
{immediate: true}
|
|
266
|
+
)
|
|
267
|
+
},
|
|
268
|
+
mounted() {
|
|
269
|
+
if (this.showFancyBox) {
|
|
270
|
+
document.querySelector("body").classList.add("avoid-scrolling")
|
|
271
|
+
this.$refs.dialog.showModal()
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
beforeUnmount() {
|
|
275
|
+
if (this.allowEscapeKey) {
|
|
276
|
+
document.querySelector("body").removeEventListener("keyup", this.$_FancyBox_escapeKeyHandler)
|
|
277
|
+
}
|
|
278
|
+
},
|
|
279
|
+
methods: {
|
|
280
|
+
updateContentOnPropertyChange() {
|
|
281
|
+
this.fancyBoxImageUrl = this.fancyBoxContent = this.fancyBoxElements = null
|
|
282
|
+
if (this.url) {
|
|
283
|
+
this.loadContent(this.url)
|
|
284
|
+
} else if (this.content) {
|
|
285
|
+
this.fancyBoxContent = this.content
|
|
286
|
+
} else if (this.elements) {
|
|
287
|
+
this.fancyBoxElements = this.elements.map(el => el.cloneNode(true))
|
|
288
|
+
this.$nextTick(() => {
|
|
289
|
+
this.$el.querySelector(".content").append(...this.fancyBoxElements)
|
|
290
|
+
})
|
|
255
291
|
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
292
|
+
},
|
|
293
|
+
async loadContent(url) {
|
|
294
|
+
const contentType = await getContentType(url)
|
|
295
|
+
if (contentType.startsWith("image/")) {
|
|
296
|
+
this.fancyBoxImageUrl = url
|
|
297
|
+
} else {
|
|
298
|
+
fetch(url)
|
|
299
|
+
.then(response => response.text())
|
|
300
|
+
.then(text => this.fancyBoxContent = text)
|
|
301
|
+
.catch(error => console.error(`Error loading ${this.url}: ${error}`))
|
|
259
302
|
}
|
|
260
|
-
/* -- end avoid scrolling if fancybox is shown */
|
|
261
|
-
|
|
262
|
-
this.$watch(
|
|
263
|
-
() => [
|
|
264
|
-
this.url,
|
|
265
|
-
this.content,
|
|
266
|
-
this.elements
|
|
267
|
-
],
|
|
268
|
-
this.updateContentOnPropertyChange,
|
|
269
|
-
{immediate: true}
|
|
270
|
-
)
|
|
271
303
|
},
|
|
272
|
-
|
|
273
|
-
if (this.
|
|
274
|
-
|
|
304
|
+
showPrevItem() {
|
|
305
|
+
if (this.index > 0) {
|
|
306
|
+
this.index--;
|
|
307
|
+
} else {
|
|
308
|
+
this.index = this.fancyBoxGallery.length - 1;
|
|
275
309
|
}
|
|
276
310
|
},
|
|
277
|
-
methods: {
|
|
278
|
-
updateContentOnPropertyChange() {
|
|
279
|
-
this.fancyBoxImageUrl = this.fancyBoxContent = this.fancyBoxElements = null
|
|
280
|
-
if (this.url) {
|
|
281
|
-
this.loadContent(this.url)
|
|
282
|
-
} else if (this.content) {
|
|
283
|
-
this.fancyBoxContent = this.content
|
|
284
|
-
} else if (this.elements) {
|
|
285
|
-
this.fancyBoxElements = this.elements.map(el => el.cloneNode(true))
|
|
286
|
-
this.$nextTick(() => {
|
|
287
|
-
this.$el.querySelector('.content').append(...this.fancyBoxElements)
|
|
288
|
-
})
|
|
289
|
-
}
|
|
290
|
-
},
|
|
291
|
-
async loadContent(url) {
|
|
292
|
-
const contentType = await getContentType(url)
|
|
293
|
-
if (contentType.startsWith('image/')) {
|
|
294
|
-
this.fancyBoxImageUrl = url
|
|
295
|
-
} else {
|
|
296
|
-
fetch(url)
|
|
297
|
-
.then(response => response.text())
|
|
298
|
-
.then(text => this.fancyBoxContent = text)
|
|
299
|
-
.catch(error => console.error(`Error loading ${this.url}: ${error}`))
|
|
300
|
-
}
|
|
301
|
-
},
|
|
302
|
-
showPrevItem() {
|
|
303
|
-
if (this.index > 0) {
|
|
304
|
-
this.index--;
|
|
305
|
-
} else {
|
|
306
|
-
this.index = this.fancyBoxGallery.length - 1;
|
|
307
|
-
}
|
|
308
|
-
},
|
|
309
|
-
|
|
310
|
-
showItem(imgId) {
|
|
311
|
-
for (let i = 0; i < this.fancyBoxGallery.length; i++) {
|
|
312
|
-
if (this.fancyBoxGallery[i].imgId === imgId) {
|
|
313
|
-
this.index = i
|
|
314
|
-
break;
|
|
315
|
-
}
|
|
316
|
-
}
|
|
317
|
-
},
|
|
318
311
|
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
312
|
+
showItem(imgId) {
|
|
313
|
+
for (let i = 0; i < this.fancyBoxGallery.length; i++) {
|
|
314
|
+
if (this.fancyBoxGallery[i].imgId === imgId) {
|
|
315
|
+
this.index = i
|
|
316
|
+
break;
|
|
324
317
|
}
|
|
325
|
-
}
|
|
318
|
+
}
|
|
319
|
+
},
|
|
326
320
|
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
}
|
|
321
|
+
showNextItem() {
|
|
322
|
+
if (this.index < this.fancyBoxGallery.length - 1) {
|
|
323
|
+
this.index++;
|
|
324
|
+
} else {
|
|
325
|
+
this.index = 0;
|
|
326
|
+
}
|
|
327
|
+
},
|
|
335
328
|
|
|
336
|
-
|
|
329
|
+
close() {
|
|
330
|
+
if (this.$options.el) {
|
|
331
|
+
this.$destroy()
|
|
332
|
+
this.$el.remove()
|
|
333
|
+
} else {
|
|
334
|
+
this.showFancyBox = false
|
|
335
|
+
this.$emit("update:show", false)
|
|
337
336
|
}
|
|
337
|
+
|
|
338
|
+
document.querySelector("body").classList.remove("avoid-scrolling")
|
|
339
|
+
}
|
|
340
|
+
},
|
|
341
|
+
watch: {
|
|
342
|
+
show(value) {
|
|
343
|
+
this.showFancyBox = value
|
|
338
344
|
},
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
this.showFancyBox = value
|
|
342
|
-
},
|
|
343
|
-
showFancyBox() {
|
|
345
|
+
showFancyBox: {
|
|
346
|
+
handler() {
|
|
344
347
|
if (this.showFancyBox) {
|
|
345
|
-
|
|
346
|
-
this.$_FancyBox_verticalScrollPosition = window.scrollY
|
|
347
|
-
document.querySelector(
|
|
348
|
-
window.addEventListener(
|
|
348
|
+
// add listener and class to disable scroll
|
|
349
|
+
// this.$_FancyBox_verticalScrollPosition = window.scrollY
|
|
350
|
+
document.querySelector("body").classList.add("avoid-scrolling")
|
|
351
|
+
// window.addEventListener("scroll", this.$_FancyBox_scrollHandler)
|
|
352
|
+
this.$refs.dialog.showModal()
|
|
349
353
|
} else {
|
|
350
|
-
//
|
|
351
|
-
document.querySelector(
|
|
352
|
-
window.removeEventListener(
|
|
354
|
+
// remove listener and class to re-enable scroll
|
|
355
|
+
document.querySelector("body").classList.remove("avoid-scrolling")
|
|
356
|
+
// window.removeEventListener("scroll", this.$_FancyBox_scrollHandler)
|
|
357
|
+
// console.log("$_FancyBox_verticalScrollPosition", this.$_FancyBox_verticalScrollPosition)
|
|
358
|
+
// window.scrollTo(0, this.$_FancyBox_verticalScrollPosition)
|
|
359
|
+
this.$refs.dialog.close()
|
|
353
360
|
}
|
|
354
|
-
}
|
|
361
|
+
},
|
|
362
|
+
immediate: false
|
|
355
363
|
}
|
|
356
|
-
}
|
|
364
|
+
}
|
|
365
|
+
})
|
|
357
366
|
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
}
|
|
363
|
-
return 'text/html'
|
|
367
|
+
async function getContentType(url) {
|
|
368
|
+
const response = await fetch(url, {method: 'HEAD'})
|
|
369
|
+
if (response.ok) {
|
|
370
|
+
return (response.headers.get('Content-Type') || '').split(';')[0]
|
|
364
371
|
}
|
|
372
|
+
return 'text/html'
|
|
373
|
+
}
|
|
365
374
|
|
|
366
|
-
|
|
367
|
-
|
|
375
|
+
export {openFancyBox}
|
|
376
|
+
export default FancyBox
|
|
368
377
|
</script>
|
|
369
378
|
|
|
370
379
|
<style lang="scss">
|
|
@@ -372,136 +381,126 @@
|
|
|
372
381
|
@import '../assets/styles/variables';
|
|
373
382
|
|
|
374
383
|
.cmd-fancybox {
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
height: 100vh;
|
|
378
|
-
top: 0;
|
|
379
|
-
left: 0;
|
|
380
|
-
overflow: hidden;
|
|
381
|
-
z-index: 500;
|
|
382
|
-
display: grid;
|
|
383
|
-
|
|
384
|
-
&.show-overlay {
|
|
385
|
-
background: rgba(0, 0, 0, var(--reduced-opacity));
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
.popup {
|
|
389
|
-
display: flex;
|
|
384
|
+
overflow-x: hidden;
|
|
385
|
+
z-index: 500;
|
|
390
386
|
flex-direction: column;
|
|
391
387
|
padding: var(--default-padding);
|
|
392
|
-
z-index: 200;
|
|
393
388
|
min-width: 30%;
|
|
394
389
|
max-width: var(--max-width);
|
|
395
390
|
min-height: 30%;
|
|
396
391
|
max-height: 80%;
|
|
397
392
|
background: var(--pure-white);
|
|
398
|
-
overflow: hidden;
|
|
399
|
-
align-self: center;
|
|
400
|
-
justify-self: center;
|
|
401
393
|
border-radius: var(--border-radius);
|
|
402
|
-
|
|
394
|
+
|
|
395
|
+
// detect open-attribute (will be added to dom automatically)
|
|
396
|
+
&[open] {
|
|
397
|
+
display: flex;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
&.show-overlay::backdrop {
|
|
401
|
+
--reduced-opacity: .75; // must be declared again, because ::backdrop does not allow the use of global variables
|
|
402
|
+
background: rgba(0, 0, 0, var(--reduced-opacity));
|
|
403
|
+
}
|
|
403
404
|
|
|
404
405
|
.cmd-cookie-disclaimer {
|
|
405
406
|
padding: 0;
|
|
406
407
|
}
|
|
407
408
|
|
|
408
409
|
> .grayscale {
|
|
409
|
-
|
|
410
|
+
filter: grayscale(1);
|
|
410
411
|
}
|
|
411
412
|
|
|
412
413
|
&.image {
|
|
413
|
-
|
|
414
|
-
overflow-y: hidden;
|
|
414
|
+
overflow-y: hidden;
|
|
415
415
|
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
416
|
+
img {
|
|
417
|
+
display: block;
|
|
418
|
+
}
|
|
419
419
|
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
420
|
+
figcaption {
|
|
421
|
+
text-align: center;
|
|
422
|
+
}
|
|
423
423
|
}
|
|
424
424
|
|
|
425
425
|
> .button-wrapper {
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
a:not(.button) {
|
|
430
|
-
margin-left: auto;
|
|
431
|
-
}
|
|
432
|
-
}
|
|
426
|
+
margin-bottom: var(--default-margin);
|
|
427
|
+
flex-direction: row;
|
|
433
428
|
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
margin-left: 0;
|
|
438
|
-
text-shadow: var(--text-shadow);
|
|
429
|
+
a:not(.button) {
|
|
430
|
+
margin-left: auto;
|
|
431
|
+
}
|
|
439
432
|
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
433
|
+
a.icon-print {
|
|
434
|
+
background: linear-gradient(135deg, #009fe3 0%, #009fe3 25%, #e6007e 25%, #e6007e 50%, #ffed00 50%, #ffed00 50%, #ffed00 75%, #000000 75%, #000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
435
|
+
border: var(--default-border);
|
|
436
|
+
margin-left: 0;
|
|
437
|
+
text-shadow: var(--text-shadow);
|
|
444
438
|
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
439
|
+
&:hover, &:active, &:focus {
|
|
440
|
+
border: var(--primary-border);
|
|
441
|
+
color: var(--pure-white);
|
|
442
|
+
}
|
|
449
443
|
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
.gallery-scroller {
|
|
456
|
-
background: var(--pure-black);
|
|
457
|
-
max-width: 80%;
|
|
458
|
-
left: 0;
|
|
459
|
-
right: 0;
|
|
460
|
-
position: fixed;
|
|
461
|
-
bottom: 1rem;
|
|
462
|
-
margin: auto;
|
|
463
|
-
background: var(--pure-black);
|
|
464
|
-
|
|
465
|
-
li:not(.active) {
|
|
466
|
-
img {
|
|
467
|
-
opacity: var(--reduced-opacity);
|
|
468
|
-
}
|
|
469
|
-
|
|
470
|
-
a {
|
|
471
|
-
&:hover, &:active, &:focus {
|
|
472
|
-
img {
|
|
473
|
-
opacity: 1;
|
|
474
|
-
}
|
|
444
|
+
&#print-grayscale {
|
|
445
|
+
background: linear-gradient(135deg, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
446
|
+
}
|
|
475
447
|
}
|
|
476
|
-
}
|
|
477
448
|
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
}
|
|
449
|
+
.content > :only-child {
|
|
450
|
+
margin-bottom: 0;
|
|
451
|
+
}
|
|
482
452
|
}
|
|
483
|
-
}
|
|
484
453
|
|
|
485
|
-
@media only screen and (max-width: $medium-max-width) {
|
|
486
454
|
.gallery-scroller {
|
|
487
|
-
|
|
455
|
+
background: var(--pure-black);
|
|
456
|
+
max-width: 80%;
|
|
457
|
+
left: 0;
|
|
458
|
+
right: 0;
|
|
459
|
+
position: fixed;
|
|
460
|
+
bottom: 1rem;
|
|
461
|
+
margin: auto;
|
|
462
|
+
background: var(--pure-black);
|
|
463
|
+
|
|
464
|
+
li:not(.active) {
|
|
465
|
+
img {
|
|
466
|
+
opacity: var(--reduced-opacity);
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
a {
|
|
470
|
+
&:hover, &:active, &:focus {
|
|
471
|
+
img {
|
|
472
|
+
opacity: 1;
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
figcaption {
|
|
478
|
+
color: var(--pure-white);
|
|
479
|
+
text-decoration: none;
|
|
480
|
+
}
|
|
481
|
+
}
|
|
488
482
|
}
|
|
489
483
|
|
|
490
|
-
|
|
491
|
-
|
|
484
|
+
@media only screen and (max-width: $medium-max-width) {
|
|
485
|
+
.gallery-scroller {
|
|
486
|
+
display: block;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.popup {
|
|
490
|
+
max-width: 80%;
|
|
491
|
+
}
|
|
492
492
|
}
|
|
493
|
-
}
|
|
494
493
|
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
494
|
+
@media only screen and (max-width: $small-max-width) {
|
|
495
|
+
[class*="switch-button-"] {
|
|
496
|
+
width: 3rem;
|
|
498
497
|
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
498
|
+
&::before {
|
|
499
|
+
margin: 0;
|
|
500
|
+
top: 40%;
|
|
501
|
+
}
|
|
502
|
+
}
|
|
503
503
|
}
|
|
504
|
-
}
|
|
505
504
|
}
|
|
506
505
|
|
|
507
506
|
/* end cmd-fancybox ------------------------------------------------------------------------------------------ */
|