# HG changeset patch # User Alexandre Segura # Date 1492432958 -7200 # Node ID 6c43539e5c678a689b74c190c3f2dc013a439812 # Parent 287af082244584a61f1ccc1978b4727fac30f56d Use browser history instead of hash for annotation URL. diff -r 287af0822445 -r 6c43539e5c67 src/iconolab/templates/iconolab/collection_home.html --- a/src/iconolab/templates/iconolab/collection_home.html Mon Apr 17 13:31:59 2017 +0200 +++ b/src/iconolab/templates/iconolab/collection_home.html Mon Apr 17 14:42:38 2017 +0200 @@ -45,7 +45,7 @@
{% thumbnail annotation.image.media "250x250" crop=False as im %} - + diff -r 287af0822445 -r 6c43539e5c67 src/iconolab/templates/iconolab/detail_image.html --- a/src/iconolab/templates/iconolab/detail_image.html Mon Apr 17 13:31:59 2017 +0200 +++ b/src/iconolab/templates/iconolab/detail_image.html Mon Apr 17 14:42:38 2017 +0200 @@ -22,6 +22,7 @@ {% else %} @@ -100,8 +101,18 @@ var currentPath = "{{ request.path }}"; var getCommentFormURL = "{% url 'get_comment_form' ':annotation_guid' %}" + var imageURL = "{% url 'image_detail' collection_name image_guid %}" + var annotationURL = "{% url 'annotation_detail' collection_name image_guid ':annotation_guid' %}" var isAuthenticated = {% if user.is_authenticated %}true{% else %}false{% endif %}; + window.onpopstate = function(event) { + if (event.state.annotation_guid) { + vm.annotation = getAnnotationByGuid(event.state.annotation_guid); + } else { + vm.annotation = null; + } + }; + Vue.component('comment-form', { template: '
', data: function() { @@ -119,7 +130,12 @@ {% endfor %} {% endif %} - var annotation = getAnnotationFromHash(); + {% if annotation %} + var annotation = getAnnotationByGuid("{{ annotation.annotation_guid }}"); + {% else %} + var annotation = null; + {% endif %} + if (annotation) { getCommentForm(annotation).then(function(template) { updateCommentFormComponent(template); @@ -129,9 +145,10 @@ createViewModel(); } + var vm; function createViewModel() { - var vm = new Vue({ + vm = new Vue({ el: '.annotation-navigator', data: function() { return { @@ -146,12 +163,12 @@ getCommentForm(annotation).then(function(template) { updateCommentFormComponent(template); self.annotation = annotation; - location.hash = '#' + annotation.annotation_guid; + history.pushState({ annotation_guid: annotation.annotation_guid }, '', annotationURL.replace(':annotation_guid', annotation.annotation_guid)); }); }, onAnnotationClose: function() { this.annotation = null; - location.hash = ''; + history.pushState({ annotation_guid: null }, '', imageURL); } } }); @@ -220,18 +237,14 @@ function getCommentForm(annotation) { return $.get(getCommentFormURL.replace(':annotation_guid', annotation.annotation_guid), { - next: currentPath + '#' + annotation.annotation_guid + next: annotationURL.replace(':annotation_guid', annotation.annotation_guid) }) } - function getAnnotationFromHash() { - var url = location.hash.slice(1); - if (url.length) { - var annotation_guid = url; - return _.find(annotations, function(annotation) { - return annotation.annotation_guid === annotation_guid; - }); - } + function getAnnotationByGuid(guid) { + return _.find(annotations, function(annotation) { + return annotation.annotation_guid === guid; + }); } diff -r 287af0822445 -r 6c43539e5c67 src/iconolab/templates/iconolab_base.html --- a/src/iconolab/templates/iconolab_base.html Mon Apr 17 13:31:59 2017 +0200 +++ b/src/iconolab/templates/iconolab_base.html Mon Apr 17 14:42:38 2017 +0200 @@ -23,7 +23,7 @@ {% include "partials/header.html" %} -
+
{% block content %}{% endblock %}
diff -r 287af0822445 -r 6c43539e5c67 src/iconolab/templates/partials/header.html --- a/src/iconolab/templates/partials/header.html Mon Apr 17 13:31:59 2017 +0200 +++ b/src/iconolab/templates/partials/header.html Mon Apr 17 14:42:38 2017 +0200 @@ -1,10 +1,11 @@ {% load notifications_tags %} +{% load iconolab_tags %} {% load staticfiles %}
-
+
{% include "partials/header_breadcrumbs.html" %}
diff -r 287af0822445 -r 6c43539e5c67 src/iconolab/templates/partials/image_annotations_list.html --- a/src/iconolab/templates/partials/image_annotations_list.html Mon Apr 17 13:31:59 2017 +0200 +++ b/src/iconolab/templates/partials/image_annotations_list.html Mon Apr 17 14:42:38 2017 +0200 @@ -25,7 +25,7 @@
{% thumbnail annotation.image.media "150x150" crop=False as im %} - + diff -r 287af0822445 -r 6c43539e5c67 src/iconolab/templates/partials/user_pages/annotations_commented_panel.html --- a/src/iconolab/templates/partials/user_pages/annotations_commented_panel.html Mon Apr 17 13:31:59 2017 +0200 +++ b/src/iconolab/templates/partials/user_pages/annotations_commented_panel.html Mon Apr 17 14:42:38 2017 +0200 @@ -14,7 +14,7 @@ {% if with_stats %}
diff -r 287af0822445 -r 6c43539e5c67 src/iconolab/templates/partials/user_pages/annotations_contributed_panel.html --- a/src/iconolab/templates/partials/user_pages/annotations_contributed_panel.html Mon Apr 17 13:31:59 2017 +0200 +++ b/src/iconolab/templates/partials/user_pages/annotations_contributed_panel.html Mon Apr 17 14:42:38 2017 +0200 @@ -14,7 +14,7 @@ {% if with_stats %}
diff -r 287af0822445 -r 6c43539e5c67 src/iconolab/templates/partials/user_pages/annotations_created_panel.html --- a/src/iconolab/templates/partials/user_pages/annotations_created_panel.html Mon Apr 17 13:31:59 2017 +0200 +++ b/src/iconolab/templates/partials/user_pages/annotations_created_panel.html Mon Apr 17 14:42:38 2017 +0200 @@ -13,7 +13,7 @@ {% if with_stats %}
diff -r 287af0822445 -r 6c43539e5c67 src/iconolab/templatetags/iconolab_tags.py --- a/src/iconolab/templatetags/iconolab_tags.py Mon Apr 17 13:31:59 2017 +0200 +++ b/src/iconolab/templatetags/iconolab_tags.py Mon Apr 17 14:42:38 2017 +0200 @@ -65,3 +65,11 @@ serializer = AnnotationRevisionSerializer(data) return JSONRenderer().render(serializer.data) return serialize('json', [data]) + +@register.simple_tag(takes_context=True) +def container_class(context): + request = context['request'] + routes = ['image_detail', 'annotation_detail'] + if request.resolver_match.url_name in routes: + return 'container-fluid' + return 'container' diff -r 287af0822445 -r 6c43539e5c67 src/iconolab/urls.py --- a/src/iconolab/urls.py Mon Apr 17 13:31:59 2017 +0200 +++ b/src/iconolab/urls.py Mon Apr 17 14:42:38 2017 +0200 @@ -38,7 +38,8 @@ url(r'^collections/(?P[a-z0-9\-]+)/images/(?P[^/]+)$', views.objects.ShowImageView.as_view(), name='image_detail'), url(r'^collections/(?P[a-z0-9\-]+)/images/(?P[^/]+)/annotations/?$', django_views.generic.RedirectView.as_view(pattern_name="image_detail")), url(r'^collections/(?P[a-z0-9\-]+)/images/(?P[^/]+)/annotations/create$', login_required(views.objects.CreateAnnotationView.as_view()), name='annotation_create'), - url(r'^collections/(?P[a-z0-9\-]+)/images/(?P[^/]+)/annotations/(?P[^/]+)/detail$', views.objects.ShowAnnotationView.as_view(), name='annotation_detail'), + url(r'^collections/(?P[a-z0-9\-]+)/images/(?P[^/]+)/annotations/(?P[^/]+)/?$', views.objects.ShowAnnotationView.as_view(), name='annotation_detail'), + url(r'^collections/(?P[a-z0-9\-]+)/images/(?P[^/]+)/annotations/(?P[^/]+)/detail$', views.objects.ShowAnnotationViewOld.as_view(), name='annotation_detail_old'), url(r'^collections/(?P[a-z0-9\-]+)/images/(?P[^/]+)/annotations/(?P[^/]+)/readonly$', views.objects.ReadonlyAnnotationView.as_view(), name='annotation_readonly'), url(r'^collections/(?P[a-z0-9\-]+)/images/(?P[^/]+)/annotations/(?P[^/]+)/edit$', login_required(views.objects.EditAnnotationView.as_view()), name='annotation_edit'), url(r'^collections/(?P[a-z0-9\-]+)/images/(?P[^/]+)/annotations/(?P[^/]+)/revisions/?$', django_views.generic.RedirectView.as_view(pattern_name="annotation_detail")), diff -r 287af0822445 -r 6c43539e5c67 src/iconolab/views/objects.py --- a/src/iconolab/views/objects.py Mon Apr 17 13:31:59 2017 +0200 +++ b/src/iconolab/views/objects.py Mon Apr 17 14:42:38 2017 +0200 @@ -450,6 +450,23 @@ return render(request, 'iconolab/change_annotation.html', context) class ShowAnnotationView(View, ContextMixin, IconolabObjectView): + def get(self, request, *args, **kwargs): + success, result = self.check_kwargs(kwargs) + if success: + (collection, image, annotation) = result + else: + return result(request) + context = super(ShowAnnotationView, self).get_context_data(**kwargs) + context['collection_name'] = self.kwargs.get('collection_name', '') + context['image_guid'] = self.kwargs.get('image_guid', '') + context['collection'] = collection + context['image'] = image + context['item'] = image.item + context['annotation'] = annotation + context['form'] = AnnotationRevisionForm() + return render(request, 'iconolab/detail_image.html', context) + +class ShowAnnotationViewOld(View, ContextMixin, IconolabObjectView): """ View that show a given annotation with the corresponding data, links to submit new revisions and the paginated comments thread. @@ -608,8 +625,8 @@ if (annotation.author != revision_author): messages.add_message(request, messages.INFO, "Votre modification a été prise en compte. Le créateur de l'annotation a été notifié.") - redirect_url = reverse('image_detail', kwargs={'collection_name': collection_name, 'image_guid': image_guid}) - return redirect(redirect_url + '#' + str(annotation.annotation_guid)) + redirect_url = reverse('annotation_detail', kwargs={'collection_name': collection_name, 'image_guid': image_guid, 'annotation_guid': str(annotation.annotation_guid)}) + return redirect(redirect_url) context = self.get_context_data(**kwargs) context['image'] = image context['form'] = annotation_form diff -r 287af0822445 -r 6c43539e5c67 src_js/iconolab-bundle/src/components/editor/AnnotationList.vue --- a/src_js/iconolab-bundle/src/components/editor/AnnotationList.vue Mon Apr 17 13:31:59 2017 +0200 +++ b/src_js/iconolab-bundle/src/components/editor/AnnotationList.vue Mon Apr 17 14:42:38 2017 +0200 @@ -3,7 +3,7 @@

@@ -24,7 +24,8 @@ export default { props: [ 'annotations', - 'annotation' + 'annotation', + 'annotationUrl' ], mounted() { if (this.annotation) { @@ -39,6 +40,9 @@ } }, methods: { + getAnnotationURL: function(guid) { + return this.annotationUrl.replace(':annotation_guid', guid); + }, toggleAnnotation: function(e, annotation) { e.preventDefault(); if (this.annotation && this.annotation === annotation) { @@ -56,7 +60,7 @@ }, slideToAnnotation: function() { var el = _.find(this.$refs.annotations, (el) => { - return $(el).attr('href') === ('#' + this.annotation.annotation_guid); + return $(el).attr('href') === this.getAnnotationURL(this.annotation.annotation_guid); }); if (el) { var $container = $(this.$el.closest('.panel'));