@parameter1/base-cms-marko-web 3.7.3 → 3.7.11
Sign up to get free protection for your applications and to get access to all the features.
- package/browser/components/image-slide.vue +54 -0
- package/browser/components/image-slider.vue +87 -0
- package/browser/components/index.js +2 -0
- package/components/element/components/image.marko +10 -3
- package/components/element/image/marko.json +6 -0
- package/components/element/image/slider.marko +18 -0
- package/components/element/marko.json +12 -3
- package/components/element/picture.marko +2 -0
- package/components/node/image.marko +8 -0
- package/components/page/title.marko +1 -1
- package/package.json +2 -2
- package/scss/carousel.scss +42 -0
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="carousel-item" :class="classNames">
|
|
3
|
+
<img :src="image.src" :srcset="image.srcset" :alt="image.alt">
|
|
4
|
+
<div class="carousel-caption">
|
|
5
|
+
<h5 v-if="image.displayName">
|
|
6
|
+
{{ image.displayName }}
|
|
7
|
+
</h5>
|
|
8
|
+
<p v-if="image.caption" class="carousel-caption--caption">
|
|
9
|
+
{{ image.caption }}
|
|
10
|
+
</p>
|
|
11
|
+
<p v-if="image.credit" class="carousel-caption--credit">
|
|
12
|
+
Source: {{ image.credit }}
|
|
13
|
+
</p>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
export default {
|
|
20
|
+
props: {
|
|
21
|
+
activeIndex: {
|
|
22
|
+
type: Number,
|
|
23
|
+
required: true,
|
|
24
|
+
},
|
|
25
|
+
index: {
|
|
26
|
+
type: Number,
|
|
27
|
+
required: true,
|
|
28
|
+
},
|
|
29
|
+
length: {
|
|
30
|
+
type: Number,
|
|
31
|
+
required: true,
|
|
32
|
+
},
|
|
33
|
+
image: {
|
|
34
|
+
type: Object,
|
|
35
|
+
required: true,
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
computed: {
|
|
39
|
+
classNames() {
|
|
40
|
+
const { activeIndex, index, length } = this;
|
|
41
|
+
const prevIdx = activeIndex - 1 < 0 ? activeIndex : activeIndex - 1;
|
|
42
|
+
const nextIdx = activeIndex + 1 >= length ? activeIndex : activeIndex + 1;
|
|
43
|
+
const active = index === activeIndex;
|
|
44
|
+
const carouselItemLeft = index === prevIdx && activeIndex !== index;
|
|
45
|
+
const carouselItemRight = index === nextIdx && activeIndex !== index;
|
|
46
|
+
return {
|
|
47
|
+
active,
|
|
48
|
+
'carousel-item-prev': carouselItemLeft,
|
|
49
|
+
'carousel-item-next': carouselItemRight,
|
|
50
|
+
};
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
};
|
|
54
|
+
</script>
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div :class="classNames">
|
|
3
|
+
<ol class="carousel-indicators">
|
|
4
|
+
<li
|
|
5
|
+
v-for="(image, index) in images"
|
|
6
|
+
:key="index"
|
|
7
|
+
:class="{ active: index === activeIndex }"
|
|
8
|
+
@click="set(index)"
|
|
9
|
+
/>
|
|
10
|
+
</ol>
|
|
11
|
+
<div class="carousel-inner">
|
|
12
|
+
<image-slide
|
|
13
|
+
v-for="(image, index) in images"
|
|
14
|
+
:key="index"
|
|
15
|
+
:length="images.length"
|
|
16
|
+
:index="index"
|
|
17
|
+
:image="image"
|
|
18
|
+
:active-index="activeIndex"
|
|
19
|
+
/>
|
|
20
|
+
</div>
|
|
21
|
+
<a
|
|
22
|
+
href="#previous-slide"
|
|
23
|
+
class="carousel-control-prev"
|
|
24
|
+
role="button"
|
|
25
|
+
@click="decrement"
|
|
26
|
+
>
|
|
27
|
+
<span class="carousel-control-prev-icon" aria-label="Previous Slide" aria-hidden="true" />
|
|
28
|
+
</a>
|
|
29
|
+
<a
|
|
30
|
+
href="#next-slide"
|
|
31
|
+
class="carousel-control-next"
|
|
32
|
+
role="button"
|
|
33
|
+
@click="increment"
|
|
34
|
+
>
|
|
35
|
+
<span class="carousel-control-next-icon" aria-label="Next Slide" aria-hidden="true" />
|
|
36
|
+
</a>
|
|
37
|
+
</div>
|
|
38
|
+
</template>
|
|
39
|
+
|
|
40
|
+
<script>
|
|
41
|
+
import ImageSlide from './image-slide.vue';
|
|
42
|
+
|
|
43
|
+
export default {
|
|
44
|
+
components: {
|
|
45
|
+
ImageSlide,
|
|
46
|
+
},
|
|
47
|
+
props: {
|
|
48
|
+
images: {
|
|
49
|
+
type: Array,
|
|
50
|
+
required: true,
|
|
51
|
+
},
|
|
52
|
+
modifiers: {
|
|
53
|
+
type: Array,
|
|
54
|
+
default: () => [],
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
data: () => ({
|
|
58
|
+
activeIndex: 0,
|
|
59
|
+
blockName: 'carousel',
|
|
60
|
+
}),
|
|
61
|
+
|
|
62
|
+
computed: {
|
|
63
|
+
classNames() {
|
|
64
|
+
const { blockName } = this;
|
|
65
|
+
return [
|
|
66
|
+
blockName,
|
|
67
|
+
...this.modifiers.map(mod => `${blockName}--${mod}`),
|
|
68
|
+
];
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
|
|
72
|
+
methods: {
|
|
73
|
+
set(index) {
|
|
74
|
+
this.activeIndex = index;
|
|
75
|
+
},
|
|
76
|
+
increment() {
|
|
77
|
+
const { activeIndex } = this;
|
|
78
|
+
const { length } = this.images;
|
|
79
|
+
this.activeIndex = (activeIndex + 1 >= length) ? activeIndex : activeIndex + 1;
|
|
80
|
+
},
|
|
81
|
+
decrement() {
|
|
82
|
+
const { activeIndex } = this;
|
|
83
|
+
this.activeIndex = (activeIndex - 1 < 0) ? activeIndex : activeIndex - 1;
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
};
|
|
87
|
+
</script>
|
|
@@ -4,6 +4,7 @@ const TriggerScreenChangeEvent = () => import(/* webpackChunkName: "trigger-scre
|
|
|
4
4
|
const OEmbed = () => import(/* webpackChunkName: "oembed" */ './oembed.vue');
|
|
5
5
|
const FormDotComGatedDownload = () => import(/* webpackChunkName: "form-dot-com" */ './gated-download/form-dot-com.vue');
|
|
6
6
|
const WufooGatedDownload = () => import(/* webpackChunkName: "wufoo-gated-download" */ './gated-download/wufoo.vue');
|
|
7
|
+
const ImageSlider = () => import(/* webpackChunkName: "image-slider" */ './image-slider.vue');
|
|
7
8
|
|
|
8
9
|
export default (Browser) => {
|
|
9
10
|
Browser.register('LoadMoreTrigger', LoadMoreTrigger);
|
|
@@ -12,4 +13,5 @@ export default (Browser) => {
|
|
|
12
13
|
Browser.register('OEmbed', OEmbed);
|
|
13
14
|
Browser.register('FormDotComGatedDownload', FormDotComGatedDownload);
|
|
14
15
|
Browser.register('WufooGatedDownload', WufooGatedDownload);
|
|
16
|
+
Browser.register('ImageSlider', ImageSlider);
|
|
15
17
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { getAsArray } from "@parameter1/base-cms-object-path";
|
|
1
|
+
import { getAsArray, getAsObject } from "@parameter1/base-cms-object-path";
|
|
2
|
+
import imageHeight from "../../node/utils/image-height";
|
|
2
3
|
|
|
3
4
|
$ const { config } = out.global;
|
|
4
5
|
$ const { src, alt } = input;
|
|
@@ -7,10 +8,16 @@ $ const srcset = getAsArray(input.srcset).join(", ") || null;
|
|
|
7
8
|
|
|
8
9
|
$ const classNames = [input.class];
|
|
9
10
|
$ if (lazyload) classNames.push("lazyload");
|
|
11
|
+
$ const attrs = getAsObject(input.attrs);
|
|
12
|
+
$ if (input.width && input.width > 0 && !attrs.width && !attrs.height) {
|
|
13
|
+
attrs.width = input.width;
|
|
14
|
+
const height = input.height || imageHeight(input.width, input.ar) || undefined;
|
|
15
|
+
if (height) attrs.height = height;
|
|
16
|
+
};
|
|
10
17
|
|
|
11
18
|
<if(lazyload)>
|
|
12
19
|
<img
|
|
13
|
-
...
|
|
20
|
+
...attrs
|
|
14
21
|
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
|
|
15
22
|
srcset=null
|
|
16
23
|
data-src=src
|
|
@@ -21,7 +28,7 @@ $ if (lazyload) classNames.push("lazyload");
|
|
|
21
28
|
</if>
|
|
22
29
|
<else>
|
|
23
30
|
<img
|
|
24
|
-
...
|
|
31
|
+
...attrs
|
|
25
32
|
src=src
|
|
26
33
|
srcset=srcset
|
|
27
34
|
class=classNames
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { getAsArray } from "@parameter1/base-cms-object-path";
|
|
2
|
+
import { buildImgixUrl } from "@parameter1/base-cms-image";
|
|
3
|
+
|
|
4
|
+
$ const images = getAsArray(input, "images").map(node => {
|
|
5
|
+
const src = buildImgixUrl(node.src, input.imageOptions);
|
|
6
|
+
return {
|
|
7
|
+
...node,
|
|
8
|
+
src,
|
|
9
|
+
srcset: `${buildImgixUrl(node.src, { ...input.imageOptions, dpr: 2 })} 2x`,
|
|
10
|
+
};
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
<if(images.length)>
|
|
14
|
+
<marko-web-browser-component
|
|
15
|
+
name="ImageSlider"
|
|
16
|
+
props={ images, modifiers: input.modifiers }
|
|
17
|
+
/>
|
|
18
|
+
</if>
|
|
@@ -63,7 +63,10 @@
|
|
|
63
63
|
},
|
|
64
64
|
"@class": "string",
|
|
65
65
|
"@attrs": "object",
|
|
66
|
-
"@link": "object"
|
|
66
|
+
"@link": "object",
|
|
67
|
+
"@width": "number",
|
|
68
|
+
"@height": "number",
|
|
69
|
+
"@ar": "string"
|
|
67
70
|
},
|
|
68
71
|
"<marko-web-link>": {
|
|
69
72
|
"template": "./link.marko",
|
|
@@ -175,7 +178,10 @@
|
|
|
175
178
|
},
|
|
176
179
|
"@class": "string",
|
|
177
180
|
"@attrs": "object",
|
|
178
|
-
"@link": "object"
|
|
181
|
+
"@link": "object",
|
|
182
|
+
"@width": "string",
|
|
183
|
+
"@height": "string",
|
|
184
|
+
"@ar": "string"
|
|
179
185
|
},
|
|
180
186
|
"<link>": {
|
|
181
187
|
"<before>": {},
|
|
@@ -195,7 +201,10 @@
|
|
|
195
201
|
"@srcset": {
|
|
196
202
|
"type": "array",
|
|
197
203
|
"required": true
|
|
198
|
-
}
|
|
204
|
+
},
|
|
205
|
+
"@width": "number",
|
|
206
|
+
"@height": "number",
|
|
207
|
+
"@ar": "string"
|
|
199
208
|
}
|
|
200
209
|
}
|
|
201
210
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { buildImgixUrl } from "@parameter1/base-cms-image";
|
|
2
2
|
import { get } from "@parameter1/base-cms-object-path";
|
|
3
|
+
import imageHeight from "./utils/image-height";
|
|
3
4
|
|
|
4
5
|
$ const element = "node__image";
|
|
5
6
|
$ const hasImage = Boolean(input.src);
|
|
@@ -14,6 +15,11 @@ $ const options = {
|
|
|
14
15
|
...input.options,
|
|
15
16
|
}
|
|
16
17
|
|
|
18
|
+
$ if (options.w) {
|
|
19
|
+
attrs.width = options.w;
|
|
20
|
+
attrs.height = options.h || (input.ar ? imageHeight(input.width, input.ar) : undefined);
|
|
21
|
+
}
|
|
22
|
+
|
|
17
23
|
<!-- @todo add modifiers -->
|
|
18
24
|
|
|
19
25
|
<if(hasImage)>
|
|
@@ -26,6 +32,8 @@ $ const options = {
|
|
|
26
32
|
attrs=attrs
|
|
27
33
|
class=[element, input.class]
|
|
28
34
|
lazyload=input.lazyload
|
|
35
|
+
width=input.width
|
|
36
|
+
height=input.height
|
|
29
37
|
/>
|
|
30
38
|
</if>
|
|
31
39
|
<else-if(input.usePlaceholder)>
|
|
@@ -6,7 +6,7 @@ $ const parts = [
|
|
|
6
6
|
config.website("name"),
|
|
7
7
|
];
|
|
8
8
|
$ const concatWith = input.concatWith || "|";
|
|
9
|
-
$ const title = parts.filter(v => v).join(` ${concatWith} `);
|
|
9
|
+
$ const title = parts.filter(v => v && v !== 'Home').join(` ${concatWith} `);
|
|
10
10
|
|
|
11
11
|
<title>
|
|
12
12
|
<if(input.renderBody)>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@parameter1/base-cms-marko-web",
|
|
3
|
-
"version": "3.7.
|
|
3
|
+
"version": "3.7.11",
|
|
4
4
|
"description": "Core Marko+Express components for BaseCMS websites",
|
|
5
5
|
"author": "Jacob Bare <jacob@parameter1.com>",
|
|
6
6
|
"main": "index.js",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "ab5824f00f04768be6729f66dfc62fa7b0b09c89"
|
|
50
50
|
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
.carousel {
|
|
2
|
+
margin-bottom: .75rem;
|
|
3
|
+
|
|
4
|
+
.carousel-item {
|
|
5
|
+
img {
|
|
6
|
+
display: block;
|
|
7
|
+
width: 100%;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.carousel-caption {
|
|
12
|
+
right: 0;
|
|
13
|
+
bottom: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
z-index: initial;
|
|
16
|
+
padding-bottom: 1rem;
|
|
17
|
+
text-shadow: rgba(0, 0, 0, .6) 0 1px 2px;
|
|
18
|
+
background: rgba(0, 0, 0, .75);
|
|
19
|
+
p {
|
|
20
|
+
display: none;
|
|
21
|
+
@include media-breakpoint-up(md) {
|
|
22
|
+
display: block;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.carousel-indicators {
|
|
28
|
+
z-index: 2;
|
|
29
|
+
margin-bottom: 0;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Carousel Overrides
|
|
34
|
+
|
|
35
|
+
.carousel-control-next,
|
|
36
|
+
.carousel-control-prev {
|
|
37
|
+
top: initial;
|
|
38
|
+
bottom: 8px;
|
|
39
|
+
z-index: 2;
|
|
40
|
+
justify-content: space-around;
|
|
41
|
+
opacity: initial;
|
|
42
|
+
}
|