--- a/integration/annotation-article.html Mon Jul 22 12:02:47 2013 +0200
+++ b/integration/annotation-article.html Mon Jul 22 14:56:35 2013 +0200
@@ -408,10 +408,15 @@
</div>
<!-- PERIPLUS: Liste des Annotations -->
-
- <div class="annotation-list-container">
- <h2 class="title-underline-journal">Liste des annotations</h2>
- <ul class="annotation-list"></ul>
+ <div class="annotation-blocks">
+ <div class="block annotation-list-container">
+ <h2 class="title-underline-journal"><span class="annotations-count">00</span> annotation<span class="annotation-plural">s</span> dans ce dossier</h2>
+ <ul class="annotation-file-list annotation-list"></ul>
+ </div>
+ <div class="block annotation-list-container">
+ <h2 class="title-underline-journal"><span class="annotations-count">00</span> annotation<span class="annotation-plural">s</span> dans d'autres dossiers</h2>
+ <ul class="annotation-other-list annotation-list"></ul>
+ </div>
</div>
<!-- PERIPLUS: Fin de la liste des Annotations -->
@@ -549,39 +554,67 @@
<script src="js/vendor/tag-it.min.js"></script>
<script src="js/annotation-article.js"></script>
<script>
- var username = "edwy-plenel";
+ var currentUser = {
+ id: "u-001",
+ name: "Edwy Plénel"
+ };
+ var currentDocumentaryFile = {
+ id: "d-001",
+ name: "Ce dossier documentaire"
+ };
var annotations = [{
"startOffset" : 153,
"length" : 32,
- "creator": "edwy-plenel",
+ "creator": {
+ id: "u-001",
+ name: "Edwy Plénel"
+ },
"color" : "#8f8",
"comment" : "Ne pas confondre avec la Bibliothèque Publique d'Information du Centre Pompidou",
"tags": [ "Banque", "Publique", "Investissement" ],
"annotatedText" : "Banque publique d’investissement",
"beforeText" : "Arnaud Montebourg au sujet de la ",
"afterText" : " (BPI) et se sont longuement attardés",
- "isPublic": true
+ "isPublic": true,
+ "documentaryFile": {
+ id: "d-001",
+ name: "Ce dossier documentaire"
+ }
}, {
"startOffset" : 752,
"length" : 17,
"color" : "#8ff",
- "creator": "alcatel-lucent",
+ "creator": {
+ id: "u-002",
+ name: "Le Président de la République"
+ },
"comment" : "Le Premier Ministre",
"tags": [ "Chef du gouvernement" ],
"annotatedText" : "Jean-Marc Ayrault",
"beforeText" : "certains ministres du gouvernement de ",
"afterText" : ". Il révèle aussi que les deux",
- "isPublic": true
+ "isPublic": true,
+ "documentaryFile": {
+ id: "d-001",
+ name: "Ce dossier documentaire"
+ }
}, {
"startOffset" : 13163,
"length" : 17,
+ "creator": {
+ id: "u-001",
+ name: "Edwy Plénel"
+ },
"color" : "#f8f",
- "creator": "edwy-plenel",
"comment" : "Le Ministre du Redressement productif",
"annotatedText" : "Arnaud Montebourg",
"beforeText" : "de l'assurance-vie Or, même si ",
"afterText" : " ne veut pas contrevenir à la",
- "isPublic": false
+ "isPublic": false,
+ "documentaryFile": {
+ id: "d-002",
+ name: "Un autre dossier documentaire"
+ }
}];
</script>
--- a/integration/css/annotation-article.css Mon Jul 22 12:02:47 2013 +0200
+++ b/integration/css/annotation-article.css Mon Jul 22 14:56:35 2013 +0200
@@ -192,3 +192,7 @@
.annotation-fb-bottom {
left: 0; right: 0;
}
+
+.annotation-longview {
+ display: none;
+}
--- a/integration/js/annotation-article.js Mon Jul 22 12:02:47 2013 +0200
+++ b/integration/js/annotation-article.js Mon Jul 22 14:56:35 2013 +0200
@@ -109,20 +109,23 @@
length: end - start,
color: color,
comment: "",
- creator: username,
+ creator: currentUser,
tags: [],
annotatedText: textinfo.text.substring(start, end),
beforeText: textinfo.text.substring(start - 40, start).replace(/^[\S]*\s+/,''),
- afterText: textinfo.text.substring(end, end + 40).replace(/\s+[\S]*$/,'')
+ afterText: textinfo.text.substring(end, end + 40).replace(/\s+[\S]*$/,''),
+ documentaryFile: currentDocumentaryFile
}
annotations.push(annotation);
showAnnotation(annotation, true);
+ updateAnnotationCounts();
}
var frameTpl = _.template(
'<div class="annotation-frame" style="border-color: <%- annotation.color %>; top: <%-top %>px; left: <%- left %>px;">'
+ '<div class="annotation-area" style="background-color: <%- annotation.color %>; height: <%- height %>px;"></div>'
- + '<form class="annotation-form"><h3>Annoté par : <em><%- annotation.creator %></em></h3><h3>Commentaire :</h3>'
+ + '<form class="annotation-form"><h3>Annoté par : <em><%- annotation.creator.name %></em></h3>'
+ + '<h3>Dossier documentaire : <em><%- annotation.documentaryFile.name %></em></h3><h3>Commentaire :</h3>'
+ '<% if (editable) { %><textarea class="annotation-textarea" placeholder="Mon commentaire…"><%- annotation.comment || "" %></textarea>'
+ '<% } else { %><p><%- annotation.comment || "(sans commentaire)" %></p><% } %>'
+ '<h3>Mots-clés :</h3>'
@@ -132,11 +135,11 @@
);
var liTpl = _.template(
- '<li style="border-color: <%- annotation.color %>;"><h3>Texte annoté</h3>'
+ '<li style="border-color: <%- annotation.color %>;"><div class="annotation-longview"><h3>Texte annoté :</h3></div>'
+ '<p class="annotation-text"><%- annotation.beforeText %><b><%- annotation.annotatedText %></b><%- annotation.afterText %></p>'
- + '<h3>Annoté par : <em><%- annotation.creator %></em></h3>'
- + '<h3>Commentaire :</h3><p class="annotation-comment"><%- annotation.comment || "(Sans commentaire)" %></p>'
- + '<h3>Mots-clés :</h3><p class="annotation-tags"><%- (annotation.tags || []).join(", ") || "(aucun mot-clé)" %></p>'
+ + '<h3>Annoté par : <em><%- annotation.creator.name %></em></h3>'
+ + '<div class="annotation-longview"><h3>Commentaire :</h3><p class="annotation-comment"><%- annotation.comment || "(Sans commentaire)" %></p>'
+ + '<h3>Mots-clés :</h3><p class="annotation-tags"><%- (annotation.tags || []).join(", ") || "(aucun mot-clé)" %></p></div>'
+ '</li>'
);
@@ -177,7 +180,7 @@
currentVisibleFrame = null;
showFrameBox();
- $(".annotation-list li").removeClass("selected");
+ $(".annotation-blocks li").removeClass("selected");
}
function showAnnotation(annotation, editAfterShow) {
@@ -206,7 +209,7 @@
height = Math.max.apply(Math, spans.map(function(s) { return s.offsetHeight + s.offsetTop })) - top,
frame = $(frameTpl({
annotation: annotation,
- editable: (username === annotation.creator),
+ editable: (currentUser.id === annotation.creator.id),
top: top,
height: height,
left: basenode.offsetLeft
@@ -216,7 +219,7 @@
}));
$(".annotation-frames").append(frame);
- $(".annotation-list").append(li);
+ $(annotation.documentaryFile.id === currentDocumentaryFile.id ? ".annotation-file-list" : ".annotation-other-list").append(li);
frame.find(".annotation-textarea").on("keyup paste input change", function() {
annotation.comment = $(this).val();
@@ -275,6 +278,7 @@
li.remove();
frame.remove();
hideAllFrames();
+ updateAnnotationCounts();
return false;
});
@@ -282,10 +286,12 @@
.mouseenter(function() {
$(spans).addClass("annotation-selected");
li.addClass("selected");
+ li.find(".annotation-longview").stop().slideDown();
})
.mouseleave(function() {
$(spans).removeClass("annotation-selected");
li.removeClass("selected");
+ li.find(".annotation-longview").stop().slideUp();
})
.click(function() {
show();
@@ -300,9 +306,22 @@
}
+ function updateAnnotationCounts() {
+ $(".annotation-blocks .block").each(function() {
+ var $this = $(this), n = $this.find("li").length;
+ $this.find(".annotations-count").text(n || "aucune");
+ if (n > 1) {
+ $this.find(".annotation-plural").show();
+ } else {
+ $this.find(".annotation-plural").hide();
+ }
+ })
+ }
+
annotations.forEach(function(annotation) {
showAnnotation(annotation);
});
+ updateAnnotationCounts();
var range = null;