lit-component.mjs

import { isNil } from "./util.mjs";
import emojiMap from "./emoji.json";
import { html } from "lit-html";
import levenshtein from "js-levenshtein";
import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
import { when } from "lit-html/directives/when.js";
import linkify from "linkify-string";
import {
  memoize,
  findMax,
  head,
  rest,
  tryCatch,
  tryReject,
  moveItemToTop,
} from "./util.mjs";

const largestWord = (str) => {
  return str.split(" ").reduce((largest, currentWord) => {
    return currentWord.length > largest.length ? currentWord : largest;
  }, "");
};

// Example usage:
console.log(largestWord("The quick brown fox jumps over the lazy dog")); // Output: "jumps"

const svg = {
  flame: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path
      d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4C112 375.4 162.6 416 225.7 416z"
    />
  </svg>`,
  refresh: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path
      d="M142.9 142.9c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5c0 0 0 0 0 0H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5c7.7-21.8 20.2-42.3 37.8-59.8zM16 312v7.6 .7V440c0 9.7 5.8 18.5 14.8 22.2s19.3 1.7 26.2-5.2l41.6-41.6c87.6 86.5 228.7 86.2 315.8-1c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.2 62.2-162.7 62.5-225.3 1L185 329c6.9-6.9 8.9-17.2 5.2-26.2s-12.5-14.8-22.2-14.8H48.4h-.7H40c-13.3 0-24 10.7-24 24z"
    />
  </svg>`,
  qr: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path
      d="M0 80C0 53.5 21.5 32 48 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80zM64 96v64h64V96H64zM0 336c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V336zm64 16v64h64V352H64zM304 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H304c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48zm80 64H320v64h64V96zM256 304c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16v96c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16v64c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V304zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z"
    />
  </svg>`,
  merge: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path
      d="M80 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm32.4 97.2c28-12.4 47.6-40.5 47.6-73.2c0-44.2-35.8-80-80-80S0 35.8 0 80c0 32.8 19.7 61 48 73.3V358.7C19.7 371 0 399.2 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-32.8-19.7-61-48-73.3V272c26.7 20.1 60 32 96 32h86.7c12.3 28.3 40.5 48 73.3 48c44.2 0 80-35.8 80-80s-35.8-80-80-80c-32.8 0-61 19.7-73.3 48H208c-49.9 0-91-38.1-95.6-86.8zM80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM344 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"
    />
  </svg>`,
  share: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path
      d="M307 34.8c-11.5 5.1-19 16.6-19 29.2v64H176C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96h96v64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z"
    />
  </svg>`,
  plus: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path
      d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
    />
  </svg>`,
  minus: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path
      d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
    />
  </svg>`,
  gear: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path
      d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"
    />
  </svg>`,
  up: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path
      d="M318 177.5c3.8-8.8 2-19-4.6-26l-136-144C172.9 2.7 166.6 0 160 0s-12.9 2.7-17.4 7.5l-136 144c-6.6 7-8.4 17.2-4.6 26S14.4 192 24 192H96l0 288c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32l0-288h72c9.6 0 18.2-5.7 22-14.5z"
    />
  </svg>`,
  down: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path
      d="M2 334.5c-3.8 8.8-2 19 4.6 26l136 144c4.5 4.8 10.8 7.5 17.4 7.5s12.9-2.7 17.4-7.5l136-144c6.6-7 8.4-17.2 4.6-26s-12.5-14.5-22-14.5l-72 0 0-288c0-17.7-14.3-32-32-32L128 0C110.3 0 96 14.3 96 32l0 288-72 0c-9.6 0-18.2 5.7-22 14.5z"
    />
  </svg>`,
  rotate: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path
      d="M142.9 142.9c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5c0 0 0 0 0 0H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5c7.7-21.8 20.2-42.3 37.8-59.8zM16 312v7.6 .7V440c0 9.7 5.8 18.5 14.8 22.2s19.3 1.7 26.2-5.2l41.6-41.6c87.6 86.5 228.7 86.2 315.8-1c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.2 62.2-162.7 62.5-225.3 1L185 329c6.9-6.9 8.9-17.2 5.2-26.2s-12.5-14.8-22.2-14.8H48.4h-.7H40c-13.3 0-24 10.7-24 24z"
    />
  </svg>`,

  clipboard: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
    <path
      d="M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"
    />
  </svg>`,
};

const shareUrl = (items) => {
  const url = new URL(window.location.pathname, window.location.origin);
  url.hash = JSON.stringify(items);

  return url.toString();
};

const trs = {
  merge: "Merge",
  appTitle: "Top List 🍒",
  newItem: "New Item",
  addItem: "Add Item",
  listActions: "List",
  Settings: "Settings",
  updateApp: "Update",
  clearLists: "Clear",
  remove: "Remove",
  newList: "New List",
  shareList: "Share",
  qrShareList: "QR Share",
  add: "Add",
  raise: "Swap",
};

const emojiByTag = emojiMap.names.reduce((acc, name) => {
  name.tags.split(":").forEach((tag) => {
    acc.push([tag, name]);
  });

  return acc;
}, []);

const someEmoji = memoize((value) => {
  if (!value) return null;

  return findMax(([tag]) => {
    return -levenshtein(tag, largestWord(value));
  }, emojiByTag)[1].unicode;
});

const must = (x, elseFn) => (isNil(x) ? elseFn() : x);
const tr = (key) =>
  must(trs[key], () => {
    throw new Error(`Translation for "${key}" does not exist`);
  });

const nameSymbol = Symbol("name");

const emitAction =
  (name, detail = {}) =>
  (event) => {
    // Replacing with the user action thing.
    event.preventDefault();
    event.stopPropagation();

    const customEvent = new CustomEvent("action", {
      bubbles: true,
      detail,
    });

    // TODO: use Symbol to prevent overwriting name property.
    customEvent[nameSymbol] = name;

    event.target.dispatchEvent(customEvent);
  };

export const onAction = (actions) =>
  function (event) {
    this.querySelectorAll("details").forEach((details) => {
      details.open = false;
    });

    // Dispatch based on name
    const name = event[nameSymbol];

    if (isNil(actions[name])) {
      throw new Error(`No handler defined for event "${name}".`);
    }

    actions[name](event);
  };

const toplist = {
  app: (vm, actions) => html`
    <div @action=${onAction(actions)}>
      <details>
        <summary>${tr("Settings")}</summary>

        ${toplist.action(vm, "updateApp", svg.refresh)}
        ${toplist.action(vm, "clearLists", svg.flame)}
      </details>
      ${toplist.lists(vm)}
    </div>
  `,

  action: (vm, name, svg = null) =>
    html`<button class="action" @click=${emitAction(`${name}Action`, vm)}>
      ${svg} ${tr(name)}
    </button>`,

  anchor: (vm, name, svg = null) =>
    html` <a
      href="${shareUrl(vm.items)}"
      class="button action"
      @click="${emitAction(`${name}Action`, vm)}"
    >
      ${svg} ${tr(name)}
    </a>`,

  actionsCommon: (vm) => null,
  actionsToplist: (vm) => toplist.action(vm, "remove", svg.minus),
  actionsNotToplist: (vm) => toplist.action(vm, "add", svg.plus),

  actions: (vm) => [
    toplist.actionsCommon(vm),
    vm.isTopList ? toplist.actionsToplist(vm) : toplist.actionsNotToplist(vm),
  ],

  item: (vm) => (item, itemIndex) => {
    vm = {
      ...vm,
      itemIndex,
      item,
    };
    return html`<li class="list-item">
      <details>
        <summary>
          ${unsafeHTML(
            linkify(item, {
              target: "_blank",
            }),
          )}
          ${someEmoji(item)}
        </summary>
        ${toplist.actions(vm)}
      </details>
    </li>`;
  },

  items: (vm) => vm.items.map(toplist.item(vm)),

  list: (vm) => (list, listIndex) => {
    vm = {
      ...vm,
      ...list,
      isTopList: isNil(listIndex) ? vm.isTopList : listIndex === 0,
      listIndex,
    };

    return html`<article class="list">
      ${when(
        vm.isTopList,
        () =>
          html` <h1 id="toplist">${tr("appTitle")}</h1>
            <form @submit="${emitAction("addItem", vm)}">
              <label>${tr("newItem")}</label>
              <input required id="addItemInput" />
              <input type="submit" value="${tr("addItem")}" />
            </form>`,
      )}

      <ul>
        ${toplist.items(vm)}
      </ul>
      <details>
        <summary>${tr("listActions")}</summary>

        <div class="actions">
          ${when(vm.isTopList, () => toplist.action(vm, "newList", svg.plus))}
          ${when(!vm.isTopList, () => [
            toplist.action(vm, "merge", svg.merge),
            toplist.action(vm, "raise", svg.up),
          ])}
          ${toplist.anchor(vm, "shareList", svg.share)}
          ${toplist.anchor(vm, "qrShareList", svg.qr)}
        </div>
      </details>
    </article> `;
  },

  lists: (vm) => vm.lists.map(toplist.list(vm)),
};

export { svg, toplist };