@icij/murmur-next 4.0.0

package/lib/components/SlideUpDown.vue

@@ -0,0 +1,131 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { CSSProperties } from 'vue'
+
+type StyleTransition = Pick<CSSProperties, 'overflow' | 'transition-property' | 'transition-duration' | 'height'>
+const STATE = {
+  PRE: 'pre',
+  ACTIVE: 'active',
+  POST: 'post'
+}
+interface SlideUpDownData {
+  state: string
+  mounted: boolean
+  scrollHeight: number
+}
+/**
+ * SlideUpDown
+ */
+export default defineComponent({
+  name: 'SlideUpDown',
+  props: {
+    /**
+     * Toggler property. Set to <em>false</em> to hide the component.
+     */
+    active: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Duration of the animation.
+     */
+    duration: {
+      type: Number,
+      default: 200
+    },
+    /**
+     * HTML tag to render this component to.
+     */
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  data(): SlideUpDownData {
+    return {
+      state: STATE.POST,
+      mounted: false,
+      scrollHeight: 0
+    }
+  },
+  computed: {
+    stylePreTransition(): StyleTransition {
+      return {
+        overflow: 'hidden',
+        'transition-property': 'height',
+        'transition-duration': `${this.duration}ms`,
+        height: this.mounted ? `${this.containerScrollHeight}px` : 0
+      }
+    },
+    styleActiveTransition(): StyleTransition {
+      return {
+        overflow: 'hidden',
+        'transition-property': 'height',
+        'transition-duration': `${this.duration}ms`,
+        height: this.mounted ? `${this.activeHeight}px` : 'auto'
+      }
+    },
+    stylePostTransition(): StyleTransition {
+      // Reset style when the element is active
+      return this.active ? {} : this.styleActiveTransition
+    },
+    style(): StyleTransition {
+      switch (this.state) {
+        case STATE.PRE:
+          return this.stylePreTransition
+        case STATE.ACTIVE:
+          return this.styleActiveTransition
+        default:
+          return this.stylePostTransition
+      }
+    },
+    activeHeight(): number {
+      return this.active ? this.containerScrollHeight : 0
+    },
+    containerScrollHeight(): number {
+      return this.$container?.scrollHeight ?? 0
+    },
+    $container(): HTMLElement | undefined {
+      return this.$refs.container as HTMLElement | undefined
+    }
+  },
+  watch: {
+    active(): Promise<void> {
+      return this.triggerSlide()
+    }
+  },
+  async mounted() {
+    await this.deferredNextTick()
+    this.mounted = true
+    await this.cleanLayout(null)
+    this.$container?.addEventListener('transitionend', (e) => this.cleanLayout(e))
+  },
+  methods: {
+    async triggerSlide(): Promise<void> {
+      this.state = STATE.PRE
+      this.scrollHeight = this.containerScrollHeight
+      // Deferred next tick to let the component render once
+      await this.deferredNextTick()
+      this.state = STATE.ACTIVE
+    },
+    cleanLayout(e: Event | null) {
+      // This method can be triggered by animated child elements in
+      // which case, we should do anything
+      if (!e || e.target === this.$container) {
+        this.state = STATE.POST
+        return this.deferredNextTick()
+      }
+    },
+    async deferredNextTick() {
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      await this.$nextTick()
+    }
+  }
+})
+</script>
+
+<template>
+  <component :is="tag" ref="container" :style="style">
+    <slot />
+  </component>
+</template>

package/lib/components/TexturedDeck.vue

@@ -0,0 +1,101 @@
+<script lang="ts">
+import { clamp } from 'lodash'
+import {computed, defineComponent, PropType} from 'vue'
+
+import { DeckTexture } from '@/enums'
+import config from '@/config'
+
+type TexturedDeckValue = DeckTexture | number
+
+export default defineComponent({
+  name: 'TexturedDeck',
+  props: {
+    /**
+     * Name of the texture file ('silk', 'brick', 'rock', 'sand', 'crack', 'carbon')
+     */
+    modelValue: {
+      type: String as PropType<TexturedDeckValue>,
+      default: DeckTexture.Brick
+    },
+    /**
+     * CSS background-size property (cover, contain, auto, 50%, 50% auto, ...)
+     */
+    size: {
+      type: String,
+      default: 'cover'
+    },
+    /**
+     * Tag/Component to use as root tag.
+     */
+    tag: {
+      type: [String, Object],
+      default: 'div'
+    },
+    /**
+     * Either or note we should use the black version of the texture
+     */
+    black: {
+      type: Boolean,
+      default:false
+    },
+    /**
+     * Host where to find the textures (without tailing slash)
+     */
+    backgroundBaseUrl: {
+      type: String,
+      default: () => config.get('textured-deck.background-base-url', window.location.origin)
+    }
+  },
+  setup(props, {attrs}) {
+    const names = computed((): DeckTexture[] =>{
+      return Object.values(DeckTexture)
+    })
+    const textureIndex = computed((): number =>{
+      if (typeof props.modelValue !== 'number') {
+        return clamp(names.value.indexOf(props.modelValue), 0, names.value.length - 1)
+      }
+      return props.modelValue
+    })
+    const textureName = computed((): string =>{
+      return names.value[textureIndex.value]
+    })
+    const filename = computed((): string =>{
+      if (props.black) {
+        return `texture-${textureName.value}-black.jpg`
+      }
+      return `texture-${textureName.value}.jpg`
+    })
+    const backgroundUrl = computed((): string =>{
+      return `${props.backgroundBaseUrl}/assets/img/${filename.value}`
+    })
+    const backgroundSize = computed((): string =>{
+      return props.size
+    })
+    const backgroundImage = computed((): string =>{
+      return `url("${backgroundUrl.value}")`
+    })
+    const inheritedProps = computed((): object =>{
+      return { ...attrs, ...props, tag: undefined }
+    })
+    return {
+      backgroundSize,
+      backgroundImage,
+      inheritedProps
+    }
+  }
+})
+</script>
+
+<template>
+  <component :is="tag" :style="{ backgroundSize, backgroundImage }" v-bind="inheritedProps" class="textured-deck">
+    <slot />
+  </component>
+</template>
+
+<style lang="scss" scoped>
+.textured-deck {
+  background: #000 no-repeat center center;
+  background-size: cover;
+  color: #fff;
+}
+</style>

package/lib/components/TinyPagination.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="tiny-pagination" :class="paginationClassList">
+    <b-button
+      class="tiny-pagination__nav"
+      :size="size"
+      :disabled="!hasPrevious"
+      :variant="navVariant"
+      @click="applyPreviousPage"
+    >
+      <!-- @slot Previous button content -->
+      <slot name="previous" v-bind="{ modelValue, numberOfPages, hasPrevious, hasNext }">
+        <fa :icon="previousPageIcon" />
+        <span class="sr-only">{{ t('tiny-pagination.previous') }}</span>
+      </slot>
+    </b-button>
+    <form class="tiny-pagination__form form-inline" @submit.prevent="applyPageForm">
+      <label v-show="!compact" class="tiny-pagination__form__label me-1 mb-0">
+        <!-- @slot Display page label -->
+        <slot name="page" v-bind="{ modelValue, numberOfPages }">
+          {{ t('tiny-pagination.page') }}
+        </slot>
+      </label>
+      <b-form-input
+        v-model="currentPageInput"
+        :size="size"
+        class="tiny-pagination__form__input me-1"
+        type="number"
+        step="1"
+        :min="1"
+        :max="numberOfPages"
+        :aria-label="t('tiny-pagination.aria')"
+      />
+      <!-- @slot Display number of pages -->
+      <slot name="number-of-pages" v-bind="{ modelValue, numberOfPages }">
+        {{ t('tiny-pagination.total', { numberOfPages }) }}
+      </slot>
+    </form>
+    <b-button
+      class="tiny-pagination__nav"
+      :size="size"
+      :disabled="!hasNext"
+      :variant="navVariant"
+      @click="applyNextPage"
+    >
+      <!-- @slot Next button content -->
+      <slot name="next" v-bind="{ modelValue, numberOfPages, hasPrevious, hasNext }">
+        <fa :icon="nextPageIcon" />
+        <span class="sr-only">{{ t('tiny-pagination.next') }}</span>
+      </slot>
+    </b-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
+import { defineComponent, PropType, ref, computed, watch, onBeforeMount } from 'vue'
+import {useI18n} from "vue-i18n";
+
+import { library, default as Fa } from './Fa'
+
+import { Size } from '@/enums'
+import { ButtonVariant, BFormInput, BButton } from 'bootstrap-vue-next'
+
+export default defineComponent({
+  name: 'TinyPagination',
+  components: {
+    Fa,
+    BFormInput,
+    BButton
+  },
+  props: {
+    /**
+     * Total items to be stored in pages
+     */
+    totalRows: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Sets the quantity of items per page
+     */
+    perPage: {
+      type: Number,
+      default: 20
+    },
+    /**
+     * Grabs and syncs the currentPage variable passed down from the parent in v-model
+     */
+    modelValue: {
+      type: [Number, String],
+      default: 1
+    },
+    /**
+     * Set the size of the input: 'sm', 'md' (default), or 'lg'.
+     */
+    size: {
+      type: String as PropType<Size>,
+      default: Size.md,
+      validator: (value: Size) => Object.values(Size).includes(value)
+    },
+    /**
+     * (Optional) Number of page. Property `size` is required for this to work
+     * properly. If `pages` is empty, it will be calculated using the size.
+     */
+    pages: {
+      type: [Number, String],
+      default: null
+    },
+    /**
+     * Hide navigation buttons (next and previous)
+     */
+    noNav: {
+      type: Boolean
+    },
+    /**
+     * FontAwesome icon of the previous page button
+     */
+    previousPageIcon: {
+      type: [String, Array, Object],
+      default: 'angle-left'
+    },
+    /**
+     * FontAwesome icon of the next page button
+     */
+    nextPageIcon: {
+      type: [String, Array, Object],
+      default: 'angle-right'
+    },
+    /**
+     * Navigation button variants
+     */
+    navVariant: {
+      type: String as PropType<ButtonVariant>,
+      default: 'link'
+    },
+    /**
+     * Display pagination as a block (full width)
+     */
+    block: {
+      type: Boolean
+    },
+    /**
+     * Compact mode with a grouped nav
+     */
+    compact: {
+      type: Boolean
+    }
+  },
+  emits:['update:modelValue'],
+  setup(props,{emit}) {
+
+    onBeforeMount(()=> {
+      library.add(faAngleLeft, faAngleRight)
+    })
+
+    const { t } = useI18n()
+    const pageValue = computed(()=>{return +props.modelValue})
+    const currentPageInput = ref<number|string>(pageValue.value)
+    const numberOfPages = computed((): number =>{
+      if (props.pages === null) {
+        return Math.ceil(props.totalRows / props.perPage)
+      }
+      return Number(props.pages)
+    })
+    const paginationClassList = computed((): object =>{
+      return {
+        [`tiny-pagination--${props.size}`]: true,
+        [`tiny-pagination--no-nav`]: props.noNav,
+        [`tiny-pagination--block`]: props.block,
+        [`tiny-pagination--compact`]: props.compact
+      }
+    })
+    const hasPrevious = computed((): boolean =>{
+      return pageValue.value > 1
+    })
+    const hasNext = computed((): boolean =>{
+      return pageValue.value < numberOfPages.value
+    })
+    function applyPageForm(): void {
+      if (!isNaN(currentPageInput.value as number)) {
+        emit('update:modelValue', +currentPageInput.value)
+      }
+    }
+
+    function   applyNextPage(): void {
+      emit('update:modelValue', pageValue.value - 1)
+    }
+    function applyPreviousPage(): void {
+      emit('update:modelValue', pageValue.value + 1)
+    }
+    return {
+      t,
+      currentPageInput,
+      paginationClassList,
+      numberOfPages,
+      hasPrevious,
+      hasNext,
+      applyPreviousPage,
+      applyNextPage,
+      applyPageForm
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/lib';
+
+.tiny-pagination {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  &--block {
+    display: flex;
+  }
+
+  &--sm {
+    font-size: $font-size-sm;
+  }
+
+  &--lg {
+    font-size: $font-size-lg;
+  }
+
+  &--no-nav &__nav {
+    display: none;
+  }
+
+  &--no-nav &__form {
+    margin: 0;
+  }
+
+  &--compact &__nav {
+    order: 0;
+  }
+
+  &--compact &__form {
+    order: 10;
+  }
+
+  &__form {
+    margin: 0 $spacer * 0.25;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &__input {
+      max-width: 2.5rem;
+      padding-left: 0.2rem;
+      padding-right: 0.2rem;
+      text-align: center;
+
+      &[type='number'] {
+        -moz-appearance: textfield;
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+</style>

package/lib/components/index.js

@@ -0,0 +1,31 @@
+export { default as AccordionWrapper } from './AccordionWrapper.vue'
+export { default as AccordionStep } from './AccordionStep.vue'
+export { default as ActiveTextTruncate } from './ActiveTextTruncate.vue'
+export { default as AdvancedLinkForm } from './AdvancedLinkForm.vue'
+export { default as BrandExpansion } from './BrandExpansion.vue'
+export { default as Brand } from './Brand.vue'
+export { default as ConfirmButton } from './ConfirmButton.vue'
+export { default as ContentPlaceholder } from './ContentPlaceholder.vue'
+export { default as CustomPagination } from './CustomPagination.vue'
+export { default as DigitsInput } from './DigitsInput.vue'
+export { default as DonateForm } from './DonateForm.vue'
+export { default as EmbeddableFooter } from './EmbeddableFooter.vue'
+export { default as EmbedForm } from './EmbedForm.vue'
+export { default as FollowUsPopover } from './FollowUsPopover.vue'
+export { default as Fa } from './Fa'
+export { default as GenericFooter } from './GenericFooter.vue'
+export { default as GenericHeader } from './GenericHeader.vue'
+export { default as HapticCopy } from './HapticCopy.vue'
+export { default as ImddbHeader } from './ImddbHeader.vue'
+export { default as OrdinalLegend } from './OrdinalLegend.vue'
+export { default as RangePicker } from './RangePicker.vue'
+export { default as ResponsiveIframe } from './ResponsiveIframe.vue'
+export { default as ScaleLegend } from './ScaleLegend.vue'
+export { default as SelectableDropdown } from './SelectableDropdown.vue'
+export { default as SecretInput } from './SecretInput.vue'
+export { default as SharingOptions } from './SharingOptions.vue'
+export { default as SharingOptionsLink } from './SharingOptionsLink.vue'
+export { default as SignUpForm } from './SignUpForm.vue'
+export { default as SlideUpDown } from './SlideUpDown.vue'
+export { default as TexturedDeck } from './TexturedDeck.vue'
+export { default as TinyPagination } from './TinyPagination.vue'

package/lib/composables/chart.ts

@@ -0,0 +1,182 @@
+import * as d3 from 'd3'
+import isFunction from 'lodash/isFunction'
+import isObject from 'lodash/isObject'
+import isString from 'lodash/isString'
+import max from 'lodash/max'
+import some from 'lodash/some'
+import {ComponentPublicInstance, computed, onMounted, ref, watch} from 'vue'
+import {isUrl} from '@/utils/strings'
+import { Ref, SetupContext} from "@vue/runtime-core";
+import useResizeObserver from "@/composables/resizeObserver";
+import { watchEffect } from 'vue'
+
+
+type ChartContext<T extends string[]> = SetupContext<[...T, ...string[]]>;
+type ChartEmit = Pick<ChartContext<["resized", "loaded"]>, 'emit'>
+type ChartProps = {
+    chartHeightRatio: { type: NumberConstructor },
+    data: {
+        default: () => any[] | string,
+        validator(value: string): boolean,
+        type: (ArrayConstructor | StringConstructor | ObjectConstructor)[]
+    },
+    dataUrlType: { default: string, validator(value: string): boolean, type: StringConstructor },
+    socialMode: { type: BooleanConstructor },
+    socialModeRatio:
+        { default: number, type: NumberConstructor }
+};
+
+export function getChartProps(props: any): ChartProps {
+    return {
+        chartHeightRatio: props.chartHeightRatio,
+        data: props.data,
+        dataUrlType: props.dataUrlType,
+        socialMode: props.socialMode,
+        socialModeRatio: props.socialModeRatio,
+    }
+}
+
+export const chartProps = (): ChartProps => ({
+    data: {
+        type: [Array, String, Object],
+        default: () => [],
+        validator(value: string) {
+            return isObject(value) || (isString(value) && isUrl(value))
+        }
+    },
+    /**
+     * Format of the data to load.
+     */
+    dataUrlType: {
+        type: String,
+        default: 'json',
+        validator(value: string) {
+            return ['json', 'csv', 'tsv'].indexOf(value) > -1
+        }
+    },
+    /**
+     * When applicable, default chart's height ratio
+     */
+    chartHeightRatio: {
+        type: Number
+    },
+    /**
+     * If true, the chart will be display on social mode
+     */
+    socialMode: {
+        type: Boolean
+    },
+    /**
+     * Ratio to use in social mode
+     */
+    socialModeRatio: {
+        type: Number,
+        default: 5 / 4
+    }
+})
+export const chartEmits = ["resized", "loaded"]
+type Chart =  {
+    dataHasHighlights: any;
+    loadedData: any;
+    xAxisYearFormat: (year: (number | string)) => number | string;
+    elementsMaxBBox: ({selector, defaultWidth, defaultHeight}?: {
+        selector?: any;
+        defaultWidth?: any;
+        defaultHeight?: any
+    }) => ({ width: any; height: any });
+    d3Formatter: any;
+    baseHeightRatio: any
+}
+export function useChart(resizableRef: Ref<ComponentPublicInstance<HTMLElement> | null>, props: ChartProps, {emit}: ChartEmit, isLoaded:Ref<boolean>, onResized?:Function, afterLoaded?:()=>Promise<any>): Chart {
+    const  { resizeRef , resizeState } = useResizeObserver(resizableRef)
+    const loadedData = ref([])
+
+    onMounted(async () => {
+        await document.fonts?.ready
+
+        watchEffect(async ()=>{
+            if(!isLoaded.value){
+
+                if (isString(props.data)) {
+                    // @ts-ignore
+                    loadedData.value = await d3[props.dataUrlType](props.data)
+                } else {
+                    loadedData.value = props.data as unknown as []
+                }
+
+                if(afterLoaded){
+                    await afterLoaded()
+                }
+                isLoaded.value = true
+                emit('loaded')
+            }
+
+             if(isLoaded.value && onResized){
+                onResized()
+                emit('resized')
+             }
+        })
+
+
+    })
+    function elementsMaxBBox({selector = 'text', defaultWidth = null, defaultHeight = null} = {}) {
+
+        const elements = isLoaded.value? resizeRef.value?.querySelectorAll(selector) : []
+        if (elements.length == 0) {
+            return {width: defaultWidth, height: defaultHeight}
+        }
+        const width = max(
+            [...elements].map((l) => {
+                return l.getBBox ? l.getBBox().width : defaultWidth
+            })
+        )
+        const height = max(
+            [...elements].map((l) => {
+                return l.getBBox ? l.getBBox().height : defaultHeight
+            })
+        )
+        return {width, height}
+    }
+
+    function xAxisYearFormat(year: number | string) {
+        // previously using narrowWidth but it is automatically updated through resizeObserver state reactivity
+        return resizeState.narrowWidth ? '’' + String(year).slice(2, 4) : year
+    }
+    function highlighted(datum: { highlight: boolean }) {
+        return datum.highlight
+    }
+    function d3Formatter(value:any,formatter:any)  {
+        if (isFunction(formatter)) {
+            return formatter(value)
+        } else if (isString(formatter)) {
+            return d3.format(formatter)(value)
+        }
+        return value
+    }
+    const baseHeightRatio = computed(() => {
+        return props.chartHeightRatio || (props.socialMode ? props.socialModeRatio : 9 / 16)
+    })
+    const dataHasHighlights = computed(() => {
+        if (Array.isArray(props.data)) {
+            return some(props.data, highlighted)
+        }
+        return false
+    })
+
+    watch(resizeState.dimensions, () => {
+        if(isLoaded.value && onResized){
+            onResized()
+            emit('resized')
+        }
+    })
+
+
+    return {
+        loadedData,
+        elementsMaxBBox,
+        xAxisYearFormat,
+        d3Formatter,
+        baseHeightRatio,
+        dataHasHighlights,
+    }
+}