aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/web-shared/src/components/menu/menu.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'old-apps/web-shared/src/components/menu/menu.svelte')
-rw-r--r--old-apps/web-shared/src/components/menu/menu.svelte54
1 files changed, 0 insertions, 54 deletions
diff --git a/old-apps/web-shared/src/components/menu/menu.svelte b/old-apps/web-shared/src/components/menu/menu.svelte
deleted file mode 100644
index 33517ab..0000000
--- a/old-apps/web-shared/src/components/menu/menu.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
- import {random_string} from "$shared/lib/helpers";
-
- export const id = "__menu_" + random_string(3);
- export let trigger: HTMLElement;
- export let show = false;
-
- let windowInnerWidth = 0;
- let windowInnerHeight = 0;
- let menu: HTMLMenuElement;
-
- $: if (show && menu && trigger) {
- const
- selectedTriggerPosition = trigger.getBoundingClientRect(),
- menuOnTop = (windowInnerHeight - selectedTriggerPosition.bottom) < selectedTriggerPosition.top,
- left = selectedTriggerPosition.left,
- right = (windowInnerWidth - selectedTriggerPosition.right),
- isRight = (windowInnerWidth < selectedTriggerPosition.left + menu.offsetWidth),
- vertical = menuOnTop
- ? "bottom: " + (windowInnerHeight - selectedTriggerPosition.top) + "px;"
- : "top: " + selectedTriggerPosition.bottom + "px;";
-
- let horizontal = isRight ? "right: " + right + "px;" : "left: " + left + "px;";
-
- // check right position is correct -> otherwise set left to 0
- if (isRight && (right + menu.offsetWidth) > windowInnerWidth) horizontal = ("left: " + (windowInnerWidth - menu.offsetWidth) / 2 + "px;");
- const maxHeight = menuOnTop ? selectedTriggerPosition.top - 20 : windowInnerHeight - selectedTriggerPosition.bottom - 20;
- menu.setAttribute("style", horizontal + vertical + "max-height:" + Math.floor(maxHeight) + "px;");
- }
-
- function on_window_click(event) {
- if (!event.target.closest("#" + id) && !event.target.closest("[aria-controls='" + id + "']")) show = false;
- }
-
- function on_window_touchend(event) {
- if (!event.target.closest("#" + id) && !event.target.closest("[aria-controls='" + id + "']")) show = false;
- }
-</script>
-
-<svelte:window
- on:click={on_window_click}
- on:touchend={on_window_touchend}
- bind:innerWidth={windowInnerWidth}
- bind:innerHeight={windowInnerHeight}
-/>
-
-<menu class="menu"
- id="{id}"
- bind:this={menu}
- class:menu--is-visible={show}
- aria-expanded="{show}"
- aria-haspopup="true">
- <slot name="options"/>
-</menu>