ignite-html-material/readmore.js

import { IgniteHtml, IgniteProperty } from '../ignite-html/ignite-html.js';
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot, list, div, text, button, span } from "../ignite-html/ignite-template.js";

class ReadMore extends IgniteElement {
    constructor() {
        super();
    }

    get properties() {
        return {
            maxLength: 125,
            maxLines: 1,
            value: new IgniteProperty(null, {
                onChange: () => this.collapsed = true
            }),
            collapsed: true,
            collapsedValue: null,
            collapseButtonClass: "btn btn-none p-0 ps-1 d-inline text-primary"
        };
    }

    render() {
        return this.template.child(
            new span().innerText([this.collapsed, this.value, this.maxLength, this.maxLines], (collapsed, value, maxLength, maxLines) => collapsed ? this.truncate() : value),

            new button()
                .show([this.value, this.maxLength, this.maxLines], (value, maxLength, maxLines) => this.truncate() != value)
                .class(this.collapseButtonClass)
                .innerText(this.collapsed, collapsed => collapsed ? "Read more" : "Read less")
                .onClick(() => this.collapsed = !this.collapsed)
        )
    }

    truncate() {
        //Only do this if the value isn't null.
        if (this.value) {
            //Speed up, if we are not restricting lines, then just check the length.
            if (this.maxLines < 0 && this.value.length > this.maxLength) {
                return value.substring(0, this.maxLength).trimEnd() + "...";
            } else {
                //Check for lines and length, whichever we hit first stop.
                var lines = 0;
                for (var i = 0; i < this.value.length; i++) {
                    if (this.value[i] == '\n') {
                        lines++;
                    }

                    if (i > this.maxLength || lines > this.maxLines) {
                        return this.value.substring(0, i).trimEnd() + "...";
                    }
                }
            }
        }

        return this.value;
    }
}

class ReadMoreTemplate extends IgniteTemplate {
    constructor(...children) {
        super("mt-read-more", children);
    }
}

IgniteHtml.register("mt-read-more", ReadMore);

export {
    ReadMoreTemplate as ReadMore
}