comand-component-library 3.3.84 → 3.3.86
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.js +5623 -3929
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/App.vue +215 -112
- package/src/assets/data/component-structure.json +228 -0
- package/src/assets/data/form-elements.json +156 -0
- package/src/assets/data/opening-hours.json +79 -37
- package/src/components/CmdAddressData.vue +187 -201
- package/src/components/CmdAddressDataItem.vue +306 -0
- package/src/components/CmdBox.vue +1 -0
- package/src/components/CmdBoxWrapper.vue +53 -5
- package/src/components/CmdFancyBox.vue +31 -4
- package/src/components/CmdForm.vue +98 -4
- package/src/components/CmdFormElement.vue +5 -1
- package/src/components/CmdHeadline.vue +179 -52
- package/src/components/CmdImage.vue +205 -76
- package/src/components/CmdImageGallery.vue +88 -85
- package/src/components/CmdListOfLinks.vue +63 -43
- package/src/components/CmdListOfLinksItem.vue +97 -0
- package/src/components/CmdLoginForm.vue +3 -6
- package/src/components/CmdMultistepFormProgressBar.vue +37 -8
- package/src/components/CmdOpeningHours.vue +280 -63
- package/src/components/CmdOpeningHoursItem.vue +264 -0
- package/src/components/{CmdPager.vue → CmdPagination.vue} +2 -2
- package/src/components/CmdSlideshow.vue +137 -10
- package/src/components/CmdSocialNetworks.vue +115 -28
- package/src/components/CmdSocialNetworksItem.vue +184 -0
- package/src/components/CmdTable.vue +0 -1
- package/src/components/CmdTextImageBlock.vue +158 -0
- package/src/components/CmdThumbnailScroller.vue +132 -12
- package/src/components/CmdToggleDarkMode.vue +58 -1
- package/src/components/EditComponentWrapper.vue +553 -0
- package/src/index.js +2 -2
- package/src/mixins/EditMode.vue +28 -9
- package/src/utils/editmode.js +30 -5
- package/src/components/CmdTextBlock.vue +0 -73
- package/src/editmode/editModeContext.js +0 -50
@@ -1,42 +1,105 @@
|
|
1
1
|
<template>
|
2
2
|
<!-- begin edit-mode -->
|
3
|
-
<
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
3
|
+
<EditComponentWrapper
|
4
|
+
v-if="editModeContext"
|
5
|
+
ref="editComponentWrapper"
|
6
|
+
class="edit-items"
|
7
|
+
:showComponentName="false"
|
8
|
+
:allowedComponentTypes="[]"
|
9
|
+
componentName="CmdImage"
|
10
|
+
:componentProps="{image, figcaption}"
|
11
|
+
:componentPath="imageComponentPath"
|
12
|
+
:allowDeleteComponent="!!imageSource"
|
13
|
+
:itemProvider="editModeConfig?.allowAddItem !== false ? itemProvider : null"
|
14
|
+
>
|
15
|
+
<template v-slot="slotProps">
|
16
|
+
<figure :class="['cmd-image flex-container no-gap vertical', textAlign]">
|
17
|
+
<!-- begin figcaption above image -->
|
18
|
+
<template v-if="figcaption?.show && figcaption?.position === 'top'">
|
19
|
+
<CmdFormElement
|
20
|
+
v-if="slotProps.editing"
|
21
|
+
element="input"
|
22
|
+
type="text"
|
23
|
+
:class="[textAlign, 'edit-mode']"
|
24
|
+
:required="true"
|
25
|
+
labelText="Text figcaption"
|
26
|
+
v-model="editableFigcaptionText"
|
27
|
+
/>
|
28
|
+
<figcaption v-else-if="figcaption?.text">{{ figcaption?.text }}</figcaption>
|
29
|
+
</template>
|
30
|
+
<!-- end figcaption above image -->
|
31
|
+
|
32
|
+
<!-- begin image-wrapper -->
|
33
|
+
<template v-if="slotProps.editing">
|
34
|
+
<!-- begin image with drop-area -->
|
35
|
+
<a href="#" :class="['box drop-area flex-container vertical', { 'allow-drop': allowDrop }]"
|
36
|
+
v-on="dragAndDropHandler"
|
37
|
+
@click.prevent="selectFiles"
|
38
|
+
title="Drag new image to this area to replace old one!">
|
39
|
+
<span class="icon-image"></span>
|
40
|
+
<img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
|
41
|
+
</a>
|
42
|
+
<!-- end image with drop-area -->
|
43
|
+
|
44
|
+
<!-- begin CmdFormElement -->
|
45
|
+
<CmdFormElement
|
46
|
+
class="hidden"
|
47
|
+
element="input"
|
48
|
+
type="file"
|
49
|
+
labelText="Select new image"
|
50
|
+
:disabled="uploadInitiated"
|
51
|
+
@change="fileSelected"
|
52
|
+
ref="formElement"
|
53
|
+
/>
|
54
|
+
<!-- end CmdFormElement -->
|
55
|
+
</template>
|
56
|
+
<template v-else-if="imageSource">
|
57
|
+
<!-- begin image without drop-area -->
|
58
|
+
<img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
|
59
|
+
<!-- end image without drop-area -->
|
60
|
+
</template>
|
61
|
+
<!-- end image-wrapper -->
|
17
62
|
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
63
|
+
<!-- begin figcaption below image -->
|
64
|
+
<template v-if="figcaption?.show && figcaption?.position !== 'top'">
|
65
|
+
<CmdFormElement
|
66
|
+
v-if="slotProps.editing"
|
67
|
+
element="input"
|
68
|
+
type="text"
|
69
|
+
:class="[textAlign, 'edit-mode']"
|
70
|
+
:required="true"
|
71
|
+
labelText="Text figcaption"
|
72
|
+
:showLabel="false"
|
73
|
+
v-model="editableFigcaptionText"
|
74
|
+
placeholder="figcaption"
|
75
|
+
/>
|
76
|
+
<figcaption v-else-if="figcaption?.text">{{ figcaption?.text }}</figcaption>
|
77
|
+
</template>
|
78
|
+
<!-- end figcaption below image -->
|
79
|
+
|
80
|
+
<!-- begin show placeholder if no image exists (and component is not edited) -->
|
81
|
+
<button v-if="!slotProps.editing && !imageSource" type="button" class="button confirm"
|
82
|
+
@click="onAddItem">
|
83
|
+
<span class="icon-add"></span>
|
84
|
+
<span>Add new image</span>
|
85
|
+
</button>
|
86
|
+
<!-- end show placeholder if no image exists (and component is not edited) -->
|
87
|
+
</figure>
|
28
88
|
</template>
|
29
|
-
</
|
89
|
+
</EditComponentWrapper>
|
30
90
|
<!-- end edit-mode -->
|
31
91
|
|
32
|
-
|
92
|
+
<!-- begin default-view -->
|
93
|
+
<figure v-else :class="['cmd-image', textAlign]">
|
33
94
|
<figcaption v-if="figcaption?.show && figcaption?.position === 'top'">{{ figcaption?.text }}</figcaption>
|
34
|
-
<img :src="imageSource" :alt="image
|
95
|
+
<img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
|
35
96
|
<figcaption v-if="figcaption?.show && figcaption?.position !== 'top'">{{ figcaption?.text }}</figcaption>
|
36
97
|
</figure>
|
98
|
+
<!-- end default-view -->
|
37
99
|
</template>
|
38
100
|
|
39
101
|
<script>
|
102
|
+
import {createUuid} from "../utils/common.js"
|
40
103
|
import {checkAndUploadFile} from "../utils/checkAndUploadFile"
|
41
104
|
import EditMode from "../mixins/EditMode.vue"
|
42
105
|
import {updateHandlerProvider} from "../utils/editmode.js"
|
@@ -53,6 +116,7 @@ export default {
|
|
53
116
|
uploadInitiated: false,
|
54
117
|
allowDrop: false,
|
55
118
|
showFigcaption: true,
|
119
|
+
figcaptionText: null,
|
56
120
|
figcaptionPosition: null,
|
57
121
|
figcaptionTextAlign: null,
|
58
122
|
tooltip: null,
|
@@ -81,8 +145,7 @@ export default {
|
|
81
145
|
text: "Right",
|
82
146
|
value: "right"
|
83
147
|
}
|
84
|
-
]
|
85
|
-
figcaptionText: null
|
148
|
+
]
|
86
149
|
}
|
87
150
|
},
|
88
151
|
props: {
|
@@ -91,7 +154,7 @@ export default {
|
|
91
154
|
*/
|
92
155
|
image: {
|
93
156
|
type: Object,
|
94
|
-
required:
|
157
|
+
required: false
|
95
158
|
},
|
96
159
|
/**
|
97
160
|
* figcaption-object including visibility, position (top/bottom), text
|
@@ -101,12 +164,15 @@ export default {
|
|
101
164
|
required: false
|
102
165
|
},
|
103
166
|
/**
|
104
|
-
*
|
167
|
+
* maximum file size (in bytes) for file to upload
|
105
168
|
*/
|
106
169
|
maxFileUploadSize: {
|
107
170
|
type: Number,
|
108
171
|
default: 500000
|
109
172
|
},
|
173
|
+
/**
|
174
|
+
* minimum image width (in pixels) for file to upload
|
175
|
+
*/
|
110
176
|
minImageWidth: {
|
111
177
|
type: Number,
|
112
178
|
default: 600
|
@@ -125,22 +191,29 @@ export default {
|
|
125
191
|
window.removeEventListener("resize", this.updateWindowWidth)
|
126
192
|
},
|
127
193
|
computed: {
|
194
|
+
imageComponentPath() {
|
195
|
+
return this.componentPath || ["props", "cmdImage"]
|
196
|
+
},
|
128
197
|
imageSource() {
|
129
198
|
// check if a new image is provided
|
130
|
-
if(this.newImageSource) {
|
199
|
+
if (this.newImageSource) {
|
131
200
|
return this.newImageSource
|
132
201
|
}
|
133
202
|
|
134
203
|
// if only one src exists
|
135
|
-
const imgSrc = this.image
|
204
|
+
const imgSrc = this.image?.src
|
205
|
+
|
206
|
+
if (!imgSrc) {
|
207
|
+
return null
|
208
|
+
}
|
136
209
|
|
137
|
-
if(typeof imgSrc === "string") {
|
210
|
+
if (typeof imgSrc === "string") {
|
138
211
|
return imgSrc
|
139
212
|
}
|
140
213
|
|
141
214
|
const deviceWidth = this.currentWindowWidth;
|
142
215
|
// return image for small-devices (if exists)
|
143
|
-
if(imgSrc.small && deviceWidth <= this.smallMaxWidth) {
|
216
|
+
if (imgSrc.small && deviceWidth <= this.smallMaxWidth) {
|
144
217
|
return imgSrc.small
|
145
218
|
}
|
146
219
|
// return image for medium-devices (if exists)
|
@@ -150,7 +223,7 @@ export default {
|
|
150
223
|
// else return large (will be used if images for small-and -medium-devices do not exist or if screen resolution is larger than mediumMaxWidth)
|
151
224
|
return imgSrc.large
|
152
225
|
},
|
153
|
-
|
226
|
+
textAlign() {
|
154
227
|
if (this.figcaption?.textAlign) {
|
155
228
|
return "text-" + this.figcaption.textAlign
|
156
229
|
}
|
@@ -167,7 +240,7 @@ export default {
|
|
167
240
|
},
|
168
241
|
editableFigcaptionText: {
|
169
242
|
get() {
|
170
|
-
return this.figcaptionText == null ? this.figcaption
|
243
|
+
return this.figcaptionText == null ? this.figcaption?.text : this.figcaptionText
|
171
244
|
},
|
172
245
|
set(value) {
|
173
246
|
this.figcaptionText = value
|
@@ -175,6 +248,36 @@ export default {
|
|
175
248
|
}
|
176
249
|
},
|
177
250
|
methods: {
|
251
|
+
itemProvider() {
|
252
|
+
const editModeConfig = this.editModeConfig?.itemProviderOverwrite?.()
|
253
|
+
return {
|
254
|
+
"image": {
|
255
|
+
"src": "/media/images/demo-images/medium/landscape-01.jpg",
|
256
|
+
"alt": "Alternative Text",
|
257
|
+
// add additional keys from editModeConfig
|
258
|
+
...editModeConfig?.image || {}
|
259
|
+
},
|
260
|
+
"figcaption": {
|
261
|
+
"text": "Figcaption DE",
|
262
|
+
"position": "bottom",
|
263
|
+
"textAlign": "center",
|
264
|
+
"show": true
|
265
|
+
}
|
266
|
+
}
|
267
|
+
},
|
268
|
+
onAddItem() {
|
269
|
+
// execute editComponent-function from editComponentWrapper to enter editMode directly on "add"
|
270
|
+
this.$refs.editComponentWrapper.editComponent()
|
271
|
+
},
|
272
|
+
selectFiles() {
|
273
|
+
let inputFile = this.$refs.formElement.getDomElement().querySelector("input[type='file']")
|
274
|
+
inputFile.click()
|
275
|
+
},
|
276
|
+
fileSelected(event) {
|
277
|
+
if (event.target.files.length > 0) {
|
278
|
+
checkAndUploadFile(event.target.files[0], this.allowedFileExtensions, this.minImageWidth, this.maxFileUploadSize, (imageSource) => this.newImageSource = imageSource)
|
279
|
+
}
|
280
|
+
},
|
178
281
|
updateWindowWidth() {
|
179
282
|
this.currentWindowWidth = window.innerWidth
|
180
283
|
},
|
@@ -182,10 +285,10 @@ export default {
|
|
182
285
|
return {
|
183
286
|
image: {...this.image},
|
184
287
|
figcaption: {
|
185
|
-
show: this.
|
186
|
-
position: this.
|
187
|
-
textAlign: this.
|
188
|
-
text: this.
|
288
|
+
show: this.showFigcaption,
|
289
|
+
position: this.figcaptionPosition,
|
290
|
+
textAlign: this.figcaptionTextAlign,
|
291
|
+
text: this.figcaptionText
|
189
292
|
}
|
190
293
|
}
|
191
294
|
},
|
@@ -238,7 +341,9 @@ export default {
|
|
238
341
|
})
|
239
342
|
},
|
240
343
|
updateHandlerProvider() {
|
241
|
-
const figcaptionText = this.
|
344
|
+
const figcaptionText = this.figcaptionText
|
345
|
+
this.figcaptionText = null // reset data-property
|
346
|
+
|
242
347
|
return updateHandlerProvider(this, {
|
243
348
|
update(props) {
|
244
349
|
if (!props.figcaption) {
|
@@ -248,6 +353,18 @@ export default {
|
|
248
353
|
}
|
249
354
|
})
|
250
355
|
}
|
356
|
+
},
|
357
|
+
watch: {
|
358
|
+
figcaption: {
|
359
|
+
handler() {
|
360
|
+
this.showFigcaption = this.figcaption?.show
|
361
|
+
this.figcaptionText = this.figcaption?.text
|
362
|
+
this.figcaptionPosition = this.figcaption?.position
|
363
|
+
this.figcaptionTextAlign = this.figcaption?.textAlign
|
364
|
+
},
|
365
|
+
immediate: true,
|
366
|
+
deep: true
|
367
|
+
}
|
251
368
|
}
|
252
369
|
}
|
253
370
|
</script>
|
@@ -255,49 +372,61 @@ export default {
|
|
255
372
|
<style lang="scss">
|
256
373
|
/* begin cmd-image ------------------------------------------------------------------------------------------ */
|
257
374
|
.cmd-image {
|
258
|
-
|
259
|
-
|
260
|
-
|
375
|
+
img {
|
376
|
+
display: block;
|
377
|
+
}
|
261
378
|
|
262
|
-
|
263
|
-
|
264
|
-
|
379
|
+
&.text-center {
|
380
|
+
figcaption {
|
381
|
+
text-align: center;
|
382
|
+
}
|
265
383
|
}
|
266
|
-
}
|
267
384
|
|
268
|
-
|
269
|
-
|
270
|
-
|
385
|
+
&.text-right {
|
386
|
+
figcaption {
|
387
|
+
text-align: right;
|
388
|
+
}
|
271
389
|
}
|
272
|
-
}
|
273
390
|
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
391
|
+
.drop-area {
|
392
|
+
border: 0;
|
393
|
+
align-items: center;
|
394
|
+
justify-content: center;
|
395
|
+
padding: 0;
|
279
396
|
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
397
|
+
> [class*="icon"] {
|
398
|
+
position: absolute;
|
399
|
+
top: 50%;
|
400
|
+
left: 50%;
|
401
|
+
transform: translateX(-50%) translateY(-50%);
|
402
|
+
font-size: 10rem;
|
403
|
+
color: var(--pure-white);
|
404
|
+
text-shadow: var(--text-shadow);
|
405
|
+
z-index: 10;
|
406
|
+
}
|
290
407
|
|
291
|
-
|
292
|
-
|
293
|
-
|
408
|
+
img {
|
409
|
+
opacity: .7;
|
410
|
+
transition: var(--default-transition);
|
411
|
+
|
412
|
+
&:hover, :active, :focus {
|
413
|
+
opacity: 1;
|
414
|
+
transition: var(--default-transition);
|
415
|
+
}
|
416
|
+
|
417
|
+
&:not([src]) {
|
418
|
+
display: block;
|
419
|
+
width: 100%;
|
420
|
+
min-height: 30rem;
|
421
|
+
}
|
422
|
+
}
|
423
|
+
}
|
424
|
+
}
|
294
425
|
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
}
|
426
|
+
.edit-mode .edit-component-wrapper .cmd-image {
|
427
|
+
label.edit-mode input {
|
428
|
+
padding: calc(var(--default-padding) / 2);
|
299
429
|
}
|
300
|
-
}
|
301
430
|
}
|
302
431
|
|
303
432
|
/* end cmd-image ------------------------------------------------------------------------------------------ */
|
@@ -2,9 +2,8 @@
|
|
2
2
|
<div class="grid-container-create-columns cmd-image-gallery">
|
3
3
|
<!-- begin cmd-headline -->
|
4
4
|
<CmdHeadline
|
5
|
-
|
6
|
-
|
7
|
-
:headlineLevel="cmdHeadline.headlineLevel"
|
5
|
+
v-if="cmdHeadline?.headlineText || editModeContext"
|
6
|
+
v-bind="cmdHeadline"
|
8
7
|
/>
|
9
8
|
<!-- end cmd-headline -->
|
10
9
|
|
@@ -21,49 +20,45 @@
|
|
21
20
|
<!-- end images linked to fancybox -->
|
22
21
|
|
23
22
|
<!-- begin images not linked to fancybox -->
|
24
|
-
<
|
23
|
+
<div v-else v-for="(image, index) in images" :key="`i${index}`" class="image-wrapper">
|
24
|
+
<CmdImage :image="image.image" :figcaption="image.figcaption"/>
|
25
|
+
</div>
|
25
26
|
<!-- end images not linked to fancybox -->
|
26
27
|
</template>
|
27
28
|
<!-- end default view -->
|
28
29
|
|
29
30
|
<!-- begin edit-mode view -->
|
30
|
-
<
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
31
|
+
<CmdImage
|
32
|
+
v-else-if="images.length"
|
33
|
+
v-for="(image, index) in images"
|
34
|
+
:key="index"
|
35
|
+
class="image-wrapper"
|
36
|
+
:image="image.image"
|
37
|
+
:figcaption="image.figcaption"
|
38
|
+
:componentPath="['props', 'images', index]"
|
39
|
+
:editModeConfig="imageStructure()"
|
40
|
+
/>
|
37
41
|
<!-- end edit-mode view -->
|
42
|
+
|
43
|
+
<!-- begin show placeholder if no image exists (and component is not edited) -->
|
44
|
+
<button v-else type="button" class="button confirm" @click="onAddItem">
|
45
|
+
<span class="icon-plus"></span>
|
46
|
+
<span>Add new gallery-image</span>
|
47
|
+
</button>
|
48
|
+
<!-- end show placeholder if no image exists (and component is not edited) -->
|
38
49
|
</div>
|
39
50
|
</template>
|
40
51
|
|
41
52
|
<script>
|
42
53
|
// import functions
|
43
54
|
import {openFancyBox} from "./CmdFancyBox.vue"
|
44
|
-
import
|
45
|
-
|
46
|
-
// import mixins
|
47
|
-
//import I18n from "../mixins/I18n"
|
48
|
-
//import DefaultMessageProperties from "../mixins/CmdImageGallery/DefaultMessageProperties"
|
55
|
+
import EditMode from "../mixins/EditMode.vue"
|
56
|
+
import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
|
49
57
|
|
50
58
|
export default {
|
51
59
|
name: "CmdImageGallery",
|
52
|
-
mixins: [],
|
53
|
-
provide() {
|
54
|
-
return {
|
55
|
-
editModeContext: this.context
|
56
|
-
}
|
57
|
-
},
|
58
|
-
inject: {
|
59
|
-
editModeContext: {
|
60
|
-
default: null
|
61
|
-
}
|
62
|
-
},
|
60
|
+
mixins: [EditMode],
|
63
61
|
props: {
|
64
|
-
editModeContextData: {
|
65
|
-
type: Object
|
66
|
-
},
|
67
62
|
/**
|
68
63
|
* properties for CmdHeadline-component
|
69
64
|
*/
|
@@ -97,24 +92,25 @@ export default {
|
|
97
92
|
default: "bottom"
|
98
93
|
}
|
99
94
|
},
|
100
|
-
data() {
|
101
|
-
return {
|
102
|
-
context: useEditModeContext(this.editModeContext, {}, this.onSave)
|
103
|
-
}
|
104
|
-
},
|
105
95
|
methods: {
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
96
|
+
itemProvider() {
|
97
|
+
return {
|
98
|
+
"image": {
|
99
|
+
"src": "/media/images/demo-images/medium/landscape-01.jpg",
|
100
|
+
"alt": "Alternative Text",
|
101
|
+
},
|
102
|
+
"figcaption": {
|
103
|
+
"text": "Figcaption DE",
|
104
|
+
"position": "bottom",
|
105
|
+
"textAlign": "center",
|
106
|
+
"show": true
|
107
|
+
}
|
113
108
|
}
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
109
|
+
},
|
110
|
+
onAddItem() {
|
111
|
+
this.editModeContext.content.addContent(
|
112
|
+
buildComponentPath(this, 'props', 'images', -1),
|
113
|
+
this.itemProvider)
|
118
114
|
},
|
119
115
|
showFancyBox(index) {
|
120
116
|
openFancyBox({fancyBoxGallery: this.images, defaultGalleryIndex: index})
|
@@ -122,23 +118,28 @@ export default {
|
|
122
118
|
getMessage() {
|
123
119
|
return ""
|
124
120
|
},
|
125
|
-
|
126
|
-
const imageIndex = data[0].editModeContextData.imageIndex
|
121
|
+
imageStructure() {
|
127
122
|
return {
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
props.images[imageIndex].image = {
|
133
|
-
...props.images[imageIndex].image,
|
134
|
-
...data[0].image
|
123
|
+
itemProviderOverwrite: () => ({
|
124
|
+
"image": {
|
125
|
+
"srcImageLarge": "/media/images/demo-images/large/landscape-01.jpg",
|
126
|
+
"tooltip": "Tooltip DE"
|
135
127
|
}
|
136
|
-
|
137
|
-
|
138
|
-
|
128
|
+
})
|
129
|
+
}
|
130
|
+
},
|
131
|
+
updateHandlerProvider() {
|
132
|
+
const htmlContent = this.editableHtmlContent
|
133
|
+
return updateHandlerProvider(this, {
|
134
|
+
update(props, childUpdateHandlers) {
|
135
|
+
props.htmlContent = htmlContent
|
136
|
+
const cmdHeadlineUpdateHandler = childUpdateHandlers?.find(handler => handler.name === "CmdHeadline")
|
137
|
+
if (cmdHeadlineUpdateHandler) {
|
138
|
+
props.cmdHeadline = props.cmdHeadline || {}
|
139
|
+
cmdHeadlineUpdateHandler.update(props.cmdHeadline)
|
139
140
|
}
|
140
141
|
}
|
141
|
-
}
|
142
|
+
})
|
142
143
|
}
|
143
144
|
}
|
144
145
|
}
|
@@ -147,38 +148,40 @@ export default {
|
|
147
148
|
<style lang="scss">
|
148
149
|
/* begin cmd-image-gallery ---------------------------------------------------------------------------------------- */
|
149
150
|
.cmd-image-gallery {
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
}
|
154
|
-
|
155
|
-
> .image-wrapper {
|
156
|
-
align-self: center;
|
157
|
-
justify-self: center;
|
158
|
-
grid-column: span var(--grid-small-span);
|
159
|
-
|
160
|
-
img {
|
161
|
-
border: var(--default-border);
|
162
|
-
border-radius: var(--border-radius);
|
163
|
-
max-height: 30rem;
|
151
|
+
> .cmd-headline, > input.edit-mode, > .edit-component-wrapper {
|
152
|
+
grid-column: span var(--grid-columns);
|
153
|
+
margin-bottom: 0;
|
164
154
|
}
|
165
155
|
|
166
|
-
|
167
|
-
|
168
|
-
|
156
|
+
.image-wrapper {
|
157
|
+
align-self: center;
|
158
|
+
justify-self: center;
|
159
|
+
grid-column: span var(--grid-small-span);
|
160
|
+
width: 100%;
|
161
|
+
min-width: 11.1rem; // assure to be as wide as action-buttons in edit-mode
|
162
|
+
|
163
|
+
img {
|
164
|
+
border: var(--default-border);
|
165
|
+
border-radius: var(--border-radius);
|
166
|
+
max-height: 30rem;
|
167
|
+
}
|
169
168
|
|
170
|
-
|
171
|
-
|
169
|
+
figcaption {
|
170
|
+
padding: calc(var(--default-padding) / 2);
|
171
|
+
}
|
172
172
|
|
173
|
-
|
174
|
-
|
175
|
-
}
|
176
|
-
}
|
173
|
+
&:hover, &:active, &:focus {
|
174
|
+
text-decoration: none;
|
177
175
|
|
178
|
-
|
179
|
-
|
176
|
+
img {
|
177
|
+
border: var(--primary-border);
|
178
|
+
}
|
179
|
+
}
|
180
|
+
|
181
|
+
& + .pager {
|
182
|
+
margin-top: calc(var(--default-margin) * 2);
|
183
|
+
}
|
180
184
|
}
|
181
|
-
}
|
182
185
|
}
|
183
186
|
|
184
187
|
/* end cmd-image-gallery ------------------------------------------------------------------------------------------ */
|