@icij/murmur-next 4.0.0

package/lib/components/ImddbHeader.vue

@@ -0,0 +1,336 @@
+<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 }"
+    >
+      <!-- @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">
+            <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">
+import headroom from 'vue-headroom/src/headroom.vue'
+import { faGlobe } from '@fortawesome/free-solid-svg-icons/faGlobe'
+import find from 'lodash/find'
+import get from 'lodash/get'
+
+import { default as Fa, library } from './Fa'
+import FollowUsPopover from './FollowUsPopover.vue'
+import config from '../config'
+import {
+  computed,
+  ComponentPublicInstance,
+  defineComponent,
+  PropType,
+  ref,
+  onMounted,
+  onBeforeMount
+} from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BDropdownItem, BModal, BNavItemDropdown, BPopover } from 'bootstrap-vue-next'
+
+
+type CssPosition = 'absolute' | 'relative' | 'fixed' | 'static'
+type ImddHeaderItem = { label: string; href: string; active: boolean }
+interface ImddHeaderData {
+  showFollowUsPopover: boolean
+  collapseNavbar: boolean
+  languages: ImddHeaderItem[]
+}
+/**
+ * ImddbHeader
+ */
+export default defineComponent({
+  name: 'ImddbHeader',
+  components: {
+    BDropdownItem,
+    BModal,
+    BNavItemDropdown,
+    BPopover,
+    headroom,
+    FollowUsPopover,
+    Fa
+  },
+  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 as PropType<CssPosition>,
+      default: 'fixed'
+    },
+    /**
+     * Disable Headroom for hiding header until needed.
+     */
+    noHeadroom: {
+      type: Boolean
+    },
+    /**
+     * Project name, to display next to ICIJ logo
+     */
+    project: {
+      type: String,
+      default: () => config.get('project.name')
+    },
+    /**
+     * App name, to display next to project name
+     */
+    title: {
+      type: String,
+      default: () => config.get('app.name')
+    },
+    /**
+     * An array of objects defining dropdown items. Each item defines a <em>label</em> and a <em>href</em>.
+     */
+    dropdownItems: {
+      type: Array as PropType<ImddHeaderItem[]>,
+      default: () => config.get('imddb-header.dropdown.items')
+    },
+    /**
+     * Target link of the ICIJ logo and project name.
+     */
+    homeUrl: {
+      type: String,
+      default: () => config.get('app.home')
+    },
+    /**
+     * Target link of the donate button.
+     */
+    donateUrl: {
+      type: String,
+      default: () => config.get('app.donate-url')
+    }
+  },
+  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=> {
+      return props.noHeadroom ? 'div' : 'headroom'
+    })
+    const hasLanguagesDropdown = computed((): boolean=> {
+      return !!languages.value?.length
+    })
+    const currentLanguage = computed((): string=> {
+      return get(find(languages.value, { active: true }), 'label', 'Language')
+    })
+    onBeforeMount(()=>{
+      library.add(faGlobe)
+    })
+    onMounted(()=>{
+      languages.value = config.get('imddb-header.languages.items')
+    })
+    function closeFollowUsPopover() {
+      if(followUsPopover.value?.hide){
+        followUsPopover.value?.hide(new Event('forceHide'))
+      }
+      showFollowUsPopover.value=false
+    }
+    function hidePopover(){
+      root.value?.$emit('bv::hide::popover')
+      closeFollowUsPopover()
+    }
+    function hideDropdown(){
+      root.value?.$emit('bv::hide::dropdown')
+    }
+    function toggleNavbar(): void {
+      collapseNavbar.value = !collapseNavbar.value
+      hidePopover()
+      hideDropdown()
+    }
+
+    return {
+      t,
+      root,
+      collapseNavbar,
+      currentLanguage,
+      hasLanguagesDropdown,
+      languages,
+      rootElement,
+      followUsPopover,
+      showFollowUsPopover,
+      closeFollowUsPopover,
+      hidePopover,
+      toggleNavbar
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/lib';
+
+.imddb-header {
+  background: rgba($gray-400, 0.8);
+  box-shadow: 0 0 6px 0 rgba(#000, 0.1);
+  position: relative;
+  top: 0;
+  width: 100%;
+  z-index: $zindex-sticky;
+  display: flex;
+  padding: 0px;
+
+
+  .popover {
+    width: 100%;
+  }
+
+  @include media-breakpoint-down(md) {
+    background: $gray-400;
+  }
+
+  & .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-right: $spacer * 1.5;
+    &:after {
+      content: '';
+      background: $body-color;
+      width: 2px;
+      height: 30px;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+    }
+  }
+
+  .navbar-toggler {
+    background: $gray-400;
+    position: absolute;
+    right: $spacer;
+    top: $spacer * 0.5;
+    margin: 0;
+  }
+
+  &__site-switch {
+    .dropdown-item {
+      white-space: normal;
+      width: 440px;
+      max-width: 90vw;
+
+      @include media-breakpoint-down(sm) {
+        width: 100%;
+      }
+    }
+
+    .dropdown .nav-link {
+      @include media-breakpoint-up(lg) {
+        font-size: 1.2rem;
+        font-family: $headings-font-family;
+      }
+    }
+  }
+}
+</style>

package/lib/components/OrdinalLegend.vue

@@ -0,0 +1,164 @@
+<script lang="ts">
+import { get, isFunction, kebabCase, uniqueId } from 'lodash'
+import * as d3 from 'd3'
+import { defineComponent, PropType, computed } from 'vue'
+
+type Datum = { id: string; color: string; path: string; label: string }
+type Category = 'id' | 'color' | 'path' | 'label'
+export default defineComponent({
+  name: 'OrdinalLegend',
+  props: {
+    data: {
+      type: Array as PropType<Datum[]>,
+      default: () => []
+    },
+    horizontal: {
+      type: Boolean
+    },
+    markerPath: {
+      type: [String, Function],
+      default:
+        'M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z'
+    },
+    categoryObjectsPath: {
+      type: String as PropType<Category>,
+      default: 'id'
+    },
+    highlight: {
+      type: [String, Number],
+      default: null
+    },
+    value: {
+      type: [String, Number],
+      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)
+      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 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 }
+          })
+        }
+    )
+    function itemClassList(d: { [key: string]: string }) {
+      const id = d[props.categoryObjectsPath]
+      return {
+        [`ordinal-legend__item--identifier-${kebabCase(d.label)}`]: true,
+        'ordinal-legend__item--highlighted': id === props.highlight,
+        'ordinal-legend__item--selected': id === props.value
+      }
+    }
+    function markerPathFunction(d?: Datum): string {
+      return isFunction(props.markerPath) && d ? props.markerPath(d) : props.markerPath
+    }
+    function update(d: Datum) {
+      /**
+       * Fired when user clicks on an item
+       * @event update
+       * @param Mixed Value of the category identifier
+       */
+      emit('update', get(d, props.categoryObjectsPath, null))
+    }
+    function updateHighlight(d = {}) {
+      /**
+       * Fired when user hover an item
+       * @event update:highlight
+       * @param Mixed Value of the category identifier
+       */
+      emit('update:highlight', get(d, props.categoryObjectsPath, null))
+    }
+    return {
+      classList,
+      markerViewbox,
+      updateHighlight,
+      itemClassList,
+      markerPathFunction,
+      update
+    }
+  }
+})
+</script>
+
+<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()">
+        <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" />
+            </svg>
+          </slot>
+        </span>
+        <span class="ordinal-legend__item__label">
+          <slot name="label" v-bind="d">
+            {{ d.label }}
+          </slot>
+        </span>
+      </a>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+@import '../styles/lib';
+
+.ordinal-legend {
+  $muted-item-opacity: 0.2;
+  $muted-item-filter: grayscale(30%) brightness(10%);
+  $muted-item-transition: opacity 0.2s, filter 0.2s;
+
+  font-size: $font-size-sm;
+
+  &--horizontal &__item {
+    display: inline-block;
+
+    &:not(:last-child) {
+      margin-right: $spacer;
+    }
+  }
+
+  &__item {
+    transition: $muted-item-transition;
+
+    .ordinal-legend--has-highlight &:not(&--highlighted) {
+      opacity: $muted-item-opacity;
+      filter: $muted-item-filter;
+    }
+
+    &--selected {
+      font-weight: bold;
+    }
+
+    a {
+      color: inherit;
+    }
+
+    &__marker svg {
+      height: 1em;
+      width: 1em;
+    }
+  }
+}
+</style>