@icij/murmur-next 4.0.0

package/lib/components/ActiveTextTruncate.vue

@@ -0,0 +1,258 @@
+<script lang="ts">
+import {computed, defineComponent, ref, watch} from 'vue'
+import useResizeObserver from "@/composables/resizeObserver";
+import { RequestAnimationFrameWrapper } from '@/utils/animation'
+
+type ActiveTextTruncateData = { textLivePosition: number; resizeObserverKey: string | null }
+
+export default defineComponent({
+  name: 'ActiveTextTruncate',
+  props: {
+    /**
+     * Number of Pixel Per Millisecond for the text transition.
+     */
+    ppms: {
+      type: Number,
+      default: 0.025
+    },
+    /**
+     * Maximum width of the fading mask.
+     */
+    fadingMaxWidth: {
+      type: Number,
+      default: 50,
+      validator: (value: number) => value > 0
+    },
+    /**
+     * Minimum width of the fading mask.
+     */
+    fadingMinWidth: {
+      type: Number,
+      default: 0.001,
+      validator: (value: number) => value > 0
+    },
+    /**
+     * Delay to start moving the text (in milliseconds).
+     */
+    delay: {
+      type: Number,
+      default: 1000
+    },
+    /**
+     * Direction of the truncate
+     */
+    direction: {
+      type: String,
+      default: 'ltr',
+      validator: (value: string) => ['ltr', 'rtl'].indexOf(value) > -1
+    }
+  },
+  emits:['cancel','end','start'],
+  setup(props,{emit}){
+    const el  = ref(null)
+    const textLivePosition = ref(0)
+     // This will hold a key generated every time the component is resized.
+    const {resizeRef,resizeState} = useResizeObserver(el)
+      watch(resizeState,()=>{
+        onResized()
+      })
+
+    const wrapperElement = computed((): HTMLElement | null => {
+      const selector = '.active-text-truncate__wrapper'
+      return resizeRef.value?.querySelector(selector) ?? null
+    })
+    const wrapperElementWidth = computed((): number => {
+      return wrapperElement.value?.offsetWidth ?? 0
+    })
+    const textElement = computed((): HTMLElement | null => {
+      const selector = '.active-text-truncate__wrapper__text'
+      return resizeRef.value?.querySelector(selector) ?? null
+    })
+    const textElementWidth = computed((): number => {
+      return textElement.value?.offsetWidth ?? 0
+    })
+    const textOffsetTransitionDelay = computed((): string => {
+      return `${props.delay}ms`
+    })
+    const textOffsetTransitionDuration = computed((): string => {
+      const offset = Math.abs(wrapperElementWidth.value - textElementWidth.value)
+      const duration = offset / props.ppms
+      return `${duration}ms`
+    })
+    const textInitialOffset = computed((): string => {
+      return '0'
+    })
+    const textFinalOffset = computed((): string => {
+      const offset = wrapperElementWidth.value - textElementWidth.value
+      return `${offset}px`
+    })
+    const textOffsetValues = computed((): string [] => {
+      if (props.direction === 'ltr') {
+        return [textInitialOffset.value, textFinalOffset.value]
+      }
+      return [textFinalOffset.value, textInitialOffset.value]
+    })
+    const isFadingLeft = computed((): boolean => {
+      return props.direction === 'rtl' && isFading.value
+    })
+    const isFadingRight = computed((): boolean => {
+      return props.direction === 'ltr' && isFading.value
+    })
+    const isFading = computed((): boolean => {
+      return wrapperElementWidth.value < textElementWidth.value
+    })
+    const fadingLeftWidth = computed((): string => {
+      const offset = textLivePosition.value
+      const width = Math.min(Math.max(props.fadingMinWidth, Math.abs(offset)), props.fadingMaxWidth)
+      return `${width}px`
+    })
+    const fadingRightWidth = computed((): string => {
+      const offset = parseInt(textFinalOffset.value) - textLivePosition.value
+      const width = Math.min(Math.max(props.fadingMinWidth, Math.abs(offset)), props.fadingMaxWidth)
+      return `${width}px`
+    })
+    const textLivePositionRequestAnimationFrame = computed((): RequestAnimationFrameWrapper => {
+      return new RequestAnimationFrameWrapper()
+    })
+
+    function onResized() {
+
+      textLivePosition.value = parseInt(textOffsetValues.value[0])
+      // Track transitions to update the text position in live using Request Animation Frame
+      listenOnTextElement('transitionstart', startTrackingTextLivePosition)
+      listenOnTextElement('transitionend', endTrackingTextLivePosition)
+      listenOnTextElement('transitioncancel', resetTextLivePosition)
+    }
+    function listenOnTextElement(name: string, func: () => void) {
+      textElement.value?.removeEventListener(name, func)
+      textElement.value?.addEventListener(name, func)
+    }
+    function trackTextLivePosition(): void {
+      if (!textElement.value) return
+      const left = window.getComputedStyle(textElement.value, null).getPropertyValue('left')
+      textLivePosition.value = parseInt(left)
+    }
+    function startTrackingTextLivePosition(): void {
+      textLivePositionRequestAnimationFrame.value.start(trackTextLivePosition)
+      /**
+       * Emitted when the animation on the text starts.
+       * @event start
+       */
+      emit('start')
+    }
+    function endTrackingTextLivePosition(): void {
+      textLivePositionRequestAnimationFrame.value.stop()
+      /**
+       * Emitted when the animation on the text reaches the end.
+       * @event end
+       */
+      emit('end')
+    }
+    function resetTextLivePosition(): void {
+      textLivePositionRequestAnimationFrame.value.stop()
+      textLivePosition.value = parseInt(textOffsetValues.value[0])
+      /**
+       * Emitted when the animation on the text is cancelled.
+       * @event cancel
+       */
+      emit('cancel')
+    }
+    return {
+      el,
+      isFading,
+      fadingLeftWidth,
+      fadingRightWidth,
+      textOffsetTransitionDuration,
+      textOffsetTransitionDelay,
+      textFinalOffset,
+      resetTextLivePosition
+    }
+  }
+})
+</script>
+
+<template>
+  <span
+    ref="el"
+    class="active-text-truncate"
+    :class="{
+      'active-text-truncate--fading': isFading,
+      [`active-text-truncate--${direction}`]: true
+    }"
+    :style="{
+      '--fading-left-width': fadingLeftWidth,
+      '--fading-right-width': fadingRightWidth,
+      '--text-offset-transition-duration': textOffsetTransitionDuration,
+      '--text-offset-transition-delay': textOffsetTransitionDelay,
+      '--text-final-offset': textFinalOffset
+    }"
+    @mouseleave="resetTextLivePosition"
+  >
+    <span class="active-text-truncate__wrapper">
+      <span class="active-text-truncate__wrapper__text">
+        <slot />
+      </span>
+    </span>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+@import '../styles/lib';
+@import '../styles/mixins';
+
+.active-text-truncate {
+  --fading-left-width: 0;
+  --fading-right-width: 0;
+  --fading-left-gradient: linear-gradient(to left, black calc(100% - var(--fading-left-width)), transparent 100%);
+  --fading-right-gradient: linear-gradient(to right, black calc(100% - var(--fading-right-width)), transparent 100%);
+  --text-offset-transition-duration: 0ms;
+  --text-offset-transition-delay: 0ms;
+  --text-final-offset: 0;
+
+  overflow: hidden;
+  max-width: 100%;
+  display: inline-block;
+  position: relative;
+
+  &:after {
+    content: attr(data-text-live-position);
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  &__wrapper {
+    width: 100%;
+    display: inline-block;
+
+    .active-text-truncate--fading & {
+      mask: var(--fading-right-gradient), var(--fading-left-gradient);
+      mask-composite: intersect;
+    }
+
+    .active-text-truncate--rtl.active-text-truncate--fading &:hover &__text,
+    .active-text-truncate--ltr.active-text-truncate--fading &:hover &__text {
+      transition: linear left var(--text-offset-transition-duration);
+      transition-delay: var(--text-offset-transition-delay);
+    }
+
+    .active-text-truncate--ltr.active-text-truncate--fading &:hover &__text {
+      left: var(--text-final-offset);
+    }
+
+    .active-text-truncate--rtl.active-text-truncate--fading &:hover &__text {
+      left: 0;
+    }
+
+    &__text {
+      white-space: nowrap;
+      position: relative;
+      left: 0;
+
+      .active-text-truncate--rtl & {
+        left: var(--text-final-offset);
+      }
+    }
+  }
+}
+</style>

package/lib/components/AdvancedLinkForm.vue

@@ -0,0 +1,273 @@
+<script lang="ts">
+import {computed, defineComponent, ref, Ref, toRef} from 'vue'
+import { BTabs, BTab, BInputGroup, BInputGroupAppend, BFormInput } from 'bootstrap-vue-next'
+
+import HapticCopy from './HapticCopy.vue'
+
+import {useI18n} from "vue-i18n";
+
+type AdvancedLinkedFormClassName = `${'advanced-link-form--'}${string}`
+interface AdvancedLinkedFormClasses {
+  [prop: AdvancedLinkedFormClassName]: boolean
+}
+
+interface TextRange {
+  moveToElementText: Function
+  select: Function
+}
+
+interface HTMLElementSupportingCreateRange extends HTMLElement {
+  createTextRange(): TextRange
+}
+
+/**
+ * A form with tabs to offer several copy formats to users.
+ */
+export default defineComponent({
+  name: 'AdvancedLinkForm',
+  components: {
+    BTabs,
+    BTab,
+    BInputGroup,
+    BInputGroupAppend,
+    BFormInput,
+    HapticCopy
+  },
+  props: {
+    /**
+     * The link to copy
+     */
+    link: {
+      type: String,
+      default: null
+    },
+    /**
+     * Title associated with the link
+     */
+    title: {
+      type: String,
+      default: null
+    },
+    /**
+     * The forms to display
+     */
+    forms: {
+      type: Array,
+      default: () => ['raw', 'markdown', 'rich', 'html']
+    },
+    /**
+     * Index of the selected tab
+     */
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Activate the card integration for the tabs
+     */
+    card: {
+      type: Boolean
+    },
+    /**
+     * Renders the tabs with the appearance of pill buttons
+     */
+    pills: {
+      type: Boolean
+    },
+    /**
+     * Makes the tabs and the panels smaller.
+     */
+    small: {
+      type: Boolean
+    },
+    /**
+     * Makes the tabs and the panels vertical.
+     */
+    vertical: {
+      type: Boolean
+    },
+    /**
+     * CSS class (or classes) to apply to the currently active tab.
+     */
+    activeNavItemClass: {
+      type: String,
+      default: null
+    },
+    /**
+     * When set to 'true', disables the fade animation on the tabs.
+     */
+    noFade: {
+      type: Boolean
+    }
+  },
+  emits:["update:modelValue"],
+  setup(props,{emit}) {
+    const { t } = useI18n()
+    const rawInput = ref<HTMLTextAreaElement| null>(null)
+    const richInput = ref<HTMLElement|null>(null)
+    const markdownInput = ref<HTMLTextAreaElement| null>(null)
+    const htmlInput = ref<HTMLTextAreaElement| null>(null)
+    const titleOrLink = computed(() => props.title || props.link);
+
+    const linkAsMarkdown = computed(() => `[${titleOrLink.value}](${props.link})`);
+
+    const linkAsHtml = computed(() => `<a href="${props.link}" target="_blank">${titleOrLink.value}</a>`);
+    const formClasses = computed(() => {
+      const propsToCheck = ['card', 'pills', 'small', 'vertical'];
+      return propsToCheck.reduce((classes, prop) => {
+        //@ts-ignore
+        classes[`advanced-link-form--${prop}`] = props[prop];
+        return classes;
+      }, {});
+    });
+
+    const size = computed(() => props.small ? 'sm' : 'md');
+
+    const showForm  = computed(() => {
+      return (name:string) => props.forms.indexOf(name) > -1
+    })
+
+    const selectInput = (target: Ref<HTMLElement|null>) => {
+      // if(!target.value){
+      //   throw new Error("no target")
+      // }
+      if (target.value instanceof HTMLTextAreaElement) {
+        target.value.select();
+      }
+    };
+
+    const selectRaw = () => selectInput(rawInput);
+
+    function selectRich() {
+      if (!richInput.value) return;
+
+      const selection = window.getSelection ? window.getSelection() : null;
+      if (selection) {
+        const range = document.createRange();
+        range.selectNodeContents(richInput.value);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      } else if ((document.body as HTMLElementSupportingCreateRange).createTextRange) {
+        const range = (document.body as HTMLElementSupportingCreateRange).createTextRange();
+        range.moveToElementText(richInput.value);
+        range.select();
+      }
+    }
+    function selectMarkdown() {
+      selectInput(markdownInput)
+    }
+
+    function selectHtml() {
+      selectInput(htmlInput)
+    }
+
+    return {
+      t,
+      titleOrLink,
+      linkAsMarkdown,
+      linkAsHtml,
+      formClasses,
+      size,
+      showForm,
+      selectRaw,
+      selectRich,
+      selectMarkdown,
+      selectHtml
+    };
+  }
+
+})
+</script>
+
+<template>
+  <b-tabs
+    class="advanced-link-form"
+    :content-class="card ? 'mt-0' : 'mt-3'"
+    :card="card"
+    :pills="pills"
+    :model-value="modelValue"
+    :small="small"
+    :vertical="vertical"
+    :active-nav-item-class="activeNavItemClass"
+    :no-fade="noFade"
+    :class="formClasses"
+    @update:model-value="$emit('update:modelValue')"
+  >
+    <b-tab v-if="showForm('raw')" :title="t('advanced-link-form.raw.tab')">
+      <div class="advanced-link-form__raw" :class="{ small }">
+        <b-input-group :size="size">
+          <b-form-input ref="rawInput" readonly :model-value="link" class="advanced-link-form__raw__input" @click="selectRaw" />
+          <b-input-group-append>
+            <haptic-copy class="btn-secondary" :text="link" @attempt="selectRaw" />
+          </b-input-group-append>
+        </b-input-group>
+      </div>
+    </b-tab>
+    <b-tab v-if="showForm('rich')" :title="t('advanced-link-form.rich.tab')">
+      <div class="advanced-link-form__rich" :class="{ small }">
+        <b-input-group :size="size">
+          <a ref="richInput" :href="link" class="form-control advanced-link-form__rich__input" @click.prevent="selectRich">{{
+            titleOrLink
+          }}</a>
+          <b-input-group-append>
+            <haptic-copy class="btn-secondary" html :text="linkAsHtml" :plain="link" @attempt="selectRich" />
+          </b-input-group-append>
+        </b-input-group>
+        <p class="text-muted mt-2 mb-0">
+          {{ t('advanced-link-form.rich.description') }}
+        </p>
+      </div>
+    </b-tab>
+    <b-tab v-if="showForm('markdown')" :title="t('advanced-link-form.markdown.tab')">
+      <div class="advanced-link-form__markdown" :class="{ small }">
+        <b-input-group :size="size">
+          <b-form-input
+            ref="markdownInput"
+            readonly
+            :model-value="linkAsMarkdown"
+            class="advanced-link-form__markdown__input"
+            @click="selectMarkdown"
+          />
+          <b-input-group-append>
+            <haptic-copy class="btn-secondary" :text="linkAsMarkdown" @attempt="selectMarkdown" />
+          </b-input-group-append>
+        </b-input-group>
+        <p class="text-muted mt-2 mb-0">
+          {{ t('advanced-link-form.markdown.description') }}
+        </p>
+      </div>
+    </b-tab>
+    <b-tab v-if="showForm('html')" :title="t('advanced-link-form.html.tab')">
+      <div class="advanced-link-form__html" :class="{ small }">
+        <b-input-group :size="size">
+          <b-form-input ref="htmlInput" readonly :modelValue="linkAsHtml" class="advanced-link-form__html__input" @click="selectHtml" />
+          <b-input-group-append>
+            <haptic-copy class="btn-secondary" :text="linkAsHtml" @attempt="selectHtml" />
+          </b-input-group-append>
+        </b-input-group>
+      </div>
+    </b-tab>
+  </b-tabs>
+</template>
+
+<style lang="scss" scoped>
+@import '../styles/lib';
+
+.advanced-link-form {
+  text-align: left;
+
+  &__raw__input[readonly],
+  &__markdown__input[readonly],
+  &__html__input[readonly] {
+    background: $input-bg;
+  }
+
+  &__rich__input {
+    text-align: center;
+    text-decoration: underline;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>

package/lib/components/Brand.vue

@@ -0,0 +1,150 @@
+<template>
+  <span class="brand" :style="style" :class="{ 'brand--animated': animated }">
+    <svg :width="width" :height="height" viewBox="0 0 147.151 200" xmlns="http://www.w3.org/2000/svg">
+      <path class="triangle" d="M101.997 200H45.155l28.42-46.427z" />
+      <path
+        class="globe"
+        d="M119.771 19.138C107.432 6.793 91.028 0 73.576 0S39.719 6.793 27.38 19.138C15.035 31.477 8.242 47.882 8.242 65.334c0 17.451 6.793 33.856 19.138 46.195 12.339 12.339 28.744 19.138 46.196 19.138 17.452 0 33.856-6.793 46.195-19.138C132.11 99.19 138.91 82.785 138.91 65.334c0-17.452-6.793-33.857-19.138-46.196zm3.397 23.028a54.35 54.35 0 0 1 4.863 17.86H108.79c-.262-6.173-.968-12.175-2.094-17.86h16.478zM112.266 26.65a54.792 54.792 0 0 1 4.346 4.894H103.98c-1.254-3.939-2.733-7.634-4.431-11.024a61.475 61.475 0 0 0-2.6-4.681c5.619 2.654 10.793 6.288 15.316 10.81zm-14.11 33.376H78.89v-17.86h16.965c1.241 5.6 2.02 11.614 2.3 17.86zm-8.109-34.758a63.605 63.605 0 0 1 2.71 6.276H78.89v-19.48c4.03 2.174 7.92 6.721 11.157 13.204zm-32.943 0c3.238-6.477 7.134-11.03 11.158-13.203v19.473H54.395a62.794 62.794 0 0 1 2.709-6.276zm11.158 16.898v17.86H48.996c.286-6.246 1.065-12.26 2.3-17.86zM34.886 26.65A54.905 54.905 0 0 1 50.2 15.833a59.443 59.443 0 0 0-2.6 4.68c-1.698 3.391-3.177 7.086-4.43 11.025H30.538a55.764 55.764 0 0 1 4.347-4.894zm5.57 15.516c-1.127 5.685-1.833 11.687-2.095 17.86H19.12a54.201 54.201 0 0 1 4.863-17.86h16.478ZM23.976 88.507a54.35 54.35 0 0 1-4.863-17.86h19.241c.262 6.173.968 12.181 2.094 17.86H23.971Zm10.902 15.517a54.793 54.793 0 0 1-4.346-4.894h12.631c1.254 3.938 2.733 7.633 4.432 11.023a61.476 61.476 0 0 0 2.599 4.681 54.569 54.569 0 0 1-15.316-10.816zm14.11-33.376h19.266v17.86H51.29c-1.241-5.6-2.02-11.615-2.3-17.86Zm8.109 34.757a63.605 63.605 0 0 1-2.71-6.275h13.867v19.472c-4.03-2.173-7.919-6.72-11.157-13.203zm32.943 0c-3.238 6.477-7.134 11.03-11.157 13.203V99.136H92.75a62.793 62.793 0 0 1-2.709 6.275zM78.884 88.507v-17.86h19.265c-.286 6.246-1.065 12.26-2.3 17.86zm33.376 15.517a54.759 54.759 0 0 1-15.316 10.81 59.444 59.444 0 0 0 2.6-4.68c1.698-3.391 3.177-7.086 4.43-11.024h12.632a55.763 55.763 0 0 1-4.346 4.894zm-5.57-15.517c1.126-5.685 1.832-11.687 2.094-17.86h19.241a54.201 54.201 0 0 1-4.863 17.86h-16.478z"
+        style="stroke-width: 0.608717"
+      />
+      <path
+        class="plate"
+        d="M 147.151 136.809 L 147.151 147.431 L 9.02755e-15 147.431 L 8.37714e-15 136.809 Z"
+        style="stroke-width: 0.608717"
+      />
+    </svg>
+  </span>
+</template>
+
+<script setup lang="ts">
+/**
+ * A component to create variations of ICIJ logo
+ */
+import {computed, ref} from 'vue';
+import isString from "lodash/isString";
+
+interface BrandProps {
+  /**
+   * Add a balancing effect to the globe
+   */
+  animated?: boolean;
+  /**
+   * Monochromatic logo's color
+   */
+  color?: string | null;
+  /**
+   * Logo's background color
+   */
+  background?: string | null;
+  /**
+   * Logo's size
+   */
+  size?: number | string;
+  /**
+   * Force the width of the logo to be the same as the height
+   */
+  square?: boolean;
+}
+
+interface BrandStyle {
+  '--monochrome-color': string | null;
+  color: string | null;
+  background: string | null;
+  width: string | number;
+}
+
+const props = withDefaults(defineProps<BrandProps>(),{
+  color: null,
+  background:null,
+  size: '70px'
+});
+const sizeAsNumber = ref(isString(props.size) ? parseInt(props.size) : props.size);
+
+const width = computed(() => `${(147.151 / 200) * sizeAsNumber.value}px`);
+const height = computed(() => `${sizeAsNumber.value}px`);
+
+const style = computed<BrandStyle>(() => {
+  const {square} = props;
+  const widthValue = square ? height.value : 'auto';
+
+  return {
+    '--monochrome-color': props.color,
+    color: props.color,
+    background: props.background,
+    width: widthValue,
+  };
+});
+</script>
+
+<style scoped lang="scss">
+@keyframes balancing-plate {
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(7deg);
+  }
+  50% {
+    transform: rotate(-7deg);
+  }
+  75% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes balancing-globe {
+  0% {
+    transform: rotate(0deg);
+  }
+  35% {
+    transform: rotate(7deg);
+  }
+  65% {
+    transform: rotate(-7deg);
+  }
+  85% {
+    transform: rotate(3deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    .triangle,
+    .globe {
+      fill: var(--monochrome-color, #ff0000);
+    }
+
+    .plate {
+      fill: var(--monochrome-color, #999999);
+    }
+  }
+
+  &--animated svg {
+    .plate {
+      animation: balancing-plate 5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+    }
+    .globe {
+      animation: balancing-globe 5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+    }
+
+    .plate,
+    .globe {
+      //noinspection CssInvalidPropertyValue
+      animation-direction: repeat;
+      transform: rotate(0deg);
+      transform-origin: bottom center;
+      transform-box: fill-box;
+    }
+  }
+}
+</style>