@eric-skaftason/web-components 1.0.0

package/src/dropdown/dropdown.js

@@ -0,0 +1,120 @@
+class DropdownMenu extends HTMLElement {
+    constructor() {
+        super();
+
+        this.isOpen = false; // menu open/closed
+        this.subOpen = false; // sub menu open/closed
+        this.attachShadow({ mode: 'open' });
+    }
+    subMenuOpen() {
+        this.shadowRoot.querySelector('')
+    }
+
+    getMenuPos() {
+        const controller = this.shadowRoot.querySelector('.dropdown_menu_controller');
+        const openFrom = this.getAttribute('openFrom');
+
+        switch (openFrom) {
+            case 'right':
+                return {
+                    x: controller.getBoundingClientRect().right,
+                    y: controller.getBoundingClientRect().top
+                };
+
+            // Default / bottom
+            default:
+                return {
+                    x: controller.getBoundingClientRect().left,
+                    y: controller.getBoundingClientRect().bottom
+                };
+        }
+    }
+
+    open() {
+        const controller = this.shadowRoot.querySelector('.dropdown_menu_controller');
+        const dropdown_menu = this.shadowRoot.querySelector('.dropdown_menu');
+        dropdown_menu.style.display = 'flex';
+
+        const {x: menuX, y: menuY} = this.getMenuPos();
+
+        dropdown_menu.style.top = `${menuY}px`;
+        dropdown_menu.style.left = `${menuX}px`;
+
+        dropdown_menu.style.maxWidth = `${controller.getBoundingClientRect().width}px`;
+
+
+        // Change controller text
+        controller.innerText = `▼ ${this.desc}`;
+
+        this.isOpen = true;
+    }
+
+    close() {
+        const controller = this.shadowRoot.querySelector('.dropdown_menu_controller');
+        const dropdown_menu = this.shadowRoot.querySelector('.dropdown_menu');
+        dropdown_menu.style.display = 'none';
+        controller.innerText = `▶ ${this.desc}`;
+        
+        this.isOpen = false;
+    }
+
+    async connectedCallback() {
+        // Set shadow DOM HTML
+        const res = await fetch('/components/dropdown/dropdown_menu.html');
+        const html = await res.text();
+
+        this.shadowRoot.innerHTML = html;
+
+        // set text
+        const controller = this.shadowRoot.querySelector('.dropdown_menu_controller');
+
+        this.desc = this.getAttribute('desc') || 'dropdown menu';
+        controller.innerText = `▶ ${this.desc}`;
+
+        // Add event listeners
+        controller.addEventListener('click', (event) => {
+            this.isOpen ? this.close() : this.open();
+        });
+
+        document.addEventListener('click', (event) => {
+            // composedPath returns array ordered from deepest element
+            // Thus, it works with shadow DOM
+            // event.target doesn't work because shadow DOM hides the nodes
+            const path = event.composedPath();
+
+            // some method checks if any element matches the condition
+            const clickedDropdownElement = path.some(node =>
+                node.tagName === 'DROPDOWN-ELEMENT'
+            ); // tag name property is always in upercase
+
+            // Run close method if the path includes 'this' HTML element or if a dropdown element was clicked
+            if (!path.includes(this) || clickedDropdownElement) this.close();
+        });
+    }
+}
+
+customElements.define('dropdown-menu', DropdownMenu);
+
+
+class DropdownElement extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    async connectedCallback() {
+        const res = await fetch('/components/dropdown/dropdown_element.html');
+        const html = await res.text();
+
+        this.shadowRoot.innerHTML = html;
+
+        this.addEventListener('click', () => {
+            const link = this.getAttribute('link') || null;
+            if (!link) return;
+
+            document.location = link;
+        });
+    }
+}
+
+customElements.define('dropdown-element', DropdownElement);

package/src/dropdown/dropdown_element.html

@@ -0,0 +1,27 @@
+<style>
+    .dropdown_element {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+
+        cursor: pointer;
+    }
+
+    .dropdown_element:hover {
+        background-color: rgba(255, 255, 255, 0.95);
+    }
+
+    ::slotted(*) {
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 16px;
+    }
+
+</style>
+<div class="dropdown_element">
+    <slot>
+
+    </slot>
+</div>

package/src/dropdown/dropdown_menu.html

@@ -0,0 +1,58 @@
+<style>
+    .dropdown_menu_controller {
+        display: flex;
+        box-sizing: border-box;
+        width: 100%;
+        height: 50px;
+
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 16px;
+        justify-content: center;
+        align-items: center;
+        
+        user-select: none;
+        
+        cursor: pointer;
+    }
+
+    .dropdown_menu_controller:hover {
+        text-decoration: underline;
+        background-color: rgba(255, 255, 255, 0.95);
+        border: 1px solid #00469c;
+    }
+
+    
+    /* Styling for the menu itself */
+    .dropdown_menu {
+        /* Initially not visible */
+        display: none;
+
+        flex-direction: column;
+        position: fixed;
+
+        top: 0;
+        left: 0;
+        
+        box-sizing: border-box;
+        width: 250px;
+    }
+
+    /* styling for elements within the menu */
+    ::slotted(*) {
+        box-sizing: border-box;
+        user-select: none;
+
+        flex: 0 0 50px;
+        width: 100%;
+
+        background-color: rgba(255, 255, 255, 0.9);
+    }
+
+</style>
+<div class="dropdown_menu_controller"></div>
+<div class="dropdown_menu">
+    <!-- use slots so HTML elements can be passed into the custom dropdown -->
+    <slot>
+        
+    </slot>
+</div>

package/src/modal/list_add_element/list_add_element.html

@@ -0,0 +1,44 @@
+<script src="/components/modal/menu_button/menu_button.js"></script>
+
+<style>
+    :host {
+        box-sizing: border-box;
+        width: 100%;
+        color: #f5f5f5;
+
+        padding-left: 10px;
+        margin-bottom: 10px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        background-color: #3a3a3a;
+
+        border: 1px solid #1a1a1a;
+
+        cursor: text;
+        transition: background-color 0.2s ease;
+    }
+
+    :host(:hover) {
+        background-color: #292929;
+    }
+
+    .text_input {
+        all: unset;
+
+        width: 100%;
+        height: 100%;
+
+    }
+
+</style>
+
+<slot hidden></slot>
+<input type="text" class="text_input" id="text_input_add">
+
+</input>
+<div class="element_functions">
+    <menu-button id="add">+</menu-button>
+</div>

package/src/modal/list_add_element/list_add_element.js

@@ -0,0 +1,53 @@
+// List element
+export class ListAddElement extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    getTextFromSlot() {
+        const slot = this.shadowRoot.querySelector('slot');
+        const text = slot.assignedNodes({flatten: true}).filter(n => n.nodeType === Node.TEXT_NODE).map(n => n.textContent.trim()).join('');
+
+        return text;
+    }
+
+    async connectedCallback() {
+        const res = await fetch('/components/modal/list_add_element/list_add_element.html');
+        const html = await res.text();
+
+        this.shadowRoot.innerHTML = html;
+
+        // Get text from slot
+        const text = this.getTextFromSlot();
+        
+        const text_input = this.shadowRoot.querySelector('.text_input');
+        text_input.placeholder = text;
+
+        // running obj.method in an event listener doesn't work becasue it calls method instead of obj.method
+        // method must be bound to the object manually
+        this.shadowRoot.querySelector('#add').addEventListener('click', this.addElement.bind(this));
+        this.shadowRoot.querySelector('#text_input_add').addEventListener('keydown', (event) => {
+            if (event.key === 'Enter') this.addElement();
+        });
+    }
+
+    async addElement() {
+        // Add element
+        const newElementText = this.shadowRoot.querySelector('.text_input').value;
+        const newElement = await this.shadowRoot.host.closest('list-input').appendElement(newElementText);
+
+        // if new element was created
+        if (newElement) {
+            // Scroll to bottom of body 
+            setTimeout(() => {
+                // this.shadowRoot.host.closest('menu-body').scrollToEnd();
+                newElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }, 50);
+
+            // clear input box
+            this.shadowRoot.querySelector('#text_input_add').value = '';
+        }
+    }
+}
+customElements.define('list-add-element', ListAddElement);

package/src/modal/list_element/list_element.html

@@ -0,0 +1,42 @@
+<script src="/components/modal/menu_button/menu_button.js"></script>
+
+<style>
+    :host {
+        box-sizing: border-box;
+        width: 100%;
+        color: #f5f5f5;
+
+        padding-left: 10px;
+        margin-bottom: 10px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        background-color: #3a3a3a;
+
+        cursor: text;
+        transition: background-color 0.2s ease;
+    }
+
+    :host(:hover) {
+        background-color: #292929;
+    }
+
+    .text_input {
+        all: unset;
+
+        width: 100%;
+        height: 100%;
+
+    }
+
+</style>
+
+<slot hidden></slot>
+<input type="text" class="text_input">
+
+</input>
+<div class="element_functions">
+    <menu-button id="del">🗑</menu-button>
+</div>

package/src/modal/list_element/list_element.js

@@ -0,0 +1,28 @@
+// List element
+export class ListElement extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    async connectedCallback() {
+        const res = await fetch('/components/modal/list_element/list_element.html');
+        const html = await res.text();
+
+        this.shadowRoot.innerHTML = html;
+
+        // Get text
+        const slot = this.shadowRoot.querySelector('slot');
+        const text = slot.assignedNodes({flatten: true}).filter(n => n.nodeType === Node.TEXT_NODE).map(n => n.textContent.trim()).join('');
+        
+        const text_input = this.shadowRoot.querySelector('.text_input');
+        text_input.value = text;
+
+
+        this.shadowRoot.querySelector('#del').addEventListener('click', async (event) => {
+            const listElement = this.shadowRoot.host;
+            await this.shadowRoot.host.closest('list-input').removeElement(listElement);
+        });
+    }
+}
+customElements.define('list-element', ListElement);

package/src/modal/list_input/list_input.html

@@ -0,0 +1,28 @@
+<script src="/components/modal/menu_button/menu_button.js"></script>
+<script src="/components/modal/modal_menu/modal_menu.js"></script>
+
+<style>
+    :host {
+        color: #f5f5f5;
+
+        padding: 10px;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        background-color: #464646;
+    }
+
+    .function_row {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+    }
+</style>
+
+<slot hidden></slot>
+<!-- <div class="function_row">
+    <menu-button>Expand/shrink</menu-button>
+</div> -->

package/src/modal/list_input/list_input.js

@@ -0,0 +1,174 @@
+// List input
+export class ListInput extends HTMLElement {
+    #elements = []; // should be an array of strings
+    #maxStringLen = 64;
+
+    #isValidStringExternal = () => {
+        return true;
+    }
+
+    #isValidStringExternalAsync = async () => {
+        return true;
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    modalMessage(message) {
+        const modal_menu = this.shadowRoot.host.closest('modal-menu');
+        modal_menu.insertAdjacentHTML('afterend', 
+            `
+                <modal-menu width="200px" height="200px" opacity="0" center>
+                    <menu-controls>
+                        <close-menu></close-menu>
+                    </menu-controls>
+                    <menu-body>
+                        <menu-text>${message}</menu-text>
+                        <close-menu>OK</close-menu>
+                    </menu-body>
+                </modal-menu>
+            `
+        );
+    }
+
+    async connectedCallback() {
+        const res = await fetch('/components/modal/list_input/list_input.html');
+        const html = await res.text();
+
+        this.shadowRoot.innerHTML = html;
+
+        // initialise #elements        
+        const list_elements = this.shadowRoot.host.querySelectorAll('list-element');
+
+        for (let i = list_elements.length - 1; i >= 0; i--) {
+            const list_element = list_elements[i];
+            let element_text = list_element.innerText;
+
+            // ENFORCES MAX STRING LENGTH
+            // DOES NOT ENFORCE STRING VALIDITY FOR SLOTTED STRINGS
+            if (element_text.length > this.#maxStringLen) {
+                element_text = element_text.slice(0, this.#maxStringLen);
+                list_elements[i].innerText = element_text;
+            }
+
+            this.#elements.unshift(element_text);
+        }
+
+        // slot is visible to this.shadowRoot but not this.shadowRoot.host
+        // slotted elements are projected to the shadow dom, and slot is removed
+        this.shadowRoot.querySelector('slot').hidden = false;
+
+
+        // Connect isValidString to src
+        const verificationScriptSrc = this.shadowRoot.host.getAttribute('verify-str-src');
+        if (verificationScriptSrc) {
+            try {
+                const module = await import(verificationScriptSrc);
+                if (typeof module.isValidString !== 'function') throw new Error('Missing isValidString function.');
+
+                if (module.isValidString.constructor.name === "AsyncFunction") {
+                    this.#isValidStringExternalAsync = module.isValidString;
+                } else {
+                    this.#isValidStringExternal = module.isValidString;
+                }
+
+            } catch (err) {
+                console.error('Module failed to load:', err);
+            }
+        }
+    }
+
+    async isValidString(string) {
+        if (typeof string !== 'string') return false;
+
+        if (string.length > this.#maxStringLen) return false;
+
+        const additional_args = this.shadowRoot.host.getAttribute('verify-str-args');
+        const additional_args_parsed = additional_args !== null ? JSON.parse(additional_args): [];
+
+        const validSync = this.#isValidStringExternal(string, ...additional_args_parsed);
+        const validAsync = await this.#isValidStringExternalAsync(string, ...additional_args_parsed);
+        if (validSync !== true || validAsync !== true) {
+
+            const errorMsg = (() => {
+                if (typeof validSync === 'string') return validSync;
+                if (typeof validAsync === 'string') return validAsync;
+                return null;
+            })();
+            if (errorMsg) {
+                this.modalMessage(errorMsg);
+            }
+            
+            return false;
+        }
+
+        return true;
+    }
+
+    getNewElement(text) {
+        const list_element = document.createElement('list-element');
+        list_element.innerText = text;
+
+        return list_element;
+    }
+
+    getElements() {
+        return this.#elements;
+    }
+
+    getElementIndex(element) {
+        const allElements = Array.from(this.shadowRoot.host.querySelectorAll('list-element'));
+        return allElements.indexOf(element);
+    }
+
+    async prependElement(text) {
+        if (!await this.isValidString(text)) return;
+
+        const newElement = this.getNewElement(text);
+
+        this.#elements.unshift(text);
+        this.shadowRoot.host.prepend(newElement);
+
+        return newElement;
+    }
+
+    async addElement(index, text) {
+        if (!await this.isValidString(text)) return;
+        if (index < 0 || index >= this.#elements.length) return;
+
+        if (index === this.#elements.length - 1) return this.appendElement(text);
+        if (index === 0) return this.prependElement(text);
+
+        // insert at index, remove 0, insert element
+        this.#elements.splice(index, 0, text);
+
+        const newElement = this.getNewElement(text);
+
+        this.shadowRoot.host.insertBefore(newElement, this.shadowRoot.host.querySelectorAll('list-element')[index]);
+
+        return newElement;
+    }
+
+    async appendElement(text) {
+        if (!await this.isValidString(text)) return;
+
+        this.#elements.push(text);
+
+        const newElement = this.getNewElement(text);
+
+        this.shadowRoot.host.insertBefore(newElement, this.shadowRoot.host.querySelector('list-add-element'));
+
+        return newElement;
+    }
+
+    async removeElement(element) {
+        const index = this.getElementIndex(element);
+        if (index == null || index < 0 || index >= this.#elements.length) return;
+
+        this.#elements.splice(index, 1);
+        element.remove();
+    }
+}
+customElements.define('list-input', ListInput);

package/src/modal/menu_body/menu_body.html

@@ -0,0 +1,38 @@
+<style>
+    :host {
+        box-sizing: border-box;
+        width: 100%;
+
+        padding: 10px;
+
+        display: flex;
+        flex-direction: column;
+
+        border-top: 1px solid #dfdfdf;
+        /* border-bottom: 1px solid #dfdfdf; */
+
+        user-select: none;
+
+        overflow-y: auto;
+    }
+
+    :host::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    :host::-webkit-scrollbar-thumb {
+        background-color: #1880ffbd;
+        border-radius: 4px;
+    }
+
+    :host::-webkit-scrollbar-track {
+        background-color: #00295a;
+    }
+
+    host::-webkit-scrollbar-button {
+        display: none;
+    }
+    
+</style>
+
+<slot></slot>

package/src/modal/menu_body/menu_body.js

@@ -0,0 +1,22 @@
+// Menu body (container)
+export class MenuBody extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    async connectedCallback() {
+        const res = await fetch('/components/modal/menu_body/menu_body.html');
+        const html = await res.text();
+
+        this.shadowRoot.innerHTML = html;
+    }
+
+    scrollToEnd() {
+        this.shadowRoot.host.scrollTo({
+            top: this.shadowRoot.host.scrollHeight,
+            behavior: 'smooth'
+        });
+    }
+}
+customElements.define('menu-body', MenuBody);

package/src/modal/menu_button/menu_button.html

@@ -0,0 +1,32 @@
+<style>
+    :host {
+        box-sizing: border-box;
+        width: 100%;
+        min-height: 50px;
+        height: 50px;
+        min-width: 50px;
+        padding: 0 5px 0 5px;
+        
+        color: #f5f5f5;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        background-color: #292929;
+
+        cursor: pointer;
+        transition: background-color 0.2s ease, transform 0.1s ease;
+    }
+
+    :host(:hover) {
+        background-color: #1a1a1a;
+    }
+
+    :host(:active) {
+        transform: scale(0.98);
+    }
+</style>
+
+
+<slot></slot>

package/src/modal/menu_button/menu_button.js

@@ -0,0 +1,15 @@
+// Menu button
+export class MenuButton extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    async connectedCallback() {
+        const res = await fetch('/components/modal/menu_button/menu_button.html');
+        const html = await res.text();
+
+        this.shadowRoot.innerHTML = html;
+    }
+}
+customElements.define('menu-button', MenuButton);