$(function() {
$(".fancybox").fancybox();
$('.font-up a').click(function(){
var taille_police=parseFloat($('.content').css('font-size'),100)+2;
if(taille_police<30){
var taille_ligne=parseFloat($('.content').css('line-height'),100)+2;
$('.content').css({
'line-height':taille_ligne+'px',
'font-size':taille_police+'px'
});
}
return false;
});
$('.font-down a').click(function(){
var taille_police=parseFloat($('.content').css('font-size'),100)-2;
if(taille_police>11){
var taille_ligne=parseFloat($('.content').css('line-height'),100)-2;
$('.content').css({
'line-height':taille_ligne+'px',
'font-size':taille_police+'px'
});
}
return false;
});
/* ANNOTATION HANDLING */
var basenode = $(".content")[0],
cleanHtml = cleanTextNodes(basenode).innerHtml,
textinfo = parseContents(basenode);
window.annotations = window.annotations || [];
var colors = ["#ff8", "#f88", "#8f8", "#8ff", "#f8f", "#88f"],
currentVisibleFrame = null,
ncol = 0,
mousedown = false,
shownByClick = false,
dragging = false;
function cleanText(txt, keepbefore, keepafter) {
var res = txt.replace(/[\n\r\t]+/gm,' ').replace(/ {2,}/g,' ');
if (!keepbefore) {
res = res.replace(/^ +/,'');
}
if (!keepafter) {
res = res.replace(/ +$/,'');
}
return res;
}
function recursiveParse(node, info) {
var children = node.childNodes;
for (var i = 0, l = children.length; i < l; i++) {
var childnode = children[i];
switch(childnode.nodeType) {
case node.ELEMENT_NODE:
recursiveParse(childnode, info);
break;
case node.TEXT_NODE:
var startpos = info.text.length;
info.text += childnode.textContent;
var endpos = info.text.length,
nodeinfo = {
start: startpos,
end: endpos,
length: endpos - startpos,
textNode: childnode
};
childnode._nodeInfo = nodeinfo;
info.nodes.push(nodeinfo);
break;
}
}
}
function parseContents(node) {
var res = {
text: '',
nodes: []
};
recursiveParse(node, res);
return res;
}
function cleanTextNodes(node) {
var children = node.childNodes;
for (var i = 0, l = children.length; i < l; i++) {
var childnode = children[i];
switch(childnode.nodeType) {
case node.ELEMENT_NODE:
cleanTextNodes(childnode);
break;
case node.TEXT_NODE:
var keepbefore = (i && children[i-1].nodeType == node.ELEMENT_NODE),
keepafter = (i < l-1 && children[i+1].nodeType == node.ELEMENT_NODE);
childnode.textContent = cleanText(childnode.textContent, keepbefore, keepafter);
break;
}
}
return node;
}
function highlightText(start, end, color) {
alert('start'+start);
alert('end'+end);
alert('color'+color);
alert('textinfo.text.substring(start, end)'+textinfo.text.substring(start, end));
alert('currentDocumentaryFile'+currentDocumentaryFile);
var annotation = {
startOffset: start,
length: end - start,
color: color,
comment: "",
creator: "cobled",
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]*$/,''),
documentaryFile: currentDocumentaryFile
}
alert('highlightText');
annotations.push(annotation);
alert('highlightText');
showAnnotation(annotation, true);
alert('highlightText');
updateAnnotationCounts();
alert('highlightText');
}
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.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>'
+ '<ul class="<%- editable ? "annotation-tags-form" : "" %>"><% _(annotation.tags).forEach(function(tag) { %><li><%- tag %></li><% }) %></ul>'
+ '<% if (editable) { %><h3><input class="annotation-public" type="checkbox" <% if (annotation.isPublic) {%>checked <% } %>/>Annotation publique</h3><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 %>;"><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.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>'
);
function showFrameBox() {
if (currentVisibleFrame) {
$(".annotation-frame-box").show();
var offset = currentVisibleFrame.offset(),
width = currentVisibleFrame.outerWidth(),
height = currentVisibleFrame.outerHeight();
$(".annotation-fb-top").css({
height: offset.top - 77
});
$(".annotation-fb-left").css({
top: offset.top,
height: height,
width: offset.left
});
$(".annotation-fb-right").css({
top: offset.top,
height: height,
left: offset.left + width
});
var fbbtop = offset.top + height;
$(".annotation-fb-bottom").css({
top: fbbtop,
height: ($("body").height() - fbbtop)
});
currentVisibleFrame.find(".annotation-textarea").focus();
} else {
$(".annotation-frame-box").hide();
}
}
function hideAllFrames() {
if (currentVisibleFrame) {
currentVisibleFrame.hide();
}
currentVisibleFrame = null;
showFrameBox();
$(".annotation-blocks li").removeClass("selected");
}
function showAnnotation(annotation, editAfterShow) {
var start = annotation.startOffset,
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];
if (nodeinfo.end > start && nodeinfo.start <= end) {
var r = document.createRange(),
s = document.createElement('span'),
rangestart = Math.max(0, start - nodeinfo.start),
rangeend = Math.min(nodeinfo.length, end - nodeinfo.start);
s.style.backgroundColor = color;
r.setStart(nodeinfo.textNode, rangestart);
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: (currentUser.id === annotation.creator.id),
top: top,
height: height,
left: basenode.offsetLeft
})),
li = $(liTpl({
annotation: annotation
}));
$(".annotation-frames").append(frame);
$(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();
li.find(".annotation-comment").text(annotation.comment || "(Sans commentaire)");
});
frame.find(".annotation-public").change(function() {
annotation.isPublic = $(this).is(":checked");
});
frame.find("")
var ontagchange = function(evt, ui) {
annotation.tags = $(this).tagit("assignedTags");
li.find(".annotation-tags").text((annotation.tags || []).join(", ") || "(aucun mot-clé)");
};
frame.find(".annotation-tags-form").tagit({
afterTagAdded: ontagchange,
afterTagRemoved: ontagchange
});
var show = function() {
if (mousedown) {
return;
}
shownByClick = false;
currentVisibleFrame = frame;
frame.show();
showFrameBox();
li.addClass("selected");
}
$(spans).mouseenter(show);
frame
.mouseleave(function() {
if (!shownByClick) {
hideAllFrames();
}
})
.click(function() {
shownByClick = true;
});
frame.find(".annotation-form").submit(function() {
hideAllFrames();
return false;
});
frame.find(".annotation-remove").click(function() {
annotations = _(annotations).reject(function(a) {
return a === annotation
});
$(spans).css("background-color","").off("mouseenter",show);
li.remove();
frame.remove();
hideAllFrames();
updateAnnotationCounts();
return false;
});
li
.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();
shownByClick = true;
$(window).scrollTop(currentVisibleFrame.offset().top - 100);
});
if (editAfterShow) {
show();
shownByClick = true;
}
}
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;
$(".content").mouseup(function(e) {
range = document.getSelection().getRangeAt(0);
var addann = $(".add-annotation");
if (!range.collapsed && range.startContainer._nodeInfo && range.endContainer._nodeInfo && range.toString() !== " ") {
addann.show();
var doc = $(document), rect = range.getBoundingClientRect();
addann.css({
left: doc.scrollLeft() + rect.right + 5,
top: doc.scrollTop() + (rect.top + rect.bottom - addann.outerHeight()) / 2,
});
} else {
range = null;
$(".add-annotation").hide();
}
}).mousedown(function() {
$(".add-annotation").hide();
});
$(".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;
});
$(".annotation-frame-box").click(hideAllFrames);
$(window).resize(function() {
showFrameBox();
$(".annotation-frame").css({
left: basenode.offsetLeft
})
});
$(".add-annotation").css({
left: (basenode.offsetLeft + 500)
});
});