Skip to content

Commit b4e712d

Browse files
clemgbldclemgbld
authored
refactor(locker): migrate to lit (#580)
1 parent 931aa4f commit b4e712d

File tree

8 files changed

+199
-102
lines changed

8 files changed

+199
-102
lines changed

‎public/components/icon/icon.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,24 @@ c0-20.25-0.75-88.25 31-88.25c5.25 0 31.25 21.25 65 21.25c11.5 0 22.5-2 33.25-5.7
129129
-1.25-16.5c10.75 3.75 21.75 5.75 33.25 5.75c33.75 0 59.75-21.25 65-21.25c31.75 0 31 68 31 88.25zM448 64c0 35.25-28.75
130130
64-64 64s-64-28.75-64-64s28.75-64 64-64s64 28.75 64 64z"/>
131131
</svg>
132+
`,
133+
unlock: html`
134+
<svg viewBox="0 0 1024 1024" aria-hidden="true">
135+
<path fill="currentColor" d="M603.136 439.296q23.552 0 38.912 15.36t16.384 38.912v329.728q0 22.528-16.384
136+
37.888t-38.912 16.384h-547.84q-23.552 0-38.912-16.384t-16.384-37.888v-329.728q0-22.528 16.384-38.912t38.912
137+
-15.36h17.408v-183.296q0-105.472 75.776-181.248t180.224-74.752 181.248 74.752 74.752 181.248q0 14.336-10.24
138+
25.6t-25.6 11.264h-36.864q-14.336 0-25.6-11.264t-11.264-25.6q0-60.416-43.008-103.424t-103.424-43.008
139+
-103.424 43.008-41.984 103.424v183.296h419.84z"/>
140+
</svg>
141+
`,
142+
lock: html`
143+
<svg viewBox="0 0 1024 1024" aria-hidden="true">
144+
<path fill="currentColor" fill="#000" d="M183.296 439.296h291.84v-110.592q0-60.416-43.008-103.424t-103.424
145+
-41.984-103.424 41.984-41.984 103.424v110.592zM658.432 493.568v329.728q0 22.528-16.384 37.888t-38.912
146+
16.384h-547.84q-23.552 0-38.912-16.384t-16.384-37.888v-329.728q0-22.528 16.384-38.912t38.912-15.36h17.408
147+
v-110.592q0-104.448 75.776-180.224t180.224-75.776 181.248 75.776 74.752 180.224v110.592h18.432q23.552 0
148+
38.912 15.36t16.384 38.912z"/>
149+
</svg>
132150
`
133151
};
134152

‎public/components/locker/locker.css‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎public/components/locker/locker.js‎

Lines changed: 148 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,104 @@
1+
// Import Third-party Dependencies
2+
import { LitElement, html, css } from "lit";
3+
import { classMap } from "lit/directives/class-map.js";
4+
15
// Import Internal Dependencies
26
import * as utils from "../../common/utils.js";
37
import { EVENTS } from "../../core/events.js";
8+
import "../icon/icon.js";
9+
10+
export class Locker extends LitElement {
11+
static styles = css`
12+
#network-locker {
13+
position: absolute;
14+
bottom: 10px;
15+
right: 10px;
16+
z-index: 30;
17+
display: flex;
18+
height: 30px;
19+
border-radius: 4px;
20+
align-items: center;
21+
box-sizing: border-box;
22+
overflow: hidden;
23+
background-color: var(--primary);
24+
transition: 0.3s all linear;
25+
cursor: pointer;
26+
}
27+
28+
#network-locker:not(.enabled) {
29+
background-color: var(--primary);
30+
}
31+
32+
#network-locker.enabled {
33+
background-color: #af2222;
34+
}
35+
36+
#network-locker>div {
37+
height: inherit;
38+
padding: 0 5px;
39+
display: flex;
40+
align-items: center;
41+
border-radius: 4px;
42+
margin-right: 10px;
43+
transition: 0.3s all linear;
44+
}
45+
46+
#network-locker>div>nsecure-icon {
47+
margin: 0;
48+
transform: translateX(3px);
49+
}
50+
51+
52+
#network-locker>div:not(.enabled) {
53+
background-color: var(--primary-lighter);
54+
}
55+
56+
#network-locker>div.enabled {
57+
background-color: #cb3d3d;
58+
}
59+
60+
#network-locker>p {
61+
font-family: mononoki;
62+
padding-right: 10px;
63+
display: flex;
64+
align-items: center;
65+
height: inherit;
66+
text-transform: capitalize;
67+
}
68+
`;
69+
70+
static get properties() {
71+
return {
72+
locked: { type: Boolean },
73+
unlockAuthorized: { type: Boolean },
74+
nsn: { type: Object },
75+
isNetworkViewHidden: { type: Boolean }
76+
};
77+
}
478

5-
export class Locker {
6-
constructor(nsn) {
7-
this.dom = document.getElementById("network-locker");
8-
this.networkView = document.getElementById("network--view");
9-
this.nsn = nsn;
79+
constructor() {
80+
super();
1081
this.locked = false;
1182
this.unlockAuthorized = true;
12-
this.renderUnlock();
83+
this.isNetworkViewHidden = false;
84+
this.hideNetworkView = () => {
85+
if (this.isNetworkViewHidden) {
86+
return;
87+
}
88+
this.isNetworkViewHidden = true;
89+
};
1390

14-
document.addEventListener("keydown", (event) => {
15-
const isNetworkViewHidden = this.networkView.classList.contains("hidden");
91+
this.showNetworkView = () => {
92+
if (!this.isNetworkViewHidden) {
93+
return;
94+
}
95+
this.isNetworkViewHidden = false;
96+
};
97+
98+
this.onKeyDown = (event) => {
1699
const isTargetInput = event.target.tagName === "INPUT";
17100
const isTargetPopup = event.target.id === "popup--background";
18-
if (isNetworkViewHidden || isTargetInput || isTargetPopup) {
101+
if (this.isNetworkViewHidden || isTargetInput || isTargetPopup) {
19102
return;
20103
}
21104

@@ -26,9 +109,61 @@ export class Locker {
26109
break;
27110
}
28111
}
112+
};
113+
}
114+
115+
connectedCallback() {
116+
super.connectedCallback();
117+
window.addEventListener(EVENTS.NETWORK_VIEW_HID, this.hideNetworkView);
118+
window.addEventListener(EVENTS.NETWORK_VIEW_SHOWED, this.showNetworkView);
119+
document.addEventListener("keydown", this.onKeyDown);
120+
}
121+
122+
disconnectedCallback() {
123+
window.removeEventListener(EVENTS.NETWORK_VIEW_HID, this.hideNetworkView);
124+
window.removeEventListener(EVENTS.NETWORK_VIEW_SHOWED, this.showNetworkView);
125+
document.removeEventListener("keydown", this.onKeyDown);
126+
super.disconnectedCallback();
127+
}
128+
129+
updated(changedProperties) {
130+
if (changedProperties.has("nsn")) {
131+
const oldNsn = changedProperties.get("nsn");
132+
133+
if (oldNsn) {
134+
oldNsn.network.off("highlight_done", this.highlightDone);
135+
}
136+
137+
if (this.nsn) {
138+
this.nsn.network.on("highlight_done", this.highlightDone);
139+
}
140+
}
141+
}
142+
143+
render() {
144+
const networkLockerClasses = classMap({
145+
enabled: this.locked
29146
});
30-
this.dom.addEventListener("click", () => this.auto());
31-
this.nsn.network.on("highlight_done", this.highlightDone.bind(this));
147+
const iconClasses = classMap({
148+
enabled: this.locked
149+
});
150+
151+
return html`<div @click=${this.auto} class=${networkLockerClasses} id="network-locker">
152+
<div class=${iconClasses}>
153+
<nsecure-icon name=${this.locked ? "lock" : "unlock"}></nsecure-icon>
154+
</div>
155+
<p>${this.locked ? window.i18n[utils.currentLang()].network.locked
156+
: window.i18n[utils.currentLang()].network.unlocked}</p>
157+
</div>`;
158+
}
159+
160+
auto() {
161+
// Refuse locking if there is no multi selections
162+
if (this.nsn.lastHighlightedIds === null) {
163+
return;
164+
}
165+
166+
this[this.locked ? "unlock" : "lock"]();
32167
}
33168

34169
highlightDone() {
@@ -45,19 +180,9 @@ export class Locker {
45180
this.unlock();
46181
}
47182

48-
auto() {
49-
// Refuse locking if there is no multi selections
50-
if (this.nsn.lastHighlightedIds === null) {
51-
return;
52-
}
53-
54-
this[this.locked ? "unlock" : "lock"]();
55-
}
56-
57183
lock() {
58184
if (!this.locked) {
59185
console.log("[LOCKER] lock triggered");
60-
this.renderLock();
61186
this.locked = true;
62187
window.dispatchEvent(new CustomEvent(EVENTS.LOCKED, { composed: true }));
63188
}
@@ -69,7 +194,6 @@ export class Locker {
69194
}
70195

71196
console.log("[LOCKER] unlock triggered");
72-
this.renderUnlock();
73197
this.locked = false;
74198
window.dispatchEvent(new CustomEvent(EVENTS.UNLOCKED, { composed: true }));
75199

@@ -83,26 +207,6 @@ export class Locker {
83207
this.nsn.neighbourHighlight(selectedNode, window.i18n[utils.currentLang()]);
84208
}
85209
}
86-
87-
renderLock() {
88-
this.dom.classList.add("enabled");
89-
this.dom.querySelector("p").textContent = window.i18n[utils.currentLang()].network.locked;
90-
this.networkView.classList.add("locked");
91-
92-
const iconElement = this.dom.querySelector("i");
93-
iconElement.classList.remove("icon-lock-open");
94-
iconElement.classList.add("icon-lock");
95-
iconElement.classList.add("enabled");
96-
}
97-
98-
renderUnlock() {
99-
this.dom.classList.remove("enabled");
100-
this.dom.querySelector("p").textContent = window.i18n[utils.currentLang()].network.unlocked;
101-
this.networkView.classList.remove("locked");
102-
103-
const iconElement = this.dom.querySelector("i");
104-
iconElement.classList.remove("icon-lock");
105-
iconElement.classList.remove("enabled");
106-
iconElement.classList.add("icon-lock-open");
107-
}
108210
}
211+
212+
customElements.define("nsecure-locker", Locker);

‎public/components/navigation/navigation.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// Import Internal Dependencies
22
import { PackageInfo } from "../package/package.js";
3+
import { EVENTS } from "../../core/events.js";
34

45
// CONSTANTS
56
const kAvailableView = new Set([
@@ -122,6 +123,10 @@ export class ViewNavigation {
122123
return;
123124
}
124125

126+
if (menuName === "network--view") {
127+
window.dispatchEvent(new CustomEvent(EVENTS.NETWORK_VIEW_HID, { composed: true }));
128+
}
129+
125130
menu.classList.add("hidden");
126131
}
127132

@@ -131,6 +136,10 @@ export class ViewNavigation {
131136
return;
132137
}
133138

139+
if (menuName === "network--view") {
140+
window.dispatchEvent(new CustomEvent(EVENTS.NETWORK_VIEW_SHOWED, { composed: true }));
141+
}
142+
134143
menu.classList.remove("hidden");
135144
}
136145
}

‎public/components/views/home/maintainers/maintainers.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -523,7 +523,7 @@ export class PopupMaintainer extends LitElement {
523523
.map((spec) => {
524524
const { name, version } = utils.parseNpmSpec(spec);
525525

526-
return `${name} @${version} `;
526+
return `${name}@${version}`;
527527
});
528528

529529
return html`
@@ -565,12 +565,14 @@ export class PopupMaintainer extends LitElement {
565565
const moveTo = currentSelectedNode === null || !nodeIds.includes(currentSelectedNode.nodes[0]);
566566
if (moveTo) {
567567
const origin = this.nsn.network.getViewPosition();
568-
const closestNode = nodeIds
568+
const nodes = nodeIds
569569
.map((id) => {
570570
return { id, pos: this.nsn.network.getPosition(id) };
571-
})
571+
});
572+
const closestNode = nodes
572573
.reduce(
573-
(a, b) => (utils.vec2Distance(origin, a.pos) < utils.vec2Distance(origin, b.pos) ? a : b)
574+
(a, b) => (utils.vec2Distance(origin, a.pos) < utils.vec2Distance(origin, b.pos) ? a : b),
575+
nodes[0]
574576
);
575577
576578
const scale = nodeIds.length > 3 ? 0.25 : 0.35;

‎public/core/events.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,7 @@ export const EVENTS = {
77
MOVED_TO_NEXT_LOCKED_NODE: "moved-to-next-locked-node",
88
MOVED_TO_PREVIOUS_LOCKED_NODE: "moved-to-previous-locked-node",
99
MODAL_CLOSED: "modal-closed",
10-
MODAL_OPENED: "modal-opened"
10+
MODAL_OPENED: "modal-opened",
11+
NETWORK_VIEW_HID: "network-view-hid",
12+
NETWORK_VIEW_SHOWED: "network-view-showed"
1113
};

‎public/main.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
@import url("./font/fontello/fontello.css");
55
@import url("./font/roboto/roboto.css");
66
@import url("./font/mononoki/mononoki.css");
7-
@import url("./components/locker/locker.css");
87
@import url("./components/file-box/file-box.css");
98
@import url("./components/expandable/expandable.css");
109
@import url("./components/navigation/navigation.css");

0 commit comments

Comments
 (0)