equal
deleted
inserted
replaced
1 <template> |
1 <template> |
2 <div class="list-group"> |
2 <div class="list-group"> |
3 <a v-for="annotation in annotations" |
3 <a v-for="annotation in annotations" |
4 ref="annotations" |
4 ref="annotations" |
5 @click="onAnnotationClick($event, annotation)" |
5 @click="toggleAnnotation($event, annotation)" |
6 :href="'#' + annotation.annotation_guid" |
6 :href="'#' + annotation.annotation_guid" |
7 class="list-group-item" |
7 class="list-group-item" |
8 v-bind:class="{ active: isActive(annotation) }"> |
8 v-bind:class="{ active: isActive(annotation) }"> |
9 <h3 class="small list-group-item-heading"> |
9 <h3 class="small list-group-item-heading"> |
10 {{ annotation.title }} |
10 {{ annotation.title }} |
11 <button type="button" class="close" data-dismiss="alert" aria-label="Close" @click="onAnnotationClose"> |
|
12 <span aria-hidden="true">×</span> |
|
13 </button> |
|
14 </h3> |
11 </h3> |
15 <p class="list-group-item-text" v-for="tag in annotation.tags">{{ tag.tag_label }}</p> |
12 <p class="list-group-item-text" v-for="tag in annotation.tags">{{ tag.tag_label }}</p> |
16 <div class="list-group-item-footer"> |
13 <div class="list-group-item-footer"> |
17 <i class="fa fa-comment"></i> {{ getCommentsCount(annotation) }} |
14 <i class="fa fa-comment"></i> {{ getCommentsCount(annotation) }} |
18 </div> |
15 </div> |
40 this.slideToAnnotation(); |
37 this.slideToAnnotation(); |
41 } |
38 } |
42 } |
39 } |
43 }, |
40 }, |
44 methods: { |
41 methods: { |
45 onAnnotationClick: function(e, annotation) { |
42 toggleAnnotation: function(e, annotation) { |
46 e.preventDefault(); |
43 e.preventDefault(); |
47 this.$emit('click:annotation', annotation); |
44 if (this.annotation && this.annotation === annotation) { |
48 }, |
45 this.$emit('close:annotation'); |
49 onAnnotationClose: function(e) { |
46 } else { |
50 e.preventDefault(); |
47 this.$emit('click:annotation', annotation); |
51 e.stopPropagation(); |
48 } |
52 this.$emit('close:annotation'); |
|
53 }, |
49 }, |
54 isActive: function(annotation) { |
50 isActive: function(annotation) { |
55 return annotation === this.annotation; |
51 return annotation === this.annotation; |
56 }, |
52 }, |
57 getCommentsCount: function(annotation) { |
53 getCommentsCount: function(annotation) { |