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 } from "../ignite-html/ignite-template.js";

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

    get properties() {
        return {
            limit: 125,
            value: new IgniteProperty(null, {
                onChange: (oldValue, newValue) => {
                    this.collapsed = true;
                }
            }),
            collapsed: true,
            collapsedValue: null,
            collapseButtonClass: "btn btn-none p-0 d-block text-primary"
        };
    }

    render() {
        return this.template.child(
            new text([this.collapsed, this.value, this.limit], (collapsed, value, limit) => collapsed && value && value.length > limit ? value.substring(0, limit).trimEnd() + "..." : value),

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

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

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

export {
    ReadMoreTemplate as ReadMore
}