V3 release

Version 3

.github/workflows/build.yml

@@ -1,28 +1 @@
-on:
-  push:
-    branches:
-      - v3-dev
-
-jobs:
-  build_css:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Setup Node.js environment
-        uses: actions/setup-node@v2.5.0
-
-      - name: Checkout source Git branch
-        uses: actions/checkout@v2
-
-      - name: Compile SCSS
-        uses: gha-utilities/sass-build@v0.4.3
-        with:
-          source: src/scss/index.scss
-          destination: dist/css/material.min.css
-
-      - name: Auto committing build files
-        uses: stefanzweifel/git-auto-commit-action@v3.0.0
-        with:
-          commit_message: "Compile Files"
-          branch: v3-dev
-
+# Conflict resolved

README.md

@@ -17,6 +17,6 @@
 See how to [getting started here](https://material.pages.dev/getting-started).
 
 ## Developers who love this framework
-[![Stargazers repo roster for @Tronic247/material](https://reporoster.com/stars/notext/Tronic247/material)](https://github.com/Tronic247/material/stargazers)
+[![Stargazers for @Tronic247/material](https://reporoster.com/stars/notext/Tronic247/material)](https://github.com/Tronic247/material/stargazers)
 
 

src/README.md

@@ -0,0 +1 @@
+# Source files

src/js/components/accordion.js

@@ -0,0 +1,42 @@
+const Accordion = {
+    init: function () {
+        const accordions = document.querySelectorAll('.accordion');
+        if (accordions) {
+            accordions.forEach(function (i) {
+                const _this = i;
+                const items = _this.querySelectorAll('.item');
+
+                if (items) {
+                    items.forEach(function (i) {
+                        const children = i.querySelectorAll('.content , .content *');
+                        if (children) {
+                            const focus = () => {
+                                if (i.classList.contains('open')) {
+                                    children.forEach(function (i) {
+                                        i.setAttribute("tabIndex", "-1");
+                                    });
+                                }
+                                else {
+                                    children.forEach(function (i) {
+                                        i.removeAttribute("tabIndex");
+                                    });
+                                }
+                            };
+                            focus();
+
+                            const ih = i.offsetHeight;
+                            i.style.setProperty("--max-height", `${ih + 20}px`);
+
+                            i.querySelector("[data-toggle]").addEventListener("click", () => {
+                                focus();
+                                i.classList.toggle("open");
+                            });
+                        }
+                    });
+                }
+            });
+        }
+    }
+};
+Accordion.init();
+export default Accordion;

src/js/components/appbar.js

@@ -0,0 +1,16 @@
+const Appbar = {
+    init: () => {
+        const elements = document.querySelectorAll('.appbar.elevating');
+        elements.forEach(element => {
+            document.addEventListener('scroll', () => {
+                if (window.scrollY > 100) {
+                    element.classList.add('elevated');
+                } else {
+                    element.classList.remove('elevated');
+                }
+            });
+        })
+    }
+};
+Appbar.init();
+export default Appbar;

src/js/components/dialog.js

@@ -0,0 +1,66 @@
+import * as focusTrap from "focus-trap";
+let trap;
+
+const getScrollbarWidth = () => {
+    const outer = document.createElement("div");
+    outer.style.visibility = "hidden";
+    outer.style.width = "100px";
+    outer.style.msOverflowStyle = "scrollbar";
+    outer.style.overflow = "scroll";
+    document.body.appendChild(outer);
+    const widthNoScroll = outer.offsetWidth;
+    outer.style.overflow = "scroll";
+    const inner = document.createElement("div");
+    inner.style.width = "100%";
+    outer.appendChild(inner);
+    const widthWithScroll = inner.offsetWidth;
+    outer.parentNode.removeChild(outer);
+    return widthNoScroll - widthWithScroll;
+};
+
+const ToggleOverflow = (overflow) => {
+    if (overflow) {
+        document.body.style.setProperty("--scrollbar-width", `${getScrollbarWidth()}px`);
+        document.body.classList.add("overflow-hidden");
+    } else {
+        document.body.style.removeProperty("--scrollbar-width");
+        document.body.classList.remove("overflow-hidden");
+    }
+};
+const Dialog = {
+    toggle: (el) => {
+        const dialog = el;
+        if (dialog.classList.contains("open")) {
+            Dialog.close(el);
+        }
+        else {
+            Dialog.open(el);
+        }
+    },
+    open: (el) => {
+        const dialog = el;
+        dialog.classList.add("open");
+        dialog.removeAttribute("tabindex");
+        ToggleOverflow(true);
+        trap = focusTrap.createFocusTrap(dialog, {
+            onDeactivate: () => {
+                Dialog.close(el);
+            }
+        });
+        trap.activate();
+        el.addEventListener("pointerdown", (e) => {
+            if (e.target !== e.currentTarget)
+                return;
+            Dialog.close(el);
+        });
+    },
+    close: (el) => {
+        const dialog = el;
+        dialog.setAttribute("tabindex", "-1");
+        dialog.classList.remove("open");
+        document.body.classList.remove("modal-open");
+        trap.deactivate();
+        ToggleOverflow(false);
+    }
+};
+export default Dialog;

src/js/components/forms.js

@@ -0,0 +1,51 @@
+import noUiSlider from 'nouislider';
+
+const Forms = {
+    init: function (element = document.body) {
+        const forms = element.querySelectorAll(".textbox");
+        for (let i = 0; i < forms.length; i++) {
+            let parent = forms[i];
+            let input = parent.querySelector(".input");
+
+            if (input.value) {
+                parent.classList.add("floating");
+            }
+            else {
+                parent.classList.remove("floating");
+            }
+
+            parent.addEventListener("click", function () {
+                parent.classList.add("floating");
+                input.focus();
+            });
+
+            input.addEventListener("focus", function () {
+                parent.classList.add("focus");
+                parent.classList.add("floating");
+            });
+
+            input.addEventListener("blur", function () {
+                parent.classList.remove("focus");
+                if (input.value) {
+                    parent.classList.add("floating");
+                }
+                else {
+                    parent.classList.remove("floating");
+                }
+            });
+
+            input.addEventListener("input", function () {
+                if (input.value) {
+                    parent.classList.add("floating");
+                }
+                else {
+                    parent.classList.remove("floating");
+                }
+            });
+        }
+    },
+    initRangeSlider: function (element,options) {
+        noUiSlider.create(element, options);
+    }
+};
+export default Forms;

src/js/components/menu.js

@@ -0,0 +1,66 @@
+import * as focusTrap from 'focus-trap';
+import { createPopper } from '@popperjs/core';
+let trap;
+let element;
+const Menu = {
+    init: () => {
+        const trigger = document.querySelectorAll('[data-toggle-menu]');
+
+        trigger.forEach(el => {
+            const target = el.getAttribute('data-toggle-menu');
+            const menu = document.querySelector(`[data-menu-id="${target}"]`);
+            const children = menu.querySelectorAll('*');
+            element = el;
+
+            const toggle = () => {
+                Menu.toggle(menu);
+            };
+
+            el.addEventListener('pointerdown', toggle);
+            el.addEventListener('click', (e) => {
+                if (e.clientX == 0 || e.clientY == 0) {
+                    toggle();
+                }
+            });
+
+            children.forEach(child => {
+                child.addEventListener('click', () => {
+                    const target = element.getAttribute('data-toggle-menu');
+                    const menu = document.querySelector(`[data-menu-id="${target}"]`);
+                    Menu.close(menu);
+                });
+            });
+        });
+    },
+
+    toggle: (menu) => {
+        if (menu.classList.contains('open')) {
+            Menu.close(menu);
+        }
+        else {
+            Menu.open(menu);
+        }
+    },
+
+    open: (menu) => {
+        trap = focusTrap.createFocusTrap(menu, {
+            onActivate: () => {
+                menu.classList.add('open');
+            },
+            onDeactivate: () => {
+                menu.classList.remove('open');
+            }
+        });
+        trap.activate();
+        createPopper(element, menu);
+        menu.removeAttribute('tabindex');
+    },
+
+    close: (menu) => {
+        menu.classList.remove('open');
+        trap.deactivate();
+        menu.setAttribute('tabindex', '-1');
+    }
+};
+Menu.init();
+export default Menu;

src/js/components/ripple.js

@@ -0,0 +1,49 @@
+const Ripple = {
+    init: () => {
+        const buttons = document.querySelectorAll('.ripple-e:not(.ripple-ready) , .btn:not(.ripple-ready), .icon:not(.ripple-ready)')
+        const stopEvents = ["pointerup", "mouseleave", "dragleave", "touchmove", "touchend", "touchcancel"];
+        let id;
+
+        function findFurthestPoint(clickPointX, elementWidth, offsetX, clickPointY, elementHeight, offsetY) {
+            let x = clickPointX - offsetX > elementWidth / 2 ? 0 : elementWidth;
+            let y = clickPointY - offsetY > elementHeight / 2 ? 0 : elementHeight;
+            let d = Math.hypot(x - (clickPointX - offsetX), y - (clickPointY - offsetY));
+            return d;
+        }
+
+        buttons.forEach(button => {
+            button.classList.add('ripple-ready');
+            button.addEventListener('pointerdown', e => {
+                const rect = button.getBoundingClientRect()
+                const radius = findFurthestPoint(e.clientX, button.offsetWidth, rect.left, e.clientY, button.offsetHeight, rect.top)
+
+                id = "__" + (Math.random() + 1).toString(36).substring(7) + '-' + (Math.random() + 1).toString(36).substring(7);
+
+                const circle = document.createElement('div')
+                circle.classList.add('ripple')
+                circle.id = id
+
+                circle.style.left = `${e.clientX - rect.left - radius}px`
+                circle.style.top = `${e.clientY - rect.top - radius}px`
+                circle.style.width = circle.style.height = `${radius * 2}px`
+
+                button.appendChild(circle)
+            })
+
+            stopEvents.forEach(event => {
+                button.addEventListener(event, () => {
+                    const ripple = button.querySelector('.ripple#' + id)
+                    if (ripple) {
+                        ripple.style.opacity = '0'
+                        setTimeout(() => {
+                            ripple.remove()
+                        }, 600)
+                    }
+                })
+            })
+        });
+    }
+};
+Ripple.init();
+
+export default Ripple