@icij/murmur-next 4.0.0 → 4.0.3

package/lib/components/ImddbHeader.vue

@@ -1,55 +1,46 @@
 <template>
-    <component
-      :is="rootElement"
-      id="imddb-header"
-      data-turbolinks-permanent
-      class="navbar navbar-expand-lg imddb-header"
-      :offset="100"
-      :z-index="1020"
-      :on-unpin="closeFollowUsPopover"
-      :class="{ 'headroom--frozen': !collapseNavbar }"
-      :style="{ position: position }"
+  <component
+    :is="rootElement"
+    id="imddb-header"
+    data-turbolinks-permanent
+    class="navbar navbar-expand-lg imddb-header"
+    :offset="100"
+    :z-index="1020"
+    :on-unpin="closeFollowUsPopover"
+    :class="{ 'headroom--frozen': !collapseNavbar }"
+    :style="{ position: position }"
+  >
+    <!-- @slot Redefines brand -->
+    <slot name="brand">
+      <a :href="homeUrl" class="navbar-brand imddb-header__brand">
+        <img
+          alt="ICIJ logo"
+          class="me-3"
+          height="25"
+          src="../assets/images/icij@2x.png"
+        />
+        {{ project }}
+      </a>
+    </slot>
+    <button
+      class="navbar-toggler"
+      type="button"
+      aria-label="Toggle navigation"
+      @click="toggleNavbar"
     >
-      <!-- @slot Redefines brand -->
-      <slot name="brand">
-        <a :href="homeUrl" class="navbar-brand imddb-header__brand ">
-          <img alt="ICIJ logo" class="me-3" height="25" src="../assets/images/icij@2x.png"/>
-          {{ project }}
-        </a>
-      </slot>
-      <button class="navbar-toggler" type="button" aria-label="Toggle navigation" @click="toggleNavbar">
-        <span class="navbar-toggler-icon" />
-      </button>
-      <div class="navbar-collapse" :class="{ collapse: collapseNavbar }">
-        <div class="imddb-header__site-switch me-auto">
-          <!-- @slot Redefines the main navbar block (containing the dropdown) -->
-          <slot name="navbar">
-            <ul class="navbar-nav">
-              <b-nav-item-dropdown @show="hidePopover">
-                <template v-slot:button-content>
-                  {{ title }}
-                </template>
-                <b-dropdown-item
-                  v-for="(item, $index) in dropdownItems"
-                  v-bind="{ active: !!item.active }"
-                  :key="$index"
-                  :href="item.href"
-                >
-                  {{ item.label }}
-                </b-dropdown-item>
-              </b-nav-item-dropdown>
-            </ul>
-          </slot>
-        </div>
-        <ul class="navbar-nav">
-          <li v-if="hasLanguagesDropdown" class="nav-item">
+      <span class="navbar-toggler-icon" />
+    </button>
+    <div class="navbar-collapse" :class="{ collapse: collapseNavbar }">
+      <div class="imddb-header__site-switch me-auto">
+        <!-- @slot Redefines the main navbar block (containing the dropdown) -->
+        <slot name="navbar">
+          <ul class="navbar-nav">
             <b-nav-item-dropdown @show="hidePopover">
               <template v-slot:button-content>
-                <fa icon="globe" />
-                {{ currentLanguage }}
+                {{ title }}
               </template>
               <b-dropdown-item
-                v-for="(item, $index) in languages"
+                v-for="(item, $index) in dropdownItems"
                 v-bind="{ active: !!item.active }"
                 :key="$index"
                 :href="item.href"
@@ -57,37 +48,62 @@
                 {{ item.label }}
               </b-dropdown-item>
             </b-nav-item-dropdown>
-          </li>
-          <li class="nav-item">
-            <a href="https://www.icij.org/leak/" target="_blank" class="nav-link">
-              {{ t('imddb-header.navbar.leak') }}
-            </a>
-          </li>
-          <li class="nav-item me-lg-3">
-            <slot name="donate-link">
-              <a target="_blank" :href="donateUrl" class="nav-link">
-                {{ t('imddb-header.navbar.support') }}
-              </a>
-            </slot>
-          </li>
-          <li class="nav-item">
-            <button id="follow-icij" class="btn btn-primary btn-block fw-bold" @mouseenter="showFollowUsPopover=true">
-              {{ t('imddb-header.navbar.follow') }}
-            </button>
-            <b-popover
-                v-model="showFollowUsPopover"
-              target="follow-icij"
-              ref="followUsPopover"
-              placement="bottom-start"
-              click
-
-            >
-              <follow-us-popover @update:close="closeFollowUsPopover" @keydown.esc="closeFollowUsPopover" />
-            </b-popover>
-          </li>
-        </ul>
+          </ul>
+        </slot>
       </div>
-    </component>
+      <ul class="navbar-nav">
+        <li v-if="hasLanguagesDropdown" class="nav-item">
+          <b-nav-item-dropdown @show="hidePopover">
+            <template v-slot:button-content>
+              <fa icon="globe" />
+              {{ currentLanguage }}
+            </template>
+            <b-dropdown-item
+              v-for="(item, $index) in languages"
+              v-bind="{ active: !!item.active }"
+              :key="$index"
+              :href="item.href"
+            >
+              {{ item.label }}
+            </b-dropdown-item>
+          </b-nav-item-dropdown>
+        </li>
+        <li class="nav-item">
+          <a href="https://www.icij.org/leak/" target="_blank" class="nav-link">
+            {{ t('imddb-header.navbar.leak') }}
+          </a>
+        </li>
+        <li class="nav-item me-lg-3">
+          <slot name="donate-link">
+            <a target="_blank" :href="donateUrl" class="nav-link">
+              {{ t('imddb-header.navbar.support') }}
+            </a>
+          </slot>
+        </li>
+        <li class="nav-item">
+          <button
+            id="follow-icij"
+            class="btn btn-primary btn-block fw-bold"
+            @mouseenter="showFollowUsPopover = true"
+          >
+            {{ t('imddb-header.navbar.follow') }}
+          </button>
+          <b-popover
+            v-model="showFollowUsPopover"
+            target="follow-icij"
+            ref="followUsPopover"
+            placement="bottom-start"
+            click
+          >
+            <follow-us-popover
+              @update:close="closeFollowUsPopover"
+              @keydown.esc="closeFollowUsPopover"
+            />
+          </b-popover>
+        </li>
+      </ul>
+    </div>
+  </component>
 </template>
 
 <script lang="ts">
@@ -109,8 +125,12 @@ import {
   onBeforeMount
 } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { BDropdownItem, BModal, BNavItemDropdown, BPopover } from 'bootstrap-vue-next'
-
+import {
+  BDropdownItem,
+  BModal,
+  BNavItemDropdown,
+  BPopover
+} from 'bootstrap-vue-next'
 
 type CssPosition = 'absolute' | 'relative' | 'fixed' | 'static'
 type ImddHeaderItem = { label: string; href: string; active: boolean }
@@ -183,39 +203,41 @@ export default defineComponent({
       default: () => config.get('app.donate-url')
     }
   },
-  setup(props){
-    const { t }= useI18n()
-    const followUsPopover = ref<ComponentPublicInstance<typeof BPopover>|null>(null)
+  setup(props) {
+    const { t } = useI18n()
+    const followUsPopover = ref<ComponentPublicInstance<
+      typeof BPopover
+    > | null>(null)
     const showFollowUsPopover = ref(false)
     const collapseNavbar = ref(true)
     const languages = ref<ImddHeaderItem[]>([])
-    const root = ref<ComponentPublicInstance|null>(null)
-    const rootElement = computed((): string=> {
+    const root = ref<ComponentPublicInstance | null>(null)
+    const rootElement = computed((): string => {
       return props.noHeadroom ? 'div' : 'headroom'
     })
-    const hasLanguagesDropdown = computed((): boolean=> {
+    const hasLanguagesDropdown = computed((): boolean => {
       return !!languages.value?.length
     })
-    const currentLanguage = computed((): string=> {
+    const currentLanguage = computed((): string => {
       return get(find(languages.value, { active: true }), 'label', 'Language')
     })
-    onBeforeMount(()=>{
+    onBeforeMount(() => {
       library.add(faGlobe)
     })
-    onMounted(()=>{
+    onMounted(() => {
       languages.value = config.get('imddb-header.languages.items')
     })
     function closeFollowUsPopover() {
-      if(followUsPopover.value?.hide){
+      if (followUsPopover.value?.hide) {
         followUsPopover.value?.hide(new Event('forceHide'))
       }
-      showFollowUsPopover.value=false
+      showFollowUsPopover.value = false
     }
-    function hidePopover(){
+    function hidePopover() {
       root.value?.$emit('bv::hide::popover')
       closeFollowUsPopover()
     }
-    function hideDropdown(){
+    function hideDropdown() {
       root.value?.$emit('bv::hide::dropdown')
     }
     function toggleNavbar(): void {
@@ -255,7 +277,6 @@ export default defineComponent({
   display: flex;
   padding: 0px;
 
-
   .popover {
     width: 100%;
   }

package/lib/components/OrdinalLegend.vue

@@ -33,34 +33,40 @@ export default defineComponent({
       default: null
     }
   },
-  emits:['update','update:highlight'],
-  setup(props,{emit}){
-    const markerBoundingClientRect = computed((): DOMRect | undefined=> {
-      const svg = d3.select('body').append('svg').attr('width', 2046).attr('height', 2046)
+  emits: ['update', 'update:highlight'],
+  setup(props, { emit }) {
+    const markerBoundingClientRect = computed((): DOMRect | undefined => {
+      const svg = d3
+        .select('body')
+        .append('svg')
+        .attr('width', 2046)
+        .attr('height', 2046)
       const marker = svg.append('path').attr('d', markerPathFunction())
       const rect: DOMRect | undefined = marker.node()?.getBoundingClientRect()
       svg.remove()
       return rect
     })
 
-    const markerViewbox = computed(()=> {
-          const { width, height } = markerBoundingClientRect.value ?? { width: 0, height: 0 }
-          return `0 0 ${width} ${height}`
+    const markerViewbox = computed(() => {
+      const { width, height } = markerBoundingClientRect.value ?? {
+        width: 0,
+        height: 0
+      }
+      return `0 0 ${width} ${height}`
     })
-    const classList = computed(()=> {
+    const classList = computed(() => {
       return {
         'ordinal-legend--horizontal': props.horizontal,
         'ordinal-legend--has-highlight': props.highlight !== null,
         'ordinal-legend--has-value': props.value !== null
       }
     })
-    const dataWithIds = computed(()=> {
-          return props.data.map((d: any): { [key: string]: string } => {
-            const id = uniqueId()
-            return { [props.categoryObjectsPath]: id, ...d }
-          })
-        }
-    )
+    const dataWithIds = computed(() => {
+      return props.data.map((d: any): { [key: string]: string } => {
+        const id = uniqueId()
+        return { [props.categoryObjectsPath]: id, ...d }
+      })
+    })
     function itemClassList(d: { [key: string]: string }) {
       const id = d[props.categoryObjectsPath]
       return {
@@ -70,7 +76,9 @@ export default defineComponent({
       }
     }
     function markerPathFunction(d?: Datum): string {
-      return isFunction(props.markerPath) && d ? props.markerPath(d) : props.markerPath
+      return isFunction(props.markerPath) && d
+        ? props.markerPath(d)
+        : props.markerPath
     }
     function update(d: Datum) {
       /**
@@ -102,12 +110,25 @@ export default defineComponent({
 
 <template>
   <ul class="ordinal-legend list-unstyled" :class="classList">
-    <li v-for="d in data" :key="d[categoryObjectsPath]" class="ordinal-legend__item" :class="itemClassList(d)">
-      <a @click="update(d)" @mouseover="updateHighlight(d)" @mouseleave="updateHighlight()">
+    <li
+      v-for="d in data"
+      :key="d[categoryObjectsPath]"
+      class="ordinal-legend__item"
+      :class="itemClassList(d)"
+    >
+      <a
+        @click="update(d)"
+        @mouseover="updateHighlight(d)"
+        @mouseleave="updateHighlight()"
+      >
         <span class="ordinal-legend__item__marker me-1">
           <slot name="marker" :marker="{ path: d.path, color: d.color }">
             <svg :viewBox="markerViewbox">
-              <path :d="markerPathFunction(d)" :fill="d.color" class="ordinal-legend__item__marker__path" />
+              <path
+                :d="markerPathFunction(d)"
+                :fill="d.color"
+                class="ordinal-legend__item__marker__path"
+              />
             </svg>
           </slot>
         </span>
@@ -127,7 +148,9 @@ export default defineComponent({
 .ordinal-legend {
   $muted-item-opacity: 0.2;
   $muted-item-filter: grayscale(30%) brightness(10%);
-  $muted-item-transition: opacity 0.2s, filter 0.2s;
+  $muted-item-transition:
+    opacity 0.2s,
+    filter 0.2s;
 
   font-size: $font-size-sm;
 

package/lib/components/RangePicker.vue

@@ -1,5 +1,15 @@
 <script lang="ts">
-import {defineComponent, VNode, DirectiveBinding, PropType, ref, watch, computed, onBeforeMount, toRef} from 'vue'
+import {
+  defineComponent,
+  VNode,
+  DirectiveBinding,
+  PropType,
+  ref,
+  watch,
+  computed,
+  onBeforeMount,
+  toRef
+} from 'vue'
 import { faGripLinesVertical } from '@fortawesome/free-solid-svg-icons/faGripLinesVertical'
 import { clamp, get, has, invoke, round } from 'lodash'
 
@@ -17,14 +27,19 @@ export default defineComponent({
   },
   directives: {
     draggable: {
-
       mounted(el: HTMLElement, binding: DirectiveBinding, vnode: VNode): void {
         let startX: number, initialClientX: number
         const relative = binding.modifiers?.relative ?? false
 
         // Emit an event to the parent component
-        function emitEvent({ name, data = null }: { name: string; data?: any }) {
-          vnode.el.dispatchEvent(new CustomEvent(name,{detail: data}))
+        function emitEvent({
+          name,
+          data = null
+        }: {
+          name: string
+          data?: any
+        }) {
+          vnode.el.dispatchEvent(new CustomEvent(name, { detail: data }))
           //const handlers = get(vnode, 'data.on') ?? get(vnode, 'componentOptions.listeners')
           /*if (has(handlers, name)) {
             invoke(handlers, `${name}.fns`, data)
@@ -33,7 +48,10 @@ export default defineComponent({
 
         // Handle the dragging of the element
         function move(event: MouseEvent | TouchEvent) {
-          const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX
+          const clientX =
+            event instanceof MouseEvent
+              ? event.clientX
+              : event.touches[0].clientX
           const offset = relative ? el.offsetWidth : 0
           const maxX = binding.instance?.rangeWidth() - offset
           const data = clamp(startX + clientX - initialClientX, 0, maxX)
@@ -81,7 +99,7 @@ export default defineComponent({
      * indicating the start and end of the range.
      */
     range: {
-      type: Array as unknown as PropType<[number,number]>,
+      type: Array as unknown as PropType<[number, number]>,
       required: true
     },
     /**
@@ -89,14 +107,14 @@ export default defineComponent({
      */
     hover: {
       type: Boolean as PropType<boolean>,
-      default:false
+      default: false
     },
     /**
      * Offset from the left side of the component
      * where the dragging for the start value begins.
      */
     startOffset: {
-      type: [Number,String] as PropType<number|string>,
+      type: [Number, String] as PropType<number | string>,
       default: 0
     },
     /**
@@ -104,7 +122,7 @@ export default defineComponent({
      * the dragging for the end value ends.
      */
     endOffset: {
-      type: [Number,String] as PropType<number|string>,
+      type: [Number, String] as PropType<number | string>,
       default: 0
     },
     /**
@@ -147,19 +165,19 @@ export default defineComponent({
       default: false
     }
   },
-  emits:['update:range'],
-  setup(props, {emit}){
-    onBeforeMount(()=>{
+  emits: ['update:range'],
+  setup(props, { emit }) {
+    onBeforeMount(() => {
       library.add(faGripLinesVertical)
     })
-    const rangePickerBounds = ref<HTMLElement|null>(null)
+    const rangePickerBounds = ref<HTMLElement | null>(null)
     const start = toRef(props.range[0] ?? 0)
-    const end =  toRef(props.range[1] ?? 0)
-    const moving =  ref( false)
-    const resizing =  ref( false)
+    const end = toRef(props.range[1] ?? 0)
+    const moving = ref(false)
+    const resizing = ref(false)
     const disabled = computed(() => {
-          return props.range.length < 2
-        })
+      return props.range.length < 2
+    })
     const overlayStyle = computed((): { left: string; right: string } => {
       return {
         left: `${start.value * 100}%`,
@@ -167,17 +185,17 @@ export default defineComponent({
       }
     })
     const boundsStyle = computed((): { left: string; right: string } => {
-          return {
-            left: startOffsetWithUnit.value,
-            right: endOffsetWithUnit.value
-          }
-        })
+      return {
+        left: startOffsetWithUnit.value,
+        right: endOffsetWithUnit.value
+      }
+    })
 
     const startOffsetWithUnit = computed((): string => {
       return valueWithUnit(props.startOffset)
     })
     const endOffsetWithUnit = computed((): string => {
-          return valueWithUnit(props.endOffset)
+      return valueWithUnit(props.endOffset)
     })
 
     const startBoundStyle = computed((): { left: string } => {
@@ -185,21 +203,20 @@ export default defineComponent({
     })
 
     const endBoundStyle = computed((): { left: string } => {
-          return { left: `${end.value * 100}%` }
+      return { left: `${end.value * 100}%` }
     })
     const classList = computed((): { [key: string]: boolean } => {
-          return {
-            [`range-picker--${props.variant}`]: !!props.variant,
-            'range-picker--hover': props.hover,
-            'range-picker--disabled': disabled.value,
-            'range-picker--rounded': props.rounded,
-            'range-picker--resizing': resizing.value,
-            'range-picker--moving': moving.value
-          }
-        }
-    )
+      return {
+        [`range-picker--${props.variant}`]: !!props.variant,
+        'range-picker--hover': props.hover,
+        'range-picker--disabled': disabled.value,
+        'range-picker--rounded': props.rounded,
+        'range-picker--resizing': resizing.value,
+        'range-picker--moving': moving.value
+      }
+    })
 
-    function toggleMoving(value){
+    function toggleMoving(value) {
       moving.value = value ?? !moving.value
     }
     function toggleResizing(value) {
@@ -211,8 +228,7 @@ export default defineComponent({
     function rangeWidth(): number {
       return rangePickerBounds.value?.getBoundingClientRect().width ?? 0
     }
-    function dragStartBound({detail: dx}) {
-
+    function dragStartBound({ detail: dx }) {
       const newValue = snapValue(dx / rangeWidth())
       // Ensure start value doesn't get too close to end value
       if (newValue < end.value - props.minDistance) {
@@ -225,7 +241,7 @@ export default defineComponent({
         emit('update:range', [start.value, end.value])
       }
     }
-    function dragEndBound({detail: dx}) {
+    function dragEndBound({ detail: dx }) {
       const newValue = snapValue(dx / rangeWidth())
       // Ensure end value doesn't get too close to start value
       if (newValue > start.value + props.minDistance) {
@@ -238,7 +254,7 @@ export default defineComponent({
         emit('update:range', [start.value, end.value])
       }
     }
-    function dragBounds({detail:dx}) {
+    function dragBounds({ detail: dx }) {
       const diff = snapValue(end.value - start.value)
       const newValue = snapValue(dx / rangeWidth())
       start.value = round(newValue, props.precision)
@@ -279,7 +295,12 @@ export default defineComponent({
     <div class="range-picker__wrapper">
       <slot />
     </div>
-    <div v-show="!disabled" ref="rangePickerBounds" class="range-picker__bounds" :style="boundsStyle">
+    <div
+      v-show="!disabled"
+      ref="rangePickerBounds"
+      class="range-picker__bounds"
+      :style="boundsStyle"
+    >
       <div
         v-draggable.relative
         class="range-picker__bounds__overlay"
@@ -346,7 +367,7 @@ export default defineComponent({
   }
 
   &--moving &__wrapper,
-  &--resizing &__wrapper{
+  &--resizing &__wrapper {
     &,
     * {
       pointer-events: none;

package/lib/components/ResponsiveIframe.vue

@@ -10,7 +10,10 @@ import { injectAssets } from '@/utils/assets'
 
 let iframeUniqueIdCounter = 0
 type StartsWithIcijIframe = `icij-iframe-${string}`
-type ResponsiveIframeData = { iframeId: StartsWithIcijIframe; pymParent: null | Parent }
+type ResponsiveIframeData = {
+  iframeId: StartsWithIcijIframe
+  pymParent: null | Parent
+}
 
 /**
  * ResponsiveIframe
@@ -42,7 +45,11 @@ export default defineComponent({
   async mounted(): Promise<void> {
     await injectAssets('https://pym.nprapps.org/pym.v1.min.js')
     //@ts-ignore
-    this.pymParent = new window.pym.Parent(this.iframeId, this.url, this.options)
+    this.pymParent = new window.pym.Parent(
+      this.iframeId,
+      this.url,
+      this.options
+    )
   }
 })
 </script>