From 9e0f2f48975325137ab76ea7c6462b3993292a19 Mon Sep 17 00:00:00 2001
From: basher <basher@madasafish.com>
Date: Wed, 3 Apr 2024 09:23:49 +0100
Subject: [PATCH] deprecate disclosure & share js

---
 ui/src/javascript/modules/disclosure.ts  | 60 ----------------
 ui/src/javascript/modules/share.ts       | 87 ------------------------
 ui/src/javascript/ui-init.ts             |  4 --
 ui/src/javascript/utils/disclosure.ts    | 80 ----------------------
 ui/src/javascript/utils/random-string.ts | 16 -----
 5 files changed, 247 deletions(-)
 delete mode 100644 ui/src/javascript/modules/disclosure.ts
 delete mode 100644 ui/src/javascript/modules/share.ts
 delete mode 100644 ui/src/javascript/utils/disclosure.ts
 delete mode 100644 ui/src/javascript/utils/random-string.ts

diff --git a/ui/src/javascript/modules/disclosure.ts b/ui/src/javascript/modules/disclosure.ts
deleted file mode 100644
index 8a244a5..0000000
--- a/ui/src/javascript/modules/disclosure.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { addJSClass } from '../utils/progressive-enhancement';
-import { disclosure } from '../utils/disclosure';
-
-export default class Disclosure {
-    private disclosure: Element;
-    private btnDisclosure: HTMLButtonElement | null;
-    private content: HTMLElement | null;
-    private bindEscapeKey?: boolean;
-    private bindClickOutside?: boolean;
-
-    constructor(disclosure: Element) {
-        this.disclosure = disclosure;
-        this.btnDisclosure = this.disclosure.querySelector(
-            '[data-disclosure-button]',
-        );
-        this.content = this.disclosure.querySelector(
-            '[data-disclosure-content]',
-        );
-        this.bindEscapeKey = this.disclosure.hasAttribute(
-            'data-disclosure-escape-key',
-        );
-        this.bindClickOutside = this.disclosure.hasAttribute(
-            'data-disclosure-click-outside',
-        );
-
-        this.init();
-    }
-
-    public static start(): void {
-        const disclosureComponents = document.querySelectorAll(
-            '[data-module="disclosure"]',
-        );
-
-        disclosureComponents.forEach((disclosure) => {
-            addJSClass(disclosure);
-            const instance = new Disclosure(disclosure);
-            return instance;
-        });
-    }
-
-    private init(): void {
-        this.initdisclosure();
-    }
-
-    private initdisclosure(): void {
-        const button = this.btnDisclosure;
-        const content = this.content;
-        const bindEscapeKey = this.bindEscapeKey;
-        const bindClickOutside = this.bindClickOutside;
-
-        // Show/hide content.
-        button &&
-            disclosure({
-                button,
-                content,
-                bindEscapeKey,
-                bindClickOutside,
-            });
-    }
-}
diff --git a/ui/src/javascript/modules/share.ts b/ui/src/javascript/modules/share.ts
deleted file mode 100644
index ee30a7c..0000000
--- a/ui/src/javascript/modules/share.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { addJSClass } from '../utils/progressive-enhancement';
-import { disclosure } from '../utils/disclosure';
-
-export default class Share {
-    private share: Element;
-    private btnShare: HTMLButtonElement | null;
-    private btnCopy: HTMLButtonElement | null;
-    private shareFallback: HTMLElement | null;
-    private shareInput: HTMLInputElement | null;
-    private canonical: HTMLLinkElement | null;
-    private shareTitle: string | undefined;
-    private shareUrl: string | undefined;
-
-    constructor(share: Element) {
-        this.share = share;
-        this.btnShare = this.share.querySelector('[data-share-button]');
-        this.btnCopy = this.share.querySelector('[data-share-copy]');
-        this.shareFallback = this.share.querySelector('[data-share-fallback]');
-        this.shareInput = this.share.querySelector('[data-share-input]');
-
-        this.canonical = document.querySelector('link[rel=canonical]');
-        this.shareTitle = this.btnShare?.dataset.shareTitle || document.title;
-        this.shareUrl =
-            this.btnShare?.dataset.shareUrl ||
-            this.canonical?.href ||
-            document.location.href;
-
-        this.init();
-    }
-
-    public static start(): void {
-        const shareComponents = document.querySelectorAll(
-            '[data-module="share"]',
-        );
-
-        shareComponents.forEach((share) => {
-            addJSClass(share);
-            const instance = new Share(share);
-            return instance;
-        });
-    }
-
-    private init(): void {
-        this.initShare();
-    }
-
-    private initShare(): void {
-        if (navigator.share) {
-            this.shareFallback && this.shareFallback.setAttribute('hidden', '');
-            this.btnShare && this.btnShare.removeAttribute('hidden');
-
-            this.btnShare &&
-                this.btnShare.addEventListener('click', () => {
-                    navigator.share({
-                        title: this.shareTitle,
-                        url: this.shareUrl,
-                    });
-                });
-        } else {
-            // Show/hide fallback input & button.
-            const button = this.btnShare;
-            const content = this.shareFallback;
-            button &&
-                disclosure({
-                    button,
-                    content,
-                });
-
-            if (this.shareInput) {
-                this.shareInput.value = this.shareUrl || '';
-            }
-
-            this.btnCopy &&
-                this.btnCopy.addEventListener('click', () => {
-                    this.shareInput && this.handleCopyUrl(this.shareInput);
-                });
-        }
-    }
-
-    private handleCopyUrl(fallbackInput: HTMLInputElement): void {
-        if (!navigator.clipboard) {
-            return;
-        }
-        fallbackInput.select();
-        navigator.clipboard.writeText(fallbackInput.value);
-    }
-}
diff --git a/ui/src/javascript/ui-init.ts b/ui/src/javascript/ui-init.ts
index bf9eb3b..b531804 100644
--- a/ui/src/javascript/ui-init.ts
+++ b/ui/src/javascript/ui-init.ts
@@ -1,6 +1,5 @@
 // Dependencies.
 // 1. Modules.
-import Disclosure from './modules/disclosure';
 import FormValidate from './modules/form-validate';
 import MakeClickable from './modules/make-clickable';
 import Message from './modules/message';
@@ -8,7 +7,6 @@ import Modal from './modules/modal';
 import Prose from './modules/prose';
 import RangeSlider from './modules/range-slider';
 import Search from './modules/search';
-import Share from './modules/share';
 import Slider from './modules/slider';
 import Tabs from './modules/tabs';
 import Toggle from './modules/toggle';
@@ -22,14 +20,12 @@ import WebUIDisclosure from './web-components/webui-disclosure';
 import WebUIShare from './web-components/webui-share';
 
 export const uiInit = (): void => {
-    Disclosure.start();
     FormValidate.start();
     MakeClickable.start();
     Message.start();
     Modal.start();
     RangeSlider.start();
     Search.start();
-    Share.start();
     Slider.start();
     Tabs.start();
     Toggle.start();
diff --git a/ui/src/javascript/utils/disclosure.ts b/ui/src/javascript/utils/disclosure.ts
deleted file mode 100644
index 76e6852..0000000
--- a/ui/src/javascript/utils/disclosure.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { randomString } from './random-string';
-
-/**
- * Function - used by any component that needs to show|hide content, when Accordion or Tab component cannot be used.
- *
- * @param {HTMLButtonElement} button - <button>.
- * @param {HTMLElement} content - usually a <div> whose content is shown|hidden.
- * @param {boolean} [bindEscapeKey] - define if ESC key should hide content.
- * @param {boolean} [bindClickOutside] - define if clicking outside should hide content.
- *
- * @return {void}
- *
- * @example
- *
- *      disclosure({ button, content });
- */
-interface Disclosure {
-    button: HTMLButtonElement;
-    content: HTMLElement | null;
-    bindEscapeKey?: boolean;
-    bindClickOutside?: boolean;
-}
-
-const handleClose = (arg: Disclosure): void => {
-    // Set keyboard focus to the expanded button.
-    if (arg.button.getAttribute('aria-expanded') === 'true') {
-        arg.button.focus();
-        arg.button.setAttribute('aria-expanded', 'false');
-    }
-    arg.content?.setAttribute('hidden', '');
-};
-
-export const disclosure = (arg: Disclosure): void => {
-    arg.button?.removeAttribute('hidden');
-    arg.button.setAttribute('aria-expanded', 'false');
-    arg.content?.setAttribute('hidden', '');
-
-    // Auto-generate unique 'id' and 'aria-controls' attributes, using button 'parentElement' classname as a sensible prefix.
-    if (arg.button.parentElement) {
-        const unique = randomString(
-            arg.button.parentElement.classList[0] ||
-                arg.button.parentElement.nodeName.toLowerCase(),
-        );
-        arg.content?.setAttribute('id', unique);
-        arg.button.setAttribute('aria-controls', unique);
-    }
-
-    arg.button.addEventListener('click', (e: MouseEvent) => {
-        const target = e.currentTarget as HTMLElement;
-        const isExpanded =
-            target?.getAttribute('aria-expanded') === 'true' || false;
-
-        target?.setAttribute('aria-expanded', Boolean(!isExpanded).toString());
-        arg.content?.toggleAttribute('hidden');
-
-        return true;
-    });
-
-    // Bind ESC key to hide content.
-    if (arg.bindEscapeKey) {
-        document.addEventListener('keyup', (e: KeyboardEvent) => {
-            if (e.code === 'Escape') {
-                handleClose(arg);
-            }
-        });
-    }
-
-    // Handle clicking outside the disclosure component.
-    if (arg.bindClickOutside) {
-        document.addEventListener('click', (e: Event) => {
-            const target = e.target as HTMLElement;
-            const insideButton = arg.button.contains(target);
-            const insideContent = arg.content?.contains(target);
-
-            if (!insideButton && !insideContent) {
-                handleClose(arg);
-            }
-        });
-    }
-};
diff --git a/ui/src/javascript/utils/random-string.ts b/ui/src/javascript/utils/random-string.ts
deleted file mode 100644
index 0bbb483..0000000
--- a/ui/src/javascript/utils/random-string.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Function - generates random string (e.g. for unique IDs on DOM elements).
- *
- * @param {string} string - e.g. DOM element className.
- *
- * @return {string}
- *
- * @example
- *      const uniqueId = randomString(myClassName);
- *      myDOMelement.setAttribute('id', uniqueId);
- */
-export const randomString = (string: string): string => {
-    const random = `${string}-${Math.random().toString(36).substring(2, 15)}`;
-
-    return random;
-};