--- 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 {
Binary file timeline/img/favstar-small.png has changed
Binary file timeline/img/favstars-large.png has changed
Binary file timeline/img/participation-icon.png has changed
--- 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…');
