Merge pull request #292 from B77Mills/createMonoRailPackage

Create new `base-cms-theme-monorail` package to replace tenant based versions

packages/marko-web-theme-monorail/.eslintignore

@@ -0,0 +1 @@
+*.marko.js

packages/marko-web-theme-monorail/.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.marko'],
+      },
+    },
+  },
+};

packages/marko-web-theme-monorail/browser/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  extends: [
+    'airbnb-base',
+    'plugin:vue/recommended',
+  ],
+  env: {
+    browser: true,
+  },
+  rules: {
+    'vue/max-attributes-per-line': ['error', {
+      singleline: 3,
+      multiline: {
+        max: 1,
+        allowFirstLine: false,
+      },
+    }],
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+};

packages/marko-web-theme-monorail/browser/block-loader.vue

@@ -0,0 +1,64 @@
+<template>
+  <div :class="classes">
+    <div v-if="isLoading">
+      Loading {{ label }}...
+    </div>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div v-else-if="html" v-html="html" />
+    <div v-if="error">
+      <h5>Unable to load {{ label }} block.</h5>
+      <p>{{ error.message }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    input: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data: () => ({
+    error: null,
+    hasLoaded: false,
+    html: null,
+    isLoading: false,
+    classes: ['lazyload'],
+  }),
+
+  created() {
+    document.addEventListener('lazybeforeunveil', this.load.bind(this));
+  },
+
+  methods: {
+    async load() {
+      if (!this.isLoading && !this.hasLoaded) {
+        try {
+          this.error = null;
+          this.isLoading = true;
+          const input = JSON.stringify(this.input);
+          const href = `/__render-block/${this.name}?input=${encodeURIComponent(input)}`;
+          const res = await fetch(href, { credentials: 'same-origin' });
+          this.html = await res.text();
+          this.hasLoaded = true;
+        } catch (e) {
+          this.error = e;
+        } finally {
+          this.isLoading = false;
+        }
+      }
+    },
+  },
+};
+</script>

packages/marko-web-theme-monorail/browser/comment-toggle-button.vue

@@ -0,0 +1,89 @@
+<template>
+  <button
+    :class="classes"
+    type="button"
+    @click="toggle"
+  >
+    <span>{{ translate("viewAllComments") }}</span>
+  </button>
+</template>
+
+<script>
+import EventBus from '@parameter1/base-cms-marko-web/browser/event-bus';
+import get from '@parameter1/base-cms-marko-web-identity-x/browser/utils/get';
+import i18n from './i18n-vue';
+
+export default {
+
+  props: {
+    identifier: {
+      type: String,
+      required: true,
+    },
+    classes: {
+      type: String,
+      default: null,
+    },
+    isExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    targets: {
+      type: Array,
+      default: () => [],
+    },
+    toggleClass: {
+      type: String,
+      required: true,
+    },
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+
+  data: () => ({
+    error: null,
+    expanded: false,
+    isLoading: false,
+    totalCount: 0,
+  }),
+
+  created() {
+    // @todo to move this component/functionality to the marko-web-identity-x package
+    this.expanded = this.isExpanded;
+    this.loadCount();
+  },
+
+  methods: {
+    /**
+     *
+     */
+    async loadCount() {
+      try {
+        this.error = null;
+        this.isLoading = true;
+        const res = await get(`/comment-count/${this.identifier}`);
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.message);
+        this.totalCount = data.totalCount;
+      } catch (e) {
+        this.error = e;
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    toggle() {
+      this.expanded = !this.expanded;
+      // @todo to move this component/functionality to the marko-web-identity-x package
+      EventBus.$emit('identity-x-comments-expanded', this.expanded);
+      const elements = document.querySelectorAll(this.targets.join(','));
+      Array.prototype.forEach.call(elements, el => el.classList.toggle(this.toggleClass));
+    },
+    translate(key) {
+      return i18n(this.lang, key);
+    },
+  },
+};
+</script>

packages/marko-web-theme-monorail/browser/i18n-vue.js

@@ -0,0 +1,11 @@
+import translations from './translations-vue';
+
+export default (lang, fieldLabelKey) => {
+  if (!translations[lang]) {
+    throw new Error(`No translations available for requested language ${lang}!`);
+  }
+  if (!translations[lang][fieldLabelKey]) {
+    throw new Error(`No translations available in ${lang} for requested key ${fieldLabelKey}!`);
+  }
+  return translations[lang][fieldLabelKey];
+};

packages/marko-web-theme-monorail/browser/index.js

@@ -0,0 +1,114 @@
+import GTM from '@parameter1/base-cms-marko-web-gtm/browser';
+import GAM from '@parameter1/base-cms-marko-web-gam/browser';
+import Search from '@parameter1/base-cms-marko-web-search/browser';
+import SocialSharing from '@parameter1/base-cms-marko-web-social-sharing/browser';
+import Inquiry from '@parameter1/base-cms-marko-web-inquiry/browser';
+import NativeX from '@parameter1/base-cms-marko-web-native-x/browser';
+import IdentityX from '@parameter1/base-cms-marko-web-identity-x/browser';
+import OmedaIdentityX from '@parameter1/base-cms-marko-web-omeda-identity-x/browser';
+
+const CommentToggleButton = () => import(/* webpackChunkName: "theme-comment-toggle-button" */ './comment-toggle-button.vue');
+const BlockLoader = () => import(/* webpackChunkName: "theme-block-loader" */ './block-loader.vue');
+const InlineNewsletterForm = () => import(/* webpackChunkName: "theme-inline-newsletter-form" */ './inline-newsletter-form.vue');
+const MenuToggleButton = () => import(/* webpackChunkName: "theme-menu-toggle-button" */ './menu-toggle-button.vue');
+const NewsletterCloseButton = () => import(/* webpackChunkName: "theme-newsletter-close-button" */ './newsletter-close-button.vue');
+const NewsletterToggleButton = () => import(/* webpackChunkName: "theme-newsletter-toggle-button" */ './newsletter-toggle-button.vue');
+
+const SiteNewsletterMenu = () => import(/* webpackChunkName: "theme-site-newsletter-menu" */ './site-newsletter-menu.vue');
+const WufooForm = () => import(/* webpackChunkName: "theme-wufoo-form" */ './wufoo-form.vue');
+const TopStoriesMenu = () => import(/* webpackChunkName: "theme-top-stories-menu" */ './top-stories-menu.vue');
+
+const setP1EventsIdentity = ({ p1events, brandKey, encryptedId }) => {
+  if (!p1events || !brandKey || !encryptedId) return;
+  p1events('setIdentity', `omeda.${brandKey}.customer*${encryptedId}~encrypted`);
+};
+
+export default (Browser, config = {
+  enableOmedaIdentityX: true,
+  withGTM: true,
+  withP1Events: true,
+}) => {
+  const { EventBus } = Browser;
+  const { enableOmedaIdentityX } = config;
+
+  if (enableOmedaIdentityX) {
+    EventBus.$on('omeda-identity-x-authenticated', ({ brandKey, encryptedId }) => {
+      setP1EventsIdentity({ p1events: window.p1events, brandKey, encryptedId });
+    });
+    EventBus.$on('omeda-identity-x-rapid-identify-response', ({ brandKey, encryptedId }) => {
+      setP1EventsIdentity({ p1events: window.p1events, brandKey, encryptedId });
+    });
+  }
+
+  Browser.register('ThemeCommentToggleButton', CommentToggleButton);
+
+  EventBus.$on('identity-x-logout', () => {
+    if (window.p1events) window.p1events('setIdentity', null);
+  });
+  const emitNewsletterEvent = ({ type, action, data }) => {
+    let label = `Step ${data.step}`;
+    if (action === 'Error') label = `${label} Error: ${data.error}`;
+    EventBus.$emit('newsletter-form-action', {
+      category: `Newsletter Signup Form (${type})`,
+      action,
+      label,
+    });
+  };
+
+  const emitNewsletterSubscription = ({ type, newsletter }) => {
+    EventBus.$emit('newsletter-form-subscription', {
+      category: newsletter.eventCategory || newsletter.name,
+      action: type,
+    });
+  };
+
+  GTM(Browser);
+  GAM(Browser);
+  Search(Browser);
+  SocialSharing(Browser);
+  NativeX(Browser);
+  if (enableOmedaIdentityX) {
+    OmedaIdentityX(Browser);
+  } else {
+    IdentityX(Browser);
+  }
+  Inquiry(Browser);
+
+  Browser.register('ThemeBlockLoader', BlockLoader);
+
+  Browser.register('ThemeSiteNewsletterMenu', SiteNewsletterMenu, {
+    provide: { EventBus },
+    on: {
+      load: (data) => {
+        emitNewsletterEvent({ type: 'Pushdown', action: 'Load', data });
+        emitNewsletterEvent({ type: 'Pushdown', action: 'View', data });
+      },
+      focus: data => emitNewsletterEvent({ type: 'Pushdown', action: 'Focus', data }),
+      submit: data => emitNewsletterEvent({ type: 'Pushdown', action: 'Submit', data }),
+      subscribe: ({ newsletter }) => emitNewsletterSubscription({ type: 'Pushdown', newsletter }),
+      error: data => emitNewsletterEvent({ type: 'Pushdown', action: 'Error', data: { ...data, error: data.error.message } }),
+    },
+  });
+  Browser.register('ThemeInlineNewsletterForm', InlineNewsletterForm, {
+    on: {
+      load: data => emitNewsletterEvent({ type: 'Inline', action: 'Load', data }),
+      view: data => emitNewsletterEvent({ type: 'Inline', action: 'View', data }),
+      focus: data => emitNewsletterEvent({ type: 'Inline', action: 'Focus', data }),
+      submit: (data) => {
+        emitNewsletterEvent({ type: 'Inline', action: 'Submit', data });
+        if (window.olytics) window.olytics.confirm(data.encryptedCustomerId);
+      },
+      subscribe: ({ newsletter }) => emitNewsletterSubscription({ type: 'Pushdown', newsletter }),
+      error: data => emitNewsletterEvent({ type: 'Inline', action: 'Error', data: { ...data, error: data.error.message } }),
+    },
+  });
+
+  Browser.register('ThemeMenuToggleButton', MenuToggleButton);
+  Browser.register('ThemeNewsletterCloseButton', NewsletterCloseButton);
+
+  Browser.register('ThemeNewsletterToggleButton', NewsletterToggleButton, {
+    provide: { EventBus },
+  });
+  Browser.register('ThemeTopStoriesMenu', TopStoriesMenu);
+  Browser.register('WufooForm', WufooForm);
+};