1 /* SOURCE : http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript */ |
|
2 |
|
3 /** |
|
4 * Converts an HSV color value to RGB. Conversion formula |
|
5 * adapted from http://en.wikipedia.org/wiki/HSV_color_space. |
|
6 * Assumes h, s, and v are contained in the set [0, 1] and |
|
7 * returns r, g, and b in the set [0, 255]. |
|
8 * |
|
9 * @param Number h The hue |
|
10 * @param Number s The saturation |
|
11 * @param Number v The value |
|
12 * @return Array The RGB representation |
|
13 */ |
|
14 function hsvToRgb(h, s, v){ |
|
15 var r, g, b; |
|
16 |
|
17 var i = Math.floor(h * 6); |
|
18 var f = h * 6 - i; |
|
19 var p = v * (1 - s); |
|
20 var q = v * (1 - f * s); |
|
21 var t = v * (1 - (1 - f) * s); |
|
22 |
|
23 switch(i % 6){ |
|
24 case 0: r = v, g = t, b = p; break; |
|
25 case 1: r = q, g = v, b = p; break; |
|
26 case 2: r = p, g = v, b = t; break; |
|
27 case 3: r = p, g = q, b = v; break; |
|
28 case 4: r = t, g = p, b = v; break; |
|
29 case 5: r = v, g = p, b = q; break; |
|
30 } |
|
31 |
|
32 return _([r * 255, g * 255, b * 255]).map(Math.floor); |
|
33 } |
|
34 |
1 |
35 $(function(){ |
2 $(function(){ |
36 |
3 |
37 var IDEALRATIO = 1.33; |
4 var IDEALRATIO = 1.33; |
38 |
5 |
133 '</div>'+ |
100 '</div>'+ |
134 '</div>'+ |
101 '</div>'+ |
135 '<p class="abstract"><%= abstract %></p>'+ |
102 '<p class="abstract"><%= abstract %></p>'+ |
136 '</div>' |
103 '</div>' |
137 ).template(); |
104 ).template(); |
|
105 |
|
106 /* Templates pour la vue liste */ |
|
107 |
|
108 var clusterListeTemplate = _( |
|
109 '<div class="article" data-cluster-id="<%= id %>">'+ |
|
110 '<div class="inner-article clearfix">'+ |
|
111 '<h2><a title="Lire l\'article" href="#"> <%= title %> »</a></h2>'+ |
|
112 '<p class="number-article">'+ |
|
113 '<a href="#"><%= documents_number %> articles | <%= annotations.length %> annotations </a>'+ |
|
114 '<a title="ajouter une annotation" class="add-annotation" href="#"></a>'+ |
|
115 '</p>'+ |
|
116 '<div class="article-annotations">'+ |
|
117 '<a title="48 annotations" class="blue" href="#" style="width:20%;"></a>'+ |
|
118 '<a title="title" class="green" href="#" style="width:20%;"></a>'+ |
|
119 '<a title="title" class="red" href="#" style="width:40%;"></a>'+ |
|
120 '<a title="title" class="empty" href="#" style="width:20%;"></a>'+ |
|
121 '</div>'+ |
|
122 '<div class="article-content">'+ |
|
123 '<p class="resume"><%= abstract %></p>'+ |
|
124 '<ul class="links">'+ |
|
125 '<ul>'+ |
|
126 '<% _(documents).each(function(d) { print("<li><a href=\'" + d.url_document + "\'>" + d.title.replace(/(^.{30,60})[\s].+$/m,\'$1…\') + "</a></li>"); }) %>'+ |
|
127 '</ul>'+ |
|
128 '</ul>'+ |
|
129 '</div>'+ |
|
130 '</div>'+ |
|
131 '</div>' |
|
132 ).template(); |
138 |
133 |
139 |
134 |
140 var hTreemap = 600;//à définir |
135 var hTreemap = 600;//à définir |
141 $('#treemap').height(hTreemap); |
136 $('#treemap').height(hTreemap); |
142 |
137 |
143 function showResults(results) { |
138 function showResults(results) { |
|
139 $(".articles").html(_(results.clusters).reduce(function(mem, c) { return mem + clusterListeTemplate(c) },'')); |
|
140 |
144 var data = _(results.clusters).map(function(cluster, i) { |
141 var data = _(results.clusters).map(function(cluster, i) { |
145 var hue = (parseInt(cluster.id)%6)/6 |
142 var hue = (parseInt(cluster.id)%6)/6 |
146 return { |
143 return { |
147 id: cluster.id, |
144 id: cluster.id, |
148 label: cluster.title, |
145 label: cluster.title, |
149 abstract : cluster.abstract, |
146 abstract : cluster.abstract, |
150 value: parseFloat(cluster.weight), |
147 value: parseFloat(cluster.weight), |
151 color: "rgb(" + hsvToRgb(hue,.8,.8).join(",") + ")", |
|
152 annotation_count: cluster.annotations.length, |
148 annotation_count: cluster.annotations.length, |
153 image_url: cluster.url_image || false, |
149 image_url: cluster.url_image || false, |
154 articles: cluster.documents.filter(function(article) { |
150 articles: cluster.documents.filter(function(article) { |
155 return !!article.url_image |
151 return !!article.url_image |
156 }) |
152 }) |
200 "margin-top": (dh - nih) / 3 |
196 "margin-top": (dh - nih) / 3 |
201 }); |
197 }); |
202 }); |
198 }); |
203 }); |
199 }); |
204 |
200 |
205 $(".actu").hover( |
201 $(".cluster").html(data.reduce(function(mem, c) { |
|
202 return mem + '<li><a href="#" title="Afficher le cluster" data-cluster-id="' + c.id + '">' + c.label + '</a></li>' |
|
203 }, '')); |
|
204 |
|
205 $(".actu, .cluster a, .article").hover( |
206 function() { |
206 function() { |
207 $("body").trigger("select-cluster", $(this).attr("data-cluster-id")); |
207 $("body").trigger("select-cluster", $(this).attr("data-cluster-id")); |
208 }, |
208 }, |
209 function() { |
209 function() { |
210 $("body").trigger("unselect-cluster", $(this).attr("data-cluster-id")); |
210 $("body").trigger("unselect-cluster", $(this).attr("data-cluster-id")); |
211 } |
211 } |
212 ) |
212 ) |
213 $("body").on("select-cluster", function(e, clusterid) { |
213 $("body").on("select-cluster", function(e, clusterid) { |
214 $(".actu[data-cluster-id='" + clusterid + "']").addClass("selected"); |
214 $(".actu[data-cluster-id='" + clusterid + "'], .cluster a[data-cluster-id='" + clusterid + "'], .article[data-cluster-id='" + clusterid + "']").addClass("selected"); |
215 }); |
215 }); |
216 $("body").on("unselect-cluster", function(e, clusterid) { |
216 $("body").on("unselect-cluster", function(e, clusterid) { |
217 $(".actu[data-cluster-id='" + clusterid + "']").removeClass("selected"); |
217 $(".actu[data-cluster-id='" + clusterid + "'], .cluster a[data-cluster-id='" + clusterid + "'], .article[data-cluster-id='" + clusterid + "']").removeClass("selected"); |
218 }); |
218 }); |
219 } |
219 } |
220 |
220 |
221 function renderJson(url) { |
221 function renderJson(url) { |
222 $.getJSON(url, showResults); |
222 $.getJSON(url, showResults); |
223 } |
223 } |
224 |
224 |
225 renderJson("data/requete.json"); |
225 renderJson("data/requete_filtre_2008.json"); |
226 |
|
227 $(".header-menu a").click(function() { |
|
228 if ($(this).text() == "INTERNATIONAL") { |
|
229 renderJson("data/requete_filtre_international.json"); |
|
230 } |
|
231 if ($(this).text() == "FRANCE") { |
|
232 renderJson("data/requete_filtre_france.json"); |
|
233 } |
|
234 if ($(this).hasClass("home")) { |
|
235 renderJson("data/requete.json") |
|
236 } |
|
237 return false; |
|
238 }); |
|
239 |
226 |
240 |
227 |
241 $("#liste").hide(); |
228 $("#liste").hide(); |
242 }) |
229 }) |