Toggle annotation on click.
authorAlexandre Segura <mex.zktk@gmail.com>
Tue, 14 Mar 2017 17:02:43 +0100
changeset 433 616fc1fad25f
parent 432 597cc594e753
child 434 924d95c07149
Toggle annotation on click.
src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue
src_js/iconolab-bundle/src/components/editor/AnnotationList.vue
--- a/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Tue Mar 14 16:49:55 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Tue Mar 14 17:02:43 2017 +0100
@@ -9,7 +9,7 @@
             <span v-if="!readonly">Annuler</span>
         </button>
         <div v-if="!annotation" class="alert alert-warning text-center">
-            Aucune annotation sélectionnée.
+            Aucune annotation sélectionnée
         </div>
         <form v-bind:action="formAction" method="post">
             <slot>
--- a/src_js/iconolab-bundle/src/components/editor/AnnotationList.vue	Tue Mar 14 16:49:55 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/AnnotationList.vue	Tue Mar 14 17:02:43 2017 +0100
@@ -2,15 +2,12 @@
     <div class="list-group">
         <a v-for="annotation in annotations"
             ref="annotations"
-            @click="onAnnotationClick($event, annotation)"
+            @click="toggleAnnotation($event, annotation)"
             :href="'#' + annotation.annotation_guid"
             class="list-group-item"
             v-bind:class="{ active: isActive(annotation) }">
             <h3 class="small list-group-item-heading">
                 {{ annotation.title }}
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close" @click="onAnnotationClose">
-                    <span aria-hidden="true">&times;</span>
-                </button>
             </h3>
             <p class="list-group-item-text" v-for="tag in annotation.tags">{{ tag.tag_label }}</p>
             <div class="list-group-item-footer">
@@ -42,14 +39,13 @@
             }
         },
         methods: {
-            onAnnotationClick: function(e, annotation) {
+            toggleAnnotation: function(e, annotation) {
                 e.preventDefault();
-                this.$emit('click:annotation', annotation);
-            },
-            onAnnotationClose: function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                this.$emit('close:annotation');
+                if (this.annotation && this.annotation === annotation) {
+                    this.$emit('close:annotation');
+                } else {
+                    this.$emit('click:annotation', annotation);
+                }
             },
             isActive: function(annotation) {
                 return annotation === this.annotation;