--- a/integration/annotation-article.html Tue Jun 25 18:46:43 2013 +0200
+++ b/integration/annotation-article.html Thu Jun 27 18:11:11 2013 +0200
@@ -251,7 +251,6 @@
<div class="content">
<!-- CONTENTS FROM PAGE 1 -->
<p>Une polémique peut en cacher une autre ! Les médias ont fait leurs choux gras ces derniers jours des ennuis qu’a connus Arnaud Montebourg au sujet de la Banque publique d’investissement (BPI) et se sont longuement attardés sur les conflits d’intérêts que pourrait connaître avec ce dossier le ministre du redressement productif. Las ! L’histoire n’est pourtant pas celle qui a circulé dans la presse et qui, sur fond d’envolée du chômage, a transformé la rentrée du gouvernement en un psychodrame. Selon notre enquête, c’est plutôt une sorte de piège dans lequel est tombé Arnaud Montebourg.</p>
- <div class="media media-align-center"><a class="fancybox" rel="_blank" href="http://static.mediapart.fr/files/media_66940/univfac.JPG"><img src="http://static.mediapart.fr/files/imagecache/500_pixels/media_66940/univfac.JPG" alt="" title="" width="500" height="218" /></a></div>
<p>Et si le fait mérite qu’on s’y arrête, c’est qu’il va bien au-delà des détestations ou des animosités qui peuvent opposer certains ministres du gouvernement de Jean-Marc Ayrault. Il révèle aussi que les deux principaux ministres de Bercy, d’un côté Pierre Moscovici qui a en charge les finances, de l’autre Arnaud Montebourg, en charge de l’industrie, ont des visions très différentes de la Banque publique d’investissement, l’un des projets phare du quinquennat de François Hollande. En clair, deux des plus fortes personnalités du gouvernement ont des conceptions divergentes de la politique économique à suivre.</p>
<p>Pour le comprendre, reprenons le fil de notre feuilleton. C’est un article du <b><i><a target="_blank" href="http://tempsreel.nouvelobs.com/politique/20120830.OBS0795/pigasse-choisi-pour-inspirer-la-banque-publique-d-investissement.html" class="external" rel="_blank">Nouvel Observateur</a> </i></b>qui met le feu aux poudres, jeudi, en suggérant que le projet de constitution de la BPI pouvait être entaché, dès sa conception, d’un grave conflit d’intérêts (lire <a href="http://www.mediapart.fr/journal/economie/010912/ce-que-laffaire-pigasse-revele-sur-le-capitalisme-parisien"><b>Ce que l’affaire Pigasse révèle sur le capitalisme parisien</b></a>). Révélant que Matthieu Pigasse, dirigeant de la branche française de la banque Lazard, avait obtenu ce mandat pour conseiller le gouvernement lors de la création de la future Banque publique d'investissement, l'article pointait au détour de son enquête qu'au moment où cette décision était prise, le même banquier d’affaires nommait Audrey Pulvar, la compagne d'Arnaud Montebourg, à la tête du magazine <a target="_blank" href="http://www.lesinrocks.com/" class="external" rel="_blank"><i>Les Inrockuptibles</i></a> dont il est le propriétaire – il est aussi l’un des copropriétaires du <i>Monde</i>.</p>
<p>Colère d’Arnaud Montebourg qui a aussitôt juré ses grands dieux qu’il n’était au courant de rien et que s’il avait été dans la confidence, il se serait opposé au choix pour la BPI du banquier d’affaires. Explication du ministre : <i>« La Banque publique d'investissement, je trouve qu'elle ne peut pas être réalisée par des banquiers, parce que faire une banque qui ressemblerait à d'autres banques, ce n'est vraiment pas ce que l'on cherche à faire. »</i> De son côté, le ministre des finances, Pierre Moscovici, a semblé voler au secours de son collègue du gouvernement en affirmant, dans un communiqué (<a href="http://www.mediapart.fr/files/Communique_Mosco_0.pdf"><b>il est ici</b></a>), qu’il était le seul responsable de la décision, et qu’il l’avait prise après une procédure classique de sélection d’une banque conseil, conduite par l’Agence des participations de l’État (APE) et la direction générale du Trésor.</p>
@@ -533,6 +532,9 @@
</div>
</div>
+ <!-- PERIPLUS: Scripts pour ajouter des annotations -->
+
+ <div class="add-annotation">+ ajouter une annotation</div>
<div class="annotation-frame-box">
<div class="annotation-fb-top"></div>
<div class="annotation-fb-left"></div>
@@ -547,9 +549,11 @@
<script src="js/vendor/tag-it.min.js"></script>
<script src="js/annotation-article.js"></script>
<script>
+ var username = "edwy-plenel";
var annotations = [{
"startOffset" : 153,
- "endOffset" : 185,
+ "length" : 32,
+ "creator": "edwy-plenel",
"color" : "#8f8",
"comment" : "Ne pas confondre avec la Bibliothèque Publique d'Information du Centre Pompidou",
"tags": [ "Banque", "Publique", "Investissement" ],
@@ -557,23 +561,28 @@
"beforeText" : "Arnaud Montebourg au sujet de la ",
"afterText" : " (BPI) et se sont longuement attardés"
}, {
- "startOffset" : 753,
- "endOffset" : 770,
+ "startOffset" : 752,
+ "length" : 17,
"color" : "#8ff",
+ "creator": "alcatel-lucent",
"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"
}, {
- "startOffset" : 13164,
- "endOffset" : 13181,
+ "startOffset" : 13163,
+ "length" : 17,
"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"
}];
</script>
+
+ <!-- PERIPLUS: Fin des Scripts pour ajouter des annotations -->
+
</body>
</html>
\ No newline at end of file
--- a/integration/css/annotation-article.css Tue Jun 25 18:46:43 2013 +0200
+++ b/integration/css/annotation-article.css Thu Jun 27 18:11:11 2013 +0200
@@ -112,26 +112,30 @@
float: left; clear: both; width: 490px; padding: 2px; opacity: .2;
}
.annotation-form {
- float: left; clear: both; width: 490px; padding: 2px; background: rgba(200,200,200,.9);
+ float: left; clear: both; width: 480px; padding: 7px; background: rgba(200,200,200,.9);
}
.annotation-form h3 {
- color: #197CAA; font-size: 14px; font-weight: bold; margin: 2px 5px 0;
+ color: #197CAA; font-size: 14px; font-weight: bold; margin: 2px 0 0;
}
.annotation-textarea {
- margin: 5px; height: 120px; resize: none; border: 1px solid #666; padding: 2px; width: 474px;
+ height: 120px; resize: none; border: 1px solid #666; padding: 2px; width: 472px;
}
ul.annotation-tags-form {
- font-size: 12px; margin: 5px; border-radius: 0; border: 1px solid #666;
+ font-size: 12px; border-radius: 0; border: 1px solid #666; margin-bottom: 5px;
+}
+.annotation-tags li {
+ float: left; padding: 2px; border: 1px solid #666; background: #cccccc; border-radius: 3px; margin-right: 2px;
}
-.annotation-submit, .annotation-remove {
- width: 235px; height: 20px; line-height: 20px; font-size: 14px;
- padding: 0; margin: 5px; color: #ffffff; font-weight: bold; border: none;
+.annotation-submit, a.annotation-remove {
+ width: 235px; height: 20px; line-height: 20px; font-size: 14px; text-align: center;
+ padding: 0; margin: 0; color: #ffffff; font-weight: bold; border: none; font-family: Arial, Helvetica, sans-serif;
+ float: left;
}
.annotation-submit:hover, .annotation-remove:hover {
opacity: .8;
}
.annotation-submit {
- background: #197CAA;
+ background: #197CAA; margin-left: 10px;
}
.annotation-remove {
background: #990000;
@@ -159,6 +163,12 @@
color: #ffffff;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGD4DwABBAEAfbLI3wAAAABJRU5ErkJggg==) !important;
}
+
+.add-annotation {
+ position: absolute; background: #197CAA; color: #fffff; padding: 6px; border-radius: 3px;
+ font-size: 14px; font-weight: bold; color: #ffffff; cursor: hand; display: none;
+}
+
.annotation-frame-box {
display: none;
}
--- a/integration/js/annotation-article.js Tue Jun 25 18:46:43 2013 +0200
+++ b/integration/js/annotation-article.js Thu Jun 27 18:11:11 2013 +0200
@@ -106,32 +106,35 @@
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 :</h3>'
- + '<textarea class="annotation-textarea" placeholder="Mon commentaire…"><%- annotation.comment || "" %></textarea>'
+ + '<form class="annotation-form"><h3>Annoté par : <em><%- annotation.creator %></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="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>'
+ + '<ul class="<%- editable ? "annotation-tags-form" : "" %>"><% _(annotation.tags).forEach(function(tag) { %><li><%- tag %></li><% }) %></ul>'
+ + '<% 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 : <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>'
+ '</li>'
@@ -177,9 +180,9 @@
$(".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 = [];
@@ -197,11 +200,13 @@
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
@@ -281,35 +286,48 @@
shownByClick = true;
$(window).scrollTop(currentVisibleFrame.offset().top - 100);
});
+
+ if (editAfterShow) {
+ show();
+ shownByClick = true;
+ }
+
}
annotations.forEach(function(annotation) {
showAnnotation(annotation);
});
- $(".content")
- .mousedown(function() {
- mousedown = true;
- dragging = false;
- })
- .mousemove(function() {
- if (mousedown) {
- dragging = true;
- }
- })
- .mouseup(function() {
- if (!dragging) {
- return;
- }
- var range = document.getSelection().getRangeAt(0);
- if (!range.collapsed && range.startContainer._nodeInfo && range.endContainer._nodeInfo) {
- 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();
- }
- });
+ 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;
@@ -322,6 +340,10 @@
$(".annotation-frame").css({
left: basenode.offsetLeft
})
- })
+ });
+
+ $(".add-annotation").css({
+ left: (basenode.offsetLeft + 500)
+ });
});