--- a/.project Wed Aug 14 16:37:26 2013 +0200
+++ b/.project Wed Aug 14 16:38:48 2013 +0200
@@ -6,6 +6,11 @@
</projects>
<buildSpec>
<buildCommand>
+ <name>org.python.pydev.PyDevBuilder</name>
+ <arguments>
+ </arguments>
+ </buildCommand>
+ <buildCommand>
<name>com.aptana.ide.core.unifiedBuilder</name>
<arguments>
</arguments>
@@ -13,5 +18,6 @@
</buildSpec>
<natures>
<nature>com.aptana.projects.webnature</nature>
+ <nature>org.python.pydev.pythonNature</nature>
</natures>
</projectDescription>
--- a/integration/dossier-home.html Wed Aug 14 16:37:26 2013 +0200
+++ b/integration/dossier-home.html Wed Aug 14 16:38:48 2013 +0200
@@ -1,502 +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><span>Tous les Dossiers Documentaires : </span><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>
+<!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><span>Tous les Dossiers Documentaires : </span><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>
--- a/integration/js/streamgraph.js Wed Aug 14 16:37:26 2013 +0200
+++ b/integration/js/streamgraph.js Wed Aug 14 16:38:48 2013 +0200
@@ -229,5 +229,6 @@
}
$(function() {
+alert('loadStreamgraph');
loadStreamgraph("data/json_streamgraph.json");
})