@reuters-graphics/graphics-components 0.0.4 → 0.0.7

package/dist/@types/components/Framer/Typeahead/fuzzy.d.ts

@@ -0,0 +1,10 @@
+export default fuzzy;
+declare namespace fuzzy {
+    function simpleFilter(pattern: any, array: any): any;
+    function test(pattern: any, str: any): boolean;
+    function match(pattern: any, str: any, opts: any): {
+        rendered: string;
+        score: number;
+    };
+    function filter(pattern: any, arr: any, opts: any): any;
+}

package/dist/@types/components/Framer/Typeahead/index.svelte.d.ts

@@ -0,0 +1,143 @@
+/** @typedef {typeof __propDef.props}  IndexProps */
+/** @typedef {typeof __propDef.events}  IndexEvents */
+/** @typedef {typeof __propDef.slots}  IndexSlots */
+export default class Index extends SvelteComponentTyped<{
+    [x: string]: any;
+    value?: string;
+    extract?: (item: {
+        index: number;
+        embed: string;
+    }) => any;
+    id?: string;
+    data?: {
+        index: number;
+        embed: string;
+    }[];
+    disable?: (item: {
+        index: number;
+        embed: string;
+    }) => boolean;
+    filter?: (item: {
+        index: number;
+        embed: string;
+    }) => boolean;
+    autoselect?: boolean;
+    inputAfterSelect?: "update" | "clear" | "keep";
+    results?: {
+        original: {
+            index: number;
+            embed: string;
+        };
+        index: number;
+        score: number;
+        string: string;
+        disabled?: boolean;
+    }[];
+    focusAfterSelect?: boolean;
+    showDropdownOnFocus?: boolean;
+    limit?: number;
+}, {
+    type: CustomEvent<string>;
+    input: Event;
+    change: Event;
+    focus: FocusEvent;
+    clear: CustomEvent<any>;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    select: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        result: {
+            original: {
+                index: number;
+                embed: string;
+            };
+            index: number;
+            score: number;
+            string: string;
+            disabled?: boolean;
+        };
+        index: any;
+        value: string;
+    };
+    'no-results': {
+        value: string;
+    };
+}> {
+}
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: string;
+        extract?: (item: {
+            index: number;
+            embed: string;
+        }) => any;
+        id?: string;
+        data?: {
+            index: number;
+            embed: string;
+        }[];
+        disable?: (item: {
+            index: number;
+            embed: string;
+        }) => boolean;
+        filter?: (item: {
+            index: number;
+            embed: string;
+        }) => boolean;
+        autoselect?: boolean;
+        inputAfterSelect?: "update" | "clear" | "keep";
+        results?: {
+            original: {
+                index: number;
+                embed: string;
+            };
+            index: number;
+            score: number;
+            string: string;
+            disabled?: boolean;
+        }[];
+        focusAfterSelect?: boolean;
+        showDropdownOnFocus?: boolean;
+        limit?: number;
+    };
+    events: {
+        type: CustomEvent<string>;
+        input: Event;
+        change: Event;
+        focus: FocusEvent;
+        clear: CustomEvent<any>;
+        blur: FocusEvent;
+        keydown: KeyboardEvent;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            result: {
+                original: {
+                    index: number;
+                    embed: string;
+                };
+                index: number;
+                score: number;
+                string: string;
+                disabled?: boolean;
+            };
+            index: any;
+            value: string;
+        };
+        'no-results': {
+            value: string;
+        };
+    };
+};
+export {};

package/dist/components/Framer/Framer.svelte

@@ -7,6 +7,7 @@
   import Resizer from './Resizer/index.svelte';
   import { width } from './stores.js';
   import getUniqNames from './uniqNames.js';
+  import Typeahead from './Typeahead/index.svelte';
 
   export let embeds;
   export let breakpoints = [330, 510, 660, 930, 1200];
@@ -46,22 +47,33 @@
     />
   </header>
 
-  <nav>
-    {#each embeds as embed, i}
-      <button
-        on:click="{() => {
-          activeEmbed = embed;
-        }}"
-        class:active="{activeEmbed === embed}"
+  <div id="typeahead-container">
+    <div class="embed-link">
+      <a
+        rel="external"
+        target="_blank"
+        href="{activeEmbed}"
+        title="{activeEmbed}"
       >
-        {embedTitles[i]}
-        <a rel="external" target="_blank" href="{embed}" title="{embed}">
-          <Fa icon="{faLink}" />
-        </a>
-      </button>
-    {/each}
-  </nav>
+        Live link <Fa icon="{faLink}" />
+      </a>
+    </div>
+    <Typeahead
+      label="Select an embed"
+      value="{embedTitles[0]}"
+      extract="{(d) => embedTitles[d.index]}"
+      data="{embeds.map((embed, index) => ({ index, embed }))}"
+      placeholder="{'Search'}"
+      showDropdownOnFocus="{true}"
+      on:select="{({ detail }) => {
+        activeEmbed = detail.original.embed;
+      }}"
+    />
+  </div>
 
+  <div id="preview-label" style="width:{$width}px;">
+    <p>Preview</p>
+  </div>
   <div id="frame-parent" style="width:{$width}px;"></div>
 </div>
 
@@ -86,36 +98,38 @@
   margin: 20px 0;
 }
 
-nav {
-  text-align: center;
-  margin: 0 auto 20px;
-  max-width: 900px;
-}
-nav button {
-  margin: 0 4px 5px;
-  background-color: transparent;
-  border: 0;
-  color: #999;
-  padding: 2px 2px;
-  cursor: pointer;
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
-  font-weight: 400;
-}
-nav button.active {
-  border-bottom: 2px solid #666;
-  color: #666;
+div#typeahead-container {
+  max-width: 660px;
+  margin: 0 auto 15px;
+  position: relative;
 }
-nav button:focus {
-  outline: none;
+div#typeahead-container div.embed-link {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-block;
+  z-index: 2;
 }
-nav button a {
+div#typeahead-container div.embed-link a {
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
   color: #bbb;
   font-size: 12px;
+  text-decoration: none !important;
 }
-nav button a:hover {
+div#typeahead-container div.embed-link a:hover {
   color: #666;
 }
 
+div#preview-label {
+  margin: 0 auto;
+}
+div#preview-label p {
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  color: #aaa;
+  font-size: 0.75rem;
+  margin: 0 0 0.25rem;
+}
+
 #frame-parent {
   border: 1px solid #ddd;
   margin: 0 auto;

package/dist/components/Framer/Typeahead/fuzzy.js

@@ -0,0 +1,133 @@
+/*
+ * Fuzzy
+ * https://github.com/myork/fuzzy
+ *
+ * Copyright (c) 2012 Matt York
+ * Licensed under the MIT license.
+ */
+
+const fuzzy = {};
+
+// Return all elements of `array` that have a fuzzy
+// match against `pattern`.
+fuzzy.simpleFilter = function (pattern, array) {
+  return array.filter(function (str) {
+    return fuzzy.test(pattern, str);
+  });
+};
+
+// Does `pattern` fuzzy match `str`?
+fuzzy.test = function (pattern, str) {
+  return fuzzy.match(pattern, str) !== null;
+};
+
+// If `pattern` matches `str`, wrap each matching character
+// in `opts.pre` and `opts.post`. If no match, return null
+fuzzy.match = function (pattern, str, opts) {
+  opts = opts || {};
+  let patternIdx = 0;
+  const result = [];
+  const len = str.length;
+  let totalScore = 0;
+  let currScore = 0;
+  // prefix
+  const pre = opts.pre || '';
+  // suffix
+  const post = opts.post || '';
+  // String to compare against. This might be a lowercase version of the
+  // raw string
+  const compareString = (opts.caseSensitive && str) || str.toLowerCase();
+  let ch;
+
+  pattern = (opts.caseSensitive && pattern) || pattern.toLowerCase();
+
+  // For each character in the string, either add it to the result
+  // or wrap in template if it's the next string in the pattern
+  for (let idx = 0; idx < len; idx++) {
+    ch = str[idx];
+    if (compareString[idx] === pattern[patternIdx]) {
+      ch = pre + ch + post;
+      patternIdx += 1;
+
+      // consecutive characters should increase the score more than linearly
+      currScore += 1 + currScore;
+    } else {
+      currScore = 0;
+    }
+    totalScore += currScore;
+    result[result.length] = ch;
+  }
+
+  // return rendered string if we have a match for every char
+  if (patternIdx === pattern.length) {
+    // if the string is an exact match with pattern, totalScore should be maxed
+    totalScore = compareString === pattern ? Infinity : totalScore;
+    return { rendered: result.join(''), score: totalScore };
+  }
+
+  return null;
+};
+
+// The normal entry point. Filters `arr` for matches against `pattern`.
+// It returns an array with matching values of the type:
+//
+//     [{
+//         string:   '<b>lah' // The rendered string
+//       , index:    2        // The index of the element in `arr`
+//       , original: 'blah'   // The original element in `arr`
+//     }]
+//
+// `opts` is an optional argument bag. Details:
+//
+//    opts = {
+//        // string to put before a matching character
+//        pre:     '<b>'
+//
+//        // string to put after matching character
+//      , post:    '</b>'
+//
+//        // Optional function. Input is an entry in the given arr`,
+//        // output should be the string to test `pattern` against.
+//        // In this example, if `arr = [{crying: 'koala'}]` we would return
+//        // 'koala'.
+//      , extract: function(arg) { return arg.crying; }
+//    }
+fuzzy.filter = function (pattern, arr, opts) {
+  if (!arr || arr.length === 0) {
+    return [];
+  }
+  if (typeof pattern !== 'string') {
+    return arr;
+  }
+  opts = opts || {};
+  return (
+    arr
+      .reduce(function (prev, element, idx, arr) {
+        let str = element;
+        if (opts.extract) {
+          str = opts.extract(element);
+        }
+        const rendered = fuzzy.match(pattern, str, opts);
+        if (rendered != null) {
+          prev[prev.length] = {
+            string: rendered.rendered,
+            score: rendered.score,
+            index: idx,
+            original: element,
+          };
+        }
+        return prev;
+      }, [])
+
+      // Sort by score. Browsers are inconsistent wrt stable/unstable
+      // sorting, so force stable by using the index in the case of tie.
+      // See http://ofb.net/~sethml/is-sort-stable.html
+      .sort(function (a, b) {
+        const compare = b.score - a.score;
+        if (compare) return compare;
+        return a.index - b.index;
+      })
+  );
+};
+
+export default fuzzy;

package/dist/components/Framer/Typeahead/index.svelte

@@ -0,0 +1,349 @@
+<script>
+  /**
+   * @typedef {Object} TItem
+   * @property {number} index
+   * @property {string} embed
+   */
+
+  export let id = 'typeahead-' + Math.random().toString(36);
+  export let value = '';
+
+  /** @type {TItem[]} */
+  export let data = [];
+
+  /** @type {(item: TItem) => any} */
+  export let extract = (item) => item;
+
+  /** @type {(item: TItem) => boolean} */
+  export let disable = (item) => false;
+
+  /** @type {(item: TItem) => boolean} */
+  export let filter = (item) => false;
+
+  /** Set to `false` to prevent the first result from being selected */
+  export let autoselect = true;
+
+  /**
+   * Set to `keep` to keep the search field unchanged after select, set to `clear` to auto-clear search field
+   * @type {"update" | "clear" | "keep"}
+   */
+  export let inputAfterSelect = 'update';
+
+  /** @type {{ original: TItem; index: number; score: number; string: string; disabled?: boolean; }[]} */
+  export let results = [];
+
+  /** Set to `true` to re-focus the input after selecting a result */
+  export let focusAfterSelect = false;
+
+  /** Set to `true` to only show results when the input is focused */
+  export let showDropdownOnFocus = false;
+
+  /**
+   * Specify the maximum number of results to return
+   * @type {number}
+   */
+  export let limit = Infinity;
+
+  import fuzzy from './fuzzy.js';
+  import Search from 'svelte-search';
+  import { tick, createEventDispatcher, afterUpdate } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  let comboboxRef = null;
+  let searchRef = null;
+  let hideDropdown = false;
+  let selectedIndex = -1;
+  let prevResults = '';
+  let isFocused = false;
+
+  afterUpdate(() => {
+    if (prevResults !== resultsId && autoselect) {
+      selectedIndex = getNextNonDisabledIndex();
+    }
+
+    if (prevResults !== resultsId && !$$slots['no-results']) {
+      hideDropdown = results.length === 0;
+    }
+
+    prevResults = resultsId;
+  });
+
+  async function select() {
+    const result = results[selectedIndex];
+
+    if (result.disabled) return;
+
+    const selectedValue = extract(result.original);
+    const searchedValue = value;
+
+    if (inputAfterSelect === 'clear') value = '';
+    if (inputAfterSelect === 'update') value = selectedValue;
+
+    dispatch('select', {
+      selectedIndex,
+      searched: searchedValue,
+      selected: selectedValue,
+      original: result.original,
+      originalIndex: result.index,
+    });
+
+    await tick();
+
+    if (focusAfterSelect) searchRef.focus();
+    close();
+  }
+
+  /** @type {() => number} */
+  function getNextNonDisabledIndex() {
+    let index = 0;
+    let disabled = results[index]?.disabled ?? false;
+
+    while (disabled) {
+      if (index === results.length) {
+        index = 0;
+      } else {
+        index += 1;
+      }
+
+      disabled = results[index]?.disabled ?? false;
+    }
+
+    return index;
+  }
+
+  /** @type {(direction: -1 | 1) => void} */
+  function change(direction) {
+    let index =
+      direction === 1 && selectedIndex === results.length - 1
+        ? 0
+        : selectedIndex + direction;
+    if (index < 0) index = results.length - 1;
+
+    let disabled = results[index].disabled;
+
+    while (disabled) {
+      if (index === results.length) {
+        index = 0;
+      } else {
+        index += direction;
+      }
+
+      disabled = results[index].disabled;
+    }
+
+    selectedIndex = index;
+  }
+
+  const open = () => (hideDropdown = false);
+  const close = () => (hideDropdown = true);
+
+  $: options = { pre: '<mark>', post: '</mark>', extract };
+  $: results =
+    value !== ''
+      ? fuzzy
+          .filter(value, data, options)
+          .filter(({ score }) => score > 0)
+          .slice(0, limit)
+          .filter((result) => !filter(result.original))
+          .map((result) => ({ ...result, disabled: disable(result.original) }))
+      : data.map((d) => ({ string: extract(d), original: d }));
+
+  $: resultsId = results.map((result) => extract(result.original)).join('');
+  $: showResults = !hideDropdown && results.length > 0 && isFocused;
+  $: if (showDropdownOnFocus) {
+    showResults = showResults && isFocused;
+  }
+</script>
+
+<svelte:window
+  on:click="{({ target }) => {
+    if (!hideDropdown && !comboboxRef?.contains(target)) {
+      close();
+    }
+  }}"
+/>
+
+<div
+  data-svelte-typeahead
+  bind:this="{comboboxRef}"
+  role="combobox"
+  aria-haspopup="listbox"
+  aria-owns="{id}-listbox"
+  class:dropdown="{results.length > 0}"
+  aria-expanded="{showResults}"
+  id="{id}-typeahead"
+>
+  <Search
+    id="{id}"
+    removeFormAriaAttributes="{true}"
+    {...$$restProps}
+    bind:ref="{searchRef}"
+    aria-autocomplete="list"
+    aria-controls="{id}-listbox"
+    aria-labelledby="{id}-label"
+    aria-activedescendant="{selectedIndex >= 0 &&
+    !hideDropdown &&
+    results.length > 0
+      ? `${id}-result-${selectedIndex}`
+      : null}"
+    bind:value
+    on:type
+    on:input
+    on:change
+    on:focus
+    on:focus="{() => {
+      open();
+      if (showDropdownOnFocus) {
+        showResults = true;
+        isFocused = true;
+      }
+    }}"
+    on:clear
+    on:clear="{open}"
+    on:blur
+    on:keydown
+    on:keydown="{(e) => {
+      if (results.length === 0) return;
+
+      switch (e.key) {
+        case 'Enter':
+          select();
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          change(1);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          change(-1);
+          break;
+        case 'Escape':
+          e.preventDefault();
+          value = '';
+          searchRef?.focus();
+          close();
+          break;
+      }
+    }}"
+  />
+  <ul
+    class:svelte-typeahead-list="{true}"
+    role="listbox"
+    aria-labelledby="{id}-label"
+    id="{id}-listbox"
+  >
+    {#if showResults}
+      {#each results as result, index}
+        <li
+          role="option"
+          id="{id}-result-{index}"
+          class:selected="{selectedIndex === index}"
+          class:disabled="{result.disabled}"
+          aria-selected="{selectedIndex === index}"
+          on:click="{() => {
+            if (result.disabled) return;
+            selectedIndex = index;
+            select();
+          }}"
+          on:mouseenter="{() => {
+            if (result.disabled) return;
+            selectedIndex = index;
+          }}"
+        >
+          <slot result="{result}" index="{index}" value="{value}">
+            {@html result.string}
+          </slot>
+        </li>
+      {/each}
+    {/if}
+    {#if $$slots['no-results'] && !hideDropdown && value.length > 0 && results.length === 0}
+      <div class:no-results="{true}">
+        <slot name="no-results" value="{value}" />
+      </div>
+    {/if}
+  </ul>
+</div>
+
+<style>[data-svelte-typeahead] {
+  position: relative;
+}
+
+ul {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: calc(100% - 2px);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  background-color: inherit;
+}
+
+[aria-expanded=true] ul {
+  z-index: 1;
+  border: 1px solid #ddd;
+  max-height: 50vh;
+  overflow-y: scroll;
+}
+
+li,
+.no-results {
+  padding: 0.25rem 1rem;
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  color: #333;
+}
+
+li {
+  cursor: pointer;
+}
+li :global(mark) {
+  padding: 0;
+  background-color: #ffff9a;
+}
+
+li:not(:last-of-type) {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+li:hover {
+  background-color: #efefef;
+}
+
+.selected {
+  background-color: #efefef;
+}
+
+.selected:hover {
+  background-color: #e5e5e5;
+}
+
+.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+:global([data-svelte-search] label) {
+  margin-bottom: 0.25rem;
+  display: inline-flex;
+  font-size: 0.75rem;
+  color: #aaa;
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+}
+
+:global([data-svelte-search] input) {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: none;
+  font-size: 1rem;
+  border: 0;
+  border-radius: 0 !important;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  font-family: var(--theme-font-family-sans-serif, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif);
+}
+
+:global([data-svelte-search] input:focus) {
+  outline: none;
+  border: 1px solid #ccc;
+}</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -89,6 +89,7 @@
     "pym.js": "^1.3.2",
     "svelte-fa": "^2.4.0",
     "svelte-intersection-observer": "^0.10.0",
+    "svelte-search": "^2.0.1",
     "ua-parser-js": "^0.7.27"
   },
   "exports": {
@@ -105,6 +106,8 @@
     "./components/FeaturePhoto/FeaturePhoto.svelte": "./dist/components/FeaturePhoto/FeaturePhoto.svelte",
     "./components/Framer/Framer.svelte": "./dist/components/Framer/Framer.svelte",
     "./components/Framer/Resizer/index.svelte": "./dist/components/Framer/Resizer/index.svelte",
+    "./components/Framer/Typeahead/fuzzy": "./dist/components/Framer/Typeahead/fuzzy.js",
+    "./components/Framer/Typeahead/index.svelte": "./dist/components/Framer/Typeahead/index.svelte",
     "./components/Framer/stores": "./dist/components/Framer/stores.js",
     "./components/Framer/uniqNames": "./dist/components/Framer/uniqNames.js",
     "./components/GraphicBlock/AriaHidden.svelte": "./dist/components/GraphicBlock/AriaHidden.svelte",