Implement EventListener instead of func juggling

js/trdom_torrentcontrol.js

@@ -19,7 +19,7 @@ class trdom_torrentcontrol {
     //TODO: remove
     #getKnownTorrents;
 
-    #handler = function(e) {
+    handleEvent(e) {
         switch (e.type) {
         case 'click':
             if (e.currentTarget.hasAttributeNS('trweb', 'torrentlistfield')) {
@@ -55,7 +55,7 @@ class trdom_torrentcontrol {
                 }
             }
         }
-    }.bind(this);
+    }
 
     constructor(hash, server, logcb, getKnownTorrents) {
         this.#hash = hash;
@@ -81,7 +81,7 @@ class trdom_torrentcontrol {
         element_start.setAttributeNS('trweb', 'torrent', this.#hash);
         element_start.setAttributeNS('trweb', 'torrentlistfield', 'start');
         element_start.appendChild(document.createTextNode("Start"));
-        element_start.addEventListener("click", this.#handler);
+        element_start.addEventListener("click", this);
 
         let element_pause = document.createElement('div');
         element_pause.classList.add('trweb_torrentlistcontrol', 'col-4');
@@ -89,7 +89,7 @@ class trdom_torrentcontrol {
         element_pause.setAttributeNS('trweb', 'torrent', this.#hash);
         element_pause.setAttributeNS('trweb', 'torrentlistfield', 'pause');
         element_pause.appendChild(document.createTextNode("Pause"));
-        element_pause.addEventListener("click", this.#handler);
+        element_pause.addEventListener("click", this);
 
         // Download by magnet
         let element_magnet = document.createElement('div');
@@ -98,7 +98,7 @@ class trdom_torrentcontrol {
         element_magnet.setAttributeNS('trweb', 'torrent', this.#hash);
         element_magnet.setAttributeNS('trweb', 'torrentlistfield', 'magnet');
         element_magnet.appendChild(document.createTextNode(`[${srv}] Magnet`));
-        element_magnet.addEventListener("click", this.#handler);
+        element_magnet.addEventListener("click", this);
 
         // Download by torrent file
         let element_download = document.createElement('div');
@@ -107,7 +107,7 @@ class trdom_torrentcontrol {
         element_download.setAttributeNS('trweb', 'torrent', this.#hash);
         element_download.setAttributeNS('trweb', 'torrentlistfield', 'download');
         element_download.appendChild(document.createTextNode(`[${srv}] Get torrent`));
-        element_download.addEventListener("click", this.#handler);
+        element_download.addEventListener("click", this);
 
         // row container
         let element_serverrow = document.createElement('div');

js/trserver.js

@@ -47,9 +47,9 @@ class trserver {
             rpc.setRequestHeader('X-Transmission-Session-Id', this.#sessionHeader);
         }
         rpc.setRequestHeader('content-type', 'application/json');
-        rpc.addEventListener('readystatechange', this.#handler.bind(this));
-        rpc.addEventListener('timeout', this.#handler.bind(this));
-        rpc.addEventListener('error', this.#handler.bind(this));
+        rpc.addEventListener('readystatechange', this);
+        rpc.addEventListener('timeout', this);
+        rpc.addEventListener('error', this);
         rpc.timeout = 10000;
         try {
             rpc.send(JSON.stringify(request.payload));
@@ -65,7 +65,7 @@ class trserver {
         this.#rpccall(tag);
     }
 
-    #handler(e) {
+    handleEvent(e) {
         switch (e.type) {
             case 'readystatechange':
                 if (e.target.readyState == 4) {

js/trtorrent.js

@@ -26,7 +26,7 @@ class trtorrent {
         this.#servers[srv] = status;
     }
 
-    #handler = function(e) {
+    handleEvent(e) {
         switch (e.type) {
         case 'click':
             if (e.currentTarget.hasAttributeNS('trweb', 'torrentlistfield')) {
@@ -39,7 +39,7 @@ class trtorrent {
             }
             break;
         }
-    }.bind(this);
+    }
 
     constructor(hash) {
         this.#hash = hash;
@@ -52,7 +52,7 @@ class trtorrent {
         this.#element.torrent = this;
         this.#element.classList.add('trweb_torrentlistentry', 'trweb_hide_buttons', 'row');
         this.#element.setAttributeNS('trweb', 'torrentlistfield', 'entry');
-        this.#element.addEventListener('click', this.#handler);
+        this.#element.addEventListener('click', this);
         this.#element.element_name = element_name;
         this.#element.appendChild(element_name);
     }

js/trweb.js

@@ -37,11 +37,12 @@ class trweb {
 
         if (document.readyState === 'complete' || document.readyState === 'interactive') {
             this.#logger('Document already loaded, jumpstarting');
-            this.#handler({'type': 'DOMContentLoaded'});
+            // we don't want to re-trigger every listener, so call handler directly instead of dispatching an event
+            this.handleEvent({'type': 'DOMContentLoaded'});
         }
         else {
             this.#logger('Waiting for document to load');
-            document.addEventListener('DOMContentLoaded', this.#handler);
+            document.addEventListener('DOMContentLoaded', this);
         }
     }
 
@@ -162,7 +163,7 @@ class trweb {
         }
     }
 
-    #handler = function(e) {
+    handleEvent(e) {
         switch (e.type) {
             case 'DOMContentLoaded':
                 this.#logger('Activating TRWEB instance');
@@ -178,7 +179,7 @@ class trweb {
                 this.setTimer();
                 break;
         }
-    }.bind(this);
+    }
 
     refresh() {
         for (const [key, value] of Object.entries(this.#dom_servermanager.getServers())) {