@icij/murmur-next 4.0.0

package/lib/components/SharingOptions.vue

@@ -0,0 +1,230 @@
+<script lang="ts">
+import get from 'lodash/get'
+import reduce from 'lodash/reduce'
+import {faCode} from '@fortawesome/free-solid-svg-icons/faCode'
+import {computed, CSSProperties, defineComponent, onBeforeMount, PropType, ref} from 'vue'
+
+import {default as Fa, library} from './Fa'
+
+import EmbedForm from '@/components/EmbedForm.vue'
+import SharingOptionsLink from '@/components/SharingOptionsLink.vue'
+import config from '@/config'
+import IframeResizer from '@/utils/iframe-resizer'
+import {BModal, useModal} from "bootstrap-vue-next";
+
+type MetaValuesMap = {
+  url: string
+  title: string
+  description: string
+  facebook_title: string
+  facebook_description: string
+  facebook_media: string
+  twitter_media: string
+  twitter_user: string
+}
+
+/**
+ * SharingOptions
+ */
+export default defineComponent({
+  name: 'SharingOptions',
+  components: {
+    BModal,
+    EmbedForm,
+    SharingOptionsLink,
+    Fa
+  },
+  props: {
+    /**
+     * URL to be shared.
+     */
+    url: {
+      type: String,
+      default: () => config.get('sharing-options.url', null) || IframeResizer.deletePymParams()
+    },
+    /**
+     * URL to use specifically with the embed form
+     */
+    embedUrl: {
+      type: String,
+      default: null
+    },
+    /**
+     * Direction of the sharing options. Can be: <em>row</em>, <em>row-reverse</em>,
+     * <em>column</em> or <em>column-reverse</em>.
+     */
+    direction: {
+      default: 'row',
+      validator(value: string) {
+        return ['row', 'row-reverse', 'column', 'column-reverse'].indexOf(value) !== -1
+      }
+    },
+    /**
+     * Sharing contents which can be generic (<em>title</em>, <em>description</em>, etc)
+     * or specific to a network (<em>twitter_title</em>, <em>facebook_description</em>, etc).
+     */
+    values: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * The list of all the keys to automatically inject in each social button.
+     */
+    valuesKeys: {
+      default: () => ['url', 'title', 'description', 'media', 'user'],
+      type: Array as PropType<string[]>
+    },
+    /**
+     * Disable embed button.
+     */
+    noEmbed: {
+      type: Boolean
+    },
+    /**
+     * Minimum height of the iframe in the embed form.
+     */
+    iframeMinHeight: {
+      type: Number,
+      default: 100
+    },
+    /**
+     * Minimum width of the iframe in the embed form.
+     */
+    iframeMinWidth: {
+      type: Number,
+      default: 100
+    },
+    /**
+     * Prevent from reading default value from the <code>meta</code>.
+     */
+    noMeta: {
+      type: Boolean
+    }
+  },
+  setup(props) {
+
+    onBeforeMount(() => {
+      library.add(faCode)
+    })
+
+    const embedForm = ref(null)
+    const {show} = useModal("embedForm")
+    const style = computed((): CSSProperties => {
+      return {
+        'flex-direction': props.direction
+      } as CSSProperties
+    })
+
+    const metaValues = computed((): MetaValuesMap => {
+      return {
+        url: props.url ?? "",
+        title: defaultValueFor('sharing-options.title'),
+        description: defaultValueFor('sharing-options.description', 'meta[name="description]'),
+        facebook_title: defaultValueFor('sharing-options.facebook_title', 'meta[property="og:title"]'),
+        facebook_description: defaultValueFor('sharing-options.description', 'meta[property="og:description"]'),
+        facebook_media: defaultValueFor('sharing-options.media', 'meta[property="og:image"]'),
+        twitter_media: defaultValueFor('sharing-options.media', 'meta[name="twitter:image"]'),
+        twitter_user: defaultValueFor('sharing-options.twitter-user', 'meta[name="twitter:site"]')
+      }
+    })
+
+    function valuesFor(network: string): { [key: string]: string } {
+      const values = Object.assign(metaValues.value, props.values)
+      return reduce(
+          props.valuesKeys,
+          (res: { [name: string]: string }, key) => {
+            res[key] = get(values, `${network}_${key}`, values[key])
+            return res
+          },
+          {}
+      )
+    }
+
+    function defaultValueFor(key: string, metaSelector?: string): string {
+      if (props.noMeta || !metaSelector) {
+        return config.get(key)
+      }
+      return get(document.head.querySelector(metaSelector), 'content', config.get(key))
+    }
+
+    return {
+      style,
+      show,
+      embedForm,
+      valuesFor
+    }
+
+  },
+})
+</script>
+
+<template>
+  <div :style="style" class="sharing-options">
+    <sharing-options-link class="sharing-options__link" network="facebook" v-bind="valuesFor('facebook')"/>
+    <sharing-options-link class="sharing-options__link" network="twitter" v-bind="valuesFor('twitter')"/>
+    <sharing-options-link class="sharing-options__link" network="linkedin" v-bind="valuesFor('linkedin')"/>
+    <sharing-options-link class="sharing-options__link" network="email" v-bind="valuesFor('email')"/>
+    <div v-show="!noEmbed" class="sharing-options__link sharing-options__link--embed">
+      <a @click="show">
+        <fa icon="code"/>
+        <span class="sr-only">Embed</span>
+      </a>
+    </div>
+    <b-modal id="embedForm" ref="embedForm" class="text-dark" hide-footer title="Embed on your website">
+      <embed-form
+          :min-height="iframeMinHeight"
+          :min-width="iframeMinWidth"
+          :url="embedUrl || url"
+          no-preview
+          no-title
+      />
+    </b-modal>
+  </div>
+</template>
+
+<style lang="scss">
+@import '@/styles/lib';
+@import '@/styles/mixins';
+
+.sharing-options {
+  display: flex;
+
+  &__link {
+    display: block;
+    margin: $spacer * 0.25;
+    background: black;
+    height: 2.5em;
+    line-height: 2.5em;
+    width: 2.5em;
+    text-align: center;
+    font-size: 80%;
+    border-radius: 50%;
+    cursor: pointer;
+    color: white;
+    position: relative;
+
+    i {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    & > a,
+    & > button {
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      display: block;
+      background: transparent !important;
+      text-decoration: none;
+      opacity: 1;
+    }
+
+    .svg-inline--fa {
+      color: white;
+    }
+  }
+}
+</style>

package/lib/components/SharingOptionsLink.vue

@@ -0,0 +1,259 @@
+<script lang="ts">
+import querystring from 'querystring-es3'
+import reduce from 'lodash/reduce'
+import noop from 'lodash/noop'
+import get from 'lodash/get'
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope'
+import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter'
+import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook'
+import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin'
+import { h, defineComponent, PropType, VNode} from 'vue'
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+
+import Fa from './Fa'
+
+// Popup instance and an interval holder
+type Popup = {
+  instance: Window | null | undefined
+  interval: undefined | ReturnType<typeof setTimeout>
+  parent: (Window & typeof globalThis) | null
+}
+export const $popup: Popup = {
+  instance: null,
+  interval: undefined,
+  parent: typeof window !== 'undefined' ? window : null
+}
+
+// Prevent propagation when an event is fired through the given callback
+const preventDefault = (callback: Function) => {
+  return (event: Event) => {
+    event && event.preventDefault()
+    callback()
+  }
+}
+
+type SharingPlatform = {
+  base: string
+  icon: IconDefinition
+  args: {
+    [key: string]: string
+  }
+}
+type Platform = 'email' | 'facebook' | 'linkedin' | 'twitter'
+// eslint-disable-next-line no-unused-vars
+type SharingPlatforms = { [key in Platform]: SharingPlatform }
+/**
+ * @source https://github.com/bradvin/social-share-urls
+ */
+export const networks: SharingPlatforms = {
+  email: {
+    base: 'mailto:?',
+    icon: faEnvelope,
+    args: {
+      subject: 'title',
+      body: 'description'
+    }
+  },
+  facebook: {
+    base: 'https://www.facebook.com/sharer.php?',
+    icon: faFacebook,
+    args: {
+      u: 'url',
+      title: 'title',
+      description: 'description',
+      hashtag: 'hashtags'
+    }
+  },
+  linkedin: {
+    base: 'https://www.linkedin.com/sharing/share-offsite/?',
+    icon: faLinkedin,
+    args: {
+      url: 'url',
+      title: 'title',
+      summary: 'description'
+    }
+  },
+  twitter: {
+    base: 'https://twitter.com/intent/tweet?',
+    icon: faTwitter,
+    args: {
+      url: 'url',
+      text: 'title',
+      via: 'user',
+      hashtags: 'hashtags'
+    }
+  }
+}
+
+/**
+ * SharingOptionsLink
+ */
+export default defineComponent({
+  name: 'SharingOptionsLink',
+  components: {
+    Fa
+  },
+  props: {
+    /**
+     * Root element type
+     */
+    tag: {
+      type: String,
+      default: 'a'
+    },
+    /**
+     * Social network to use
+     */
+    network: {
+      type: String as PropType<Platform>,
+      required: true,
+      validator(val: string) {
+        return Object.keys(networks).includes(val)
+      }
+    },
+    /**
+     * Disable icon
+     */
+    noIcon: {
+      type: Boolean
+    },
+    /**
+     * Shared URL
+     */
+    url: {
+      type: String,
+      default: null
+    },
+    /**
+     * Shared text
+     */
+    title: {
+      type: String,
+      default: null
+    },
+    /**
+     * Shared description
+     */
+    description: {
+      type: String,
+      default: null
+    },
+    /**
+     * Shared image
+     */
+    media: {
+      type: String,
+      default: null
+    },
+    /**
+     * Twitter user
+     */
+    user: {
+      type: String,
+      default: null
+    },
+    /**
+     * Shared hashtags
+     */
+    hashtags: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      popup: {
+        status: 'no',
+        resizable: 'yes',
+        toolbar: 'no',
+        menubar: 'no',
+        scrollbars: 'no',
+        location: 'no',
+        directories: 'no',
+        width: 626,
+        height: 436,
+        top: 0,
+        left: 0,
+        screenY: 0,
+        screenX: 0
+      }
+    }
+  },
+  computed: {
+    href(): string {
+      return this.base + querystring.stringify(this.query)
+    },
+    base(): string {
+      return get(networks, [this.network, 'base'], '')
+    },
+    args(): { [key: string]: string } {
+      return get(networks, [this.network, 'args'], {})
+    },
+    icon(): IconDefinition | null {
+      return get(networks, [this.network, 'icon'], null)
+    },
+    query(): any {
+      return reduce(
+        this.args,
+        (obj, prop, param) => {
+          // @ts-ignore
+          if (this.$props[prop]) {
+            // @ts-ignore
+            obj[param] = this.$props[prop]
+          }
+          return obj
+        },
+        {}
+      )
+    },
+    name(): string {
+      return get(networks, [this.network, 'name'], this.network)
+    },
+    popupParams(): string {
+      return querystring.stringify(this.popup).split('&').join(',')
+    }
+  },
+  methods: {
+    click(): void {
+      this.cleanExistingPopupInstance()
+      this.openPopup()
+    },
+    renderIcon(): void | VNode | null {
+      if (!this.noIcon) {
+        //@ts-ignore
+        return h( Fa, {icon: this.icon})
+      }
+    },
+    openPopup(): void {
+      // Create the popup
+      $popup.instance = $popup.parent?.open(this.href, 'sharer', this.popupParams)
+      $popup.instance?.focus()
+      // Watch for popup closing
+      $popup.interval = setInterval(this.cleanExistingPopupInterval, 500)
+    },
+    cleanExistingPopupInstance(): void {
+      if ($popup.instance && $popup.interval) {
+        clearInterval($popup.interval)
+        $popup.interval = undefined
+        $popup.instance.close()
+      }
+    },
+    cleanExistingPopupInterval() {
+      if ($popup.instance && $popup.instance.closed) {
+        clearInterval($popup.interval)
+        $popup.interval = undefined
+        $popup.instance = null
+      }
+    },
+    hasPopup(): boolean {
+      return this.network !== 'email'
+    }
+  },
+  render(): void | VNode | null {
+    const click = this.hasPopup() ? preventDefault(this.click) : noop
+    const href = this.href
+    const children = this.$slots.default? this.$slots.default() : ([this.renderIcon(), h('span', { class: 'visually-hidden' }, this.name)])
+    return h(this.tag, { attrs: { href },  onClick: click  }, children)
+  }
+})
+</script>

package/lib/components/SignUpForm.vue

@@ -0,0 +1,181 @@
+<template>
+  <form class="sign-up-form" :class="{ 'sign-up-form--horizontal': horizontal }" @submit.prevent="subscribe">
+    <fieldset :disabled="frozen">
+      <label v-if="!noLabel" class="text-uppercase text-muted fw-bold" for="input-email">
+        {{ t('sign-up-form.label') }}
+      </label>
+      <div class="sign-up-form__fieldset__group " :class="{'input-group': horizontal}">
+        <input
+            id="input-email"
+            v-model="email"
+            name="EMAIL"
+            type="email"
+            class="form-control"
+            :placeholder="t('sign-up-form.placeholder').toString()"
+        />
+        <button class="sign-up-form__fieldset__group__addon btn text-uppercase fw-bold input-group-text"  :class="{ [variantColorClass] :true }"  type="submit">
+          {{ t('sign-up-form.submit') }}
+        </button>
+      </div>
+    </fieldset>
+    <p v-if="errorMessage" class="alert alert-danger p-2 m-0 mt-2">
+      {{ errorMessage }}
+    </p>
+    <p v-if="successMessage" class="alert alert-success p-2 m-0 mt-2">
+      {{ successMessage }}
+    </p>
+  </form>
+</template>
+
+<script lang="ts">
+import jsonp from 'jsonp'
+import castArray from 'lodash/castArray'
+import flatten from 'lodash/flatten'
+import last from 'lodash/last'
+import {computed, defineComponent, PropType, ref} from 'vue'
+
+import config from '../config'
+import {useI18n} from "vue-i18n";
+import {useSendEmail} from "@/composables/sendEmail";
+
+
+type SignUpFormData = {
+  email: string
+  frozen: boolean
+  response: any
+  errorMessage: string | null
+  successMessage: string | null
+}
+
+/**
+ * SignUpForm
+ */
+export default defineComponent({
+name: 'SignUpForm',
+  props: {
+    /**
+     * Mailchimp URL to send the data to.
+     */
+    action: {
+      type: String,
+      default: () => config.get('signup-form.action')
+    },
+    /**
+     * Malchimp email field parameter
+     */
+    emailField: {
+      type: String,
+      default: () => config.get('signup-form.email-field')
+    },
+    /**
+     * Malchimp default groups. Can be an array or a commat-separated list of groups.
+     */
+    defaultGroups: {
+      type: [String, Array] as PropType<string | string[]>,
+      default: () => config.get('signup-form.default-groups')
+    },
+    /**
+     * Disable the main label.
+     */
+    noLabel: {
+      type: Boolean
+    },
+    /**
+     * Horizontal layout of the form.
+     */
+    horizontal: {
+      type: Boolean
+    },
+    /**
+     * Mailchimp tracker tag to identify the origin.
+     */
+    tracker: {
+      type: String,
+      default: () => config.get('signup-form.tracker')
+    },
+    /**
+     * Referrer URL cant be passed explicitly
+     */
+    referrer: {
+      type: String,
+      default: null
+    },
+    /**
+     * Color variant of the sign-up button
+     */
+    variant: {
+      type: String,
+      default: 'primary'
+    }
+  },
+  setup(props){
+    const {t} = useI18n()
+    const email = ref('')
+    const frozen = ref(false)
+    const response = ref({})
+    const errorMessage = ref(null)
+    const successMessage = ref(null)
+    const {send} = useSendEmail(email,props.action,props.emailField, props.tracker, props.referrer,props.defaultGroups)
+
+    const variantColorClass = computed(()=> {
+      return `btn-${props.variant}`
+    } )
+    async function subscribe() {
+      resetMessages()
+      freeze()
+      // Send the data, catch the result no matter what and unfreeze the form
+      await send().then(done,done).finally(unfreeze)
+
+    }
+
+    function done({ result, msg }: any): void {
+      if (result === 'success') {
+        email.value = ''
+        successMessage.value = msg
+      } else {
+        // Mailchimp formats errors in list
+        errorMessage.value = last((msg || "Something's wrong").split('0 -')) ?? null
+      }
+    }
+    function resetMessages() {
+      errorMessage.value = null
+      successMessage.value = null
+    }
+    function freeze() {
+      frozen.value = true
+    }
+    function unfreeze() {
+      frozen.value = false
+    }
+
+    return {
+      t,
+      email,
+      frozen,
+      response,
+      errorMessage,
+      successMessage,
+      variantColorClass,
+      subscribe,
+      send
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/lib.scss';
+
+.sign-up-form {
+  .sign-up-form__fieldset__group__addon.btn {
+    font-size: 0.9em;
+  }
+
+  &:not(&--horizontal) {
+    .sign-up-form__fieldset__group__addon.btn {
+      display: block;
+      width: 100%;
+    }
+  }
+}
+</style>