Extract Annotations controller

This commit is contained in:
Yassine Guedidi 2025-03-02 14:07:15 +01:00
parent f76aae2354
commit 09a55ac2c9
3 changed files with 66 additions and 55 deletions

View file

@ -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();
}
}

View file

@ -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;

View file

@ -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 %}