@parameter1/base-cms-marko-web 3.7.3 → 3.7.7
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/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/image/marko.json +6 -0
- package/components/element/image/slider.marko +18 -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
|
};
|
|
@@ -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>
|
|
@@ -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.7",
|
|
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": "edb1abe156385d8be587881f240a305376551472"
|
|
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
|
+
}
|