eulalie: comparison timeline/js/timeline.js

Mercurial Mercurial > eulalie / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

timeline/js/timeline.js

changeset 102	2f1ef2ded30c
parent 101	05c1161fa501
child 103	b9a417017e19

equal deleted inserted replaced

-:05c1161fa501
+:2f1ef2ded30c
 timescales : [{
 label : "Semaine",
 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,
 grid_interval : 3600 * 1000,
 grid_date_format : '{{^isDayStart}}{{0hours}}h{{0minutes}}{{/isDayStart}}{{#isDayStart}}{{dayOfMonth}} {{shortMonthName}}{{/isDayStart}}',
 Tlns.Templates.Univers = '<div class="Tl-UniversText">{{title}}</div>';
 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}}'
++ '{{#image}}<img src="{{image}}" />{{/image}}{{#isFavorite}}<div class="Tl-Occurrence-Favorite"></div>{{/isFavorite}}'
-+ '</div>{{/occurrences}}';
++ '{{#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>';
 /* Classes */
 this.is_dragging = false;
 this.start_pos = {
 x: _event.pageX,
 y: _event.pageY
 };
-if (typeof this.dragging_type === "undefined") {
+this.time_at_start = this.central_time;
-this.time_at_start = this.central_time;
-this.dragging_type = "timeline";
-}
 };
 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) {
 return this.start_time + _x / this.current_scale;
 };
 this.is_dragging = true;
 }
 }
 if (this.is_dragging) {
 this.hideTooltip();
-switch (this.dragging_type) {
+this.setTime(this.time_at_start + Math.floor(( this.start_pos.x - _event.pageX ) / this.current_scale));
-case "timeline":
-this.setTime(this.time_at_start + Math.floor(( this.start_pos.x - _event.pageX ) / this.current_scale));
-break;
-}
 }
 };
 Tlns.Classes.Timeline.prototype.onUniversLoaded = function(_data) {
 this.univers = [];
 _occ.visible = (_occ.date >= minT && _occ.date <= _this.end_time && (_occ.importance >= minI));
 return _occ.visible;
 });
 /* 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,
 _grid_width = Math.floor(_timescale.grid_interval * this.current_scale),
 _roundstart = Math.floor((this.start_time - _offset) / _timescale.grid_interval) * _timescale.grid_interval + _offset,
 var _html = Mustache.to_html(Tlns.Templates.Occurrence, {
 occurrences: _visible
 });
 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;
 });
 _this.editing_occurrence.editing = true;
 _this.$.find(".Tl-Details").html(Mustache.to_html(Tlns.Templates.OccurrenceDetails, _this.editing_occurrence));
 }
 _this.throttledDrawGrid();
 }
-}).mouseover(function(_event) {
+}).mouseover(function(_event) { // Hover sur un contenu
 var _el = $(this),
 _id = _el.attr("occurrence-id");
 if (typeof _id !== "undefined") {
 var _occurrence = _this.getOccurrence(_id);
 if (!_this.is_dragging) {
 Tlns.Classes.Occurrence = function(_timeline) {
 this.timeline = _timeline;
 };
 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);
 this.formatted_date = Tlns.Utils.dateFormat(this.date,this.timeline.tooltip_date_format);
 this.title = _data.title;
 if (typeinfo.picto) {
 this.image = this.timeline.picto_url + typeinfo.picto;
 }
 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;
+/* Données temporaires aléatoires */
-//    this.characters = _data.personnagesSecondaires || [];
+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;');
 this.detail_description = trimmedDesc.replace(/(^.{360,380})[\s].+$/m,'$1&hellip;');
 this.url = this.timeline.url_base + _data.url;

eulalie