Binary file crea/data/article.jpg has changed
Binary file crea/data/article.psd has changed
Binary file crea/data/cluster.jpg has changed
Binary file crea/data/cluster.psd has changed
Binary file crea/data/documentaire.jpg has changed
Binary file crea/data/documentaire.psd has changed
Binary file crea/data/dossiers-documentaires.jpg has changed
Binary file crea/data/dossiers-documentaires.psd has changed
Binary file crea/data/header.jpg has changed
Binary file crea/data/header.psd has changed
Binary file crea/data/liste.jpg has changed
Binary file crea/data/liste.psd has changed
Binary file crea/data/pagination.jpg has changed
Binary file crea/data/pagination.psd has changed
Binary file crea/data/treemap.jpg has changed
Binary file crea/data/treemap.psd has changed
Binary file crea/data/widget.jpg has changed
Binary file crea/data/widget.psd has changed
--- a/integration/article.html Tue Oct 30 18:04:28 2012 +0100
+++ b/integration/article.html Tue Nov 27 18:08:06 2012 +0100
@@ -29,7 +29,7 @@
<div class="recherche-wrap">
<h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
<form action="#">
- <p >
+ <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/integration/css/article.css Tue Oct 30 18:04:28 2012 +0100
+++ b/integration/css/article.css Tue Nov 27 18:08:06 2012 +0100
@@ -9,6 +9,16 @@
float: left;
border-bottom: 1px solid #e0dde0;
}
+.articles .tooltip{
+ width: 209px;
+ height: 155px;
+ position: absolute;
+ background: url(../img/white_arrow_long.png) 0 0 no-repeat;
+ z-index: 200;
+ line-height: 150px;
+ text-align: center;
+ display: none;
+}
.article:hover{
background-color: #eee;
}
--- a/integration/css/common.css Tue Oct 30 18:04:28 2012 +0100
+++ b/integration/css/common.css Tue Nov 27 18:08:06 2012 +0100
@@ -356,16 +356,20 @@
right: 0;
background: url(../img/cluster-arrows.png) no-repeat -19px 0;
}
-.cluster-arrow.arrow-right:hover{
+
+.cluster-arrow.arrow-right.bute{
background-position: -19px -22px;
}
-.cluster-arrow.arrow-right:active{
+.cluster-arrow:not(.bute).arrow-right:active,
+.cluster-arrow:not(.bute).arrow-right:hover{
background-position: -19px -44px;
}
-.cluster-arrow.arrow-left:hover{
+
+.cluster-arrow.arrow-left.bute{
background-position: 0 -22px;
}
-.cluster-arrow.arrow-left:active{
+.cluster-arrow:not(.bute).arrow-left:hover,
+.cluster-arrow:not(.bute).arrow-left:active{
background-position: 0 -44px;
}
/* content */
@@ -547,10 +551,12 @@
display: block;
font-size: 11px;
}
-.treemap:hover .visuel, .treemap:hover .visuel{
+.widget.affichage .treemap.active .visuel,
+.widget.affichage .treemap:hover .visuel{
background-position: 0 -36px;
}
-.widget.affichage .liste:hover .visuel, .widget.affichage .treemap.active .visuel{
+.widget.affichage .liste:hover .visuel,
+.widget.affichage .liste.active .visuel{
background-position: 0 -36px;
}
.widget.affichage li a{
@@ -676,4 +682,15 @@
}
.pagination .active,.pagination a:hover{
text-decoration: none;
-}
\ No newline at end of file
+}
+/**/
+.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;
+
+}
--- a/integration/css/home.css Tue Oct 30 18:04:28 2012 +0100
+++ b/integration/css/home.css Tue Nov 27 18:08:06 2012 +0100
@@ -3,6 +3,18 @@
float: left;
position: relative;
}
+.actu .voile{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background-color: #c51810;
+ top: 0;
+ left: 0;
+ zoom: 1;
+ filter: alpha(opacity=30);
+ opacity: 0.3;
+ display: none;
+}
.inner-actu{
width: 100%;
background-color:rgba(0,0,0,.7);
@@ -26,7 +38,7 @@
bottom: 0;
right: 0;
}
-.actu:hover .links{
+.actu:hover .links, .actu:hover .voile{
display: block;
}
.links li{
--- a/integration/documentaire.html Tue Oct 30 18:04:28 2012 +0100
+++ b/integration/documentaire.html Tue Nov 27 18:08:06 2012 +0100
@@ -40,7 +40,7 @@
</div>
<ul class="header-menu">
- <li><a href="#"><img src="img/home-button.jpg" alt="" /> </a></li>
+ <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>
--- a/integration/gabarit.html Tue Oct 30 18:04:28 2012 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,412 +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>Gabarit</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 href="#"><img src="img/home-button.jpg" alt="" /> </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="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><!-- 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="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 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><!-- 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 Oct 30 18:04:28 2012 +0100
+++ b/integration/home.html Tue Nov 27 18:08:06 2012 +0100
@@ -10,14 +10,16 @@
<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">
@@ -30,44 +32,44 @@
<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" value="" class="recherche-submit"/>
+ <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"/>
</p>
</form>
</div>
<ul class="header-menu">
- <li><a href="#"><img src="img/home-button.jpg" alt="" /> </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>
+ <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>
+ <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-cluster" 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><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 class="password" type="password" name="password"/>
- <input class="submit-button" type="submit" value="OK" />
+ <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 href="">Mot de passe oublié ?</a> </p>
+ <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 href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a>
+ <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 href="#">
+ <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>
@@ -94,7 +96,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <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>
@@ -104,7 +106,7 @@
</li>
</ul>
- <a class="documentaire-lien" href="#"></a>
+ <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">
@@ -160,104 +162,215 @@
</div>
<div class="content-right">
- <div class="actus">
- <!--
- <div class="actu">
- <a href="#">
- <img src="img/home-visuel-1.jpg" alt="" />
- </a>
- <div class="inner-actu">
- <h2> <a href="#">Affaires Bettecourt</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>
+
+ <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>
- <div class="actu">
- <a href="#">
- <img src="img/home-visuel-1.jpg" alt="" />
- </a>
- <div class="inner-actu">
- <h2> <a href="#">Affaires Bettecourt</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>
+ </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>
+ </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="actu">
- <a href="#">
- <img src="img/home-visuel-3.jpg" alt="" />
- </a>
- <div class="inner-actu">
- <h2> <a href="#">Affaires Bettecourt</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>
+ <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>
- <div class="actu">
- <a href="#">
- <img src="img/home-visuel-2.jpg" alt="" />
- </a>
- <div class="inner-actu">
- <h2> <a href="#">Affaires Bettecourt</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>
+ </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>
- <div class="actu">
- <a href="#">
- <img src="img/home-visuel-4.jpg" alt="" />
- </a>
- <div class="inner-actu">
- <h2> <a href="#">Affaires Bettecourt</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>
+ </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>
- <div class="actu">
- <a href="#">
- <img src="img/home-visuel-3.jpg" alt="" />
- </a>
- <div class="inner-actu">
- <h2> <a href="#">Affaires Bettecourt</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>
+ </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>
- -->
- <div id="treemap1">
-
- </div>
- </div> <!-- actus -->
+ </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 -->
@@ -308,8 +421,9 @@
<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/treemap.js"></script>
<script src="js/main.js"></script>
<script src="js/streamgraph.js"></script>
- <script src="js/treemap.js"></script>
+
</body>
</html>
Binary file integration/img/white_arrow_long.png has changed
--- a/integration/js/main.js Tue Oct 30 18:04:28 2012 +0100
+++ b/integration/js/main.js Tue Nov 27 18:08:06 2012 +0100
@@ -5,56 +5,71 @@
$('.cluster').width( clusterWidth );
var clusterVisibleWidth = $(".cluster-visible").width();
var clusterVisibleLeft = 20;
+ $(".arrow-left").addClass('bute');
if (clusterWidth>clusterVisibleWidth) {
$(".cluster-containment").css({
"left": -(clusterWidth-clusterVisibleWidth),
"width":clusterWidth+(clusterWidth-clusterVisibleWidth+clusterVisibleLeft)
});
$(".cluster-visible").css({"left": (clusterWidth-912+clusterVisibleLeft)});
+
$("a.cluster-arrow").bind("click",function(e){
-
e.preventDefault();
+ $(".cluster").stop();
+ moveCluster(this, 5);
+ });
+
+
+ $("a.cluster-arrow").hover(
+ function(){
+ moveCluster(this, 20);
+ },
+ function(){
+ $(".cluster").stop();
+ }
+ );
+
+ function moveCluster(arrow, speed){
var clusterContainmentLeft = parseInt($(".cluster-containment").css("left"));
var clusterContainmentRight = parseInt($(".cluster-containment").css("left")) + $(".cluster-containment").width();
var clusterLeft = parseInt($(".cluster").css("left"));
var clusterRight = parseInt($(".cluster").css("left"))+$(".cluster").width();
- if ($(this).hasClass("arrow-right")) {
- if (clusterLeft-40>clusterContainmentLeft) {
- $(".cluster").css({
- "left":"-="+40
- });
- }else{
- $(".cluster").css({
- "left":clusterContainmentLeft
- });
- }
-
- }else if($(this).hasClass("arrow-left")){
-
- if (clusterRight+40<clusterContainmentRight) {
- $(".cluster").css({
- "left":"+="+40
- });
- }else{
- $(".cluster").css({
- "left":0
- });
- }
+
+ if ($(arrow).hasClass("arrow-right")) {
+ $(".arrow-left").removeClass('bute');
+ vitesse = (clusterLeft-clusterContainmentLeft)*speed;
+ $(".cluster").animate({
+ "left":clusterContainmentLeft
+ },vitesse,'linear',function(){
+ $(arrow).addClass('bute');
+ });
+ }else{
+ $(".arrow-right").removeClass('bute');
+ vitesse = (clusterContainmentRight-clusterRight)*speed;
+ $(".cluster").animate({
+ "left":0
+ },vitesse,'linear',function(){
+ $(arrow).addClass('bute');
+ });
}
- });
-
+ }
+
//DRAGGABLE
$(".cluster").draggable({ axis: "x",containment: ".cluster-containment" });
};
//WIDGET
//HEIGHT
- var contentRightHeight = $(".content-right").height();
- var contentLeftHeight = $(".content-left").height();
- if(contentRightHeight>contentLeftHeight){
- $(".content-left .widget-wrap").css({
- "height":"+="+(contentRightHeight-contentLeftHeight)
- });
+ function resizeWidgetSidebar(){
+ var contentRightHeight = $(".content-right").height();
+ var contentLeftHeight = $(".content-left").height();
+ if(contentRightHeight>contentLeftHeight){
+ $(".content-left .widget-wrap").css({
+ "height":"+="+(contentRightHeight-contentLeftHeight)
+ });
+ }
}
+ resizeWidgetSidebar();
+
//VOLET
//Tout fermer par défaut
//$("div.content-left div.widget-wrap div.widget div.widget-inner").hide().removeClass("open");
@@ -78,10 +93,13 @@
if ($(this).hasClass("treemap") && !$(this).hasClass("active")) {
$('.widget.affichage li a.liste').removeClass("active");
$(this).addClass('active');
+ $('#liste').hide();$('#treemap').show();
}else if($(this).hasClass("liste") && !$(this).hasClass("active")){
$('.widget.affichage li a.treemap').removeClass("active");
$(this).addClass('active');
+ $('#liste').show();$('#treemap').hide();
}
+ resizeWidgetSidebar();
});
//DATE PICKER
$(".dateBegin").datepicker({
@@ -107,8 +125,8 @@
}
});
*/
- $("div.header a.dossier-button").bind("click",function(e){e.preventDefault();});
- $("div.header a.dossier-button, div.header div.dossier-documentaire").hover(
+ $(".header .dossier-button").bind("click",function(e){e.preventDefault();});
+ $(".header .dossier-button, .header .dossier-documentaire").hover(
function(){
$("div.dossier-documentaire").stop().slideDown();
},
@@ -121,6 +139,18 @@
var contentHeight = $(this).parents(".article-content").height();
//$(this).height(contentHeight);
});
+ $(".article-annotations a").hover(
+ function(){
+ var x = $(this).offset().left + $(this).width()/2;
+ var y = $(this).offset().top;
+ var text = $(this).attr('title');
+ showTooltip(x,y,text);
+ },
+ function(){
+ var tip = $(".tooltip");
+ tip.hide();
+ }
+ );
//FRISE
//valeurs init du slider à définir
var valSlider1 = 75;
@@ -146,6 +176,26 @@
}
});
+//TOOLTIP
+ function showTooltip(x,y, text) {
+ //white_arrow_long.png
+ var tip = $(".tooltip");
+ tip.show();
+ tip.css({
+ "left" : Math.floor(x - tip.outerWidth() / 2) + "px",
+ "top" : Math.floor(y - tip.outerHeight()) + "px"
+ }).text(text);
+ }
-
+//HOME TREEMAP
+ var lastActuBind = false;
+ $('#treemap').on('mouseover', '.actu', function(){
+ if(this == lastActuBind) return;
+ lastActuBind = this;
+
+ console.log('mouseover', $(this));
+
+ });
+
+
});//jQuery
--- a/integration/js/treemap.js Tue Oct 30 18:04:28 2012 +0100
+++ b/integration/js/treemap.js Tue Nov 27 18:08:06 2012 +0100
@@ -91,6 +91,7 @@
'<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>'+
@@ -103,44 +104,52 @@
'</div>'+
'</div>'+
'</div>';
-var tmpl = _.template(actu);
-squarify(data,0,0,760,358);
-
-document.getElementById('treemap1').innerHTML = _(data).reduce(function(mem, d) {
- return mem + tmpl(d);
-},"");
-//redimensionnement d'image
-$(".actu").each(function(k,v){
- var wActu = $(this).width();
- var hActu = $(this).height();
- var img = $(this).find('img');
- var wImg = img.width();
- var hImg = img.height();
+$(function(){
+ //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);
- var ratioImg = wImg/hImg;
- img.css('height',hActu);
- img.css('width',hActu*ratioImg);
- wImg = img.width();
- hImg = img.height();
+ //redimensionnement d'image
+ $(".actu").each(function(k,v){
+ var wActu = $(this).width();
+ var hActu = $(this).height();
+ var img = $(this).find('img');
+ 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);
- }
-});
\ No newline at end of file
+ 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
