refactor(locker): migrate to lit

public/components/icon/icon.js

@@ -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
 -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
  64-64 64s-64-28.75-64-64s28.75-64 64-64s64 28.75 64 64z"/>
     </svg>
+`,
+  unlock: html`
+    <svg viewBox="0 0 1024 1024" aria-hidden="true">
+    <path fill="currentColor" d="M603.136 439.296q23.552 0 38.912 15.36t16.384 38.912v329.728q0 22.528-16.384
+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
+-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
+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
+-103.424 43.008-41.984 103.424v183.296h419.84z"/>
+</svg>
+`,
+  lock: html`
+    <svg viewBox="0 0 1024 1024" aria-hidden="true">
+    <path fill="currentColor" fill="#000" d="M183.296 439.296h291.84v-110.592q0-60.416-43.008-103.424t-103.424
+-41.984-103.424 41.984-41.984 103.424v110.592zM658.432 493.568v329.728q0 22.528-16.384 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-15.36h17.408
+v-110.592q0-104.448 75.776-180.224t180.224-75.776 181.248 75.776 74.752 180.224v110.592h18.432q23.552 0
+38.912 15.36t16.384 38.912z"/>
+</svg>
 `
 };
 

public/components/locker/locker.js

@@ -1,21 +1,104 @@
+// Import Third-party Dependencies
+import { LitElement, html, css } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+
 // Import Internal Dependencies
 import * as utils from "../../common/utils.js";
 import { EVENTS } from "../../core/events.js";
+import "../icon/icon.js";
+
+export class Locker extends LitElement {
+  static styles = css`
+#network-locker {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  z-index: 30;
+  display: flex;
+  height: 30px;
+  border-radius: 4px;
+  align-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--primary);
+  transition: 0.3s all linear;
+  cursor: pointer;
+}
+
+#network-locker:not(.enabled) {
+  background-color: var(--primary);
+}
+
+#network-locker.enabled {
+  background-color: #af2222;
+}
+
+#network-locker>div {
+  height: inherit;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  margin-right: 10px;
+  transition: 0.3s all linear;
+}
+
+#network-locker>div>nsecure-icon {
+  margin: 0;
+  transform: translateX(3px);
+}
+
+
+#network-locker>div:not(.enabled) {
+  background-color: var(--primary-lighter);
+}
+
+#network-locker>div.enabled {
+  background-color: #cb3d3d;
+}
+
+#network-locker>p {
+  font-family: mononoki;
+  padding-right: 10px;
+  display: flex;
+  align-items: center;
+  height: inherit;
+  text-transform: capitalize;
+}
+`;
+
+  static get properties() {
+    return {
+      locked: { type: Boolean },
+      unlockAuthorized: { type: Boolean },
+      nsn: { type: Object },
+      isNetworkViewHidden: { type: Boolean }
+    };
+  }
 
-export class Locker {
-  constructor(nsn) {
-    this.dom = document.getElementById("network-locker");
-    this.networkView = document.getElementById("network--view");
-    this.nsn = nsn;
+  constructor() {
+    super();
     this.locked = false;
     this.unlockAuthorized = true;
-    this.renderUnlock();
+    this.isNetworkViewHidden = false;
+    this.hideNetworkView = () => {
+      if (this.isNetworkViewHidden) {
+        return;
+      }
+      this.isNetworkViewHidden = true;
+    };
 
-    document.addEventListener("keydown", (event) => {
-      const isNetworkViewHidden = this.networkView.classList.contains("hidden");
+    this.showNetworkView = () => {
+      if (!this.isNetworkViewHidden) {
+        return;
+      }
+      this.isNetworkViewHidden = false;
+    };
+
+    this.onKeyDown = (event) => {
       const isTargetInput = event.target.tagName === "INPUT";
       const isTargetPopup = event.target.id === "popup--background";
-      if (isNetworkViewHidden || isTargetInput || isTargetPopup) {
+      if (this.isNetworkViewHidden || isTargetInput || isTargetPopup) {
         return;
       }
 
@@ -26,9 +109,61 @@ export class Locker {
           break;
         }
       }
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener(EVENTS.NETWORK_VIEW_HID, this.hideNetworkView);
+    window.addEventListener(EVENTS.NETWORK_VIEW_SHOWED, this.showNetworkView);
+    document.addEventListener("keydown", this.onKeyDown);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener(EVENTS.NETWORK_VIEW_HID, this.hideNetworkView);
+    window.removeEventListener(EVENTS.NETWORK_VIEW_SHOWED, this.showNetworkView);
+    document.removeEventListener("keydown", this.onKeyDown);
+    super.disconnectedCallback();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("nsn")) {
+      const oldNsn = changedProperties.get("nsn");
+
+      if (oldNsn) {
+        oldNsn.network.off("highlight_done", this.highlightDone);
+      }
+
+      if (this.nsn) {
+        this.nsn.network.on("highlight_done", this.highlightDone);
+      }
+    }
+  }
+
+  render() {
+    const networkLockerClasses = classMap({
+      enabled: this.locked
     });
-    this.dom.addEventListener("click", () => this.auto());
-    this.nsn.network.on("highlight_done", this.highlightDone.bind(this));
+    const iconClasses = classMap({
+      enabled: this.locked
+    });
+
+    return html`<div @click=${this.auto} class=${networkLockerClasses} id="network-locker">
+        <div class=${iconClasses}>
+        <nsecure-icon  name=${this.locked ? "lock" : "unlock"}></nsecure-icon>
+        </div>
+        <p>${this.locked ? window.i18n[utils.currentLang()].network.locked
+          : window.i18n[utils.currentLang()].network.unlocked}</p>
+      </div>`;
+  }
+
+  auto() {
+    // Refuse locking if there is no multi selections
+    if (this.nsn.lastHighlightedIds === null) {
+      return;
+    }
+
+    this[this.locked ? "unlock" : "lock"]();
   }
 
   highlightDone() {
@@ -45,19 +180,9 @@ export class Locker {
     this.unlock();
   }
 
-  auto() {
-    // Refuse locking if there is no multi selections
-    if (this.nsn.lastHighlightedIds === null) {
-      return;
-    }
-
-    this[this.locked ? "unlock" : "lock"]();
-  }
-
   lock() {
     if (!this.locked) {
       console.log("[LOCKER] lock triggered");
-      this.renderLock();
       this.locked = true;
       window.dispatchEvent(new CustomEvent(EVENTS.LOCKED, { composed: true }));
     }
@@ -69,7 +194,6 @@ export class Locker {
     }
 
     console.log("[LOCKER] unlock triggered");
-    this.renderUnlock();
     this.locked = false;
     window.dispatchEvent(new CustomEvent(EVENTS.UNLOCKED, { composed: true }));
 
@@ -83,26 +207,6 @@ export class Locker {
       this.nsn.neighbourHighlight(selectedNode, window.i18n[utils.currentLang()]);
     }
   }
-
-  renderLock() {
-    this.dom.classList.add("enabled");
-    this.dom.querySelector("p").textContent = window.i18n[utils.currentLang()].network.locked;
-    this.networkView.classList.add("locked");
-
-    const iconElement = this.dom.querySelector("i");
-    iconElement.classList.remove("icon-lock-open");
-    iconElement.classList.add("icon-lock");
-    iconElement.classList.add("enabled");
-  }
-
-  renderUnlock() {
-    this.dom.classList.remove("enabled");
-    this.dom.querySelector("p").textContent = window.i18n[utils.currentLang()].network.unlocked;
-    this.networkView.classList.remove("locked");
-
-    const iconElement = this.dom.querySelector("i");
-    iconElement.classList.remove("icon-lock");
-    iconElement.classList.remove("enabled");
-    iconElement.classList.add("icon-lock-open");
-  }
 }
+
+customElements.define("nsecure-locker", Locker);

public/components/navigation/navigation.js

@@ -1,5 +1,6 @@
 // Import Internal Dependencies
 import { PackageInfo } from "../package/package.js";
+import { EVENTS } from "../../core/events.js";
 
 // CONSTANTS
 const kAvailableView = new Set([
@@ -122,6 +123,10 @@ export class ViewNavigation {
       return;
     }
 
+    if (menuName === "network--view") {
+      window.dispatchEvent(new CustomEvent(EVENTS.NETWORK_VIEW_HID, { composed: true }));
+    }
+
     menu.classList.add("hidden");
   }
 
@@ -131,6 +136,10 @@ export class ViewNavigation {
       return;
     }
 
+    if (menuName === "network--view") {
+      window.dispatchEvent(new CustomEvent(EVENTS.NETWORK_VIEW_SHOWED, { composed: true }));
+    }
+
     menu.classList.remove("hidden");
   }
 }

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

@@ -523,7 +523,7 @@ export class PopupMaintainer extends LitElement {
       .map((spec) => {
         const { name, version } = utils.parseNpmSpec(spec);
 
-        return `${name} @${version} `;
+        return `${name}@${version}`;
       });
 
     return html`
@@ -565,12 +565,14 @@ export class PopupMaintainer extends LitElement {
           const moveTo = currentSelectedNode === null || !nodeIds.includes(currentSelectedNode.nodes[0]);
           if (moveTo) {
             const origin = this.nsn.network.getViewPosition();
-            const closestNode = nodeIds
+            const nodes = nodeIds
               .map((id) => {
                 return { id, pos: this.nsn.network.getPosition(id) };
-              })
+              });
+            const closestNode = nodes
               .reduce(
-                (a, b) => (utils.vec2Distance(origin, a.pos) < utils.vec2Distance(origin, b.pos) ? a : b)
+                (a, b) => (utils.vec2Distance(origin, a.pos) < utils.vec2Distance(origin, b.pos) ? a : b),
+                nodes[0]
               );
 
             const scale = nodeIds.length > 3 ? 0.25 : 0.35;

public/core/events.js

@@ -7,5 +7,7 @@ export const EVENTS = {
   MOVED_TO_NEXT_LOCKED_NODE: "moved-to-next-locked-node",
   MOVED_TO_PREVIOUS_LOCKED_NODE: "moved-to-previous-locked-node",
   MODAL_CLOSED: "modal-closed",
-  MODAL_OPENED: "modal-opened"
+  MODAL_OPENED: "modal-opened",
+  NETWORK_VIEW_HID: "network-view-hid",
+  NETWORK_VIEW_SHOWED: "network-view-showed"
 };

public/main.css

@@ -4,7 +4,6 @@
 @import url("./font/fontello/fontello.css");
 @import url("./font/roboto/roboto.css");
 @import url("./font/mononoki/mononoki.css");
-@import url("./components/locker/locker.css");
 @import url("./components/file-box/file-box.css");
 @import url("./components/expandable/expandable.css");
 @import url("./components/navigation/navigation.css");