maj retour.
correction placement images home treemap.
--- 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 @@
-<!DOCTYPE html>
-<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Article</title>
- <link rel="stylesheet" href="css/reset.css" />
- <link rel="stylesheet" href="css/common.css" />
- <link rel="stylesheet" href="css/article.css" />
- <link rel="stylesheet" href="css/ui-red/jquery-ui.css">
- <script src="js/vendor/modernizr-2.6.1.min.js"></script>
- </head>
- <body>
-
-
-
- <div class="wrap">
- <div class="header">
- <div class="logo">
- <div class="date">
- <span class="year">5</span>
- <span class="text">années archivées</span>
- </div>
- </div>
-
- <div class="recherche-wrap">
- <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
- <form action="#">
- <p>
- <a href="#" class="photo"></a>
- <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
- <input type="submit" title="Rechercher" value="" class="recherche-submit"/>
- <a class="plus-button" title="Annoter" href="#"> </a>
- </p>
- </form>
- </div>
-
- <ul class="header-menu">
- <li><a title="accueil" class="home" href="#"></a></li>
- <li><a href="#">INTERNATIONAL</a></li>
- <li><a href="#">FRANCE</a></li>
- <li><a href="#">ECONOMIE</a></li>
- <li><a href="#">CULTURE</a></li>
- <li><a href="#">CLUSTER X</a></li>
- </ul>
-
- <div class="login-wrap">
- <h2>CONNECTER VOUS</h2>
- <form action="#">
- <p><input type="text" name="identifiant" placeholder="Identifiant" /></p>
- <p class="submit-wrap">
- <input class="password" type="password" name="password"/>
- <input class="submit-button" type="submit" value="OK" />
- </p>
- </form>
- <p class="password-lost"><a href="">Mot de passe oublié ?</a> </p>
-
-
- </div>
- <a href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a>
-
- <div class="dossier-documentaire">
- <div class="dossier-documentaire-inner">
- <h2>MES DOSSIERS</h2>
- <ul>
- <li class="clearfix">
- <a title="Voir le dossier" href="#">
- <img src="img/documentaire-visuel.jpg" alt="" />
- <span class="documentaire-texte">
- <h3>Terrorisme</h3>
- <p>relation entre elation entre</p>
- </span>
- </a>
- </li>
- <li class="clearfix">
- <a title="Voir le dossier" href="#">
- <img src="img/documentaire-visuel.jpg" alt="" />
- <span class="documentaire-texte">
- <h3>Terrorisme</h3>
- <p>relation entre elation entre</p>
- </span>
- </a>
- </li>
- <li class="clearfix">
- <a title="Voir le dossier" href="#">
- <img src="img/documentaire-visuel.jpg" alt="" />
- <span class="documentaire-texte">
- <h3>Terrorisme</h3>
- <p>relation entre elation entre</p>
- </span>
- </a>
- </li>
- <li class="clearfix">
- <a title="Nouveau dossier documentaire" href="#">
- <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
- <span class="documentaire-texte">
- <h3>NOUVEAU DOSSIER</h3>
- <p>Creér un dossier documentaire</p>
- </span>
- </a>
- </li>
-
- </ul>
- <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
- <h2></h2>
- <ul>
- <li class="clearfix">
- <atitle="Voir le dossier" href="#">
- <img src="img/documentaire-visuel.jpg" alt="" />
- <span class="documentaire-texte">
- <h3>Terrorisme</h3>
- <p>relation entre elation entre</p>
- </span>
- </a>
- </li>
- <li class="clearfix">
- <a title="Voir le dossier" href="#">
- <img src="img/documentaire-visuel.jpg" alt="" />
- <span class="documentaire-texte">
- <h3>Terrorisme</h3>
- <p>relation entre elation entre</p>
- </span>
- </a>
- </li>
- </ul>
- <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
- </div>
- </div><!--dossier-documentaire-->
- </div><!-- header -->
-
- <div class="content-wrap clearfix">
- <div class="frise">
- <div class="streamgraph"></div>
- <div id="slider-range"></div>
- </div><!-- frise -->
- <div class="cluster-wrap">
- <a href="#" class="cluster-arrow arrow-left"></a>
- <a href="#" class="cluster-arrow arrow-right"></a>
- <div class="cluster-containment">
- <div class="cluster-visible">
-
- <ul class="cluster">
- <li><a title="Afficher le cluster" href="#">Début</a></li>
- <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
- <li><a title="Afficher le cluster" href="#">Syrie</a></li>
- <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
- <li><a title="Afficher le cluster" href="#">Syrie</a></li>
- <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
- <li><a title="Afficher le cluster" href="#">Syrie</a></li>
- <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
- <li><a title="Afficher le cluster" href="#">Syrie</a></li>
- <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
- <li><a title="Afficher le cluster" href="#">Syrie</a></li>
- <li><a title="Afficher le cluster" href="#">Fin</a></li>
- </ul>
- </div>
- </div>
-
- </div>
-
- <div class="content clearfix">
-
-
- <div class="content-left">
- <h2> Affaire Bettencourt »</h2>
- <div class="widget-wrapper">
- <div class="widget-wrap">
- <div class="widget recherche">
- <h3><a href="#">RECHERCHE</a></h3>
- <div class="widget-inner">
- <form action="#" method="">
- <p class="clearfix">
- <input type="text" name="" placeholder="Rechercher" />
- <input type="submit" title="Rechercher" value="" />
- </p>
- </form>
- </div>
- </div><!-- recherche -->
- <div class="widget classer">
- <h3><a href="#">CLASSER</a></h3>
- <div class="widget-inner">
- <form action="#" class="filtre-categorie">
- <p><input type="checkbox"> <label for="">International</label> </p>
- <p><input type="checkbox"> <label for="">International</label> </p>
- <p><input type="checkbox"> <label for="">International</label> </p>
- </form>
- </div>
- </div><!-- classer -->
- <div class="widget filtre">
- <h3><a href="#">FILTRES</a></h3>
- <div class="widget-inner">
- <form action="#" class="filtre-date">
- <p>
- <label for="">De :</label>
- <input type="text" name="dateBegin" class="dateBegin" />
- </p>
- <p>
- <label for="">à :</label>
- <input type="text" name="dateEnd" class="dateEnd" />
- </p>
- </form>
- <h4>Catégories :</h4>
- <form action="#" class="filtre-categorie">
- <p><input type="checkbox"> <label for="">International</label> </p>
- <p><input type="checkbox"> <label for="">International</label> </p>
- <p><input type="checkbox"> <label for="">International</label> </p>
- </form>
- </div>
- </div><!-- filtre -->
- <div class="widget links">
- <h3><a href="#">DOSSIER ASSOCIES</a></h3>
- <div class="widget-inner">
- <ul>
- <li><a href="#">« Corruption »</a></li>
- <li><a href="#">« Corruption »</a></li>
- <li><a href="#">« Corruption »</a></li>
- <li><a href="#">« Corruption »</a></li>
- </ul>
- </div>
- </div><!-- links -->
- <div class="widget affichage">
- <h3><a href="#">AFFICHAGE</a></h3>
- <div class="widget-inner">
-
- <ul class="clearfix">
- <li><a title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
- <li><a title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
- </ul>
- </div>
- </div><!-- affichage -->
- </div><!-- widget-wrap -->
- </div>
- </div>
-
- <div class="content-right">
-
- <div class="articles">
-
- <div class="article">
- <div class="inner-article clearfix">
- <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- <a href="#">23 JANVIER 2024</a><br/>
- by <a href="#">Jean Dujardin</a>
- </p>
- <div class="article-content">
- <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-
- </p>
-
- </div>
- </div>
- </div><!--article -->
- <div class="article">
- <div class="inner-article clearfix">
- <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- <a href="#">23 JANVIER 2024</a><br/>
- by <a href="#">Jean Dujardin</a>
- </p>
- <div class="article-content">
- <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-
- <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
- </p>
- </div>
- </div>
- </div><!--article -->
- <div class="article">
- <div class="inner-article clearfix">
- <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- <a href="#">23 JANVIER 2024</a><br/>
- by <a href="#">Jean Dujardin</a>
- </p>
- <div class="article-content">
- <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-
- </p>
-
- </div>
- </div>
- </div><!--article -->
- <div class="article">
- <div class="inner-article clearfix">
- <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- <a href="#">23 JANVIER 2024</a><br/>
- by <a href="#">Jean Dujardin</a>
- </p>
- <div class="article-content">
- <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-
- <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
- </p>
- </div>
- </div>
- </div><!--article -->
- <div class="article">
- <div class="inner-article clearfix">
- <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- <a href="#">23 JANVIER 2024</a><br/>
- by <a href="#">Jean Dujardin</a>
- </p>
- <div class="article-content">
- <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-
- </p>
-
- </div>
- </div>
- </div><!--article -->
- <div class="article">
- <div class="inner-article clearfix">
- <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- <a href="#">23 JANVIER 2024</a><br/>
- by <a href="#">Jean Dujardin</a>
- </p>
- <div class="article-content">
- <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-
- <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
- </p>
- </div>
- </div>
- </div><!--article -->
- <div class="article">
- <div class="inner-article clearfix">
- <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- <a href="#">23 JANVIER 2024</a><br/>
- by <a href="#">Jean Dujardin</a>
- </p>
- <div class="article-content">
- <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-
- </p>
-
- </div>
- </div>
- </div><!--article -->
- <div class="article">
- <div class="inner-article clearfix">
- <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- <a href="#">23 JANVIER 2024</a><br/>
- by <a href="#">Jean Dujardin</a>
- </p>
- <div class="article-content">
- <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-
- <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
- </p>
- </div>
- </div>
- </div><!--article -->
- <div class="article">
- <div class="inner-article clearfix">
- <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- <a href="#">23 JANVIER 2024</a><br/>
- by <a href="#">Jean Dujardin</a>
- </p>
- <div class="article-content">
- <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-
- </p>
-
- </div>
- </div>
- </div><!--article -->
- <div class="article">
- <div class="inner-article clearfix">
- <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- <a href="#">23 JANVIER 2024</a><br/>
- by <a href="#">Jean Dujardin</a>
- </p>
- <div class="article-content">
- <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-
- <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
- </p>
- </div>
- </div>
- </div><!--article -->
- </div><!-- articles -->
-
- </div><!-- content-right -->
- </div>
- <div class="footer clearfix">
- <div class="footer-information">
- <h2>Information utiles</h2>
- <ul>
- <li>- <a href="#">Mentions légales</a></li>
- <li>- <a href="#">Mentions légales</a></li>
- <li>- <a href="#">Conditions d'utilisations générale</a></li>
- <li>- <a href="#">Le projet Periplus</a></li>
- </ul>
- </div>
- <div class="footer-raccourci">
- <h2>Raccourcis</h2>
- <ul>
- <li>- Année <a href="#">2009</a>, <a href="#">2009</a>, <a href="#">2009</a></li>
- <li>- <a href="#">International</a>, <a href="#">International</a>, <a href="#">International</a></li>
- <li>- <a href="#">Conditions d'utilisations générale</a>
- </ul>
- </div>
- <div class="footer-partenaire">
- <h2>Partenaires</h2>
- <ul>
- <li><a title="iri" href="http://www.iri.centrepompidou.fr/" class="iri"></a></li>
- <li><a title="cea" href="http://www.cea.fr/" class="cea"></a></li>
- <li><a title="Alcatel" href="http://www.alcatel-lucent.com" class="alcatel"></a></li>
- </ul>
- </div>
- <div class="footer-texte">
- <p>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.
- </p>
- </div>
- </div><!-- footer -->
-
- </div><!-- content-wrap -->
- <div class="copyright">
- © Mediapart © Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale | <a href="#">CGV | <a href="#">Mediapart.fr</a>
- </div>
- </div>
- <!-- JavaScript -->
- <script src="js/vendor/jquery-1.8.0.min.js"></script>
- <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
- <script src="js/vendor/dragslider.js"></script>
- <script src="js/lib/raphael-min.js"></script>
- <script src="js/lib/underscore-min.js"></script>
- <script src="js/plugins.js"></script>
- <script src="js/main.js"></script>
- <script src="js/streamgraph.js"></script>
-
- </body>
-</html>
--- 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;
+}
--- 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;
}
--- 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 @@
<li><a href="#">FRANCE</a></li>
<li><a href="#">ECONOMIE</a></li>
<li><a href="#">CULTURE</a></li>
- <li><a href="#">CLUSTER X</a></li>
</ul>
<div class="login-wrap">
@@ -136,7 +135,7 @@
<div class="header-documentaire">
<a class="retour" href="#">« Retour</a>
- <h2>Tous les Dossiers Documentaires : «Rechercher»</h2>
+ <h2>Tous les Dossiers Documentaires : <span>«Rechercher»</span></h2>
</div>
<div class="content clearfix">
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/dossier-home.html Wed Dec 12 18:17:52 2012 -0800
@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>Dossier - Home</title>
+ <link rel="stylesheet" href="css/reset.css" />
+ <link rel="stylesheet" href="css/common.css" />
+ <link rel="stylesheet" href="css/home.css" />
+ <link rel="stylesheet" href="css/article.css" />
+ <link rel="stylesheet" href="css/ui-red/jquery-ui.css">
+ <script src="js/vendor/modernizr-2.6.1.min.js"></script>
+ </head>
+ <body>
+
+
+
+ <div class="wrap">
+
+ <div class="header">
+ <div class="logo">
+ <div class="date">
+ <span class="year">5</span>
+ <span class="text">années archivées</span>
+ </div>
+ </div>
+
+ <div class="recherche-wrap">
+ <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
+ <form action="#">
+ <p >
+ <a data-trace-id="" data-trace-type="search" data-trace-view="head-search-snap" href="#" class="photo"></a>
+ <input data-trace-id="" data-trace-type="search" data-trace-view="head-search-query" name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
+ <input data-trace-id="" data-trace-type="search" data-trace-view="head-search-submit" type="submit" value="" class="recherche-submit"/>
+ <a class="plus-button home" title="Annoter" href="#"> </a>
+ </p>
+ </form>
+ </div>
+
+ <ul class="header-menu">
+ <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-home" title="accueil" class="home" href="#"></a></li>
+ <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-international" href="#">INTERNATIONAL</a></li>
+ <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-france" href="#">FRANCE</a></li>
+ <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-economie" href="#">ECONOMIE</a></li>
+ <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-culture" href="#">CULTURE</a></li>
+
+ </ul>
+
+ <div class="login-wrap">
+ <h2>CONNECTER VOUS</h2>
+ <form action="#">
+ <p><input data-trace-id="" data-trace-type="login" data-trace-view="login-login" type="text" name="identifiant" placeholder="Identifiant" /></p>
+ <p class="submit-wrap">
+ <input data-trace-id="" data-trace-type="login" data-trace-view="login-password" class="password" type="password" name="password"/>
+ <input data-trace-id="" data-trace-type="login" data-trace-view="login-submit" class="submit-button" type="submit" value="OK" />
+ </p>
+ </form>
+ <p class="password-lost"><a data-trace-id="" data-trace-type="login" data-trace-view="login-password-lost" href="">Mot de passe oublié ?</a> </p>
+
+
+ </div>
+ <a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="open-dossiers-documentaires" href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a>
+
+ <div class="dossier-documentaire">
+ <div class="dossier-documentaire-inner">
+ <h2>MES DOSSIERS</h2>
+ <ul>
+ <li class="clearfix">
+ <a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="link-dossiers-documentaires" data-trace-weight="1" href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="new-dossiers-documentaires" data-trace-weight="1" href="#">
+ <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>NOUVEAU DOSSIER</h3>
+ <p>Creér un dossier documentaire</p>
+ </span>
+ </a>
+ </li>
+
+ </ul>
+ <a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="more-dossiers-documentaires" data-trace-weight="1" class="documentaire-lien" href="#"></a>
+ <h2></h2>
+ <ul>
+ <li class="clearfix">
+ <a href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ </ul>
+ <a class="documentaire-lien" href="#"></a>
+ </div>
+ </div><!--dossier-documentaire-->
+ </div><!-- header -->
+
+ <div class="content-wrap clearfix">
+ <div class="header-documentaire">
+ <a class="retour" href="#">« Retour</a>
+ <h2>Tous les Dossiers Documentaires : <span>«Rechercher»</span></h2>
+ </div>
+
+ <div class="frise">
+ <div class="streamgraph"></div>
+ <div id="slider-range"></div>
+ </div><!-- frise -->
+
+ <div class="cluster-wrap">
+ <a href="#" class="cluster-arrow arrow-left"></a>
+ <a href="#" class="cluster-arrow arrow-right"></a>
+ <div class="cluster-containment">
+ <div class="cluster-visible">
+
+ <ul class="cluster">
+ <li><a title="Afficher le cluster" href="#">Début</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">Fin</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="content clearfix">
+
+
+ <div class="content-left">
+ <div class="widget-wrapper">
+ <div class="widget-wrap">
+
+ <div class="widget affichage">
+ <h3><a href="#">AFFICHAGE</a></h3>
+ <div class="widget-inner">
+
+ <ul class="clearfix">
+ <li><a title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
+ <li><a title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
+ </ul>
+ </div>
+ </div><!-- affichage -->
+
+ <div class="widget classer">
+ <h3><a href="#">CLASSER</a></h3>
+ <div class="widget-inner">
+ <form action="#" class="filtre-categorie">
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ </form>
+ </div>
+ </div><!-- classer -->
+ <div class="widget filtre">
+ <h3><a href="#">FILTRES</a></h3>
+ <div class="widget-inner">
+ <form action="#" class="filtre-date">
+ <p>
+ <label for="">De :</label>
+ <input type="text" name="dateBegin" class="dateBegin" />
+ </p>
+ <p>
+ <label for="">à :</label>
+ <input type="text" name="dateEnd" class="dateEnd" />
+ </p>
+ </form>
+ <h4>Catégories :</h4>
+ <form action="#" class="filtre-categorie">
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ </form>
+ </div>
+ </div><!-- filtre -->
+ <div class="widget links">
+ <h3><a href="#">DOSSIER ASSOCIES</a></h3>
+ <div class="widget-inner">
+ <ul>
+ <li><a href="#">« Corruption »</a></li>
+ <li><a href="#">« Corruption »</a></li>
+ <li><a href="#">« Corruption »</a></li>
+ <li><a href="#">« Corruption »</a></li>
+ </ul>
+ </div>
+ </div><!-- links -->
+
+ </div>
+ </div>
+ </div>
+
+ <div class="content-right">
+
+ <div id="treemap">
+ <div id="actus" class="actus">
+ </div> <!-- actus -->
+ </div>
+
+
+ <div id="liste">
+ <div class="articles">
+
+ <div class="tooltip"></div>
+
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="number-article">
+ <a href="#">48 articles | 320 annotations </a>
+ <a title="ajouter une annotation" class="add-annotation" href="#"></a>
+ </p>
+
+ <div class="article-annotations">
+ <a title="48 annotations" class="blue" href="#" style="width:20%;"></a>
+ <a title="title" class="green" href="#" style="width:20%;"></a>
+ <a title="title" class="red" href="#" style="width:40%;"></a>
+ <a title="title" class="empty" href="#" style="width:20%;"></a>
+ </div>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ <ul class="links">
+ <ul>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ </ul>
+ </ul>
+ </div>
+ </div>
+ </div><!--article -->
+
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="number-article">
+ <a href="#">48 articles | 320 annotations </a>
+ <a title="ajouter une annotation" class="add-annotation" href="#"></a>
+ </p>
+
+ <div class="article-annotations">
+ <a title="title" class="blue" href="#" style="width:20%;"></a>
+ <a title="title" class="green" href="#" style="width:20%;"></a>
+ <a title="title" class="red" href="#" style="width:40%;"></a>
+ <a title="title" class="empty" href="#" style="width:20%;"></a>
+ </div>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua.
+
+ </p>
+
+ <ul class="links">
+ <ul>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ </ul>
+ </ul>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="number-article">
+ <a href="#">48 articles | 320 annotations </a>
+ <a title="ajouter une annotation" class="add-annotation" href="#"></a>
+ </p>
+
+ <div class="article-annotations">
+ <a title="title" class="blue" href="#" style="width:20%;"></a>
+ <a title="title" class="green" href="#" style="width:20%;"></a>
+ <a title="title" class="red" href="#" style="width:40%;"></a>
+ <a title="title" class="empty" href="#" style="width:20%;"></a>
+ </div>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ <ul class="links">
+ <ul>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ </ul>
+ </ul>
+ </div>
+ </div>
+ </div><!--article -->
+
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="number-article">
+ <a href="#">48 articles | 320 annotations </a>
+ <a title="ajouter une annotation" class="add-annotation" href="#"></a>
+ </p>
+
+ <div class="article-annotations">
+ <a title="title" class="blue" href="#" style="width:20%;"></a>
+ <a title="title" class="green" href="#" style="width:20%;"></a>
+ <a title="title" class="red" href="#" style="width:40%;"></a>
+ <a title="title" class="empty" href="#" style="width:20%;"></a>
+ </div>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua.
+
+ </p>
+
+ <ul class="links">
+ <ul>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ </ul>
+ </ul>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="number-article">
+ <a href="#">48 articles | 320 annotations </a>
+ <a title="ajouter une annotation" class="add-annotation" href="#"></a>
+ </p>
+
+ <div class="article-annotations">
+ <a title="title" class="blue" href="#" style="width:20%;"></a>
+ <a title="title" class="green" href="#" style="width:20%;"></a>
+ <a title="title" class="red" href="#" style="width:40%;"></a>
+ <a title="title" class="empty" href="#" style="width:20%;"></a>
+ </div>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ <ul class="links">
+ <ul>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ </ul>
+ </ul>
+ </div>
+ </div>
+ </div><!--article -->
+
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="number-article">
+ <a href="#">48 articles | 320 annotations </a>
+ <a title="ajouter une annotation" class="add-annotation" href="#"></a>
+ </p>
+
+ <div class="article-annotations">
+ <a title="title" class="blue" href="#" style="width:20%;"></a>
+ <a title="title" class="green" href="#" style="width:20%;"></a>
+ <a title="title" class="red" href="#" style="width:40%;"></a>
+ <a title="title" class="empty" href="#" style="width:20%;"></a>
+ </div>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua.
+
+ </p>
+
+ <ul class="links">
+ <ul>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ </ul>
+ </ul>
+ </div>
+ </div>
+ </div><!--article -->
+
+
+
+ </div><!-- articles -->
+ <div class="pagination">
+ <a href="#" class="active">1</a>.<a href="#">2</a>.<a href="#">3</a>.<a href="#">Suivants »</a>
+ </div>
+
+ </div><!-- liste -->
+
+
+
+
+ </div><!-- content-right -->
+ </div>
+ <div class="footer clearfix">
+ <div class="footer-information">
+ <h2>Information utiles</h2>
+ <ul>
+ <li>- <a href="#">Mentions légales</a></li>
+ <li>- <a href="#">Mentions légales</a></li>
+ <li>- <a href="#">Conditions d'utilisations générale</a></li>
+ <li>- <a href="#">Le projet Periplus</a></li>
+ </ul>
+ </div>
+ <div class="footer-raccourci">
+ <h2>Raccourcis</h2>
+ <ul>
+ <li>- Année <a href="#">2009</a>, <a href="#">2009</a>, <a href="#">2009</a></li>
+ <li>- <a href="#">International</a>, <a href="#">International</a>, <a href="#">International</a></li>
+ <li>- <a href="#">Conditions d'utilisations générale</a>
+ </ul>
+ </div>
+ <div class="footer-partenaire">
+ <h2>Partenaires</h2>
+ <ul>
+ <li><a title="iri" href="http://www.iri.centrepompidou.fr/" class="iri"></a></li>
+ <li><a title="cea" href="http://www.cea.fr/" class="cea"></a></li>
+ <li><a title="Alcatel" href="http://www.alcatel-lucent.com" class="alcatel"></a></li>
+ </ul>
+ </div>
+ <div class="footer-texte">
+ <p>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.
+ </p>
+ </div>
+ </div><!-- footer -->
+
+ </div><!-- content-wrap -->
+ <div class="copyright">
+ © Mediapart © Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale | <a href="#">CGV | <a href="#">Mediapart.fr</a>
+ </div>
+ </div>
+ <!-- JavaScript -->
+ <script src="js/vendor/jquery-1.8.0.min.js"></script>
+ <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
+ <script src="js/vendor/dragslider.js"></script>
+ <script src="js/lib/raphael-min.js"></script>
+ <script src="js/lib/underscore-min.js"></script>
+ <script src="js/plugins.js"></script>
+ <script src="js/dossier-treemap.js"></script>
+ <script src="js/main.js"></script>
+ <script src="js/streamgraph.js"></script>
+
+ </body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/dossier-liste-article.html Wed Dec 12 18:17:52 2012 -0800
@@ -0,0 +1,455 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>Dossier - Liste d'articles</title>
+ <link rel="stylesheet" href="css/reset.css" />
+ <link rel="stylesheet" href="css/common.css" />
+ <link rel="stylesheet" href="css/article.css" />
+ <link rel="stylesheet" href="css/ui-red/jquery-ui.css">
+ <script src="js/vendor/modernizr-2.6.1.min.js"></script>
+ </head>
+ <body>
+
+
+
+ <div class="wrap">
+ <div class="header">
+ <div class="logo">
+ <div class="date">
+ <span class="year">5</span>
+ <span class="text">années archivées</span>
+ </div>
+ </div>
+
+ <div class="recherche-wrap">
+ <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
+ <form action="#">
+ <p>
+ <a href="#" class="photo"></a>
+ <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
+ <input type="submit" title="Rechercher" value="" class="recherche-submit"/>
+ <a class="plus-button" title="Annoter" href="#"> </a>
+ </p>
+ </form>
+ </div>
+
+ <ul class="header-menu">
+ <li><a title="accueil" class="home" href="#"></a></li>
+ <li><a href="#">INTERNATIONAL</a></li>
+ <li><a href="#">FRANCE</a></li>
+ <li><a href="#">ECONOMIE</a></li>
+ <li><a href="#">CULTURE</a></li>
+
+ </ul>
+
+ <div class="login-wrap">
+ <h2>CONNECTER VOUS</h2>
+ <form action="#">
+ <p><input type="text" name="identifiant" placeholder="Identifiant" /></p>
+ <p class="submit-wrap">
+ <input class="password" type="password" name="password"/>
+ <input class="submit-button" type="submit" value="OK" />
+ </p>
+ </form>
+ <p class="password-lost"><a href="">Mot de passe oublié ?</a> </p>
+
+
+ </div>
+ <a href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a>
+
+ <div class="dossier-documentaire">
+ <div class="dossier-documentaire-inner">
+ <h2>MES DOSSIERS</h2>
+ <ul>
+ <li class="clearfix">
+ <a title="Voir le dossier" href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a title="Voir le dossier" href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a title="Voir le dossier" href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a title="Nouveau dossier documentaire" href="#">
+ <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>NOUVEAU DOSSIER</h3>
+ <p>Creér un dossier documentaire</p>
+ </span>
+ </a>
+ </li>
+
+ </ul>
+ <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
+ <h2></h2>
+ <ul>
+ <li class="clearfix">
+ <atitle="Voir le dossier" href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a title="Voir le dossier" href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ </ul>
+ <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
+ </div>
+ </div><!--dossier-documentaire-->
+ </div><!-- header -->
+
+ <div class="content-wrap clearfix">
+ <div class="header-documentaire">
+ <a class="retour" href="#">« Retour</a>
+ <h2>Tous les Dossiers Documentaires : <span>«Rechercher»</span></h2>
+ </div>
+ <div class="frise">
+ <div class="streamgraph"></div>
+ <div id="slider-range"></div>
+ </div><!-- frise -->
+ <div class="cluster-wrap">
+ <a href="#" class="cluster-arrow arrow-left"></a>
+ <a href="#" class="cluster-arrow arrow-right"></a>
+ <div class="cluster-containment">
+ <div class="cluster-visible">
+
+ <ul class="cluster">
+ <li><a title="Afficher le cluster" href="#">Début</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">Fin</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="content clearfix">
+
+
+ <div class="content-left">
+ <h2> Affaire Bettencourt »</h2>
+ <div class="widget-wrapper">
+ <div class="widget-wrap">
+ <div class="widget recherche">
+ <h3><a href="#">RECHERCHE</a></h3>
+ <div class="widget-inner">
+ <form action="#" method="">
+ <p class="clearfix">
+ <input type="text" name="" placeholder="Rechercher" />
+ <input type="submit" title="Rechercher" value="" />
+ </p>
+ </form>
+ </div>
+ </div><!-- recherche -->
+ <div class="widget classer">
+ <h3><a href="#">CLASSER</a></h3>
+ <div class="widget-inner">
+ <form action="#" class="filtre-categorie">
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ </form>
+ </div>
+ </div><!-- classer -->
+ <div class="widget filtre">
+ <h3><a href="#">FILTRES</a></h3>
+ <div class="widget-inner">
+ <form action="#" class="filtre-date">
+ <p>
+ <label for="">De :</label>
+ <input type="text" name="dateBegin" class="dateBegin" />
+ </p>
+ <p>
+ <label for="">à :</label>
+ <input type="text" name="dateEnd" class="dateEnd" />
+ </p>
+ </form>
+ <h4>Catégories :</h4>
+ <form action="#" class="filtre-categorie">
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ </form>
+ </div>
+ </div><!-- filtre -->
+ <div class="widget links">
+ <h3><a href="#">DOSSIER ASSOCIES</a></h3>
+ <div class="widget-inner">
+ <ul>
+ <li><a href="#">« Corruption »</a></li>
+ <li><a href="#">« Corruption »</a></li>
+ <li><a href="#">« Corruption »</a></li>
+ <li><a href="#">« Corruption »</a></li>
+ </ul>
+ </div>
+ </div><!-- links -->
+ <div class="widget affichage">
+ <h3><a href="#">AFFICHAGE</a></h3>
+ <div class="widget-inner">
+
+ <ul class="clearfix">
+ <li><a title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
+ <li><a title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
+ </ul>
+ </div>
+ </div><!-- affichage -->
+ </div><!-- widget-wrap -->
+ </div>
+ </div>
+
+ <div class="content-right">
+
+ <div class="articles">
+
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ </div><!-- articles -->
+
+ </div><!-- content-right -->
+ </div>
+ <div class="footer clearfix">
+ <div class="footer-information">
+ <h2>Information utiles</h2>
+ <ul>
+ <li>- <a href="#">Mentions légales</a></li>
+ <li>- <a href="#">Mentions légales</a></li>
+ <li>- <a href="#">Conditions d'utilisations générale</a></li>
+ <li>- <a href="#">Le projet Periplus</a></li>
+ </ul>
+ </div>
+ <div class="footer-raccourci">
+ <h2>Raccourcis</h2>
+ <ul>
+ <li>- Année <a href="#">2009</a>, <a href="#">2009</a>, <a href="#">2009</a></li>
+ <li>- <a href="#">International</a>, <a href="#">International</a>, <a href="#">International</a></li>
+ <li>- <a href="#">Conditions d'utilisations générale</a>
+ </ul>
+ </div>
+ <div class="footer-partenaire">
+ <h2>Partenaires</h2>
+ <ul>
+ <li><a title="iri" href="http://www.iri.centrepompidou.fr/" class="iri"></a></li>
+ <li><a title="cea" href="http://www.cea.fr/" class="cea"></a></li>
+ <li><a title="Alcatel" href="http://www.alcatel-lucent.com" class="alcatel"></a></li>
+ </ul>
+ </div>
+ <div class="footer-texte">
+ <p>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.
+ </p>
+ </div>
+ </div><!-- footer -->
+
+ </div><!-- content-wrap -->
+ <div class="copyright">
+ © Mediapart © Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale | <a href="#">CGV | <a href="#">Mediapart.fr</a>
+ </div>
+ </div>
+ <!-- JavaScript -->
+ <script src="js/vendor/jquery-1.8.0.min.js"></script>
+ <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
+ <script src="js/vendor/dragslider.js"></script>
+ <script src="js/lib/raphael-min.js"></script>
+ <script src="js/lib/underscore-min.js"></script>
+ <script src="js/plugins.js"></script>
+ <script src="js/main.js"></script>
+ <script src="js/streamgraph.js"></script>
+
+ </body>
+</html>
--- a/integration/home.html Tue Nov 27 18:08:06 2012 +0100
+++ b/integration/home.html Wed Dec 12 18:17:52 2012 -0800
@@ -35,7 +35,7 @@
<a data-trace-id="" data-trace-type="search" data-trace-view="head-search-snap" href="#" class="photo"></a>
<input data-trace-id="" data-trace-type="search" data-trace-view="head-search-query" name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
<input data-trace-id="" data-trace-type="search" data-trace-view="head-search-submit" type="submit" value="" class="recherche-submit"/>
-
+ <a class="plus-button home" title="Annoter" href="#"> </a>
</p>
</form>
</div>
@@ -46,7 +46,7 @@
<li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-france" href="#">FRANCE</a></li>
<li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-economie" href="#">ECONOMIE</a></li>
<li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-culture" href="#">CULTURE</a></li>
- <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-cluster" href="#">CLUSTER X</a></li>
+
</ul>
<div class="login-wrap">
@@ -138,7 +138,30 @@
<div class="streamgraph"></div>
<div id="slider-range"></div>
</div><!-- frise -->
-
+ <div class="cluster-wrap">
+ <a href="#" class="cluster-arrow arrow-left"></a>
+ <a href="#" class="cluster-arrow arrow-right"></a>
+ <div class="cluster-containment">
+ <div class="cluster-visible">
+
+ <ul class="cluster">
+ <li><a title="Afficher le cluster" href="#">Début</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">Fin</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div>
<div class="content clearfix">
@@ -157,6 +180,50 @@
</ul>
</div>
</div><!-- affichage -->
+
+ <div class="widget classer">
+ <h3><a href="#">CLASSER</a></h3>
+ <div class="widget-inner">
+ <form action="#" class="filtre-categorie">
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ </form>
+ </div>
+ </div><!-- classer -->
+ <div class="widget filtre">
+ <h3><a href="#">FILTRES</a></h3>
+ <div class="widget-inner">
+ <form action="#" class="filtre-date">
+ <p>
+ <label for="">De :</label>
+ <input type="text" name="dateBegin" class="dateBegin" />
+ </p>
+ <p>
+ <label for="">à :</label>
+ <input type="text" name="dateEnd" class="dateEnd" />
+ </p>
+ </form>
+ <h4>Catégories :</h4>
+ <form action="#" class="filtre-categorie">
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ </form>
+ </div>
+ </div><!-- filtre -->
+ <div class="widget links">
+ <h3><a href="#">DOSSIER ASSOCIES</a></h3>
+ <div class="widget-inner">
+ <ul>
+ <li><a href="#">« Corruption »</a></li>
+ <li><a href="#">« Corruption »</a></li>
+ <li><a href="#">« Corruption »</a></li>
+ <li><a href="#">« Corruption »</a></li>
+ </ul>
+ </div>
+ </div><!-- links -->
+
</div>
</div>
</div>
Binary file integration/img/plus-button.png has changed
--- /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 =
+ '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+
+ '<a href="#">'+
+ '<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+
+ '<div class="voile"></div>'+
+ '</a>'+
+ '<div class="inner-actu">'+
+ '<h2><a href="#"><%-label%></a></h2>'+
+ '<div class="links">'+
+ '<ul>'+
+ '<li><a href="#" title="Supprimer le cluster" class="trash"></a></li>'+
+ '<li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>'+
+ '<li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>'+
+ '</ul>'+
+ '</div>'+
+ '</div>'+
+ '</div>';
+
+
+
+ //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<wActu) {
+ img.css('margin-left',(wActu-wImg)/2);
+ }else{
+ img.css('margin-left',-(wImg-wActu)/2);
+ }
+
+ if (hImg<hActu) {
+ img.css('margin-top',(hActu-hImg)/2);
+ }else{
+ img.css('margin-top',-(hImg-hActu)/2);
+ }
+ });
+ });
+
+ $("#liste").hide();
+})
\ No newline at end of file
--- a/integration/js/main.js Tue Nov 27 18:08:06 2012 +0100
+++ b/integration/js/main.js Wed Dec 12 18:17:52 2012 -0800
@@ -53,7 +53,6 @@
});
}
}
-
//DRAGGABLE
$(".cluster").draggable({ axis: "x",containment: ".cluster-containment" });
};
@@ -196,6 +195,4 @@
console.log('mouseover', $(this));
});
-
-
-});//jQuery
+});//jQuery
\ No newline at end of file
--- a/integration/js/treemap.js Tue Nov 27 18:08:06 2012 +0100
+++ b/integration/js/treemap.js Wed Dec 12 18:17:52 2012 -0800
@@ -1,93 +1,93 @@
-/* Génération de données aléatoires */
+$(function(){
+
+ var data = [],
+ startcolor = [ 0, 0, 255 ],
+ endcolor = [ 255, 255, 0 ]
+ elementcount = 8;
-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)
+ 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
});
- 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 */
-/* Génération du Treemap */
+ data = _(data).sortBy(function(d) { return -d.value; });
-data = _(data).sortBy(function(d) { return -d.value; });
+ var IDEALRATIO = 1.25;
-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;
+ 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 {
- 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 =
'<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+
'<a href="#">'+
'<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+
@@ -97,16 +97,14 @@
'<h2><a href="#"><%-label%></a></h2>'+
'<div class="links">'+
'<ul>'+
- '<li><a href="#" title="Supprimer le cluster" class="trash"></a></li>'+
'<li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>'+
- '<li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>';
-$(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<wActu) {
- img.css('margin-left',(wActu-wImg)/2);
- }else{
- img.css('margin-left',-(wImg-wActu)/2);
- }
- if (hImg<hActu) {
- img.css('margin-top',(hActu-hImg)/2);
- }else{
- img.css('margin-top',-(hImg-hActu)/2);
- }
+ if (wImg<wActu) {
+ img.css('margin-left',(wActu-wImg)/2);
+ }else{
+ img.css('margin-left',-(wImg-wActu)/2);
+ }
+ if (hImg<hActu) {
+ img.css('margin-top',(hActu-hImg)/2);
+ }else{
+ img.css('margin-top',-(hImg-hActu)/2);
+ }
+ });
});
$("#liste").hide();
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/liste-article.html Wed Dec 12 18:17:52 2012 -0800
@@ -0,0 +1,451 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>Liste d'article</title>
+ <link rel="stylesheet" href="css/reset.css" />
+ <link rel="stylesheet" href="css/common.css" />
+ <link rel="stylesheet" href="css/article.css" />
+ <link rel="stylesheet" href="css/ui-red/jquery-ui.css">
+ <script src="js/vendor/modernizr-2.6.1.min.js"></script>
+ </head>
+ <body>
+
+
+
+ <div class="wrap">
+ <div class="header">
+ <div class="logo">
+ <div class="date">
+ <span class="year">5</span>
+ <span class="text">années archivées</span>
+ </div>
+ </div>
+
+ <div class="recherche-wrap">
+ <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
+ <form action="#">
+ <p>
+ <a href="#" class="photo"></a>
+ <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
+ <input type="submit" title="Rechercher" value="" class="recherche-submit"/>
+ <a class="plus-button" title="Annoter" href="#"> </a>
+ </p>
+ </form>
+ </div>
+
+ <ul class="header-menu">
+ <li><a title="accueil" class="home" href="#"></a></li>
+ <li><a href="#">INTERNATIONAL</a></li>
+ <li><a href="#">FRANCE</a></li>
+ <li><a href="#">ECONOMIE</a></li>
+ <li><a href="#">CULTURE</a></li>
+
+ </ul>
+
+ <div class="login-wrap">
+ <h2>CONNECTER VOUS</h2>
+ <form action="#">
+ <p><input type="text" name="identifiant" placeholder="Identifiant" /></p>
+ <p class="submit-wrap">
+ <input class="password" type="password" name="password"/>
+ <input class="submit-button" type="submit" value="OK" />
+ </p>
+ </form>
+ <p class="password-lost"><a href="">Mot de passe oublié ?</a> </p>
+
+
+ </div>
+ <a href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a>
+
+ <div class="dossier-documentaire">
+ <div class="dossier-documentaire-inner">
+ <h2>MES DOSSIERS</h2>
+ <ul>
+ <li class="clearfix">
+ <a title="Voir le dossier" href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a title="Voir le dossier" href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a title="Voir le dossier" href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a title="Nouveau dossier documentaire" href="#">
+ <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>NOUVEAU DOSSIER</h3>
+ <p>Creér un dossier documentaire</p>
+ </span>
+ </a>
+ </li>
+
+ </ul>
+ <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
+ <h2></h2>
+ <ul>
+ <li class="clearfix">
+ <atitle="Voir le dossier" href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ <li class="clearfix">
+ <a title="Voir le dossier" href="#">
+ <img src="img/documentaire-visuel.jpg" alt="" />
+ <span class="documentaire-texte">
+ <h3>Terrorisme</h3>
+ <p>relation entre elation entre</p>
+ </span>
+ </a>
+ </li>
+ </ul>
+ <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
+ </div>
+ </div><!--dossier-documentaire-->
+ </div><!-- header -->
+
+ <div class="content-wrap clearfix">
+ <div class="frise">
+ <div class="streamgraph"></div>
+ <div id="slider-range"></div>
+ </div><!-- frise -->
+ <div class="cluster-wrap">
+ <a href="#" class="cluster-arrow arrow-left"></a>
+ <a href="#" class="cluster-arrow arrow-right"></a>
+ <div class="cluster-containment">
+ <div class="cluster-visible">
+
+ <ul class="cluster">
+ <li><a title="Afficher le cluster" href="#">Début</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">Fin</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="content clearfix">
+
+
+ <div class="content-left">
+ <h2> Affaire Bettencourt »</h2>
+ <div class="widget-wrapper">
+ <div class="widget-wrap">
+ <div class="widget recherche">
+ <h3><a href="#">RECHERCHE</a></h3>
+ <div class="widget-inner">
+ <form action="#" method="">
+ <p class="clearfix">
+ <input type="text" name="" placeholder="Rechercher" />
+ <input type="submit" title="Rechercher" value="" />
+ </p>
+ </form>
+ </div>
+ </div><!-- recherche -->
+ <div class="widget classer">
+ <h3><a href="#">CLASSER</a></h3>
+ <div class="widget-inner">
+ <form action="#" class="filtre-categorie">
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ </form>
+ </div>
+ </div><!-- classer -->
+ <div class="widget filtre">
+ <h3><a href="#">FILTRES</a></h3>
+ <div class="widget-inner">
+ <form action="#" class="filtre-date">
+ <p>
+ <label for="">De :</label>
+ <input type="text" name="dateBegin" class="dateBegin" />
+ </p>
+ <p>
+ <label for="">à :</label>
+ <input type="text" name="dateEnd" class="dateEnd" />
+ </p>
+ </form>
+ <h4>Catégories :</h4>
+ <form action="#" class="filtre-categorie">
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ <p><input type="checkbox"> <label for="">International</label> </p>
+ </form>
+ </div>
+ </div><!-- filtre -->
+ <div class="widget links">
+ <h3><a href="#">DOSSIER ASSOCIES</a></h3>
+ <div class="widget-inner">
+ <ul>
+ <li><a href="#">« Corruption »</a></li>
+ <li><a href="#">« Corruption »</a></li>
+ <li><a href="#">« Corruption »</a></li>
+ <li><a href="#">« Corruption »</a></li>
+ </ul>
+ </div>
+ </div><!-- links -->
+ <div class="widget affichage">
+ <h3><a href="#">AFFICHAGE</a></h3>
+ <div class="widget-inner">
+
+ <ul class="clearfix">
+ <li><a title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
+ <li><a title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
+ </ul>
+ </div>
+ </div><!-- affichage -->
+ </div><!-- widget-wrap -->
+ </div>
+ </div>
+
+ <div class="content-right">
+
+ <div class="articles">
+
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ </div>
+ </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="author">
+ <a href="#">23 JANVIER 2024</a><br/>
+ by <a href="#">Jean Dujardin</a>
+ </p>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipisicing
+ </p>
+ </div>
+ </div>
+ </div><!--article -->
+ </div><!-- articles -->
+
+ </div><!-- content-right -->
+ </div>
+ <div class="footer clearfix">
+ <div class="footer-information">
+ <h2>Information utiles</h2>
+ <ul>
+ <li>- <a href="#">Mentions légales</a></li>
+ <li>- <a href="#">Mentions légales</a></li>
+ <li>- <a href="#">Conditions d'utilisations générale</a></li>
+ <li>- <a href="#">Le projet Periplus</a></li>
+ </ul>
+ </div>
+ <div class="footer-raccourci">
+ <h2>Raccourcis</h2>
+ <ul>
+ <li>- Année <a href="#">2009</a>, <a href="#">2009</a>, <a href="#">2009</a></li>
+ <li>- <a href="#">International</a>, <a href="#">International</a>, <a href="#">International</a></li>
+ <li>- <a href="#">Conditions d'utilisations générale</a>
+ </ul>
+ </div>
+ <div class="footer-partenaire">
+ <h2>Partenaires</h2>
+ <ul>
+ <li><a title="iri" href="http://www.iri.centrepompidou.fr/" class="iri"></a></li>
+ <li><a title="cea" href="http://www.cea.fr/" class="cea"></a></li>
+ <li><a title="Alcatel" href="http://www.alcatel-lucent.com" class="alcatel"></a></li>
+ </ul>
+ </div>
+ <div class="footer-texte">
+ <p>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.
+ </p>
+ </div>
+ </div><!-- footer -->
+
+ </div><!-- content-wrap -->
+ <div class="copyright">
+ © Mediapart © Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale | <a href="#">CGV | <a href="#">Mediapart.fr</a>
+ </div>
+ </div>
+ <!-- JavaScript -->
+ <script src="js/vendor/jquery-1.8.0.min.js"></script>
+ <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
+ <script src="js/vendor/dragslider.js"></script>
+ <script src="js/lib/raphael-min.js"></script>
+ <script src="js/lib/underscore-min.js"></script>
+ <script src="js/plugins.js"></script>
+ <script src="js/main.js"></script>
+ <script src="js/streamgraph.js"></script>
+
+ </body>
+</html>
