Basic Navigation

ui/_/code/quill.js

@@ -1,6 +1,7 @@
 /*
     Sam Russell
     Captured Sun
+    11.17.25.2 - Fixing onNavigate() and onAppear()
     11.17.25 - Added dynamic function to have units in style func parameters.
     11.14.25 - Added onTouch, onTap. Changed style setters to work with Safari. Added center() funcs.
     11.13.25 - changed onFocus() to be a boolean event, added onInput()
@@ -273,7 +274,6 @@ function extendHTMLElementWithStyleSetters() {
 
     allStyleProps.forEach(prop => {
         if (prop === "translate") return;
-        if(prop === "position") console.log("position")
 
         const type = cssValueType(prop);
 
@@ -792,7 +792,7 @@ window.Triangle = function (width = "40px", height = "40px") {
 /* EVENTS */
 
 HTMLElement.prototype.onAppear = function(func) {
-    func(this);
+    func.call(this);
     return this;
 };
 
@@ -867,15 +867,33 @@ HTMLElement.prototype.onTap = function(cb) {
 
 /* WHY THIS LISTENER IS THE WAY IT IS: 
 - If we dispatch the "navigate" event on the window (as one would expect for a "navigate" event), a listener placed on the element will not pick it up.
-- However, if we add the listener here on the window, it won't have the "this" scope that a callback normally would. Which makes it much less useful.
+- However, if we add the listener on the window, it won't have the "this" scope that a callback normally would. Which makes it much less useful.
 - Then, if we try to add that scope using bind(), it makes the function.toString() unreadable, which means we cannot detect duplicate listeners.
 - Therefore, we just have to attach the navigate event to the element, and manually trigger that when the window listener fires.
 */
+navigateListeners = []
 HTMLElement.prototype.onNavigate = function(cb) {
     this._storeListener("navigate", cb);
-    window.addEventListener("navigate", () => this.dispatchEvent(new CustomEvent("navigate")))
+
+    let found = false
+    for(entry of navigateListeners) {
+        if(entry.cb.toString() === cb.toString() &&
+            this.nodeName === entry.el.nodeName) {
+            found = true
+            break;
+        }
+    }
+    if(found === false) {
+        navigateListeners.push({el: this, cb: cb})
+    }
+
     return this;
 };
+window.addEventListener("navigate", () => {
+    for(entry of navigateListeners) {
+        entry.el.dispatchEvent(new CustomEvent("navigate"))
+    }
+})
 
 HTMLElement.prototype.onEvent = function(name, cb) {
     window._storeListener(window, name, cb);