@eric-skaftason/web-components 1.0.0

package/src/modal/menu_controller/menu_controller.html

@@ -0,0 +1,22 @@
+<style>
+    :host {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        padding: 0 5px 0 5px;
+        min-width: 40px;
+        height: 40px;
+
+        color: #ffffff;
+        background-color: #292929;
+        cursor: pointer;
+    }
+
+    :host(:hover) {
+        background-color: #1a1a1a;
+    }
+</style>
+
+<slot></slot>

package/src/modal/menu_controller/menu_controller.js

@@ -0,0 +1,38 @@
+// Menu controller
+class MenuController extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    async connectedCallback() {
+        const res = await fetch('/components/modal/menu_controller/menu_controller.html');
+        const html = await res.text();
+
+        this.shadowRoot.innerHTML = html;
+    }
+}
+customElements.define('menu-controller', MenuController);
+
+// Menu controller (close menu button)
+class Controller_CloseMenu extends MenuController {
+    constructor() {
+        super();
+    }
+
+    async connectedCallback() {
+        await super.connectedCallback();
+
+        this.shadowRoot.host.textContent = this.shadowRoot.host.innerText || 'x';
+
+        this.addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('close-menu', {
+                bubbles: true, // allows the event to move up the dom
+                composed: true // allows the event to move up the dom, outside any shadow dom layers
+            }));
+        });
+    }
+}
+customElements.define('close-menu', Controller_CloseMenu);
+
+export default { MenuController, Controller_CloseMenu };

package/src/modal/menu_controls/menu_controls.html

@@ -0,0 +1,19 @@
+<style>
+    :host {
+        padding: 0;
+
+        box-sizing: border-box;
+        width: 100%;
+
+        user-select: none;
+
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+
+        width: 100%;
+        background-color: #464646;
+    }
+</style>
+
+<slot></slot>

package/src/modal/menu_controls/menu_controls.js

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

package/src/modal/menu_header/menu_header.html

@@ -0,0 +1,16 @@
+<style>
+    :host {
+        box-sizing: border-box;
+        width: 100%;
+
+        padding: 10px;
+
+        display: flex;
+        flex-direction: column;
+        border-color: #dfdfdf;
+
+        user-select: none;
+    }
+</style>
+
+<slot></slot>

package/src/modal/menu_header/menu_header.js

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

package/src/modal/menu_text/menu_text.html

@@ -0,0 +1,18 @@
+<style>
+    :host {
+        width: 100%;
+        box-sizing: border-box;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        padding: 5px;
+        
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+
+        color: #ffffff;
+    }
+</style>
+
+<slot></slot>

package/src/modal/menu_text/menu_text.js

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

package/src/modal/menu_title/menu_title.html

@@ -0,0 +1,21 @@
+<style>
+    :host {
+        /* Fill the entire space of the menu-title html element (the element's size is defined in menu_header.html as ::slotted(menu-title){...}) */
+        width: 100%;
+        height: 70px;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+
+        border-bottom: #dfdfdf 1px dashed;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        color: #ffffff;
+        font-size: 26px;
+        font-weight: bold;
+    }
+</style>
+
+<slot></slot>

package/src/modal/menu_title/menu_title.js

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

package/src/modal/modal_menu/modal_menu.html

@@ -0,0 +1,39 @@
+<style>
+    :host {
+        width: 100%;
+        height: 100%;
+
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        background-color: rgba(0, 0, 0, 0.8);
+        z-index: 10000;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .menu_container {
+        position: relative; /* makes children with absolute position be relative to this element */
+        min-width: 250px;
+        min-height: 250px;
+        width: 80%;
+        height: 80%;
+
+        padding-bottom: 10px;
+        overflow: hidden;
+        box-sizing: border-box;
+
+        display: flex;
+        flex-direction: column;
+
+        background-color: #303030;
+    }
+
+</style>
+
+<div class="menu_container">
+    <slot></slot>
+</div>

package/src/modal/modal_menu/modal_menu.js

@@ -0,0 +1,42 @@
+export class ModalMenu extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    setDimensions(width, height) {
+        if (width) this.shadowRoot.querySelector('.menu_container').style.width = width;
+        if (height) this.shadowRoot.querySelector('.menu_container').style.height = height;
+    }
+
+    async connectedCallback() {
+        const res = await fetch('/components/modal/modal_menu/modal_menu.html');
+        const html = await res.text();
+
+        this.shadowRoot.innerHTML = html;
+
+        // Set width/height
+        this.setDimensions(this.shadowRoot.host.getAttribute('width'), this.shadowRoot.host.getAttribute('height'));
+        
+        // Opacity of BG
+        const opacity = this.shadowRoot.host.getAttribute('opacity');
+        if (opacity) {
+            this.shadowRoot.host.style.backgroundColor = `rgba(0, 0, 0, ${opacity})`;
+        }
+
+        // Vertical centring (center for consistency)
+        const center = this.shadowRoot.host.getAttribute('center');
+
+        const menu_body = this.shadowRoot.host.querySelector('menu-body');
+        if (menu_body && (center === '' || center)) {
+            menu_body.style.display = 'flex';
+            menu_body.style.justifyContent = 'center';
+            menu_body.style.height = '100%';
+        }
+
+        this.addEventListener('close-menu', (event) => {
+            this.remove();
+        });
+    }
+}
+customElements.define('modal-menu', ModalMenu);

package/src/modal/modal_menu.js

@@ -0,0 +1,15 @@
+import '/components/modal/modal_menu/modal_menu.js';
+
+import '/components/modal/menu_controls/menu_controls.js';
+import '/components/modal/menu_controller/menu_controller.js';
+
+import '/components/modal/menu_header/menu_header.js';
+import '/components/modal/menu_body/menu_body.js';
+
+import '/components/modal/menu_title/menu_title.js';
+import '/components/modal/menu_text/menu_text.js';
+import '/components/modal/menu_button/menu_button.js';
+
+import '/components/modal/list_input/list_input.js';
+import '/components/modal/list_add_element/list_add_element.js';
+import '/components/modal/list_element/list_element.js';

package/src/modal-lite/modal_menu.css

@@ -0,0 +1,122 @@
+.modal * {
+    box-sizing: border-box;
+}
+
+.modal {
+    width: 100%;
+    height: 100%;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 10000;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal .menu_container {
+    position: relative; /* makes children with absolute position be relative to this element */
+    min-width: 250px;
+    min-height: 250px;
+    width: 80%;
+    height: 80%;
+
+    padding-bottom: 10px;
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: column;
+
+    background-color: #303030;
+}
+
+.modal .menu_container * {
+    width: 100%;
+
+    padding: 10px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    border-color: #dfdfdf;
+
+    user-select: none;
+}
+
+.modal .menu_controls {
+    /* position: absolute; */
+    /* top: 0; */
+    /* right: 0; */
+
+    padding: 0;
+    height: 40px;
+    background-color: #464646;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 5px;
+}
+
+.modal .menu_controls .menu_control {
+    width: 40px;
+    height: 100%;
+
+    color: #ffffff;
+    background-color: #292929;
+    cursor: pointer;
+}
+
+.modal .menu_controls .menu_control:hover {
+    background-color: #1a1a1a;
+}
+
+.modal .menu_header {
+    
+}
+
+.modal .menu_body {
+    overflow-y: auto;
+}
+
+.modal .menu_title {
+    height: 70px;
+    margin-bottom: 10px;
+
+    color: #ffffff;
+    font-size: 26px;
+    font-weight: bold;
+
+    border-bottom: 1px solid;
+    /* text-decoration: underline; */
+}
+
+.modal .menu_text {
+    color: #f5f5f5;
+}
+
+
+.modal .menu_button {
+    height: 50px;
+    color: #f5f5f5;
+
+    background-color: #292929;
+
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.1s ease;
+}
+
+.modal .menu_button:hover {
+    background-color: #1a1a1a;
+}
+
+.modal .menu_button:active {
+    transform: scale(0.98);
+}

package/src/nav_bar/nav_bar.html

@@ -0,0 +1,178 @@
+<style>
+    .placeholder {
+        display: block;
+        width: 100%;
+        height: 150px;
+    }
+
+    .nav_bar {
+        display: flex;
+        flex-direction: column;
+
+        position: fixed;
+        top: 0;
+        left: 0;
+        background-color: rgba(255, 255, 255, 0.6);
+        backdrop-filter: blur(10px);
+        z-index: 1000;
+        backdrop-filter: blur(5px);
+        
+
+        width: 100%;
+        height: 150px;
+
+        border-bottom: 1px solid black;
+    }
+
+    .row {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        
+        width: 100%;
+    }
+
+    /* Row 1 */
+
+    #main {
+        flex: 2;
+    }
+
+    #title_container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        flex: 1;
+    }
+
+    #title {
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 40px;
+
+        cursor: pointer;
+        margin: 0;
+        margin-top: 5px;
+    }
+
+    #title:hover {
+        text-decoration: underline;
+    }
+
+    #subtitle {
+        margin: 0;
+
+        font-family: 'Times New Roman', Times, serif;
+        font-style: italic;
+    }
+
+    #logo {
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        height: 100px;
+        width: auto;
+        aspect-ratio: 1 / 1;
+
+        cursor: pointer;
+        
+        transition: transform 0.2s;
+    }
+
+    /* Row 2 */
+
+    ::slotted(*) {
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+
+        justify-content: center;
+        align-items: center;
+
+        flex: 1;
+        justify-content: space-between;
+    }
+
+    .slot_wrapper {
+        flex: 1;
+        justify-content: space-between;
+
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+
+        border-top: 1px solid #00469c;
+    }
+
+    #links * {
+        display: flex;
+
+        height: 100%;
+
+        justify-content: center;
+        align-items: center;
+    }
+
+    a:hover {
+        background-color: rgba(255, 255, 255, 0.4);
+        border-left: 1px solid #00469c;
+        border-right: 1px solid #00469c;
+    }
+    ::slotted(a:hover) {
+        background-color: rgba(255, 255, 255, 0.4);
+        border-left: 1px solid #00469c;
+        border-right: 1px solid #00469c;
+    }
+
+    .dropdown {
+        flex: 2;
+        outline: none;
+        border: none;
+    }
+    ::slotted(.dropdown) {
+        flex: 2;
+        outline: none;
+        border: none;
+    }
+
+    .quick_link {
+        flex: 1;
+    }
+    ::slotted(.quick_link) {
+        flex: 1;
+
+        justify-content: center;
+        align-items: center;
+    }
+
+</style>
+<div class="placeholder"></div>
+<div class="nav_bar">
+    <div class="row" id="main">
+        <div id="title_container">
+            <h1 id="title">Redmond Tech Team</h1>
+            <p id="subtitle">-</p>
+        </div>
+        <img id="logo" src="/assets/tech_logo_hd.png" alt="">
+    </div>
+    <div class="slot_wrapper">
+        <slot>
+            <nav class="row" id="links">
+                <dropdown-menu desc="Programs" openFrom="bottom" class="dropdown">
+
+                    <dropdown-element link="/rfs"><p>RedFS</p></dropdown-element>
+                    <dropdown-element link="/games"><p>Games</p></dropdown-element>
+                    
+                </dropdown-menu>
+                <a class="quick_link" href="/rfs">RedFS</a>
+                <a class="quick_link" href="/info">Fun</a>
+                <a class="quick_link" href="/contrib">Info</a>
+                <dropdown-menu desc="Authentication" openFrom="bottom" class="dropdown">
+                    <dropdown-element link="/login"><p>Login</p></dropdown-element>
+                    <dropdown-element link="/sign_up"><p>Create Account</p></dropdown-element>
+                </dropdown-menu>
+            </nav>
+        </slot>
+    </div>
+</div>

package/src/nav_bar/nav_bar.js

@@ -0,0 +1,50 @@
+class NavBar extends HTMLElement {
+    constructor() {
+        super(); // must run super as this constructor is prioritised over the HTMLElement class constructor
+
+        // Use shadow DOM to prevetns styling conflicts between this element and the parent DOM
+        this.attachShadow({ mode: 'open' }); // mode open makes shadowRoot accessible via element.shadowRoot in JS
+
+        const tempStyle = document.createElement('style');
+        // host refers to self
+        tempStyle.textContent = `
+            :host {
+                display: block;
+                height: 150px;
+            }
+        `;
+
+        this.shadowRoot.append(tempStyle);
+
+
+    }
+
+    // when element is added to DOM
+    async connectedCallback() {
+        const response = await fetch('/components/nav_bar/nav_bar.html');
+        const html = await response.text(); // use text method for HTML
+        this.shadowRoot.innerHTML = html;
+
+        // Once this js file loads, the HTML dropdown elements get updated
+        await import("/components/dropdown/dropdown.js");
+
+        const subtitle_response = await fetch('/api/app_info');
+        const subtitle_json = await subtitle_response.json();
+        const subtitle = subtitle_json.data;
+        this.shadowRoot.getElementById("subtitle").innerText = `${subtitle.package} - ${subtitle["dev-phase"]} v${subtitle.version}`;
+
+        // Click on main bar to return to home
+        this.shadowRoot.addEventListener('click', (event) => {
+            const target = event.target;
+
+            if (target.id === 'title' || target.id === 'logo') document.location = '/';
+        });
+    }
+
+    // when element is removed from DOM
+    disconnectedCallback() {
+
+    }
+}
+
+customElements.define('page-nav', NavBar);

package/src/progress_bar/progress_bar.html

@@ -0,0 +1,21 @@
+<style>
+    .bar_container, .bar {
+        border-radius: 5px;
+    }
+
+    .bar_container {
+        width: 400px;
+        height: 20px;
+
+        background-color: rgb(168, 168, 168);
+    }
+
+    .bar_container .bar {
+        height: 100%;
+        width: 0%;
+        background-color: #1880ff;
+    }
+</style>
+<div class="bar_container">
+    <div class="bar"></div>
+</div>