# HG changeset patch
# User veltr
# Date 1380893948 -7200
# Node ID 2f1ef2ded30c558a32e7c31ea76f90d466db4f63
# Parent  05c1161fa5017c8ff8098e8084fd9b07abe9f04b
Added favorites display and participation count with random data

diff -r 05c1161fa501 -r 2f1ef2ded30c timeline/css/timeline.css
--- a/timeline/css/timeline.css	Fri Oct 04 11:26:40 2013 +0200
+++ b/timeline/css/timeline.css	Fri Oct 04 15:39:08 2013 +0200
@@ -40,6 +40,7 @@
 .Tl-UniversLabels li:before {
     content: "."; position: absolute; height: 1px; text-indent: -9999px;
     width: 760px; top: 0; background: #DEDEDE; z-index: 5;
+    background: linear-gradient(to right, rgba(220,220,220,1) 80px, rgba(220,220,220,.1) 140px );
     background: -moz-linear-gradient(to right, rgba(220,220,220,1) 80px, rgba(220,220,220,.1) 140px );
     background: -webkit-linear-gradient(left, rgba(220,220,220,1) 80px, rgba(220,220,220,.1) 140px );
 }
@@ -58,6 +59,7 @@
 
 .Tl-Grid {
     position: absolute; top: 0; bottom: 0; overflow: hidden;
+    background: linear-gradient(to right, #cccccc 0, #f8f8f8 10%, #ffffff 20%, #ffffff 80%, #f8f8f8 90%, #cccccc 100% );
     background: -moz-linear-gradient(to right, #cccccc 0, #f8f8f8 10%, #ffffff 20%, #ffffff 80%, #f8f8f8 90%, #cccccc 100% );
     background: -webkit-linear-gradient(left,  #cccccc 0, #f8f8f8 10%, #ffffff 20%, #ffffff 80%, #f8f8f8 90%, #cccccc 100% );
 }
@@ -103,6 +105,15 @@
     position: absolute; margin-left: -2px; margin-top: 8px; background: rgba(0,0,0,.9);
 }
 
+.Tl-Occurrence-Favorite {
+    position: absolute; bottom: -8px; right: -8px; width: 16px; height: 16px; background: url(../img/favstar-small.png);
+}
+
+.Tl-Occurrence-Participation {
+    position: absolute; top: -8px; right: -8px; text-align: right; line-height: 14px; font-size: 10px; color: #ffffff; background: #009e1e;
+    padding: 0 4px; border-radius: 8px; border: 1px solid #ffffff; font-weight: bold;
+}
+
 .Tl-Overlay-Container {
     position: absolute; top: 0;
 }
@@ -144,8 +155,28 @@
     min-height: 135px; font-size: 12px; position: relative;
 }
 
-.Tl-Detail-Image {
-    float: left;
+.Tl-Detail-Image-Wrapper {
+    float: left; position: relative; width: 135px; height: 135px; background: #e0e0e0;
+}
+
+.Tl-Detail-Favorite {
+    float: right; width: 20px; height: 20px; background-image: url(../img/favstars-large.png);
+}
+
+.Tl-Detail-Favorite:hover, .Tl-Detail-isFavorite {
+    background-position: -20px 0;
+}
+
+.Tl-Detail-isFavorite:hover  {
+    background-position: 0 0;
+}
+
+.Tl-Detail-Participation {
+    position: absolute; bottom: 0; right: 0; padding: 10px; background: rgba(0,0,0,.5); color: #ffffff; font-size: 12px;
+}
+
+.Tl-Participation-Icon {
+    width: 13px; height: 13px; display: inline-block; margin: 0 0 -2px 5px; background: url(../img/participation-icon.png);
 }
 
 .Tl-Detail-Title {
diff -r 05c1161fa501 -r 2f1ef2ded30c timeline/img/favstar-small.png
Binary file timeline/img/favstar-small.png has changed
diff -r 05c1161fa501 -r 2f1ef2ded30c timeline/img/favstars-large.png
Binary file timeline/img/favstars-large.png has changed
diff -r 05c1161fa501 -r 2f1ef2ded30c timeline/img/participation-icon.png
Binary file timeline/img/participation-icon.png has changed
diff -r 05c1161fa501 -r 2f1ef2ded30c timeline/js/timeline.js
--- a/timeline/js/timeline.js	Fri Oct 04 11:26:40 2013 +0200
+++ b/timeline/js/timeline.js	Fri Oct 04 15:39:08 2013 +0200
@@ -134,19 +134,19 @@
         span : 7 * 86400 * 1000,
         grid_interval : 86400 * 1000,
         grid_date_format : '{{dayOfMonth}} {{monthName}}',
-        min_importance : 3
+        min_importance : 3 //0 //pour les tests, mettre à 0 pour tout afficher
     }, {
         label : "3 jours",
         span : 3 * 86400 * 1000,
         grid_interval : 6 * 3600 * 1000,
         grid_date_format : '{{^isDayStart}}{{0hours}}h{{0minutes}}{{/isDayStart}}{{#isDayStart}}{{dayOfMonth}} {{shortMonthName}}{{/isDayStart}}',
-        min_importance : 2
+        min_importance : 2 //0 //pour les tests, mettre à 0 pour tout afficher
     }, {
         label : "Journée",
         span : 86400 * 1000,
         grid_interval : 2 * 3600 * 1000,
         grid_date_format : '{{^isDayStart}}{{0hours}}h{{0minutes}}{{/isDayStart}}{{#isDayStart}}{{dayOfMonth}} {{shortMonthName}}{{/isDayStart}}',
-        min_importance : 1
+        min_importance : 1 //0 //pour les tests, mettre à 0 pour tout afficher
     }, {
         label : "Demi-Journée",
         span : 6 * 3600 * 1000,
@@ -236,12 +236,15 @@
 
 Tlns.Templates.Occurrence =
     '{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;">'
-    + '{{#image}}<img src="{{image}}" />{{/image}}'
-    + '</div>{{/occurrences}}';
+    + '{{#image}}<img src="{{image}}" />{{/image}}{{#isFavorite}}<div class="Tl-Occurrence-Favorite"></div>{{/isFavorite}}'
+    + '{{#participationCount}}<div class="Tl-Occurrence-Participation">{{participationCount}}</div>{{/participationCount}}</div>{{/occurrences}}';
 
 Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3>';
 
-Tlns.Templates.OccurrenceDetails = '<div class="Tl-Detail"><div class="Tl-Detail-X"></div><img class="Tl-Detail-Image" src="{{detail_image}}" />'
+Tlns.Templates.OccurrenceDetails = 
+    '<div class="Tl-Detail"><div class="Tl-Detail-X"></div><div class="Tl-Detail-Favorite{{#isFavorite}} Tl-Detail-isFavorite{{/isFavorite}}"></div>'
+    + '<div class="Tl-Detail-Image-Wrapper"><img class="Tl-Detail-Image" src="{{detail_image}}" />'
+    + '{{#participationCount}}<div class="Tl-Detail-Participation">{{participationCount}}<span class="Tl-Participation-Icon"></span></div>{{/participationCount}}</div>'
     + '<h2 class="Tl-Detail-Title">{{title}}</h2><p class="Tl-Detail-Description">{{detail_description}}</p>'
     + '<div class="Tl-Detail-Bottom"><span class="Tl-Detail-Date">Publié le {{formatted_date}}</span><a class="Tl-Detail-Read" href="{{url}}" target="_blank">Lire la suite</a></div></div>';
 
@@ -366,16 +369,12 @@
         x: _event.pageX,
         y: _event.pageY
     };
-    if (typeof this.dragging_type === "undefined") {
-        this.time_at_start = this.central_time;
-        this.dragging_type = "timeline";
-    }
+    this.time_at_start = this.central_time;
 };
 
 Tlns.Classes.Timeline.prototype.onMouseUp = function(_event) {
     this.mouse_down = false;
     this.is_dragging = false;
-    this.dragging_type = undefined;
 };
 
 Tlns.Classes.Timeline.prototype.timeFromX = function(_x) {
@@ -405,11 +404,7 @@
     }
     if (this.is_dragging) {
         this.hideTooltip();
-        switch (this.dragging_type) {
-            case "timeline":
-                this.setTime(this.time_at_start + Math.floor(( this.start_pos.x - _event.pageX ) / this.current_scale));
-            break;
-        }
+        this.setTime(this.time_at_start + Math.floor(( this.start_pos.x - _event.pageX ) / this.current_scale));
     }
 };
 
@@ -565,6 +560,7 @@
     });
     
     /* FILTRAGE SI TROP D'OCCURRENCES PAR UNITE DE TEMPS */
+    /* Commenter la partie ci-dessous pour les tests */
     
     var _timescale = this.timescales[this.level],
         _offset = new Date().getTimezoneOffset() * 60000,
@@ -614,14 +610,11 @@
     });
     this.$.find('.Tl-Occurrences').html(_html);
         
-    this.$.find('.Tl-Occurrence').mousedown(function() {
+    this.$.find('.Tl-Occurrence').mousedown(function() { // Clic sur un contenu
         var _el = $(this),
             _id = _el.attr("occurrence-id");
         if (typeof _id !== "undefined") {
             _this.editing_occurrence = _this.getOccurrence(_id);
-            if (typeof _this.dragging_type === "undefined" && typeof _this.editing_occurrence !== "undefined" /* && !_this.editing_occurrence.locked */ ) {
-                _this.dragging_type = "occurrence";
-            }
             if (!_this.editing_occurrence.editing) {
                 _(_this.occurrences).each(function(_occ) {
                     _occ.editing = false;
@@ -631,7 +624,7 @@
             }
             _this.throttledDrawGrid();
         }
-    }).mouseover(function(_event) {
+    }).mouseover(function(_event) { // Hover sur un contenu
         var _el = $(this),
             _id = _el.attr("occurrence-id");
         if (typeof _id !== "undefined") {
@@ -696,6 +689,9 @@
 };
 
 Tlns.Classes.Occurrence.prototype.update = function(_data) {
+    
+    /* Récupération des propriétés du JSON */
+    
     this.original_data = _data;
     this.id = _data.id;
     this.date = new Date(1000 * (_data.dateFirstPublication || _data.dateCreate) || Date.now);
@@ -717,9 +713,14 @@
     }
     this.univers = this.timeline.univers[this.univers_id];
     this.format = typeinfo.label;
-//    this.published = (_data.publication && _data.publication == "En ligne");
-//    this.locked = _data.verrouille || false;
-//    this.characters = _data.personnagesSecondaires || [];
+    
+    /* Données temporaires aléatoires */
+    this.isFavorite = (Math.random() > 1/2); // A random Boolean ;-)
+    if (this.univers_id >= 2) {
+        this.participationCount = Math.floor(12*Math.random());
+    }
+    /* End Temporary Data */
+    
     var _tmp = $('<p>').html(_data.resume || "");
     var trimmedDesc = _tmp.text().trim().replace(/(\n|\r|\r\n)/mg,' ');
     this.description = trimmedDesc.replace(/(^.{60,80})[\s].+$/m,'$1&hellip;');