89 /* Template des éléments à insérer */ |
89 /* Template des éléments à insérer */ |
90 var actu = |
90 var actu = |
91 '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+ |
91 '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+ |
92 '<a href="#">'+ |
92 '<a href="#">'+ |
93 '<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+ |
93 '<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+ |
|
94 '<div class="voile"></div>'+ |
94 '</a>'+ |
95 '</a>'+ |
95 '<div class="inner-actu">'+ |
96 '<div class="inner-actu">'+ |
96 '<h2><a href="#"><%-label%></a></h2>'+ |
97 '<h2><a href="#"><%-label%></a></h2>'+ |
97 '<div class="links">'+ |
98 '<div class="links">'+ |
98 '<ul>'+ |
99 '<ul>'+ |
101 '<li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>'+ |
102 '<li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>'+ |
102 '</ul>'+ |
103 '</ul>'+ |
103 '</div>'+ |
104 '</div>'+ |
104 '</div>'+ |
105 '</div>'+ |
105 '</div>'; |
106 '</div>'; |
106 var tmpl = _.template(actu); |
|
107 |
107 |
108 squarify(data,0,0,760,358); |
|
109 |
108 |
110 document.getElementById('treemap1').innerHTML = _(data).reduce(function(mem, d) { |
109 $(function(){ |
111 return mem + tmpl(d); |
110 //treemap |
112 },""); |
111 var tmpl = _.template(actu); |
|
112 var hTreemap = 800;//à définir |
|
113 $('#treemap').height(hTreemap); |
|
114 squarify(data,0,0,760,hTreemap); |
|
115 var treemapHtml = _(data).reduce(function(mem, d) { |
|
116 return mem + tmpl(d); |
|
117 },""); |
|
118 $('#treemap #actus').html(treemapHtml); |
113 |
119 |
114 //redimensionnement d'image |
120 //redimensionnement d'image |
115 $(".actu").each(function(k,v){ |
121 $(".actu").each(function(k,v){ |
116 var wActu = $(this).width(); |
122 var wActu = $(this).width(); |
117 var hActu = $(this).height(); |
123 var hActu = $(this).height(); |
118 var img = $(this).find('img'); |
124 var img = $(this).find('img'); |
119 var wImg = img.width(); |
125 var wImg = img.width(); |
120 var hImg = img.height(); |
126 var hImg = img.height(); |
121 |
127 |
122 var ratioImg = wImg/hImg; |
128 var ratioImg = wImg/hImg; |
123 img.css('height',hActu); |
129 img.css('height',hActu); |
124 img.css('width',hActu*ratioImg); |
130 img.css('width',hActu*ratioImg); |
125 wImg = img.width(); |
|
126 hImg = img.height(); |
|
127 |
|
128 if(wActu>wImg){ |
|
129 var ratioImg = hImg/wImg; |
|
130 img.css('width', wActu); |
|
131 img.css('height',wActu*ratioImg); |
|
132 wImg = img.width(); |
131 wImg = img.width(); |
133 hImg = img.height(); |
132 hImg = img.height(); |
134 } |
|
135 |
133 |
136 if (wImg<wActu) { |
134 if(wActu>wImg){ |
137 img.css('margin-left',(wActu-wImg)/2); |
135 var ratioImg = hImg/wImg; |
138 }else{ |
136 img.css('width', wActu); |
139 img.css('margin-left',-(wImg-wActu)/2); |
137 img.css('height',wActu*ratioImg); |
140 } |
138 wImg = img.width(); |
141 if (hImg<hActu) { |
139 hImg = img.height(); |
142 img.css('margin-top',(hActu-hImg)/2); |
140 } |
143 }else{ |
141 |
144 img.css('margin-top',-(hImg-hActu)/2); |
142 if (wImg<wActu) { |
145 } |
143 img.css('margin-left',(wActu-wImg)/2); |
146 }); |
144 }else{ |
|
145 img.css('margin-left',-(wImg-wActu)/2); |
|
146 } |
|
147 if (hImg<hActu) { |
|
148 img.css('margin-top',(hActu-hImg)/2); |
|
149 }else{ |
|
150 img.css('margin-top',-(hImg-hActu)/2); |
|
151 } |
|
152 }); |
|
153 |
|
154 $("#liste").hide(); |
|
155 }) |