Article

# HG changeset patch # User Anthony Ly # Date 1355365072 28800 # Node ID c2dd00471b2d27ae2e69b5a0539f702d092cc450 # Parent c86141a8570de06a02a7066b4ee20b013935097b maj retour. correction placement images home treemap. diff -r c86141a8570d -r c2dd00471b2d integration/article.html --- a/integration/article.html Tue Nov 27 18:08:06 2012 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,451 +0,0 @@ - - - - - - - - - Article - - - - - - - - - - -

- - -

-

-

-

-

-

- - -

-

- -

-

-

- -

- -

- - -

-

Affaire Bettencourt »

-

-

- - -

-

FILTRES

-

- -

Catégories :

- -

-

- - -

-

-

- -

- -

- -

-

-

Affaire Lorem »

-

- 23 JANVIER 2024
- by Jean Dujardin -

-

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - -

- -

-

-

-

-

-

Affaire Lorem »

-

- 23 JANVIER 2024
- by Jean Dujardin -

-

-

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing -

-

-

-

-

-

-

Affaire Lorem »

-

- 23 JANVIER 2024
- by Jean Dujardin -

-

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - -

- -

-

-

-

-

-

Affaire Lorem »

-

- 23 JANVIER 2024
- by Jean Dujardin -

-

-

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing -

-

-

-

-

-

-

Affaire Lorem »

-

- 23 JANVIER 2024
- by Jean Dujardin -

-

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - -

- -

-

-

-

-

-

Affaire Lorem »

-

- 23 JANVIER 2024
- by Jean Dujardin -

-

-

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing -

-

-

-

-

-

-

Affaire Lorem »

-

- 23 JANVIER 2024
- by Jean Dujardin -

-

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - -

- -

-

-

-

-

-

Affaire Lorem »

-

- 23 JANVIER 2024
- by Jean Dujardin -

-

-

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing -

-

-

-

-

-

-

Affaire Lorem »

-

- 23 JANVIER 2024
- by Jean Dujardin -

-

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - -

- -

-

-

-

-

-

Affaire Lorem »

-

- 23 JANVIER 2024
- by Jean Dujardin -

-

-

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing -

-

-

-

-

- -

-

-

- - - -

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco. -

-

-

- -

-

- © Mediapart © Periplus | Mention légales | Chartes éditoriale | CGV | Mediapart.fr -

-

- - - - - - - - - - - - diff -r c86141a8570d -r c2dd00471b2d integration/css/common.css --- a/integration/css/common.css Tue Nov 27 18:08:06 2012 +0100 +++ b/integration/css/common.css Wed Dec 12 18:17:52 2012 -0800 @@ -311,6 +311,7 @@ border-top: 1px solid #313131; border-bottom: 1px solid #313131; margin-bottom: 1px; + overflow: hidden; } .cluster-visible{ left: 20px; @@ -683,14 +684,11 @@ .pagination .active,.pagination a:hover{ text-decoration: none; } -/**/ -.data{ - width: 209px; - height: 130px; - padding-top: 25px; - position: absolute; - background: url(../img/white_arrow_long.png) 0 0 no-repeat; - z-index: 200; - text-align: center; + +.plus-button.home{ + background-color: #007DAD; } +.plus-button.home:hover{ + background-color: #333; +} diff -r c86141a8570d -r c2dd00471b2d integration/css/home.css --- a/integration/css/home.css Tue Nov 27 18:08:06 2012 +0100 +++ b/integration/css/home.css Wed Dec 12 18:17:52 2012 -0800 @@ -32,7 +32,7 @@ color: #FFF; text-decoration: none; } -.links{ +.actu .links{ display: none; position: absolute; bottom: 0; @@ -41,31 +41,31 @@ .actu:hover .links, .actu:hover .voile{ display: block; } -.links li{ +.actu .links li{ float: left; margin: 0 0 1px 1px; } -.links a{ +.actu .links a{ display: block; width: 28px; height: 28px; background-color: #007dad; background-repeat: no-repeat; } -.links a:hover{ +.actu .links a:hover{ background-color: #4FA3C4; } -.links a.trash{ +.actu .links a.trash{ background-image: url(../img/home-button-trash.png); background-position: 8px 5px; } -.links a.file{ +.actu .links a.file{ background-image: url(../img/home-button-file.png); background-position: 2px 6px; text-decoration: none; position: relative; } -.links a.file span{ +.actu .links a.file span{ color: #0F85B2; display: block; font-size: 11px; @@ -75,7 +75,7 @@ top: 6px; width: 18px; } -.links a.comment{ +.actu .links a.comment{ background-image: url(../img/home-button-comment.png); background-position: 4px 6px; } diff -r c86141a8570d -r c2dd00471b2d integration/documentaire.html --- a/integration/documentaire.html Tue Nov 27 18:08:06 2012 +0100 +++ b/integration/documentaire.html Wed Dec 12 18:17:52 2012 -0800 @@ -45,7 +45,6 @@

-

+ + +

+

FILTRES

+

+ +

Catégories :

+ +

+

+ + diff -r c86141a8570d -r c2dd00471b2d integration/img/plus-button.png Binary file integration/img/plus-button.png has changed diff -r c86141a8570d -r c2dd00471b2d integration/js/dossier-treemap.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integration/js/dossier-treemap.js Wed Dec 12 18:17:52 2012 -0800 @@ -0,0 +1,161 @@ +$(function(){ + var data = [], + startcolor = [ 0, 0, 255 ], + endcolor = [ 255, 255, 0 ] + elementcount = 8; + + for (var i = 0; i < elementcount; i++) { + var r = i/elementcount, + col = _(endcolor).map(function(e,i) { + var s = startcolor[i] + return Math.floor(r*e + (1-r)*s) + }); + data.push({ + label: "Cluster " + (1+i), + i: i+1, + color: "rgb("+col.join(",")+")", + value: 1+Math.pow(Math.random(),2)*5 + }); + } + + /* Génération du Treemap */ + + data = _(data).sortBy(function(d) { return -d.value; }); + + var IDEALRATIO = 1.25; + + function cuttree(data, x, y, w, h, cut, ratio, callback) { + + function f(subdata, subx, suby, subw, subh) { + if (subdata.length == 1) { + subdata[0].x = subx; + subdata[0].y = suby; + subdata[0].w = subw; + subdata[0].h = subh; + } else { + callback(subdata, subx, suby, subw, subh) + } + } + + var first = _(data).first(cut), rest = _(data).rest(cut); + if (!first.length || !rest.length) { + return; + } + if (w/h > IDEALRATIO) { + var leftw = w * ratio; + f(first, x, y, leftw, h); + f(rest, x + leftw, y, w - leftw, h); + } else { + var toph = h * ratio; + f(first, x, y, w, toph); + f(rest, x, y + toph, w, h - toph); + } + } + + function pivot(data, x, y, w, h) { + var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity; + for (var i = 0; i < data.length - 1; i++) { + cumul += data[i].value; + var delta = Math.abs(cumul - total/2); + if (delta < bestcut) { + bestcut = delta; + bestcumul = cumul; + cut = i+1; + } else { + break; + } + } + cuttree(data, x, y, w, h, cut, bestcumul / total, pivot); + } + + function squarify(data, x, y, w, h) { + var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity; + for (var i = 0; i < data.length - 1; i++) { + cumul += data[i].value; + cuttree(data, x, y, w, h, i+1, cumul / total, pivot); + var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w)); + if (ratio < bestcut) { + bestcut = ratio; + bestcumul = cumul; + cut = i+1; + } else { + break; + } + } + cuttree(data, x, y, w, h, cut, bestcumul / total, squarify); + } + + /* Template des éléments à insérer */ + var actu = + '

'+ + ''+ + '

'+ + '

<%-label%>

'+ + '

'+ + '

317

'+ + '

'+ + '

'+ + '

'; + + + + //treemap + var tmpl = _.template(actu); + var hTreemap = 800;//à définir + $('#treemap').height(hTreemap); + squarify(data,0,0,760,hTreemap); + var treemapHtml = _(data).reduce(function(mem, d) { + return mem + tmpl(d); + },""); + $('#treemap #actus').html(treemapHtml); + + + //redimensionnement d'image + $(".actu").each(function(k,v){ + var wActu = $(this).width(); + var hActu = $(this).height(); + var img = $(this).find('img'); + + img.load(function(){ + var img = $(this); + + var wImg = img.width(); + var hImg = img.height(); + + var ratioImg = wImg/hImg; + img.css('height',hActu); + img.css('width',hActu*ratioImg); + wImg = img.width(); + hImg = img.height(); + + if(wActu>wImg){ + var ratioImg = hImg/wImg; + img.css('width', wActu); + img.css('height',wActu*ratioImg); + wImg = img.width(); + hImg = img.height(); + } + + if (wImg IDEALRATIO) { + var leftw = w * ratio; + f(first, x, y, leftw, h); + f(rest, x + leftw, y, w - leftw, h); } else { - callback(subdata, subx, suby, subw, subh) + var toph = h * ratio; + f(first, x, y, w, toph); + f(rest, x, y + toph, w, h - toph); } } - - var first = _(data).first(cut), rest = _(data).rest(cut); - if (!first.length || !rest.length) { - return; + + function pivot(data, x, y, w, h) { + var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity; + for (var i = 0; i < data.length - 1; i++) { + cumul += data[i].value; + var delta = Math.abs(cumul - total/2); + if (delta < bestcut) { + bestcut = delta; + bestcumul = cumul; + cut = i+1; + } else { + break; + } + } + cuttree(data, x, y, w, h, cut, bestcumul / total, pivot); } - if (w/h > IDEALRATIO) { - var leftw = w * ratio; - f(first, x, y, leftw, h); - f(rest, x + leftw, y, w - leftw, h); - } else { - var toph = h * ratio; - f(first, x, y, w, toph); - f(rest, x, y + toph, w, h - toph); - } -} -function pivot(data, x, y, w, h) { - var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity; - for (var i = 0; i < data.length - 1; i++) { - cumul += data[i].value; - var delta = Math.abs(cumul - total/2); - if (delta < bestcut) { - bestcut = delta; - bestcumul = cumul; - cut = i+1; - } else { - break; + function squarify(data, x, y, w, h) { + var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity; + for (var i = 0; i < data.length - 1; i++) { + cumul += data[i].value; + cuttree(data, x, y, w, h, i+1, cumul / total, pivot); + var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w)); + if (ratio < bestcut) { + bestcut = ratio; + bestcumul = cumul; + cut = i+1; + } else { + break; + } } + cuttree(data, x, y, w, h, cut, bestcumul / total, squarify); } - cuttree(data, x, y, w, h, cut, bestcumul / total, pivot); -} -function squarify(data, x, y, w, h) { - var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity; - for (var i = 0; i < data.length - 1; i++) { - cumul += data[i].value; - cuttree(data, x, y, w, h, i+1, cumul / total, pivot); - var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w)); - if (ratio < bestcut) { - bestcut = ratio; - bestcumul = cumul; - cut = i+1; - } else { - break; - } - } - cuttree(data, x, y, w, h, cut, bestcumul / total, squarify); -} - -/* Template des éléments à insérer */ -var actu = + /* Template des éléments à insérer */ + var actu = '

'+ @@ -97,16 +97,14 @@ '

<%-label%>

'+ '

'+ '

317

'+ '

'+ '

'+ ''; -$(function(){ + //treemap var tmpl = _.template(actu); var hTreemap = 800;//à définir @@ -122,33 +120,37 @@ var wActu = $(this).width(); var hActu = $(this).height(); var img = $(this).find('img'); - var wImg = img.width(); - var hImg = img.height(); + img.load(function(){ + var img = $(this); - var ratioImg = wImg/hImg; - img.css('height',hActu); - img.css('width',hActu*ratioImg); - wImg = img.width(); - hImg = img.height(); + var wImg = img.width(); + var hImg = img.height(); - if(wActu>wImg){ - var ratioImg = hImg/wImg; - img.css('width', wActu); - img.css('height',wActu*ratioImg); + var ratioImg = wImg/hImg; + img.css('height',hActu); + img.css('width',hActu*ratioImg); wImg = img.width(); hImg = img.height(); - } + + if(wActu>wImg){ + var ratioImg = hImg/wImg; + img.css('width', wActu); + img.css('height',wActu*ratioImg); + wImg = img.width(); + hImg = img.height(); + } - if (wImg + + + + + + + + Liste d'article + + + + + + + + + + +

+ + +

+

+

+

+

+

+ + +

+

+ +

+

+

+ +

+ +

+ + +

+

Affaire Bettencourt »

+

+

+ + +

+

FILTRES

+

+ +

Catégories :

+ +

+

+ + +

+

+

+ +

+ +

+ +

+

+

Affaire Lorem »

+

+ 23 JANVIER 2024
+ by Jean Dujardin +

+

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + +

+ +

+

+

+

+

+

Affaire Lorem »

+

+ 23 JANVIER 2024
+ by Jean Dujardin +

+

+

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing +

+

+

+

+

+

+

Affaire Lorem »

+

+ 23 JANVIER 2024
+ by Jean Dujardin +

+

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + +

+ +

+

+

+

+

+

Affaire Lorem »

+

+ 23 JANVIER 2024
+ by Jean Dujardin +

+

+

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing +

+

+

+

+

+

+

Affaire Lorem »

+

+ 23 JANVIER 2024
+ by Jean Dujardin +

+

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + +

+ +

+

+

+

+

+

Affaire Lorem »

+

+ 23 JANVIER 2024
+ by Jean Dujardin +

+

+

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing +

+

+

+

+

+

+

Affaire Lorem »

+

+ 23 JANVIER 2024
+ by Jean Dujardin +

+

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + +

+ +

+

+

+

+

+

Affaire Lorem »

+

+ 23 JANVIER 2024
+ by Jean Dujardin +

+

+

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing +

+

+

+

+

+

+

Affaire Lorem »

+

+ 23 JANVIER 2024
+ by Jean Dujardin +

+

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + +

+ +

+

+

+

+

+

Affaire Lorem »

+

+ 23 JANVIER 2024
+ by Jean Dujardin +

+

+

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing +

+

+

+

+

+ +

+

+

+ + + +

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco. +

+

+

+ +

+

+ © Mediapart © Periplus | Mention légales | Chartes éditoriale | CGV | Mediapart.fr +

+

+ + + + + + + + + + + +