Extract Annotations controller

assets/controllers/annotations_controller.js

@@ -0,0 +1,57 @@
+import { Controller } from '@hotwired/stimulus';
+import annotator from 'annotator';
+
+export default class extends Controller {
+  static values = {
+    entryId: Number,
+    createUrl: String,
+    updateUrl: String,
+    destroyUrl: String,
+    searchUrl: String,
+  };
+
+  connect() {
+    this.app = new annotator.App();
+
+    this.app.include(annotator.ui.main, {
+      element: this.element,
+    });
+
+    const authorization = {
+      permits() { return true; },
+    };
+    this.app.registry.registerUtility(authorization, 'authorizationPolicy');
+
+    this.app.include(annotator.storage.http, {
+      prefix: '',
+      urls: {
+        create: this.createUrlValue,
+        update: this.updateUrlValue,
+        destroy: this.destroyUrlValue,
+        search: this.searchUrlValue,
+      },
+      entryId: this.entryIdValue,
+      onError(msg, xhr) {
+        if (!Object.prototype.hasOwnProperty.call(xhr, 'responseJSON')) {
+          annotator.notification.banner('An error occurred', 'error');
+          return;
+        }
+        Object.values(xhr.responseJSON.children).forEach((v) => {
+          if (v.errors) {
+            Object.values(v.errors).forEach((errorText) => {
+              annotator.notification.banner(errorText, 'error');
+            });
+          }
+        });
+      },
+    });
+
+    this.app.start().then(() => {
+      this.app.annotations.load({ entry: this.entryIdValue });
+    });
+  }
+
+  disconnect() {
+    this.app.destroy();
+  }
+}

assets/index.js

@@ -6,9 +6,6 @@ import $ from 'jquery';
 import '@materializecss/materialize/dist/css/materialize.css';
 import '@materializecss/materialize/dist/js/materialize';
 
-/* Annotations */
-import annotator from 'annotator';
-
 import ClipboardJS from 'clipboard';
 import 'mathjax/es5/tex-svg';
 
@@ -33,45 +30,7 @@ import './js/shortcuts/entry';
 /* Theme style */
 import './scss/index.scss';
 
-/* ==========================================================================
- Annotations
- ========================================================================== */
-
 $(document).ready(() => {
-  if ($('#article').length) {
-    const app = new annotator.App();
-
-    app.include(annotator.ui.main, {
-      element: document.querySelector('article'),
-    });
-
-    const authorization = {
-      permits() { return true; },
-    };
-    app.registry.registerUtility(authorization, 'authorizationPolicy');
-
-    const x = JSON.parse($('#annotationroutes').html());
-    app.include(annotator.storage.http, $.extend({}, x, {
-      onError(msg, xhr) {
-        if (!Object.prototype.hasOwnProperty.call(xhr, 'responseJSON')) {
-          annotator.notification.banner('An error occurred', 'error');
-          return;
-        }
-        $.each(xhr.responseJSON.children, (k, v) => {
-          if (v.errors) {
-            $.each(v.errors, (n, errorText) => {
-              annotator.notification.banner(errorText, 'error');
-            });
-          }
-        });
-      },
-    }));
-
-    app.start().then(() => {
-      app.annotations.load({ entry: x.entryId });
-    });
-  }
-
   document.querySelectorAll('[data-handler=tag-rename]').forEach((item) => {
     const current = item;
     current.wallabag_edit_mode = false;

templates/Entry/entry.html.twig

@@ -322,7 +322,15 @@
             </div>
 
         </aside>
-        <article{% if entry.language is defined and entry.language is not null %} lang="{{ entry.getHTMLLanguage() }}"{% endif %} data-controller="highlight">
+        <article
+            {% if entry.language is defined and entry.language is not null %} lang="{{ entry.getHTMLLanguage() }}"{% endif %}
+            data-controller="highlight annotations"
+            data-annotations-entry-id-value="{{ entry.id }}"
+            data-annotations-create-url-value="{{ path('annotations_post_annotation', {'entry': entry.id}) }}"
+            data-annotations-update-url-value="{{ path('annotations_put_annotation', {'annotation': 'idAnnotation'}) }}"
+            data-annotations-destroy-url-value="{{ path('annotations_delete_annotation', {'annotation': 'idAnnotation'}) }}"
+            data-annotations-search-url-value="{{ path('annotations_get_annotations', {'entry': entry.id}) }}"
+        >
             {{ entry.content|raw }}
         </article>
 
@@ -343,19 +351,6 @@
             </ul>
         </div>
     </div>
-
-<script id="annotationroutes" type="application/json">
-{
-    "prefix": "",
-    "urls": {
-        "create": "{{ path('annotations_post_annotation', {'entry': entry.id}) }}",
-        "update": "{{ path('annotations_put_annotation', {'annotation': 'idAnnotation'}) }}",
-        "destroy": "{{ path('annotations_delete_annotation', {'annotation': 'idAnnotation'}) }}",
-        "search": "{{ path('annotations_get_annotations', {'entry': entry.id}) }}"
-    },
-    "entryId": "{{ entry.id }}"
-}</script>
-
 {% endblock %}
 
 {% block footer %}