Move annotatorjs to the bottom of the body

[github/wallabag/wallabag.git] / src / Wallabag / CoreBundle / Resources / views / themes / baggy / Entry / entry.html.twig

diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig
index a3a9baa2c087c6b66fc2073b5f4ea3f2faeeacc2..988cbd29cfff2ea5398aee0e935bea41b5458ad2 100644 (file)
--- a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig
@@ -5,14 +5,14 @@
 {% block content %}
     <div id="article">
         <header class="mbm">
-            <h1>{{ entry.title|raw }} <a href="{{ path('edit', { 'id': entry.id }) }}" title="{% trans %}Edit tags{% endtrans %}">✎</a></h1>
+            <h1>{{ entry.title|raw }} <a href="{{ path('edit', { 'id': entry.id }) }}" title="{% trans %}Edit title{% endtrans %}">✎</a></h1>
         </header>
 
         <div id="article_toolbar">
         <ul class="links">
             <li class="topPosF"><a href="#top" title="{% trans %}Back to top{% endtrans %}" class="tool top icon icon-arrow-up-thick"><span>{% trans %}Back to top{% endtrans %}</span></a></li>
             <li><a href="{{ entry.url|e }}" target="_blank" title="{% trans %}original{% endtrans %} : {{ entry.title|e }}" class="tool link icon icon-link"><span>{{ entry.domainName|removeWww }}</span></a></li>
-            <li><a title="{% trans %}Reload content{% endtrans %}" class="tool icon icon-reload" href="{{ path('reload_entry', { 'id': entry.id }) }}"><span>{% trans %}Reload content{% endtrans %}</span></a></li>
+            <li><a title="{% trans %}Re-fetch content{% endtrans %}" class="tool icon icon-reload" href="{{ path('reload_entry', { 'id': entry.id }) }}"><span>{% trans %}Re-fetch content{% endtrans %}</span></a></li>
             <li><a title="{% if entry.isArchived == 0 %}{% trans %}Mark as read{% endtrans %}{% else %}{% trans %}Mark as unread{% endtrans %}{% endif %}" class="tool icon icon-check {% if entry.isArchived == 0 %}archive-off{% else %}archive{% endif %}" href="{{ path('archive_entry', { 'id': entry.id }) }}"><span>{% if entry.isArchived == 0 %}{% trans %}Mark as read{% endtrans %}{% else %}{% trans %}Mark as unread{% endtrans %}{% endif %}</span></a></li>
             <li><a title="{% trans %}Favorite{% endtrans %}" class="tool icon icon-star {% if entry.isStarred == 0 %}fav-off{% else %}fav{% endif %}" href="{{ path('star_entry', { 'id': entry.id }) }}"><span>{% trans %}Toggle favorite{% endtrans %}</span></a></li>
             <li><a id="nav-btn-add-tag" title="{% trans %}Add a tag{% endtrans %}"><span>{% trans %}Tag{% endtrans %}</span></a></li>
@@ -32,8 +32,8 @@
 
         <aside class="tags">
             {% for tag in entry.tags %}
-                <span class="mdi-action-label-outline">{{ tag.label }}</span><a href="{{ path('remove_tag', { 'entry': entry.id, 'tag': tag.id }) }}"><i>✘</i></a>
-                {% endfor %}
+                <span class="mdi-action-label-outline">{{ tag.label }}</span> <a href="{{ path('remove_tag', { 'entry': entry.id, 'tag': tag.id }) }}"><i>✘</i></a>
+            {% endfor %}
             <div class="input-field nav-panel-add-tag" style="display: none">
                 {{ render(controller( "WallabagCoreBundle:Tag:addTagForm", { 'id': entry.id } )) }}
             </div>
@@ -107,5 +107,25 @@
                 retrievePercent({{ entry.id }});
             });
         });
+
+        var app = new annotator.App();
+        app.include(annotator.ui.main, {
+            element: document.querySelector('article')
+        });
+        app.include(annotator.storage.http, {
+            prefix: '',
+            urls: {
+                create: '{{ path('annotations_post_annotation', { 'entry': entry.id }) }}',
+                update: '{{ path('annotations_put_annotation', { 'comment': 'idComment' }) }}',
+                destroy: '{{ path('annotations_delete_annotation', { 'comment': 'idComment' }) }}',
+                search: '{{ path('annotations_get_annotations', { 'entry': entry.id }) }}'
+            }
+        });
+        app
+            .start()
+            .then(function () {
+                app.annotations.load({entry: {{ entry.id }}});
+            });
     </script>
+
 {% endblock %}