@icij/murmur-next 4.0.0

package/lib/components/GenericHeader.vue

@@ -0,0 +1,259 @@
+<template>
+  <div>
+    <component
+      :is="rootElement"
+      id="generic-header"
+      data-turbolinks-permanent
+      class="navbar navbar-expand-lg navbar-light generic-header"
+      :offset="100"
+      :z-index="1020"
+      :on-unpin="closeFollowUsPopover"
+      :class="{ 'headroom--frozen': !collapseNavbar, 'generic-header--collapsed': collapseNavbar }"
+      :style="{ position: position }"
+    >
+      <!-- @slot Redefines brand -->
+      <slot name="brand">
+        <a :href="homeUrl" class="navbar-brand generic-header__brand">
+          <brand-expansion :size="45" :mode="shortMode" class="d-inline-block d-sm-none" />
+          <brand-expansion :size="45" :mode="longMode" class="d-none d-sm-inline-block" />
+          <span class="sr-only">International Consortium of Investigative Journalists</span>
+        </a>
+      </slot>
+      <button class="navbar-toggler border-0" type="button" aria-label="Toggle navigation" @click="toggleNavbar">
+        <fa icon="bars" size="xl" class="text-primary" />
+      </button>
+      <div class="navbar-collapse" :class="{ collapse: collapseNavbar }">
+        <ul class="navbar-nav ms-auto">
+          <li class="nav-item">
+            <a href="https://www.icij.org/investigations/" target="_blank" class="nav-link text-uppercase">
+              {{ t('generic-header.navbar.investigations') }}
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="https://www.icij.org/leak/" target="_blank" class="nav-link text-uppercase">
+              {{ t('generic-header.navbar.leak') }}
+            </a>
+          </li>
+          <li class="nav-item">
+            <a id="follow-us-toggler" class="nav-link text-uppercase" @mouseenter="showFollowUsPopover=true">
+              {{ t('generic-header.navbar.follow') }}
+            </a>
+          </li>
+          <li class="nav-item me-lg-3">
+            <slot name="donate-link">
+              <a class="text-uppercase btn btn-primary fw-bold" target="_blank" :href="donateUrl">
+                {{ t('generic-header.navbar.support') }}
+              </a>
+            </slot>
+          </li>
+        </ul>
+        <b-popover
+            v-model="showFollowUsPopover"
+            target="follow-us-toggler"
+            placement="bottom-start"
+            ref="followUsPopover"
+            click
+        >
+          <follow-us-popover @update:close="closeFollowUsPopover" @keydown.esc="closeFollowUsPopover" />
+        </b-popover>
+      </div>
+    </component>
+  </div>
+</template>
+
+<script lang="ts">
+import { faBars } from '@fortawesome/free-solid-svg-icons/faBars'
+import headroom  from 'vue-headroom/src/headroom.vue';
+import {
+  computed,
+  defineComponent,
+  type PropType,
+  ref,
+  onBeforeMount,
+  watch,
+  ComponentPublicInstance
+} from 'vue'
+
+import config from '@/config'
+import Fa, { library } from '@/components/Fa'
+import BrandExpansion from '@/components/BrandExpansion.vue'
+import FollowUsPopover from '@/components/FollowUsPopover.vue'
+import {BrandMode} from '@/enums'
+import {useI18n} from "vue-i18n";
+import {BPopover} from "bootstrap-vue-next";
+
+type BrandOptions = {
+  noBorder: boolean
+  size: number
+  color: string
+  background: string
+}
+
+/**
+ * GenericHeader
+ */
+export default defineComponent({
+  name: 'GenericHeader',
+  components: {
+    BPopover,
+    BrandExpansion,
+    Fa,
+    FollowUsPopover,
+    headroom
+  },
+  props: {
+    /**
+     * CSS position of the header. Can be <em>absolute</em>, <em>relative</em>, <em>static</em> or <em>fixed</em> (default).
+     */
+    position: {
+      type: String,
+      default: 'fixed'
+    },
+    /**
+     * Disable Headroom for hiding header until needed.
+     */
+    noHeadroom: {
+      type: Boolean,
+      default:false
+    },
+    /**
+     * Target link of the ICIJ logo and project name.
+     */
+    homeUrl: {
+      type: String,
+      default: () => config.get('app.home')
+    },
+    /**
+     * Default options to pass to the brand component
+     */
+    brandOptions: {
+      type: Object as PropType<BrandOptions>,
+      default: () => ({})
+    },
+    /**
+     * Target link of the donate button.
+     */
+    donateUrl: {
+      type: String,
+      default: () => config.get('app.donate-url')
+    }
+  },
+  setup(props) {
+
+    onBeforeMount((): void =>{
+      library.add(faBars)
+    })
+
+    const {t}= useI18n()
+    const followUsPopover = ref<ComponentPublicInstance<typeof BPopover>|null>(null)
+    const closable = ref(false)
+    const showFollowUsPopover = ref<boolean>(false)
+    const collapseNavbar = ref(true)
+    const shortMode = ref(BrandMode.Short)
+    const longMode = ref(BrandMode.Long)
+    const rootElement = computed((): string => {
+      return props.noHeadroom ? 'div' : 'headroom'
+    })
+    const appliedBrandOptions = computed((): BrandOptions => {
+      return {...defaultBrandOptions.value,... props.brandOptions}
+    })
+    const  defaultBrandOptions = computed((): BrandOptions => {
+      return {
+        noBorder: true,
+        size: 50,
+        color: 'white',
+        background: '#A10207'
+      }
+    })
+    function closeFollowUsPopover() {
+      if(followUsPopover.value?.hide){
+        followUsPopover.value?.hide(new Event('forceHide'))
+      }
+      showFollowUsPopover.value=false
+    }
+    function toggleNavbar(): void {
+      collapseNavbar.value = !collapseNavbar.value
+      closeFollowUsPopover()
+    }
+
+    return {
+      t,
+      rootElement,
+      showFollowUsPopover,
+      followUsPopover,
+      collapseNavbar,
+      shortMode,
+      longMode,
+      appliedBrandOptions,
+      closable,
+      closeFollowUsPopover,
+      toggleNavbar
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/lib';
+
+.generic-header {
+  background: white;
+  position: relative;
+  top: 0;
+  width: 100%;
+  z-index: $zindex-sticky;
+
+
+  .popover {
+    width: 100%;
+  }
+
+  & .headroom {
+    will-change: transform;
+    transition: transform 200ms linear;
+    @include media-breakpoint-up(lg) {
+      display: flex;
+    }
+    flex-grow: 1;
+
+    &--unpinned {
+      transform: translateY(-100%) !important;
+    }
+
+    &--pinned {
+      transform: translateY(0%);
+    }
+
+    &--frozen {
+      transform: translateY(0%) !important;
+    }
+  }
+
+  &__brand {
+    position: relative;
+    font-weight: bolder;
+    padding: $spacer;
+    font-size: 1rem;
+    display: inline-block;
+  }
+
+  .navbar-toggler {
+    position: absolute;
+    right: $spacer;
+    top: $spacer;
+    margin: 1px 0 0;
+  }
+
+  .nav-item {
+    margin: 0 $spacer * 0.5;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: black;
+
+    .nav-link {
+      color: inherit;
+      cursor: pointer;
+    }
+  }
+}
+</style>

package/lib/components/HapticCopy.vue

@@ -0,0 +1,256 @@
+<script lang="ts">
+import {FontAwesomeLayers} from '@fortawesome/vue-fontawesome'
+import {faClipboard} from '@fortawesome/free-solid-svg-icons/faClipboard'
+import {faClipboardCheck} from '@fortawesome/free-solid-svg-icons/faClipboardCheck'
+import {BTooltip, PopoverPlacement} from 'bootstrap-vue-next'
+
+import noop from 'lodash/noop'
+import {
+  ComponentPublicInstance,
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeMount,
+  onUnmounted,
+  PropType,
+  ref
+} from 'vue'
+import {TranslateResult, useI18n} from 'vue-i18n'
+
+import {default as Fa, library} from './Fa'
+
+import {copyHtml, copyText} from '@/utils/clipboard'
+
+type HapticCopyData = {
+  mounted: boolean
+  succeed: boolean
+  tooltipContent: TranslateResult | string
+  tooltipTimeout: ReturnType<typeof setTimeout> | undefined
+}
+export default defineComponent({
+  name: 'HapticCopy',
+  components: {
+    BTooltip,
+    FontAwesomeLayers,
+    Fa
+  },
+  props: {
+    /**
+     * Text to copy to the clipboard
+     */
+    text: {
+      type: String,
+      default: null
+    },
+    /**
+     * Plain text to use as an alternative text for HTML copy (uses `text` by default)
+     */
+    plain: {
+      type: String,
+      default: null
+    },
+    /**
+     * Hide the button label (still visible for screen reader)
+     */
+    hideLabel: {
+      type: Boolean
+    },
+    /**
+     * Button label
+     */
+    label: {
+      type: String,
+      default: null
+    },
+    /**
+     * Delay after which we hide the tooltip
+     */
+    tooltipHideDelay: {
+      type: Number,
+      default: 1e3
+    },
+    /**
+     * Placement of the tooltip. Can be: top, topleft, topright, right,<br />
+     * righttop, rightbottom, bottom, bottomleft, bottomright, left, lefttop,
+     * and leftbottom.
+     */
+    tooltipPlacement: {
+      type: String as PropType<PopoverPlacement>,
+      default: 'top'
+    },
+    /**
+     * Copy HTML content
+     */
+    html: {
+      type: Boolean
+    },
+    /**
+     * Deactivate haptic tooltip display
+     */
+    noTooltip: {
+      type: Boolean
+    }
+  },
+  emits: ['attempt', 'success', 'error', 'hideClipboardTooltip'],
+  setup(props, {emit, expose}) {
+    const {t, te} = useI18n()
+    const tooltip = ref<ComponentPublicInstance | null>(null)
+    const el = ref<ComponentPublicInstance<HTMLElement> | null>(null)
+    const tooltipContent = ref<string>('')
+    const tooltipTimeout = ref<NodeJS.Timeout | undefined>(undefined)
+    const showClipboardTooltip = ref(false)
+    onBeforeMount(() => {
+      library.add(faClipboard)
+      library.add(faClipboardCheck)
+    })
+    const tooltipContainer = computed((): string | null => {
+      // By default we append the tooltip in the root container using its
+      // id (if any) because BootstrapVue doesn't like HTMLElement for some
+      // reasons.
+
+      return el.value?.id.length ? `#${el.value.id}` : null;
+    })
+
+    function copyTextToClipboard(): Promise<void> {
+      return el.value ? copyText(props.text, el.value) : Promise.resolve()
+    }
+
+    function copyHtmlToClipboard(): void {
+      return copyHtml(props.text, props.plain || props.text)
+    }
+
+    function copyTextOrHtml() {
+      return props.html ? copyHtmlToClipboard() : copyTextToClipboard()
+    }
+
+    async function copy(): Promise<void> {
+      try {
+        /**
+         * Emitted when an attempt to copy text is made
+         *
+         * @event attempt
+         */
+        emit('attempt')
+        // Use clipboard.js internally
+        await copyTextOrHtml()
+        // Then option the tooltip in case of success
+        await openTooltip('haptic-copy.tooltip.succeed')
+        /**
+         * Emitted when the text has been copied successfully
+         *
+         * @event success
+         */
+        emit('success')
+      } catch (error) {
+        await openTooltip('haptic-copy.tooltip.failed')
+        /**
+         * Emitted when the text couldn't be copied
+         *
+         * @event error
+         */
+        emit('error', error)
+      }
+      // And close the tooltip after a short delay
+      nextTimeout(closeTooltip, props.tooltipHideDelay)
+    }
+
+    function getTooltipContent(msg: string) {
+      return te(msg) ? t(msg) : msg
+    }
+
+    async function openTooltip(msg = 'haptic-copy.tooltip.succeed') {
+      tooltipContent.value = getTooltipContent(msg)
+      showClipboardTooltip.value = true
+    }
+
+    async function closeTooltip() {
+      showClipboardTooltip.value = false
+      tooltipTimeout.value = undefined
+      emit('hideClipboardTooltip')
+
+    }
+
+    function nextTimeout(fn = noop, delay = 0) {
+      clearTimeout(tooltipTimeout.value)
+      return new Promise((resolve) => {
+        tooltipTimeout.value = setTimeout(resolve, delay)
+      })
+          .finally(nextTick)
+          .then(fn)
+    }
+
+    onUnmounted(() => {
+      closeTooltip()
+    })
+    expose({
+      hide: closeTooltip,
+    })
+    return {
+      t,
+      tooltip,
+      el,
+      showClipboardTooltip,
+      tooltipContainer,
+      tooltipContent,
+      tooltipTimeout,
+      copy,
+      closeTooltip,
+      openTooltip,
+      nextTimeout,
+    }
+  },
+})
+</script>
+
+<template>
+  <button id="hapticCopy" ref="el" class="btn haptic-copy" @mouseleave="closeTooltip" @click.stop="copy">
+    <!-- @slot Main content of the button (including the icon) -->
+    <slot>
+      <font-awesome-layers>
+        <transition name="spin">
+          <fa v-if="!tooltipTimeout" class="haptic-copy__icon" icon="clipboard"/>
+        </transition>
+        <transition name="spin">
+          <fa v-if="tooltipTimeout" class="haptic-copy__icon" icon="clipboard-check"/>
+        </transition>
+      </font-awesome-layers>
+      <span :class="{ 'sr-only': hideLabel }" class="ms-1 haptic-copy__label">
+          {{ label || t('haptic-copy.label') }}
+        </span>
+    </slot>
+    <b-tooltip
+        v-if="!noTooltip"
+        ref="tooltip"
+        :model-value="showClipboardTooltip"
+        :placement="tooltipPlacement"
+        manual
+        noninteractive
+        target="hapticCopy"
+    >
+      {{ tooltipContent }}
+    </b-tooltip>
+  </button>
+
+</template>
+<style lang="scss">
+.haptic-copy {
+  &__icon {
+    transform: rotate(0deg);
+
+    &.spin-enter-active,
+    &.spin-leave-active {
+      transition: all 0.2s;
+    }
+
+    &.spin-enter-from {
+      transform: rotate(-180deg);
+      opacity: 0;
+    }
+
+    &.spin-leave-to {
+      transform: rotate(180deg);
+      opacity: 0;
+    }
+  }
+}
+</style>