periplus: comparison integration/js/annotation-article.js

Mercurial Mercurial > periplus / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

integration/js/annotation-article.js

changeset 33	8d7e6a9018fc
parent 32	3612737630f4
child 35	63dae3d25255

equal deleted inserted replaced

-:3612737630f4
+:8d7e6a9018fc
 }
 function highlightText(start, end, color) {
 var annotation = {
 startOffset: start,
-endOffset: end,
+length: end - start,
 color: color,
 comment: "",
+creator: username,
 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]*$/,'')
 }
 annotations.push(annotation);
-showAnnotation(annotation);
+showAnnotation(annotation, true);
 }
 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>Commentaire&nbsp;:</h3>'
++ '<form class="annotation-form"><h3>Annoté par&nbsp;: <em><%- annotation.creator %></em></h3><h3>Commentaire&nbsp;:</h3>'
-+ '<textarea class="annotation-textarea" placeholder="Mon commentaire&hellip;"><%- annotation.comment || "" %></textarea>'
++ '<% if (editable) { %><textarea class="annotation-textarea" placeholder="Mon commentaire&hellip;"><%- annotation.comment || "" %></textarea>'
++ '<% } else { %><p><%- annotation.comment || "(sans commentaire)" %></p><% } %>'
 + '<h3>Mots-clés&nbsp;:</h3>'
-+ '<ul class="annotation-tags-form"><% _(annotation.tags).forEach(function(tag) { %><li><%- tag %></li><% }) %></ul>'
++ '<ul class="<%- editable ? "annotation-tags-form" : "" %>"><% _(annotation.tags).forEach(function(tag) { %><li><%- tag %></li><% }) %></ul>'
-+ '<div><button class="annotation-remove">Supprimer</button><input class="annotation-submit" type="submit" value="Enregistrer" /></div>'
++ '<% if (editable) { %><div><a class="annotation-remove" href="#">Supprimer</a><input class="annotation-submit" type="submit" value="Enregistrer" /></div><% } %>'
 + '</form></div>'
 );
 var liTpl = _.template(
 '<li style="border-color: <%- annotation.color %>;"><h3>Texte annoté</h3>'
 + '<p class="annotation-text"><%- annotation.beforeText %><b><%- annotation.annotatedText %></b><%- annotation.afterText %></p>'
++ '<h3>Annoté par&nbsp;: <em><%- annotation.creator %></em></h3>'
 + '<h3>Commentaire&nbsp;:</h3><p class="annotation-comment"><%- annotation.comment || "(Sans commentaire)" %></p>'
 + '<h3>Mots-clés&nbsp;:</h3><p class="annotation-tags"><%- (annotation.tags || []).join(", ") || "(aucun mot-clé)" %></p>'
 + '</li>'
 );
 currentVisibleFrame = null;
 showFrameBox();
 $(".annotation-list li").removeClass("selected");
 }
-function showAnnotation(annotation) {
+function showAnnotation(annotation, editAfterShow) {
 var start = annotation.startOffset,
-end = annotation.endOffset,
+end = annotation.length + start,
 color = annotation.color;
 var spans = [];
 for (var i = 0, l = textinfo.nodes.length; i < l; i++) {
 var nodeinfo = textinfo.nodes[i];
 r.setEnd(nodeinfo.textNode, rangeend);
 r.surroundContents(s);
 spans.push(s);
 }
 }
 textinfo = parseContents(basenode);
 var top = Math.min.apply(Math, spans.map(function(s) { return s.offsetTop })),
 height = Math.max.apply(Math, spans.map(function(s) { return s.offsetHeight + s.offsetTop })) - top,
 frame = $(frameTpl({
 annotation: annotation,
+editable: (username === annotation.creator),
 top: top,
 height: height,
 left: basenode.offsetLeft
 })),
 li = $(liTpl({
 .click(function() {
 show();
 shownByClick = true;
 $(window).scrollTop(currentVisibleFrame.offset().top - 100);
 });
+if (editAfterShow) {
+show();
+shownByClick = true;
+}
 }
 annotations.forEach(function(annotation) {
 showAnnotation(annotation);
 });
-$(".content")
+var range = null;
-.mousedown(function() {
-mousedown = true;
+$(".content").mouseup(function(e) {
-dragging = false;
+range = document.getSelection().getRangeAt(0);
-})
+var addann = $(".add-annotation");
-.mousemove(function() {
+if (!range.collapsed && range.startContainer._nodeInfo && range.endContainer._nodeInfo && range.toString() !== " ") {
-if (mousedown) {
+addann.show();
-dragging = true;
+var doc = $(document), rect = range.getBoundingClientRect();
-}
+addann.css({
-})
+left: doc.scrollLeft() + rect.right + 5,
-.mouseup(function() {
+top: doc.scrollTop() + (rect.top + rect.bottom - addann.outerHeight()) / 2,
-if (!dragging) {
+});
-return;
+} else {
-}
+range = null;
-var range = document.getSelection().getRangeAt(0);
+$(".add-annotation").hide();
-if (!range.collapsed && range.startContainer._nodeInfo && range.endContainer._nodeInfo) {
+}
-var start = range.startOffset + range.startContainer._nodeInfo.start,
+}).mousedown(function() {
-end = range.endOffset + range.endContainer._nodeInfo.start;
+$(".add-annotation").hide();
-highlightText(start, end, colors[ncol++ % colors.length]);
+});
-document.getSelection().removeAllRanges();
-}
+$(".add-annotation").click(function() {
-});
+$(".add-annotation").hide();
+if (range) {
+var start = range.startOffset + range.startContainer._nodeInfo.start,
+end = range.endOffset + range.endContainer._nodeInfo.start;
+highlightText(start, end, colors[ncol++ % colors.length]);
+document.getSelection().removeAllRanges();
+}
+});
 $(window).mouseup(function() {
 mousedown = false;
 dragging = false;
 });
 $(window).resize(function() {
 showFrameBox();
 $(".annotation-frame").css({
 left: basenode.offsetLeft
 })
-})
+});
+$(".add-annotation").css({
+left: (basenode.offsetLeft + 500)
+});
 });

periplus