Updated html element creation to single function for smaller code base when creating elements

Twitch Notes/twitch-notes.js

@@ -1,30 +1,95 @@
 (function runTwitchNotes() {
 
-  let mousePosition = { x: 0, y: 0 };
+    const Notes = {
-  let lastMousePosition = { x: 0, y: 0 };
+        getSavedUserList: () => {
-  let openContainers = {};
+            return JSON.parse(localStorage.getItem(LS_UserList) || "[]");
-  let isMouseDown = false;
+        },
-  let activeContainer = null;
+        addUserToSavedList: (username) => {
-  let settingsWindowOpen = false;
+            let userList = Notes.getSavedUserList();
 
-  let LS_UserList = "twitch-note-all-users-list";
+            if (!userList.includes(username)) {
-  let LS_Prefix = "twitch-note-";
+                userList.push(username);
+                localStorage.setItem(LS_UserList, JSON.stringify(userList));
+            }
+        },
+        saveNote: (username, note) => {
+            Notes.addUserToSavedList(username);
+            localStorage.setItem(LS_Prefix + username, note);
+        },
+        getNote: (username) => {
+            return localStorage.getItem(LS_Prefix + username) || "";
+        }
+    }
 
-  document.addEventListener("mousemove", handleMouseMove);
+    const Mouse = {
-  document.addEventListener("mouseup", handleMouseUp);
+        mousePosition: {x: 0, y: 0},
+        lastMousePosition: {x: 0, y: 0},
+        handleMouseMove: (event) => {
+            if (isMouseDown) {
+                if (activeContainer) {
+                    const dx = Mouse.mousePosition.x - Mouse.lastMousePosition.x;
+                    const dy = Mouse.mousePosition.y - Mouse.lastMousePosition.y;
+                    openContainers[activeContainer].style.top =
+                        parseInt(openContainers[activeContainer].style.top) + dy + "px";
+                    openContainers[activeContainer].style.left =
+                        parseInt(openContainers[activeContainer].style.left) + dx + "px";
+                }
+            }
+            Mouse.updateMousePosition(event.clientX, event.clientY);
+        },
+        handleMouseUp: () => {
+            activeContainer = null;
+            isMouseDown = false;
+        },
+        updateMousePosition: (x, y) => {
+            Mouse.lastMousePosition = {...Mouse.mousePosition};
+            Mouse.mousePosition = {x, y};
+        }
+    }
+
+    function createElement(tag, body, classes, styles, attributes) {
+        const element = document.createElement(tag);
+
+        if (body) {
+            element.innerHTML = body;
+        }
+
+        if (classes) {
+            if (typeof classes === 'object') {
+                for (let className of classes) {
+                    element.classList.add((className));
+                }
+            } else {
+                element.classList.add(classes);
+            }
+        }
+
+        if (styles) {
+            if (typeof styles === 'object') {
+                for (let style in styles) {
+                    element.style[style] = styles[style];
+                }
+            }
+        }
+
+        if (attributes) {
+            if (typeof attributes === 'object') {
+                for (let attribute in attributes) {
+                    element.setAttribute(attribute, attributes[attribute]);
+                }
+            }
+        }
+
+        return element;
+    }
 
     function createSettingsButton(buttonContainer) {
-    const c1 = document.createElement("div");
-    c1.style.marginLeft = "0.5rem !important";
-    const c2 = document.createElement("div");
-    c2.style.display = "inline-flex !important";
 
-    const settingsButton = document.createElement("button");
+        const c1 = createElement('div', null, null, {marginLeft: "0.5rem !important"});
-    settingsButton.classList.add("twitch-notes-settings-button");
+        const c2 = createElement('div', null, null, {display: "inline-flex !important"});
-    settingsButton.innerHTML = "Notes";
+        const settingsButton = createElement('button', 'Notes', 'twitch-notes-settings-button');
-    settingsButton.addEventListener("click", () => {
+
-      console.log("TN Settings");
+        settingsButton.addEventListener("click", toggleSettings);
-    });
 
         c2.appendChild(settingsButton);
         c1.appendChild(c2);
@@ -35,53 +100,6 @@
         );
     }
 
-  function getSavedUserList() {
-    return JSON.parse(localStorage.getItem(LS_UserList) || "[]");
-  }
-
-  function addUserToSavedList(username) {
-    let userList = getSavedUserList();
-
-    if (!userList.includes(username)) {
-      userList.push(username);
-      localStorage.setItem(LS_UserList, JSON.stringify(userList));
-    }
-  }
-
-  function saveNote(username, note) {
-    addUserToSavedList(username);
-    localStorage.setItem(LS_Prefix + username, note);
-  }
-  function getNote(username) {
-    return localStorage.getItem(LS_Prefix + username) || "";
-  }
-
-  function handleMouseMove(event) {
-    event = event || window.event;
-    if (isMouseDown) {
-      if (activeContainer) {
-        const dx = mousePosition.x - lastMousePosition.x;
-        const dy = mousePosition.y - lastMousePosition.y;
-        openContainers[activeContainer].style.top =
-          parseInt(openContainers[activeContainer].style.top) + dy + "px";
-        openContainers[activeContainer].style.left =
-          parseInt(openContainers[activeContainer].style.left) + dx + "px";
-      }
-    }
-    updateMousePosition(event.clientX, event.clientY);
-  }
-
-  function handleMouseUp(event) {
-    activeContainer = null;
-    isMouseDown = false;
-  }
-
-  function updateMousePosition(x, y) {
-    lastMousePosition = { ...mousePosition };
-    mousePosition.x = x;
-    mousePosition.y = y;
-  }
-
     function removeContainer(username) {
         if (!openContainers[username]) return;
         openContainers[username].remove();
@@ -95,53 +113,102 @@
     }
 
     function openTwitchNote(username) {
-    // CONTAINER
-    const container = document.createElement("div");
-    container.style.left = mousePosition.x + "px";
-    container.style.top = mousePosition.y + 10 + "px";
-    container.classList.add("twitch-note-container");
 
-    // HEADER
+        const container = createElement('div', null, 'twitch-note-container', {
-    const header = document.createElement("div");
+            left: Mouse.mousePosition.x + 'px',
-    header.classList.add("twitch-note-header");
+            top: Mouse.mousePosition.y + 10 + 'px'
+        });
+
+        const header = createElement('div', null, 'twitch-note-header');
         header.addEventListener("mousedown", function close() {
             activeContainer = username;
             isMouseDown = true;
         });
-    const closeButton = document.createElement("span");
+
-    closeButton.classList.add("twitch-note-close-button");
+        const closeButton = createElement('span', "X", 'twitch-note-close-button')
-    closeButton.innerText = "X";
         closeButton.addEventListener("click", function close() {
             removeContainer(username);
         });
-    header.appendChild(closeButton);
-    const title = document.createElement("span");
-    title.classList.add("twitch-note-title");
-    title.innerHTML = username;
-    header.appendChild(title);
-    container.appendChild(header);
 
-    // BODY
+        const title = createElement('span', username, 'twitch-note-title');
-    const content = document.createElement("div");
+        const content = createElement('div', Notes.getNote(username), 'twitch-note-content', [], {
-    content.classList.add("twitch-note-content");
+            contentEditable: 'true'
-    content.setAttribute("contentEditable", true);
+        });
-    content.innerHTML = getNote(username);
 
-    container.appendChild(content);
+        const saveButton = createElement('div', 'SAVE', 'twitch-note-save-button')
-
-    const saveButton = document.createElement("div");
-    saveButton.classList.add("twitch-note-save-button");
-    saveButton.innerText = "SAVE";
         saveButton.addEventListener("click", function () {
-      saveNote(username, content.innerHTML);
+            Notes.saveNote(username, content.innerHTML);
             removeContainer(username);
         });
 
+        header.appendChild(closeButton);
+        header.appendChild(title);
+        container.appendChild(header);
+        container.appendChild(content);
         container.appendChild(saveButton);
 
         addContainer(username, container);
     }
 
+    function addNoteBadges() {
+        let nodes = document.getElementsByClassName("chat-line__message");
+        let users = [];
+        for (let node of nodes) {
+            const n = node.querySelector(".chat-author__display-name");
+            if (!n) continue;
+            const usernameContainer = node.querySelector(
+                ".chat-line__username-container"
+            );
+
+            const username = n.attributes["data-a-user"].value;
+            if (username) {
+                let noteButton = usernameContainer.querySelector(".twitch-note");
+                if (!noteButton) {
+
+                    const twitchNote = createElement('span', null, 'twitch-note', {
+                        cursor: 'pointer',
+                    })
+                    twitchNote.addEventListener("click", () => {
+                        openTwitchNote(username);
+                    });
+
+                    const img = createElement('img', null, null, {
+                        height:  '18px',
+                        paddingRight: '4px'
+                    }, {
+                        src: "https://cdn.rdarius.lt/icons/32-id-card.png"
+                    })
+
+                    twitchNote.appendChild(img);
+
+                    usernameContainer.insertBefore(
+                        twitchNote,
+                        usernameContainer.firstChild
+                    );
+                }
+                if (!users[username]) {
+                    users[username] = 0;
+                }
+                users[username]++;
+            }
+        }
+    }
+
+    function toggleSettings() {
+        console.log('toggle settings');
+    }
+
+    let openContainers = {};
+    let isMouseDown = false;
+    let activeContainer = null;
+    // let settingsWindowOpen = false;
+
+    let LS_UserList = "twitch-note-all-users-list";
+    let LS_Prefix = "twitch-note-";
+
+    document.addEventListener("mousemove", Mouse.handleMouseMove);
+    document.addEventListener("mouseup", Mouse.handleMouseUp);
+
     let giveUpAt = Date.now() + 20000;
 
     let changeInProgress = false;
@@ -167,48 +234,12 @@
     const config = {attributes: true, childList: true, subtree: true};
 
     // Callback function to execute when mutations are observed
-  const callback = (mutationList, observer) => {
+    const callback = (mutationList) => {
         if (!changeInProgress) {
             for (const mutation of mutationList) {
                 if (mutation.type === "childList") {
                     changeInProgress = true;
-          let nodes = document.getElementsByClassName("chat-line__message");
+                    addNoteBadges();
-          let users = [];
-          for (let node of nodes) {
-            const n = node.querySelector(".chat-author__display-name");
-            if (!n) continue;
-            const usernameContainer = node.querySelector(
-              ".chat-line__username-container"
-            );
-
-            const username = n.attributes["data-a-user"].value;
-            if (username) {
-              let noteButton = usernameContainer.querySelector(".twitch-note");
-              if (!noteButton) {
-                const twitchNote = document.createElement("span");
-                twitchNote.classList.add("twitch-note");
-                twitchNote.style.cursor = "pointer";
-                twitchNote.addEventListener("click", () => {
-                  openTwitchNote(username);
-                });
-
-                const img = document.createElement("img");
-                img.src = "https://cdn.rdarius.lt/icons/32-id-card.png";
-                img.style.height = "18px";
-                img.style.paddingRight = "4px";
-                twitchNote.appendChild(img);
-
-                usernameContainer.insertBefore(
-                  twitchNote,
-                  usernameContainer.firstChild
-                );
-              }
-              if (!users[username]) {
-                users[username] = 0;
-              }
-              users[username]++;
-            }
-          }
                     changeInProgress = false;
                 }
             }