From 5eb07d3fc780432bab4cf1fce3c7ca376ab64a97 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 15:56:54 +0200
Subject: [PATCH] WIP: Turn DropdownMenu into a _decorator_ usable with all
 other button types

---
 ts/editor-toolbar/ColorPicker.svelte        |  2 +-
 ts/editor-toolbar/DropdownIconButton.svelte | 25 +++++++++++++++++++++
 ts/editor-toolbar/DropdownItem.svelte       | 14 ++++++++++++
 ts/editor-toolbar/EditorToolbar.svelte      | 16 ++++++++++---
 ts/editor-toolbar/index.ts                  |  3 +++
 5 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 ts/editor-toolbar/DropdownIconButton.svelte
 create mode 100644 ts/editor-toolbar/DropdownItem.svelte

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 7e0358574..c53dbb24b 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -37,6 +37,6 @@
     }
 </style>
 
-<button tabindex="-1">
+<button tabindex="-1" on:mousedown|preventDefault> 
     <span class={className}> <input type="color" on:change={onChange} /> </span>
 </button>
diff --git a/ts/editor-toolbar/DropdownIconButton.svelte b/ts/editor-toolbar/DropdownIconButton.svelte
new file mode 100644
index 000000000..f03a8dce8
--- /dev/null
+++ b/ts/editor-toolbar/DropdownIconButton.svelte
@@ -0,0 +1,25 @@
+<script lang="typescript">
+    import { onMount } from "svelte";
+
+    export let buttonId = `dropdownMenuButton123`;
+
+    // ${Math.random().toString(36).substring(2)}`
+    let dropdownButtonRef: HTMLButtonElement;
+
+    onMount(() => {
+        /* Prevent focus on menu activation */
+        const noop = () => {};
+        Object.defineProperty(dropdownButtonRef, 'focus', { value: noop });
+
+        /* Set custom menu without using .dropdown
+         * Rendering the menu here would cause the menu to
+         * be displayed outside of the visible area
+         */
+        const dropdown = new bootstrap.Dropdown(dropdownButtonRef);
+        dropdown._menu = document.getElementById(buttonId);
+    })
+</script>
+
+<button bind:this={dropdownButtonRef} class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" on:mousedown|preventDefault>
+  Dropdown button
+</button>
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
new file mode 100644
index 000000000..4ea91de2f
--- /dev/null
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -0,0 +1,14 @@
+<script lang="typescript">
+    export let onClick: (event: ClickEvent) => void;
+</script>
+
+<li>
+    <button class="dropdown-item" on:click={onClick} on:mousedown|preventDefault>
+        {#if $$slots.default}
+            <slot />
+        {:else}
+            <span class="float-start"><slot name="start" /></span>
+            <span class="float-end"><slot name="end" /></span>
+        {/if}
+    </button>
+</li>
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 4fef8b702..5336136b2 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import DropdownItem from "./DropdownItem.svelte";
     import type { Readable } from "svelte/store";
     import { setContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
@@ -15,7 +16,7 @@
 </script>
 
 <style lang="scss">
-    div {
+    nav {
         position: sticky;
         top: 0;
         left: 0;
@@ -37,6 +38,15 @@
     }
 </style>
 
-<div>
+<ul class="dropdown-menu" id="dropdownMenuButton123" aria-labelledby="dropdownMenuButton123">
+    <DropdownItem>
+        <svelte:fragment slot="start">Action</svelte:fragment>
+        <svelte:fragment slot="end">Shortcut</svelte:fragment>
+    </DropdownItem>
+    <DropdownItem>Action 1</DropdownItem>
+    <DropdownItem>Action 2</DropdownItem>
+</ul>
+
+<nav>
     <ButtonGroup {buttons} />
-</div>
+</nav>
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 71f65f0d3..dff93d5c0 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -6,6 +6,7 @@ import { setupI18n, ModuleName } from "anki/i18n";
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
 import LabelButton from "./LabelButton.svelte";
+import DropdownIconButton from "./DropdownIconButton.svelte";
 
 // @ts-ignore
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
@@ -45,6 +46,8 @@ const defaultButtons = [
     ],
     [forecolorButton, colorpickerButton],
     [attachmentButton, recordButton, clozeButton, mathjaxButton, htmlButton],
+    [ { component: DropdownIconButton }],
+
 ];
 
 class EditorToolbar extends HTMLElement {