@mindful-web/marko-web 1.0.0

package/.eslintignore

@@ -0,0 +1,3 @@
+*.marko.js
+lazysizes.js
+public

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Parameter1 LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/browser/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('../../../eslintrc.browser');

package/browser/components/element-id.js

@@ -0,0 +1 @@
+export default (name) => `marko-web-${name}-${Date.now()}-${Math.floor(Math.random() * 1000)}`;

package/browser/components/gated-download/wufoo.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    v-if="canDownload"
+    class="button-wrapper"
+  >
+    <p>
+      Your download should start automatically.
+      If not,
+      <a
+        :href="target"
+        target="_blank"
+        rel="noopener noreferer"
+      >
+        click here
+      </a>
+      to access this document.
+    </p>
+  </div>
+  <div v-else>
+    <strong>To access this piece of premium content, please fill out the following form:</strong>
+    <div :id="formId" />
+  </div>
+</template>
+
+<script>
+import cleanPath from '../../utils/clean-path';
+
+export default {
+  props: {
+    formHash: {
+      type: String,
+      required: true,
+    },
+    userName: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      default: 'Download',
+    },
+    target: {
+      type: String,
+      default: null,
+    },
+    height: {
+      type: String,
+      default: '400',
+    },
+  },
+  data: () => ({ canDownload: false }),
+  computed: {
+    formId() {
+      return `wufoo-${this.formHash}`;
+    },
+    formUrl() {
+      return `https://${this.userName}.wufoo.com/forms/${cleanPath(this.formHash)}`;
+    },
+  },
+  async mounted() {
+    if (!window.WufooForm) {
+      await (new Promise((resolve, reject) => {
+        const s = document.createElement('script');
+        s.src = 'https://secure.wufoo.com/scripts/embed/form.js';
+        s.async = 1;
+        s.onerror = () => reject(new Error('Unable to load Wufoo form script.'));
+        s.onload = resolve;
+        const scr = document.getElementsByTagName('script')[0];
+        scr.parentNode.insertBefore(s, scr);
+      }));
+    }
+    this.init();
+  },
+  methods: {
+    init() {
+      const options = {
+        userName: this.userName,
+        formHash: this.formHash,
+        autoResize: true,
+        height: this.height,
+        header: 'hide',
+        async: true,
+        ssl: true,
+        addSubmitListener: (e) => {
+          if (e.data === 'wufoo-submit-done' && this.target) {
+            this.canDownload = true;
+            window.open(this.target);
+          }
+        },
+      };
+      const instance = new window.WufooForm();
+      instance.initialize(options);
+      instance.display();
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,15 @@
+const LoadMoreTrigger = () => import(/* webpackChunkName: "load-more-trigger" */ './load-more-trigger.vue');
+const TriggerInViewEvent = () => import(/* webpackChunkName: "trigger-in-view-event" */ './trigger-in-view-event.vue');
+const TriggerScreenChangeEvent = () => import(/* webpackChunkName: "trigger-screen-change-event" */ './trigger-screen-change-event.vue');
+const OEmbed = () => import(/* webpackChunkName: "oembed" */ './oembed.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);
+  Browser.register('TriggerInViewEvent', TriggerInViewEvent);
+  Browser.register('TriggerScreenChangeEvent', TriggerScreenChangeEvent);
+  Browser.register('OEmbed', OEmbed);
+  Browser.register('WufooGatedDownload', WufooGatedDownload);
+  Browser.register('ImageSlider', ImageSlider);
+};

package/browser/components/load-more-trigger.vue

@@ -0,0 +1,129 @@
+<template>
+  <div
+    :id="elementId"
+    :class="classes"
+    :style="{ display: display }"
+    :data-expand="expand"
+  >
+    <div v-if="error">
+      <pre>An unexpected error occurred: {{ error.message }}</pre>
+      <pre>{{ error.stack }}</pre>
+    </div>
+    <button
+      v-else
+      :class="buttonClass"
+      :disabled="loading"
+      @click="load()"
+    >
+      <template v-if="loading">
+        Loading...
+      </template>
+      <template v-else>
+        {{ buttonLabel }}
+      </template>
+    </button>
+  </div>
+</template>
+
+<script>
+import $ from '../jquery';
+import elementId from './element-id';
+
+export default {
+  props: {
+    mountPoint: {
+      type: String,
+      required: true,
+    },
+    pageNumber: {
+      type: Number,
+      default: 1,
+    },
+    provide: {
+      type: Object,
+      default: () => ({}),
+    },
+    appendTo: {
+      type: String,
+      required: true,
+    },
+    maxPages: {
+      type: Number,
+      default: null,
+    },
+    className: {
+      type: String,
+      default: null,
+    },
+    buttonClass: {
+      type: String,
+      default: null,
+    },
+    buttonLabel: {
+      type: String,
+      default: 'Load More Content',
+    },
+    expand: {
+      type: Number,
+      default: 250,
+    },
+  },
+  data: () => ({ loading: false, hasLoaded: false, error: null }),
+  computed: {
+    classes() {
+      const classes = ['load-more-trigger', 'lazyload'];
+      if (this.className) classes.push(this.className);
+      return classes;
+    },
+    elementId() {
+      return elementId('load-more');
+    },
+    display() {
+      if (this.hasLoaded) return 'none';
+      return 'block';
+    },
+    canLazyload() {
+      if (this.maxPages === 0) return false;
+      const max = parseInt(this.maxPages, 10);
+      if (!max) return true;
+      return this.pageNumber <= max;
+    },
+  },
+  created() {
+    if (this.canLazyload) document.addEventListener('lazybeforeunveil', this.lazyload.bind(this));
+  },
+  methods: {
+    lazyload({ target }) {
+      if (target.id === this.elementId) this.load();
+    },
+    async load() {
+      const input = {
+        ...this.provide,
+        pageNumber: this.pageNumber + 1,
+      };
+      this.error = null;
+      this.loading = true;
+      const href = `${this.mountPoint}/?input=${encodeURIComponent(JSON.stringify(input))}`;
+      try {
+        const r = await fetch(href, { credentials: 'same-origin' });
+        const html = await r.text();
+        const temp = document.createElement('div');
+        if (this.appendTo) {
+          const parent = document.querySelector(this.appendTo);
+          if (parent) {
+            parent.appendChild(temp);
+            $(temp).replaceWith(html);
+          }
+        }
+      } catch (e) {
+        // @todo Log this!
+        this.error = e;
+      } finally {
+        this.loading = false;
+        this.hasLoaded = true;
+        document.removeEventListener('lazybeforeunveil', this.lazyload.bind(this));
+      }
+    },
+  },
+};
+</script>

package/browser/components/oembed.vue

@@ -0,0 +1,133 @@
+<!-- eslint-disable vue/no-v-html-->
+<template>
+  <span
+    v-if="oembedType === 'link'"
+    :id="id"
+    class="lazyload"
+    :data-embed-type="attrs.type"
+    :data-oembed-type="oembedType"
+    :data-oembed-provider="provider"
+    :data-expand="expand"
+  >
+    <iframe
+      :src="oembedUrl"
+      width="100%"
+      height="100%"
+      frameborder="0"
+    />
+  </span>
+  <span
+    v-else
+    :id="id"
+    class="lazyload"
+    :data-embed-type="attrs.type"
+    :data-oembed-type="oembedType"
+    :data-oembed-provider="provider"
+    :data-expand="expand"
+    v-html="html"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+    expand: {
+      type: Number,
+      default: 250,
+    },
+    attrs: {
+      type: Object,
+      default: () => ({}),
+    },
+    mountPoint: {
+      type: String,
+      required: true,
+    },
+  },
+  data: () => ({
+    loading: false,
+    error: null,
+    embed: null,
+    oembedType: null,
+    oembedUrl: null,
+    provider: null,
+    observer: null,
+  }),
+  computed: {
+    id() {
+      const clean = `${this.attrs.id}`.replace(/[\W|-]/ig, '');
+      return `${clean}-${Date.now()}`;
+    },
+    html() {
+      if (this.embed) return this.embed;
+      if (this.error) return `<pre>An unexpected error occurred: ${this.error.message}</pre>`;
+      if (this.loading) return `Loading embed from ${this.url}`;
+      return '';
+    },
+  },
+  mounted() {
+    document.addEventListener('lazybeforeunveil', this.lazyload.bind(this));
+    if (window.MutationObserver) {
+      // inline script tags aren't added to the DOM, so the twitter widget never loads
+      // This would be widespread -- if the payload returns a script tag, ensure that it is
+      // appended to the head rather than written as part of the `embed` code here.
+      this.observer = new MutationObserver((mutationList) => {
+        for (let i = 0; i < mutationList.length; i += 1) {
+          const mutation = mutationList[i];
+          if (mutation.type === 'childList') {
+            for (let x = 0; x < mutation.addedNodes.length; x += 1) {
+              const added = mutation.addedNodes[x];
+              if (added.tagName && added.tagName === 'SCRIPT') {
+                const script = document.createElement('script');
+                for (let n = 0; n < added.attributes.length; n += 1) {
+                  const { name, value } = added.attributes[n];
+                  script.setAttribute(name, value);
+                }
+                document.querySelector('head').appendChild(script);
+              }
+            }
+          }
+        }
+      });
+      const node = document.getElementById(this.id);
+      this.observer.observe(node, { childList: true, subtree: true });
+    }
+  },
+  beforeDestroy() {
+    document.removeEventListener('lazybeforeunveil', this.lazyload);
+    if (this.observer) this.observer.disconnect();
+  },
+  methods: {
+    lazyload({ target }) {
+      if (target.id === this.id) this.load();
+    },
+    async load() {
+      this.loading = true;
+      const href = `${this.mountPoint}?url=${encodeURIComponent(this.url)}`;
+      try {
+        const r = await fetch(href, { credentials: 'same-origin' });
+        const {
+          html,
+          type,
+          provider_name: provider,
+          url,
+        } = await r.json();
+        this.oembedType = type;
+        this.provider = provider;
+        this.embed = html;
+        this.oembedUrl = url;
+      } catch (e) {
+        // @todo Log this!
+        this.error = e;
+      } finally {
+        this.loading = false;
+        document.removeEventListener('lazybeforeunveil', this.lazyload);
+      }
+    },
+  },
+};
+</script>

package/browser/components/trigger-in-view-event.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :id="elementId" class="lazyload" :data-expand="expand" />
+</template>
+
+<script>
+import EventBus from '../event-bus';
+import elementId from './element-id';
+
+export default {
+  props: {
+    eventName: {
+      type: String,
+      default: 'in-view',
+    },
+    expand: {
+      type: Number,
+      default: -100,
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    elementId() {
+      return elementId(`${this.eventName}-event`);
+    },
+  },
+  created() {
+    document.addEventListener('lazybeforeunveil', this.trigger.bind(this));
+  },
+  methods: {
+    trigger(event) {
+      const { target } = event;
+      if (target.id === this.elementId) {
+        EventBus.$emit(this.eventName, { event, data: this.data });
+      }
+    },
+  },
+};
+</script>

package/browser/components/trigger-screen-change-event.vue

@@ -0,0 +1,94 @@
+<template>
+  <div :id="elementId" style="display: none;" />
+</template>
+
+<script>
+import EventBus from '../event-bus';
+import elementId from './element-id';
+import $ from '../jquery';
+
+export default {
+  props: {
+    multiplier: {
+      type: Number,
+      default: 1.35,
+    },
+    screenHeight: {
+      type: Number,
+      default: 1000,
+    },
+    scrollTimeoutMs: {
+      type: Number,
+      default: 250,
+    },
+    eventName: {
+      type: String,
+      default: 'screen_change',
+    },
+  },
+
+  data: () => ({
+    activeScreen: 1,
+    didScroll: true,
+  }),
+
+  computed: {
+    elementId() {
+      return elementId(`${this.eventName}-event`);
+    },
+    maxHeight() {
+      const { screenHeight } = this;
+      if (!screenHeight) return window.innerHeight;
+      return screenHeight;
+    },
+  },
+
+  watch: {
+    activeScreen(current, old) {
+      const direction = current < old ? 'Up' : 'Down';
+      this.trigger(direction);
+    },
+  },
+
+  mounted() {
+    $(window).on('scroll', () => {
+      this.didScroll = true;
+    });
+    setInterval(this.handleScroll, this.scrollTimeoutMs);
+  },
+
+  beforeDestroy() {
+    clearInterval(this.handleScroll);
+  },
+
+  methods: {
+    getScrollY() {
+      return window.pageYOffset || window.scrollY;
+    },
+
+    handleScroll() {
+      if (this.didScroll) {
+        this.setActiveScreen();
+        this.didScroll = false;
+      }
+    },
+
+    setActiveScreen() {
+      const screenHeight = this.maxHeight * this.multiplier;
+      this.activeScreen = Math.floor(this.getScrollY() / screenHeight) + 1;
+    },
+
+    trigger(direction) {
+      EventBus.$emit(this.eventName, {
+        direction,
+        activeScreen: this.activeScreen,
+        scrollY: this.getScrollY(),
+        maxHeight: this.maxHeight,
+        multiplier: this.multiplier,
+        innerHeight: window.innerHeight,
+        innerWidth: window.innerWidth,
+      });
+    },
+  },
+};
+</script>

package/browser/event-bus.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+const EventBus = new Vue();
+
+export default EventBus;