@schukai/monster 3.64.1 → 3.65.0

package/source/components/navigation/table-of-content.mjs

@@ -0,0 +1,418 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+
+import {instanceSymbol} from "../../constants.mjs";
+import {addAttributeToken} from "../../dom/attributes.mjs";
+import {
+    ATTRIBUTE_ERRORMESSAGE,
+    ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import {CustomElement} from "../../dom/customelement.mjs";
+import {
+    assembleMethodSymbol,
+    registerCustomElement,
+} from "../../dom/customelement.mjs";
+import {findTargetElementFromEvent} from "../../dom/events.mjs";
+import {isFunction} from "../../types/is.mjs";
+import {TableOfContentStyleSheet} from "./stylesheet/table-of-content.mjs";
+import {fireCustomEvent} from "../../dom/events.mjs";
+import {getWindow} from "../../dom/util.mjs";
+import "../layout/popper.mjs";
+
+export {TableOfContent};
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const tableOfContentElementSymbol = Symbol("tableOfContentElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const navigationElementSymbol = Symbol("navigation");
+
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const navigationControlElementSymbol = Symbol("navigationControlElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const navigationListElementSymbol = Symbol("navigationListElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const windowEventHandlerSymbol = Symbol("windowsEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const scrollableParentSymbol = Symbol("scrollableParent");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const scrollableEventHandlerSymbol = Symbol("scrollableEventHandler");
+
+/**
+ * A TableOfContent
+ *
+ * @fragments /fragments/components/form/table-of-content/
+ *
+ * @example /examples/components/form/table-of-content-simple
+ *
+ * @since 3.66.0
+ * @copyright schukai GmbH
+ * @summary A beautiful TableOfContent that can make your life easier and also looks good.
+ */
+class TableOfContent extends CustomElement {
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/navigation/table-of-content@@instance");
+    }
+
+    /**
+     *
+     * @return {Components.Navigation.TableOfContent
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+        return this;
+    }
+
+    /**
+     * To set the options via the html tag the attribute `data-monster-options` must be used.
+     * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+     *
+     * The individual configuration values can be found in the table.
+     *
+     * @property {Object} templates Template definitions
+     * @property {string} templates.main Main template
+     * @property {Object} labels Label definitions
+     * @property {Object} actions Callbacks
+     * @property {string} actions.click="throw Error" Callback when clicked
+     * @property {Object} features Features
+     * @property {number} offset=100 Navigation offset from top
+     * @property {Object} classes CSS classes
+     * @property {boolean} disabled=false Disabled state
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+            labels: {},
+            classes: {},
+            disabled: false,
+            features: {},
+            offset: 100,
+            actions: {
+                click: () => {
+                    throw new Error("the click action is not defined");
+                },
+            }
+        });
+    }
+
+    /**
+     * @return {void}
+     */
+    connectedCallback() {
+        super.connectedCallback();
+
+        initNavigation.call(this);
+
+        setTimeout(() => {
+
+            this[scrollableParentSymbol] = findScrollableParent(this);
+
+            if (this[scrollableParentSymbol] === getWindow()) {
+                this[scrollableParentSymbol].addEventListener('scroll', this[windowEventHandlerSymbol]);
+                calcAndSetNavigationTopWindowContext.call(this);
+            } else {
+                this[scrollableParentSymbol].addEventListener('scroll', this[scrollableEventHandlerSymbol]);
+                calcAndSetNavigationTopScrollableParentContext.call(this);
+            }
+        }, 100);
+    }
+
+    /**
+     * @return {void}
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+
+        if (this[scrollableParentSymbol] === getWindow()) {
+            this[scrollableParentSymbol].removeEventListener('scroll', this[windowEventHandlerSymbol]);
+        } else {
+            this[scrollableParentSymbol].removeEventListener('scroll', this[scrollableEventHandlerSymbol]);
+        }
+    }
+
+    /**
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-table-of-content";
+    }
+
+    /**
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [TableOfContentStyleSheet];
+    }
+
+
+}
+
+/**
+ * @private
+ */
+function calcAndSetNavigationTopWindowContext() {
+
+    const thisTop = this.getBoundingClientRect().top;
+    const topViewport = window.scrollY;
+    let top = Math.max(topViewport, thisTop);
+
+    const offset = this.getOption('offset');
+    if (offset > 0) {
+        top += offset;
+    }
+    this[navigationElementSymbol].style.top = top + "px";
+}
+
+/**
+ * @private
+ */
+function calcAndSetNavigationTopScrollableParentContext() {
+
+    const windowTop = getWindow().scrollY;
+    const thisRect = this.getBoundingClientRect();
+    const thisTop = thisRect.top;
+    const thisBottom = thisRect.bottom;
+    const scrollTop = this[scrollableParentSymbol].scrollTop;
+    let top = windowTop + thisTop + scrollTop;
+
+    if (thisBottom < top) {
+        top = thisBottom;
+        this[navigationElementSymbol].style.visibility = "hidden";
+    } else {
+        this[navigationElementSymbol].style.visibility = "visible";
+    }
+    const offset = this.getOption('offset');
+    if (offset > 0) {
+        top += offset;
+    }
+
+    this[navigationElementSymbol].style.top = top + "px";
+}
+
+/**
+ * @private
+ */
+function initNavigation() {
+
+    const headings = getHeadings.call(this);
+
+    for (const heading of headings) {
+        const div = document.createElement('div');
+        div.classList.add('heading-strip');
+        div.classList.add('level-' + heading.tagName.toLowerCase());
+        this[navigationControlElementSymbol].appendChild(div);
+    }
+
+    this[navigationListElementSymbol].appendChild(createListFromHeadings.call(this, headings).sublist);
+}
+
+/**
+ * Recursively creates a nested list (UL) from a list of heading elements.
+ * @param {HTMLElement[]} nodeList - The list of heading elements.
+ * @param {number} currentLevel - The current heading level we are processing.
+ * @returns {{sublist: HTMLUListElement, lastIndex: number}} An object containing the sublist and the index of the last processed element.
+ */
+function createListFromHeadings(nodeList, currentLevel = 1) {
+    const self = this;
+    let ul = document.createElement('ul');
+    let i = 0;
+
+    while (i < nodeList.length) {
+        const node = nodeList[i];
+        const level = parseInt(node.tagName.substring(1));
+
+        if (level === currentLevel) {
+            const li = document.createElement('li');
+            li.textContent = node.textContent;
+
+            li.addEventListener('click', (e) => {
+                e.stopPropagation();
+                getWindow().requestAnimationFrame(() => {
+                    window.scrollTo(0, 0);
+                    // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+                    // mostly supported
+                    node?.scrollIntoView({behavior: "smooth"});
+                });
+            });
+
+            ul.appendChild(li);
+            i++;
+        } else if (level > currentLevel) {
+            if (ul.lastChild) {
+                const {sublist, lastIndex} = createListFromHeadings.call(self, nodeList.slice(i), level);
+                ul.lastChild.appendChild(sublist);
+                i += lastIndex;
+            } else {
+                throw new Error("Heading structure error: higher level heading without a preceding lower level heading.");
+            }
+        } else {
+            break;
+        }
+    }
+
+    return {sublist: ul, lastIndex: i};
+}
+
+/**
+ * @private
+ * @returns {*[]}
+ */
+function getHeadings() {
+    const allHeadings = [];
+
+    const slots = this.shadowRoot.querySelectorAll('slot');
+
+    slots.forEach(slot => {
+        const slottedElements = slot.assignedElements();
+        slottedElements.forEach(element => {
+            if (element instanceof HTMLHeadingElement) {
+                allHeadings.push(element);
+                return;
+            }
+
+            const headings = element.querySelectorAll("h1, h2, h3, h4, h5, h6");
+            let nodeList = Array.from(headings);
+            allHeadings.push(...nodeList);
+        });
+    });
+    return allHeadings;
+}
+
+
+/**
+ * @private
+ * @return {initEventHandler}
+ */
+function initEventHandler() {
+
+    const self = this;
+    let ticking = false;
+
+    this[windowEventHandlerSymbol] = function () {
+        if (!ticking) {
+            getWindow().requestAnimationFrame(() => {
+                calcAndSetNavigationTopWindowContext.call(self);
+                ticking = false;
+            });
+            ticking = true;
+        }
+    }
+
+    this[scrollableEventHandlerSymbol] = function () {
+        if (!ticking) {
+            getWindow().requestAnimationFrame(() => {
+                calcAndSetNavigationTopScrollableParentContext.call(self);
+                ticking = false;
+            });
+            ticking = true;
+        }
+    }
+
+    return this;
+}
+
+/**
+ *
+ * @param {HTMLElement} element
+ * @return {HTMLElement|Window}
+ */
+function findScrollableParent(element) {
+
+    let parent = element.parentElement;
+    while (parent) {
+        const overflowY = getWindow().getComputedStyle(parent).overflowY;
+        if (overflowY === 'scroll' || overflowY === 'auto') {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    return getWindow();
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+    this[tableOfContentElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="control"]`,
+    );
+
+    this[navigationElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="navigation"]`,
+    );
+
+    this[navigationControlElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="navigation-control"]`,
+    );
+
+    this[navigationListElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="navigation-list"]`,
+    );
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+    // language=HTML
+    return `
+        <div data-monster-role="control" part="control">
+            <div class="navigation" data-monster-role="navigation">
+                <monster-popper data-monster-option-mode="enter">
+                    <div slot="button" data-monster-role="navigation-control">
+                    </div>
+                    <div data-monster-role="navigation-list">
+                    </div>
+                </monster-popper>
+            </div>
+            <slot></slot>
+        </div>`;
+}
+
+
+registerCustomElement(TableOfContent);

package/source/components/state/stylesheet/state.mjs

@@ -24,7 +24,7 @@ const StateStyleSheet = new CSSStyleSheet();
 try {
   StateStyleSheet.insertRule(`
 @layer state { 
-.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}div{text-align:center}::slotted(:empty:not(img)){display:none}slot{align-items:center;display:flex;flex-direction:column;justify-content:center}::slotted(svg[slot=visual]){height:40vmin;min-height:200px;width:auto}::slotted(h1){font-size:3rem;font-weight:400;line-height:1.15;margin-bottom:1.5rem;text-align:center}::slotted(h2){font-size:2.5rem;font-weight:400;line-height:1.2;margin-bottom:1.5rem;text-align:center}::slotted(h3){font-size:2rem;font-weight:400;line-height:1.25;margin-bottom:1.25rem;text-align:center}::slotted(h4){font-size:1.5rem;font-weight:400;line-height:1.3;margin-bottom:1.25rem;text-align:center}::slotted(h5){font-size:1.4rem;font-weight:bolder;line-height:1.3;margin-bottom:1.25rem;text-align:center}::slotted(h6){font-size:1.3rem;font-weight:700;line-height:1.3;margin-bottom:1.25rem;text-align:center}::slotted(p){font-size:1rem;font-weight:400;line-height:1.6;text-align:center;text-align:justify}::slotted(button[slot=action]){align-items:center;background-color:var(--monster-bg-color-primary-1);background-position:50%;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-color-primary-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}::slotted(button[slot=action]:hover){box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}::slotted(*){flex-grow:1}slot[name=action]{align-content:center;align-items:stretch;-moz-column-gap:1rem;column-gap:1rem;display:flex;flex-direction:row;padding:2rem 1rem;place-content:center space-evenly;justify-content:space-between}@media (max-width:480px){slot[name=action]{-moz-column-gap:0;column-gap:0;flex-direction:column;padding:1rem 0;row-gap:1rem}} 
+.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}div{text-align:center}::slotted(:empty:not(img)){display:none}slot{align-items:center;display:flex;flex-direction:column;justify-content:center}::slotted(svg[slot=visual]){height:40vmin;min-height:200px;width:auto}::slotted(h1){font-size:3rem;font-weight:400;line-height:1.15;margin:4rem 0 1.5rem;text-align:center}::slotted(h2){font-size:2.5rem;font-weight:400;line-height:1.2;margin:4rem 0 1.5rem;text-align:center}::slotted(h3){font-size:2rem;font-weight:400;line-height:1.25;margin:4rem 0 1.25rem;text-align:center}::slotted(h4){font-size:1.5rem;font-weight:400;line-height:1.3;margin:4rem 0 1.25rem;text-align:center}::slotted(h5){font-size:1.4rem;font-weight:bolder;line-height:1.3;margin:4rem 0 1.25rem;text-align:center}::slotted(h6){font-size:1.3rem;font-weight:700;line-height:1.3;margin:4rem 0 1.25rem;text-align:center}::slotted(p){font-size:1rem;font-weight:400;line-height:1.6;text-align:center;text-align:justify}::slotted(button[slot=action]){align-items:center;background-color:var(--monster-bg-color-primary-1);background-position:50%;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-color-primary-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}::slotted(button[slot=action]:hover){box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}::slotted(*){flex-grow:1}slot[name=action]{align-content:center;align-items:stretch;-moz-column-gap:1rem;column-gap:1rem;display:flex;flex-direction:row;padding:2rem 1rem;place-content:center space-evenly;justify-content:space-between}@media (max-width:480px){slot[name=action]{-moz-column-gap:0;column-gap:0;flex-direction:column;padding:1rem 0;row-gap:1rem}} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");

package/source/components/style/link.pcss

@@ -39,7 +39,6 @@ a:focus {
     
     a, a:link, a:visited, a:hover, a:active, a:focus {
         color: var(--monster-color-amber-2);
-        
     }
     
     a:focus {

package/source/components/style/mixin/typography.pcss

@@ -3,46 +3,46 @@
 @define-mixin h1 {
     font-size: 3rem;
     line-height: 1.15;   
-    margin-bottom: 1.5rem;
+    margin: 4rem 0 1.5rem;
     font-weight: normal;
 }
 
 @define-mixin h2 {
     font-size: 2.5rem;
     line-height: 1.2;
-    margin-bottom: 1.5rem;
+    margin: 4rem 0 1.5rem;
     font-weight: normal;
 }
 
 @define-mixin h3 {
     font-size: 2rem;
     line-height: 1.25;
-    margin-bottom: 1.25rem;
+    margin: 4rem 0 1.25rem;
     font-weight: normal;
 }
 
 @define-mixin h4 {
     font-size: 1.5rem;
     line-height: 1.3;
-    margin-bottom: 1.25rem;
+    margin: 4rem 0 1.25rem;
     font-weight: normal;
 }
 
 @define-mixin h5 {
     font-size: 1.4rem;
     line-height: 1.3;
-    margin-bottom: 1.25rem;
+    margin: 4rem 0 1.25rem;
     font-weight: bolder;
 }
 
 @define-mixin h6 {
     font-size: 1.3rem;
     line-height: 1.3;
-    margin-bottom: 1.25rem;
+    margin: 4rem 0 1.25rem;
     font-weight: bold;
 }
  
-@define-mixin paragraph {
+@define-mixin paragraph { 
     font-size: 1rem;
     line-height: 1.6;
     font-weight: normal;

package/source/components/style/typography.pcss

@@ -42,7 +42,7 @@ p {
 }
 
 /*noinspection ALL*/
-@for $i from 1 to 6 {
+@for $i from 1 to 6 { 
     h$(i) { @mixin h$(i) {
 }
 }