Update JS

_static/js/caret.js

@@ -1,5 +1,5 @@
 document.addEventListener("DOMContentLoaded", function () {
-    const extra = document.getElementById("extra")
+    const extra = document.querySelector("extra")
     const inputs = document.querySelectorAll('input[type="text"]')
     const caret = document.createElement("div")
     caret.id = "caret"

_static/js/clicks.js

@@ -63,7 +63,7 @@ document.addEventListener("mousedown", function (event) {
             sparkGroup.appendChild(sparkWrapper)
         }
 
-        document.getElementById("extra").appendChild(sparkGroup)
+        document.querySelector("extra").appendChild(sparkGroup)
 
         setTimeout(() => sparkGroup.remove(), 500)
     }

_static/js/script.js

@@ -1,5 +1,7 @@
 const root = document.documentElement
 
+const TOOLTIP_TYPES = ["info", "warning", "error", "issue", "good"]
+
 // Pass
 const pass = null
 
@@ -35,26 +37,38 @@ function toOrdinal(num) {
 
 // Disable input
 /**
- * @param {object} element
+ * @param {HTMLElement} element
  * @param {string | null} tooltip
  * @param {string | null} type
  */
 function disable(element, tooltip = "🚫 This action is not allowed", type = "error") {
     element.setAttribute("disabled", "")
     element.setAttribute("tooltip", tooltip)
-    element.setAttribute("tooltip-type", type)
+    element.setAttribute(
+        "tooltip-type",
+        element.getAttribute("tooltip-type").includes(type)
+            ? element.getAttribute("tooltip-type").replace(type, "-").replace("  ", " ")
+            : str + " " + type
+    )
 }
 
 // Enable input
 /**
- * @param {object} element
+ * @param {HTMLElement} element
  * @param {string | null} tooltip
  * @param {string | null} type
  */
 function enable(element, tooltip = null, type = null) {
     element.removeAttribute("disabled")
     tooltip ? element.setAttribute("tooltip", tooltip) : element.removeAttribute("tooltip")
-    type ? element.setAttribute("tooltip-type", type) : element.removeAttribute("tooltip-type")
+    type
+        ? element.setAttribute(
+              "tooltip-type",
+              element.getAttribute("tooltip-type").includes(type)
+                  ? element.getAttribute("tooltip-type").replace(type, "-").replace("  ", " ")
+                  : str + " " + type
+          )
+        : element.removeAttribute("tooltip-type")
 }
 
 // Convert string to milliseconds
@@ -68,14 +82,40 @@ function stringToMilliseconds(str = "") {
     const numberPattern = /\d+(\.\d+)?/g
     const letterPattern = /[a-zA-Z]+/g
 
-    const numbers = parseFloat(str.match(numberPattern)[0])
-    const letters = str.match(letterPattern)[0]
+    if (str.match(numberPattern) && str.match(letterPattern)) {
+        const numbers = parseFloat(str.match(numberPattern)[0])
+        const letters = str.match(letterPattern)[0]
+
+        switch (letters) {
+            case "ms":
+                return numbers
+            case "s":
+                return numbers * 1000
+            default:
+                return null
+        }
+    }
+}
+
+/**
+ * @param {*} value
+ * @param {HTMLElement} element
+ * @returns number
+ */
+function unitsToPixels(value, element = document.documentElement) {
+    if (!value.match(/[\d.]+([a-z]+)/i)) return null
+
+    const unit = value.match(/[\d.]+([a-z]+)/i)[1]
 
-    switch (letters) {
-        case "ms":
-            return numbers
-        case "s":
-            return numbers * 1000
+    const number = parseFloat(value)
+
+    switch (unit) {
+        case "px":
+            return number
+        case "em":
+            return number * parseFloat(getComputedStyle(element).fontSize)
+        case "rem":
+            return number * parseFloat(getComputedStyle(document.documentElement).fontSize)
         default:
             return null
     }
@@ -193,10 +233,10 @@ function isMobile() {
     function _isMobile(a) {
         if (
             /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
-                a,
+                a
             ) ||
             /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
-                a.substr(0, 4),
+                a.substr(0, 4)
             )
         ) {
             check = true
@@ -264,12 +304,12 @@ window.addEventListener("DOMContentLoaded", () => {
                 detectBrokenImages(
                     Array.from(mutation.addedNodes)
                         .filter((node) => node instanceof Element)
-                        .flatMap((node) => Array.from(node.querySelectorAll("img"))),
+                        .flatMap((node) => Array.from(node.querySelectorAll("img")))
                 )
                 formatKeyboardShortcuts(
                     Array.from(mutation.addedNodes)
                         .filter((node) => node instanceof Element)
-                        .flatMap((node) => Array.from(node.querySelectorAll("kbd"))),
+                        .flatMap((node) => Array.from(node.querySelectorAll("kbd")))
                 )
             }
         })
@@ -285,24 +325,24 @@ window.addEventListener("DOMContentLoaded", () => {
 
 window.addEventListener("load", () => {
     // Mobile debugging
-    const originalConsoleError = console.error
-    const originalConsoleLog = console.log
-
-    console.error = function (message) {
-        originalConsoleError.apply(console, arguments)
-        appendMessageToDom(message)
-    }
-
-    console.log = function (message) {
-        originalConsoleLog.apply(console, arguments)
-        appendMessageToDom(message)
-    }
-
-    function appendMessageToDom(message) {
-        const p = document.createElement("p")
-        p.textContent = message
-        document.querySelector("main").prepend(p)
-    }
+    // const originalConsoleError = console.error
+    // const originalConsoleLog = console.log
+
+    // console.error = function (message) {
+    //     originalConsoleError.apply(console, arguments)
+    //     appendMessageToDom(message)
+    // }
+
+    // console.log = function (message) {
+    //     originalConsoleLog.apply(console, arguments)
+    //     appendMessageToDom(message)
+    // }
+
+    // function appendMessageToDom(message) {
+    //     const p = document.createElement("p")
+    //     p.textContent = message
+    //     document.querySelector("main").prepend(p)
+    // }
 
     // Device info
     const deviceInfo = getDeviceInfo()

_static/js/search.js

@@ -196,7 +196,7 @@ function performSearch() {
         filterValues.other = false
 
         const categories = Object.keys(filterValues).filter(
-            (key) => (filterValues.all === true || filterValues[key] === true) && key !== "all",
+            (key) => (filterValues.all === true || filterValues[key] === true) && key !== "all"
         )
 
         if (categories.length > 0) {

_static/js/settings.js

@@ -376,7 +376,7 @@ window.addEventListener("load", function () {
         // Set root properties
         if (!FIRST_VISIT) {
             root.setAttribute(COOKIES_ATTR, cookiesToString(state))
-            const attrs = ["tooltip", "tooltip-dir", "tooltip-auto", "closed"]
+            const attrs = ["tooltip", "tooltip-type"]
             attrs.forEach(function (key) {
                 document.getElementById("settings-button").removeAttribute(key)
             })
@@ -388,7 +388,7 @@ window.addEventListener("load", function () {
         // Set button properties
         cookiesButton.setAttribute(
             "tooltip",
-            "Cookies are " + (state ? "✅" : "❌") + " " + cookiesToString(state).toUpperCase(),
+            "Cookies are " + (state ? "✅" : "❌") + " " + cookiesToString(state).toUpperCase()
         )
 
         // Set local storage
@@ -420,7 +420,7 @@ window.addEventListener("load", function () {
         // Set button properties
         themeButton.setAttribute(
             "tooltip",
-            "You're in " + (theme === THEME_DARK ? "🌙" : "☀️") + " " + theme.toUpperCase() + " mode",
+            "You're in " + (theme === THEME_DARK ? "🌙" : "☀️") + " " + theme.toUpperCase() + " mode"
         )
 
         // Set local storage
@@ -450,7 +450,7 @@ window.addEventListener("load", function () {
         // Set button properties
         soundButton.setAttribute(
             "tooltip",
-            "Sound is " + (state ? "✅" : "❌") + " " + soundStateToString(state).toUpperCase(),
+            "Sound is " + (state ? "✅" : "❌") + " " + soundStateToString(state).toUpperCase()
         )
 
         // Set local storage