MontoyaTech/ignite-html-material
MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added the ability to limit the number of lines that are allowed to be rendered before collapsing. Cleaned up code and simplified a few things. Renamed limit to maxLength. Fixed an issue where newlines would not render because of the text element, switched to a span instead.

Browse Source
This commit is contained in:
MattMo 2024-11-20 07:54:07 -08:00
parent 30b7d9fa1c
commit cbd8787c89
1 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
readmore.js
View File

@ -1,6 +1,6 @@
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";
import { IgniteTemplate, slot, list, div, text, button, span } from "../ignite-html/ignite-template.js";
class ReadMore extends IgniteElement {
constructor() {
@ -9,29 +9,52 @@ class ReadMore extends IgniteElement {
get properties() {
return {
limit: 125,
maxLength: 125,
maxLines: 1,
value: new IgniteProperty(null, {
onChange: (oldValue, newValue) => {
this.collapsed = true;
}
onChange: () => this.collapsed = true
}),
collapsed: true,
collapsedValue: null,
collapseButtonClass: "btn btn-none p-0 d-block text-primary"
collapseButtonClass: "btn btn-none p-0 ps-1 d-inline 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 ? value : "")),
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.limit], (value, limit) => value && value.length > limit)
.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 {