Skip to content

Commit 6b207b8

Browse files
clemgbldclemgbld
committed
refactor(files): migrated to lit.js
1 parent 678ecb0 commit 6b207b8

8 files changed

Lines changed: 393 additions & 66 deletions

File tree

‎<‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
// Import Third-party Dependencies
2+
import { LitElement, html, css, nothing } from "lit";
3+
import { repeat } from "lit/directives/repeat.js";
4+
import { when } from "lit/directives/when.js";
5+
6+
// Import Internal Dependencies
7+
import { selectVisibleItems } from "./view-model.js";
8+
import "../expandable/expandable.js";
9+
10+
class ItemsList extends LitElement {
11+
static styles = css`
12+
.list-item{
13+
display: flex;
14+
flex-wrap: wrap;
15+
margin-top: 5px;
16+
margin-bottom: 5px;
17+
margin-left: -5px;
18+
flex-direction: column;
19+
padding: 0;
20+
}
21+
22+
.line {
23+
flex-direction: row;
24+
}
25+
26+
.line > li {
27+
flex-basis: 25px;
28+
justify-content: start;
29+
}
30+
31+
.list-item > li {
32+
padding: 0 10px;
33+
height: 25px;
34+
width: fit-content;
35+
border-radius: 4px;
36+
font-size: 13px;
37+
flex-basis: 50px;
38+
letter-spacing: 0.7px;
39+
display: flex;
40+
align-items: center;
41+
justify-content: center;
42+
flex-grow: 1;
43+
color: #CFD8DC;
44+
margin-left: 5px;
45+
margin-top: 5px;
46+
}
47+
48+
.clickable{
49+
background: var(--secondary-darker);
50+
color: #FFF;
51+
cursor: pointer;
52+
}
53+
54+
`;
55+
56+
static properties = {
57+
items: { type: Array },
58+
isClosed: { type: Boolean },
59+
itemsToShowLength: { type: Number },
60+
onClickItem: { type: Function },
61+
variant: { type: String }
62+
};
63+
64+
constructor() {
65+
super();
66+
this.items = [];
67+
this.isClosed = true;
68+
this.itemsToShowLength = 5;
69+
this.onClickItem = null;
70+
this.variant = "column";
71+
}
72+
73+
render() {
74+
if (this.items.length === 0) {
75+
return nothing;
76+
}
77+
78+
const hasExpandable = this.items.length > this.itemsToShowLength;
79+
80+
return html`
81+
<ul class="list-item ${this.variant}">
82+
${repeat(selectVisibleItems(this.items, this.isClosed, this.itemsToShowLength),
83+
(item) => item,
84+
(item) => (typeof this.onClickItem === "function"
85+
? html`<li class="clickable" @click=${() => {
86+
this.onClickItem(item);
87+
}}>${item}</li>`
88+
: html`<li>${item}</li>`))
89+
}
90+
</ul>
91+
${when(hasExpandable,
92+
() => html`<expandable-span .isClosed=${this.isClosed} .onToggle=${() => {
93+
this.isClosed = !this.isClosed;
94+
}}></expandable-span>`,
95+
() => nothing
96+
)
97+
}
98+
`;
99+
}
100+
}
101+
102+
customElements.define("items-list", ItemsList);

‎public/common/utils.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -214,13 +214,11 @@ export function toggle(expandable, parentNode, hideItemsLength) {
214214
continue;
215215
}
216216

217-
if (node !== this) {
218-
if (expandable.isClosed) {
219-
node.classList.remove("hidden");
220-
}
221-
else if (id >= hideItemsLength) {
222-
node.classList.add("hidden");
223-
}
217+
if (!expandable.isClosed) {
218+
node.classList.remove("hidden");
219+
}
220+
else if (id >= hideItemsLength) {
221+
node.classList.add("hidden");
224222
}
225223
}
226224
}

‎public/components/expandable/expandable.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,20 +42,20 @@ span.expandable nsecure-icon {
4242

4343
constructor() {
4444
super();
45-
this.isClosed = false;
45+
this.isClosed = true;
4646
this.onToggle = () => void 0;
4747
}
4848

4949
render() {
5050
const lang = currentLang();
5151

5252
return html`
53-
<span data-value=${this.isClosed ? "opened" : "closed"} @click=${this.#handleClick} class="expandable">
53+
<span data-value=${this.isClosed ? "closed" : "opened"} @click=${this.#handleClick} class="expandable">
5454
${when(this.isClosed,
55-
() => html`<nsecure-icon name="minus"></nsecure-icon>
56-
<p>${window.i18n[lang].home.showLess}</p>`,
5755
() => html`<nsecure-icon name="plus"></nsecure-icon>
58-
<p>${window.i18n[lang].home.showMore}</p>`
56+
<p>${window.i18n[lang].home.showMore}</p>`,
57+
() => html`<nsecure-icon name="minus"></nsecure-icon>
58+
<p>${window.i18n[lang].home.showLess}</p>`
5959
)}
6060
</span>
6161
`;

‎public/components/items-list/items-list.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// Import Third-party Dependencies
2+
import { LitElement, html, css, nothing } from "lit";
3+
import { repeat } from "lit/directives/repeat.js";
4+
import { when } from "lit/directives/when.js";
5+
6+
// Import Internal Dependencies
7+
import { selectVisibleItems } from "./view-model.js";
8+
import "../expandable/expandable.js";
9+
10+
class ItemsList extends LitElement {
11+
static styles = css`
12+
.list-item{
13+
display: flex;
14+
flex-wrap: wrap;
15+
margin-top: 5px;
16+
margin-bottom: 5px;
17+
margin-left: -5px;
18+
flex-direction: column;
19+
padding: 0;
20+
list-style: none;
21+
}
22+
23+
.line {
24+
flex-direction: row;
25+
}
26+
27+
.line > li {
28+
flex-basis: 25px;
29+
justify-content: start;
30+
}
31+
32+
.list-item > li {
33+
padding-left: 10px;
34+
padding-top: 5px;
35+
padding-bottom: 5px;
36+
width: 96%;
37+
border-radius: 4px;
38+
font-size: 13px;
39+
letter-spacing: 0.7px;
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
flex-grow: 1;
44+
color: #CFD8DC;
45+
margin-left: 5px;
46+
margin-top: 5px;
47+
justify-content: flex-start;
48+
}
49+
50+
.clickable:hover {
51+
background: var(--secondary-darker);
52+
color: #FFF;
53+
cursor: pointer;
54+
}
55+
56+
`;
57+
58+
static properties = {
59+
items: { type: Array },
60+
isClosed: { type: Boolean },
61+
itemsToShowLength: { type: Number },
62+
onClickItem: { type: Function },
63+
variant: { type: String }
64+
};
65+
66+
constructor() {
67+
super();
68+
this.items = [];
69+
this.isClosed = true;
70+
this.itemsToShowLength = 5;
71+
this.onClickItem = null;
72+
this.variant = "column";
73+
this.shouldShowEveryItems = false;
74+
}
75+
76+
render() {
77+
const hasExpandable = !this.shouldShowEveryItems && this.items.length > this.itemsToShowLength;
78+
79+
return html`
80+
<ul class="list-item ${this.variant}">
81+
${repeat(selectVisibleItems({
82+
items: this.items,
83+
isClosed: this.isClosed,
84+
itemsToShowLength: this.itemsToShowLength,
85+
shouldShowEveryItems: this.shouldShowEveryItems
86+
}),
87+
(item) => item,
88+
(item) => (typeof this.onClickItem === "function"
89+
? html`<li class="clickable" @click=${() => {
90+
this.onClickItem(item);
91+
}}>${item}</li>`
92+
: html`<li>${item}</li>`))
93+
}
94+
</ul>
95+
${when(hasExpandable,
96+
() => html`<expandable-span .isClosed=${this.isClosed} .onToggle=${() => {
97+
this.isClosed = !this.isClosed;
98+
}}></expandable-span>`,
99+
() => nothing
100+
)
101+
}
102+
`;
103+
}
104+
}
105+
106+
customElements.define("items-list", ItemsList);

‎public/components/items-list/view-model.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export function selectVisibleItems({
2+
items, isClosed, itemsToShowLength, shouldShowEveryItems = false
3+
}) {
4+
const nonEmptyItems = items.filter((item) => item.trim() !== "");
5+
6+
if (shouldShowEveryItems) {
7+
return nonEmptyItems;
8+
}
9+
10+
return isClosed ? nonEmptyItems.slice(0, itemsToShowLength) : nonEmptyItems;
11+
}

‎public/components/package/package.js‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import "../bundlephobia/bundlephobia.js";
33
import { PackageHeader } from "./header/header.js";
44
import * as Pannels from "./pannels/index.js";
5-
import * as utils from "../../common/utils.js";
65
import { EVENTS } from "../../core/events.js";
76

87
export class PackageInfo {
@@ -89,15 +88,11 @@ export class PackageInfo {
8988
}
9089

9190
const panFiles = packageHTMLElement.querySelector("#pan-files");
92-
93-
const bundlephobia = utils.createDOMElement("bundle-phobia", {
94-
attributes: {
95-
name: this.dependencyVersion.name,
96-
version: this.dependencyVersion.version
97-
}
98-
});
99-
100-
panFiles.appendChild(bundlephobia);
91+
const files = document.createElement("package-files");
92+
files.package = this;
93+
files.id = "pan-files";
94+
files.classList.add("package-container");
95+
panFiles.parentElement.replaceChild(files, panFiles);
10196
}
10297

10398
/**
@@ -165,7 +160,6 @@ export class PackageInfo {
165160
if (window.settings.config.disableExternalRequests === false) {
166161
new Pannels.Scorecard(this).generate(clone);
167162
}
168-
new Pannels.Files(this).generate(clone);
169163

170164
return clone;
171165
}

0 commit comments

Comments
 (0)