@parameter1/base-cms-marko-web 3.7.3 → 3.7.7

package/browser/components/image-slide.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="carousel-item" :class="classNames">
+    <img :src="image.src" :srcset="image.srcset" :alt="image.alt">
+    <div class="carousel-caption">
+      <h5 v-if="image.displayName">
+        {{ image.displayName }}
+      </h5>
+      <p v-if="image.caption" class="carousel-caption--caption">
+        {{ image.caption }}
+      </p>
+      <p v-if="image.credit" class="carousel-caption--credit">
+        Source: {{ image.credit }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    activeIndex: {
+      type: Number,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+    length: {
+      type: Number,
+      required: true,
+    },
+    image: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    classNames() {
+      const { activeIndex, index, length } = this;
+      const prevIdx = activeIndex - 1 < 0 ? activeIndex : activeIndex - 1;
+      const nextIdx = activeIndex + 1 >= length ? activeIndex : activeIndex + 1;
+      const active = index === activeIndex;
+      const carouselItemLeft = index === prevIdx && activeIndex !== index;
+      const carouselItemRight = index === nextIdx && activeIndex !== index;
+      return {
+        active,
+        'carousel-item-prev': carouselItemLeft,
+        'carousel-item-next': carouselItemRight,
+      };
+    },
+  },
+};
+</script>

package/browser/components/image-slider.vue

@@ -0,0 +1,87 @@
+<template>
+  <div :class="classNames">
+    <ol class="carousel-indicators">
+      <li
+        v-for="(image, index) in images"
+        :key="index"
+        :class="{ active: index === activeIndex }"
+        @click="set(index)"
+      />
+    </ol>
+    <div class="carousel-inner">
+      <image-slide
+        v-for="(image, index) in images"
+        :key="index"
+        :length="images.length"
+        :index="index"
+        :image="image"
+        :active-index="activeIndex"
+      />
+    </div>
+    <a
+      href="#previous-slide"
+      class="carousel-control-prev"
+      role="button"
+      @click="decrement"
+    >
+      <span class="carousel-control-prev-icon" aria-label="Previous Slide" aria-hidden="true" />
+    </a>
+    <a
+      href="#next-slide"
+      class="carousel-control-next"
+      role="button"
+      @click="increment"
+    >
+      <span class="carousel-control-next-icon" aria-label="Next Slide" aria-hidden="true" />
+    </a>
+  </div>
+</template>
+
+<script>
+import ImageSlide from './image-slide.vue';
+
+export default {
+  components: {
+    ImageSlide,
+  },
+  props: {
+    images: {
+      type: Array,
+      required: true,
+    },
+    modifiers: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data: () => ({
+    activeIndex: 0,
+    blockName: 'carousel',
+  }),
+
+  computed: {
+    classNames() {
+      const { blockName } = this;
+      return [
+        blockName,
+        ...this.modifiers.map(mod => `${blockName}--${mod}`),
+      ];
+    },
+  },
+
+  methods: {
+    set(index) {
+      this.activeIndex = index;
+    },
+    increment() {
+      const { activeIndex } = this;
+      const { length } = this.images;
+      this.activeIndex = (activeIndex + 1 >= length) ? activeIndex : activeIndex + 1;
+    },
+    decrement() {
+      const { activeIndex } = this;
+      this.activeIndex = (activeIndex - 1 < 0) ? activeIndex : activeIndex - 1;
+    },
+  },
+};
+</script>

package/browser/components/index.js

@@ -4,6 +4,7 @@ const TriggerScreenChangeEvent = () => import(/* webpackChunkName: "trigger-scre
 const OEmbed = () => import(/* webpackChunkName: "oembed" */ './oembed.vue');
 const FormDotComGatedDownload = () => import(/* webpackChunkName: "form-dot-com" */ './gated-download/form-dot-com.vue');
 const WufooGatedDownload = () => import(/* webpackChunkName: "wufoo-gated-download" */ './gated-download/wufoo.vue');
+const ImageSlider = () => import(/* webpackChunkName: "image-slider" */ './image-slider.vue');
 
 export default (Browser) => {
   Browser.register('LoadMoreTrigger', LoadMoreTrigger);
@@ -12,4 +13,5 @@ export default (Browser) => {
   Browser.register('OEmbed', OEmbed);
   Browser.register('FormDotComGatedDownload', FormDotComGatedDownload);
   Browser.register('WufooGatedDownload', WufooGatedDownload);
+  Browser.register('ImageSlider', ImageSlider);
 };

package/components/element/image/marko.json

@@ -28,5 +28,11 @@
     "@modifiers": "string",
     "@attrs": "object",
     "@link": "expression"
+  },
+  "<marko-web-image-slider>": {
+    "template": "./slider.marko",
+    "@images": "array",
+    "@image-options": "array",
+    "@modifiers": "array"
   }
 }

package/components/element/image/slider.marko

@@ -0,0 +1,18 @@
+import { getAsArray } from "@parameter1/base-cms-object-path";
+import { buildImgixUrl } from "@parameter1/base-cms-image";
+
+$ const images = getAsArray(input, "images").map(node => {
+  const src = buildImgixUrl(node.src, input.imageOptions);
+  return {
+    ...node,
+    src,
+    srcset: `${buildImgixUrl(node.src, { ...input.imageOptions, dpr: 2 })} 2x`,
+  };
+});
+
+<if(images.length)>
+  <marko-web-browser-component
+    name="ImageSlider"
+    props={ images, modifiers: input.modifiers }
+  />
+</if>

package/components/page/title.marko

@@ -6,7 +6,7 @@ $ const parts = [
   config.website("name"),
 ];
 $ const concatWith = input.concatWith || "|";
-$ const title = parts.filter(v => v).join(` ${concatWith} `);
+$ const title = parts.filter(v => v && v !== 'Home').join(` ${concatWith} `);
 
 <title>
   <if(input.renderBody)>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parameter1/base-cms-marko-web",
-  "version": "3.7.3",
+  "version": "3.7.7",
   "description": "Core Marko+Express components for BaseCMS websites",
   "author": "Jacob Bare <jacob@parameter1.com>",
   "main": "index.js",
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "86f55f37c25c31102330760ea6432a5581228248"
+  "gitHead": "edb1abe156385d8be587881f240a305376551472"
 }

package/scss/carousel.scss

@@ -0,0 +1,42 @@
+.carousel {
+  margin-bottom: .75rem;
+
+  .carousel-item {
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .carousel-caption {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: initial;
+    padding-bottom: 1rem;
+    text-shadow: rgba(0, 0, 0, .6) 0 1px 2px;
+    background: rgba(0, 0, 0, .75);
+    p {
+      display: none;
+      @include media-breakpoint-up(md) {
+        display: block;
+      }
+    }
+  }
+
+  .carousel-indicators {
+    z-index: 2;
+    margin-bottom: 0;
+  }
+}
+
+// Carousel Overrides
+
+.carousel-control-next,
+.carousel-control-prev {
+  top: initial;
+  bottom: 8px;
+  z-index: 2;
+  justify-content: space-around;
+  opacity: initial;
+}