| author | Alexandre Segura <mex.zktk@gmail.com> |
| Mon, 17 Apr 2017 14:42:38 +0200 | |
| changeset 470 | 6c43539e5c67 |
| parent 433 | 616fc1fad25f |
| permissions | -rw-r--r-- |
|
418
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
1 |
<template> |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
2 |
<div class="list-group"> |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
3 |
<a v-for="annotation in annotations" |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
4 |
ref="annotations" |
|
433
616fc1fad25f
Toggle annotation on click.
Alexandre Segura <mex.zktk@gmail.com>
parents:
418
diff
changeset
|
5 |
@click="toggleAnnotation($event, annotation)" |
|
470
6c43539e5c67
Use browser history instead of hash for annotation URL.
Alexandre Segura <mex.zktk@gmail.com>
parents:
433
diff
changeset
|
6 |
:href="getAnnotationURL(annotation.annotation_guid)" |
|
418
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
7 |
class="list-group-item" |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
8 |
v-bind:class="{ active: isActive(annotation) }">
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
9 |
<h3 class="small list-group-item-heading"> |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
10 |
{{ annotation.title }}
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
11 |
</h3> |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
12 |
<p class="list-group-item-text" v-for="tag in annotation.tags">{{ tag.tag_label }}</p>
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
13 |
<div class="list-group-item-footer"> |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
14 |
<i class="fa fa-comment"></i> {{ getCommentsCount(annotation) }}
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
15 |
</div> |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
16 |
</a> |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
17 |
</div> |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
18 |
</template> |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
19 |
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
20 |
<script> |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
21 |
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
22 |
import _ from 'lodash'; |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
23 |
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
24 |
export default {
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
25 |
props: [ |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
26 |
'annotations', |
|
470
6c43539e5c67
Use browser history instead of hash for annotation URL.
Alexandre Segura <mex.zktk@gmail.com>
parents:
433
diff
changeset
|
27 |
'annotation', |
|
6c43539e5c67
Use browser history instead of hash for annotation URL.
Alexandre Segura <mex.zktk@gmail.com>
parents:
433
diff
changeset
|
28 |
'annotationUrl' |
|
418
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
29 |
], |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
30 |
mounted() {
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
31 |
if (this.annotation) {
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
32 |
this.slideToAnnotation(); |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
33 |
} |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
34 |
}, |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
35 |
watch: {
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
36 |
annotation: function(annotation) {
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
37 |
if (annotation) {
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
38 |
this.slideToAnnotation(); |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
39 |
} |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
40 |
} |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
41 |
}, |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
42 |
methods: {
|
|
470
6c43539e5c67
Use browser history instead of hash for annotation URL.
Alexandre Segura <mex.zktk@gmail.com>
parents:
433
diff
changeset
|
43 |
getAnnotationURL: function(guid) {
|
|
6c43539e5c67
Use browser history instead of hash for annotation URL.
Alexandre Segura <mex.zktk@gmail.com>
parents:
433
diff
changeset
|
44 |
return this.annotationUrl.replace(':annotation_guid', guid);
|
|
6c43539e5c67
Use browser history instead of hash for annotation URL.
Alexandre Segura <mex.zktk@gmail.com>
parents:
433
diff
changeset
|
45 |
}, |
|
433
616fc1fad25f
Toggle annotation on click.
Alexandre Segura <mex.zktk@gmail.com>
parents:
418
diff
changeset
|
46 |
toggleAnnotation: function(e, annotation) {
|
|
418
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
47 |
e.preventDefault(); |
|
433
616fc1fad25f
Toggle annotation on click.
Alexandre Segura <mex.zktk@gmail.com>
parents:
418
diff
changeset
|
48 |
if (this.annotation && this.annotation === annotation) {
|
|
616fc1fad25f
Toggle annotation on click.
Alexandre Segura <mex.zktk@gmail.com>
parents:
418
diff
changeset
|
49 |
this.$emit('close:annotation');
|
|
616fc1fad25f
Toggle annotation on click.
Alexandre Segura <mex.zktk@gmail.com>
parents:
418
diff
changeset
|
50 |
} else {
|
|
616fc1fad25f
Toggle annotation on click.
Alexandre Segura <mex.zktk@gmail.com>
parents:
418
diff
changeset
|
51 |
this.$emit('click:annotation', annotation);
|
|
616fc1fad25f
Toggle annotation on click.
Alexandre Segura <mex.zktk@gmail.com>
parents:
418
diff
changeset
|
52 |
} |
|
418
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
53 |
}, |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
54 |
isActive: function(annotation) {
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
55 |
return annotation === this.annotation; |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
56 |
}, |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
57 |
getCommentsCount: function(annotation) {
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
58 |
var commentsCount = annotation.stats.comments_count; |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
59 |
return commentsCount + ' commentaire' + (commentsCount > 1 ? 's' : ''); |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
60 |
}, |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
61 |
slideToAnnotation: function() {
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
62 |
var el = _.find(this.$refs.annotations, (el) => {
|
|
470
6c43539e5c67
Use browser history instead of hash for annotation URL.
Alexandre Segura <mex.zktk@gmail.com>
parents:
433
diff
changeset
|
63 |
return $(el).attr('href') === this.getAnnotationURL(this.annotation.annotation_guid);
|
|
418
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
64 |
}); |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
65 |
if (el) {
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
66 |
var $container = $(this.$el.closest('.panel'));
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
67 |
$container.animate({
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
68 |
scrollTop: $container.scrollTop() - $container.offset().top + $(el).offset().top |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
69 |
}, 600); |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
70 |
} |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
71 |
} |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
72 |
} |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
73 |
} |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
74 |
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
75 |
</script> |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
76 |
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
77 |
<style scoped> |
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
78 |
|
|
a04c55054afe
Introduce display of all annotations at the same time.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
79 |
</style> |