56 lines
1.7 KiB
JavaScript
56 lines
1.7 KiB
JavaScript
import { IgniteHtml } 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";
|
|
import { IgniteProperty } from "../ignite-html/ignite-html.js";
|
|
|
|
class ReadMore extends IgniteElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
get styles() {
|
|
return /*css*/`
|
|
mt-icon-tabs > .icons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1em;
|
|
}
|
|
`;
|
|
}
|
|
|
|
get properties() {
|
|
return {
|
|
limit: 125,
|
|
value: null,
|
|
collapsed: true,
|
|
collapsedValue: null,
|
|
collapseButtonClass: "btn btn-none ps-2 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
|
|
} |