connect mercure endpoint url to noti controller directly (#766)

adjusted notification controller to take mercure endpoint url directly
as controller values rather than templating the endpoint separately and
then extracting them from dom nodes

if the endpoint isn't provided then it will not attempt to connect to
mercure, effectively disabling them

also fix controller related js files according to eslint rules

overall functionality should remain the same

assets/controllers/notifications_controller.js

@@ -1,37 +1,37 @@
-import {Controller} from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus';
 import Subscribe from '../utils/event-source';
 
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
     static values = {
+        endpoint: String,
         user: String,
         magazine: String,
         entryId: String,
         postId: String,
     };
 
     connect() {
-        this.es(this.getTopics());
+        if (this.endpointValue) {
+            this.connectEs(this.endpointValue, this.getTopics());
 
-        window.onbeforeunload = function (event) {
-            if (window.es !== undefined) {
-                window.es.close();
-            }
-        };
+            window.addEventListener('pagehide', this.closeEs);
+        }
     }
 
-    es(topics) {
-        if (window.es !== undefined) {
-            window.es.close();
-        }
+    disconnect() {
+        this.closeEs();
+    }
+
+    connectEs(endpoint, topics) {
+        this.closeEs();
 
-        let self = this;
-        let cb = function (e) {
-            let data = JSON.parse(e.data);
+        const cb = (e) => {
+            const data = JSON.parse(e.data);
 
-            self.dispatch(data.op, {detail: data});
+            this.dispatch(data.op, { detail: data });
 
-            self.dispatch('Notification', {detail: data});
+            this.dispatch('Notification', { detail: data });
 
             // if (data.op.includes('Create')) {
             //     self.dispatch('CreatedNotification', {detail: data});
@@ -41,17 +41,17 @@ export default class extends Controller {
             //     self.dispatch('MainSubjectCreatedNotification', {detail: data});
             // }
             //
-        }
+        };
 
-        const eventSource = Subscribe(topics, cb);
+        const eventSource = Subscribe(endpoint, topics, cb);
         if (eventSource) {
             window.es = eventSource;
             // firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1803431
-            if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
-                let resubscribe = (e) => {
+            if (navigator.userAgent.toLowerCase().includes('firefox')) {
+                const resubscribe = () => {
                     window.es.close();
                     setTimeout(() => {
-                        const eventSource = Subscribe(topics, cb);
+                        const eventSource = Subscribe(endpoint, topics, cb);
                         if (eventSource) {
                             window.es = eventSource;
                             window.es.onerror = resubscribe;
@@ -63,11 +63,17 @@ export default class extends Controller {
         }
     }
 
+    closeEs() {
+        if (window.es instanceof EventSource) {
+            window.es.close();
+        }
+    }
+
     getTopics() {
         let pub = true;
         const topics = [
-            'count'
-        ]
+            'count',
+        ];
 
         if (this.userValue) {
             topics.push(`/api/users/${this.userValue}`);

assets/utils/event-source.js

@@ -1,17 +1,16 @@
-export default function
-    subscribe(topics, cb) {
-    const mercureElem = document.getElementById("mercure-url");
-    if (mercureElem) {
-        const url = new URL(mercureElem.textContent.trim());
+export default function subscribe(endpoint, topics, cb) {
+    if (!endpoint) {
+        return null;
+    }
 
-        topics.forEach(topic => {
-            url.searchParams.append('topic', topic);
-        })
+    const url = new URL(endpoint);
 
-        const eventSource = new EventSource(url);
-        eventSource.onmessage = e => cb(e);
+    topics.forEach((topic) => {
+        url.searchParams.append('topic', topic);
+    });
 
-        return eventSource;
-    }
-    return null;
+    const eventSource = new EventSource(url);
+    eventSource.onmessage = (e) => cb(e);
+
+    return eventSource;
 }

templates/base.html.twig

@@ -51,10 +51,6 @@
 
     {% block javascripts %}
         {{ encore_entry_script_tags('app') }}
-        {% if kbin_mercure_enabled() %}
-        {#        <script type="application/json" id="mercure-url">{{ mercure()|raw }}</script> #}
-        <script type="application/json" id="mercure-url">{{- 'https://' ~ kbin_domain() ~ '/.well-known/mercure' }}</script>
-        {% endif %}
     {% endblock %}
 </head>
 <body class="{{ html_classes('theme--'~THEME, {
@@ -66,6 +62,7 @@
         'sidebars-same-side': app.user is defined and app.user is not same as null and SUBSCRIPTIONS_SEPARATE is same as V_TRUE and SUBSCRIPTIONS_SAME_SIDE is same as V_TRUE,
     }) }}"
         data-controller="kbin notifications"
+        data-notifications-endpoint-value="{{ kbin_mercure_enabled() ? 'https://'~kbin_domain()~'/.well-known/mercure' : null }}"
         data-notifications-user-value="{{ app.user ? app.user.id : null }}"
         data-notifications-magazine-value="{{ magazine is defined and magazine ? magazine.id : null }}"
         data-notifications-entry-id-value="{{ entry is defined and entry ? entry.id : null }}"