--- a/timeline/js/timeline.js Tue Aug 13 13:16:26 2013 +0200
+++ b/timeline/js/timeline.js Tue Aug 13 16:22:32 2013 +0200
@@ -21,7 +21,7 @@
if(/^m(in|ax)_/.test(_k)) {
var _tab = _k.split('_')
if( typeof _object[_tab[1]] !== "undefined") {
- var _fn = (_tab[0] === "min" ? Math.max : Math.min);
+ var _fn = Math[_tab[0] === "max" ? "min":"max"];
_object[_tab[1]] = _fn(_object[_tab[1]], _v);
}
} else {
@@ -40,6 +40,7 @@
}
var _params = {
hours: _date.getHours(),
+ isDayStart: !_date.getHours(),
"0hours": Tlns.Utils.zeroPad(_date.getHours()),
minutes: _date.getMinutes(),
"0minutes": Tlns.Utils.zeroPad(_date.getMinutes()),
@@ -108,21 +109,6 @@
}
}
-Tlns.Utils.clickActiveProcess = function(_el) {
- if (_el.hasClass("Ls-Active")) {
- if (!_el.siblings(":not(.Ls-Active)").length) {
- _el.siblings().removeClass("Ls-Active");
- } else {
- if (!_el.siblings(".Ls-Active").length) {
- _el.siblings().addClass("Ls-Active");
- }
- _el.removeClass("Ls-Active");
- }
- } else {
- _el.addClass("Ls-Active");
- }
-}
-
/* Defaults */
Tlns.Defaults.Timeline = {
@@ -136,53 +122,39 @@
main_width : 700,
linelabels : [],
timescales : [{
- label : "Mois",
- span : 32 * 86400 * 1000,
- grid_interval : 5 * 86400 * 1000,
- grid_date_format : '{{dayOfMonth}} {{shortMonthName}}',
- start_date_format : '{{dayOfMonth}} {{shortMonthName}}',
- end_date_format : '{{dayOfMonth}} {{shortMonthName}} {{year}}'
- }, {
label : "Semaine",
- span : 8 * 86400 * 1000,
+ span : 7 * 86400 * 1000,
grid_interval : 86400 * 1000,
- grid_date_format : '{{shortDayOfWeek}} {{0dayOfMonth}}/{{0monthNumber}}',
+ grid_date_format : '{{dayOfMonth}} {{monthName}}',
start_date_format : '{{dayOfMonth}} {{shortMonthName}}',
end_date_format : '{{dayOfMonth}} {{shortMonthName}}'
}, {
- label : "2 jours",
- span : 2 * 86400 * 1000,
- grid_interval : 8 * 3600 * 1000,
- grid_date_format : '{{shortDayOfWeek}} {{0dayOfMonth}}/{{0monthNumber}} {{hours}}h',
+ label : "3 jours",
+ span : 3 * 86400 * 1000,
+ grid_interval : 6 * 3600 * 1000,
+ grid_date_format : '{{^isDayStart}}{{0hours}}h{{0minutes}}{{/isDayStart}}{{#isDayStart}}{{dayOfMonth}} {{shortMonthName}}{{/isDayStart}}',
start_date_format : '{{dayOfMonth}} {{shortMonthName}}',
end_date_format : '{{dayOfMonth}} {{shortMonthName}}'
}, {
- label : "Demi-Journée",
- span : 12 * 3600 * 1000,
+ label : "Journée",
+ span : 86400 * 1000,
grid_interval : 2 * 3600 * 1000,
- grid_date_format : '{{hours}}h',
+ grid_date_format : '{{^isDayStart}}{{0hours}}h{{0minutes}}{{/isDayStart}}{{#isDayStart}}{{dayOfMonth}} {{shortMonthName}}{{/isDayStart}}',
start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h',
end_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h'
}, {
- label : "3 Heures",
- span : 3 * 3600 * 1000,
- grid_interval : 30 * 60 * 1000,
- grid_date_format : '{{0hours}}:{{0minutes}}',
- start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{0hours}}:{{0minutes}}',
- end_date_format : '{{0hours}}:{{0minutes}}'
- }, {
- label : "1 Heure",
- span : 60 * 60 * 1000,
- grid_interval : 15 * 60 * 1000,
- grid_date_format : '{{0hours}}:{{0minutes}}',
- start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{0hours}}:{{0minutes}}',
- end_date_format : '{{0hours}}:{{0minutes}}'
+ label : "Demi-Journée",
+ span : 6 * 3600 * 1000,
+ grid_interval : 3600 * 1000,
+ grid_date_format : '{{^isDayStart}}{{0hours}}h{{0minutes}}{{/isDayStart}}{{#isDayStart}}{{dayOfMonth}} {{shortMonthName}}{{/isDayStart}}',
+ start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h',
+ end_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h'
}],
level: 0,
central_time: 0,
sync_now: true,
api_endpoint: "",
- api_method: "fetchAll",
+ api_method: "searchForTimelineEdito",
occurrences: [],
cluster_spacing: 12,
tooltip_date_format: '{{dayOfMonth}} {{shortMonthName}} {{year}} {{0hours}}:{{0minutes}}',
@@ -199,28 +171,13 @@
/* Templates */
-Tlns.Templates.Timeline = '<ul class="Onglets"><li class="Onglet-Tl active">Frise chronologique</li><li class="Onglet-Ls">Liste des occurrences</li></ul><div class="Tl-Main"><div class="Tl-TopBar">'
- + '<div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-PreviousButton"></div></div><div class="Tl-TopBar-TimeSpan Tl-TopBar-TextBtn Tl-Border-Right">--/--</div>'
- + '<div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-SyncButton"></div></div><div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-NextButton"></div></div><div class="Tl-TopBar-Spacer Tl-Border-Right"></div>'
- + '<div class="Tl-TopBar-Timescales">{{#timescales}}<div class="Tl-TopBar-Button Tl-TopBar-TextBtn Tl-Border-Right" data-level="{{level}}">{{label}}</div>{{/timescales}}</div></div>'
+Tlns.Templates.Timeline = '<div class="Tl-Main"><div class="Tl-Grid"></div><div class="Tl-TopBar"></div>'
+ '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul>'
- + '<div class="Tl-MainPart"><div class="Tl-Layer Tl-Grid"></div><div class="Tl-Layer Tl-Occurrences"></div>'
+ + '<div class="Tl-MainPart"><div class="Tl-Occurrences"></div>'
+ '</div>'
+ '<div class="Tl-Overlay-Container"><div class="Tl-Overlay-Box"><div class="Tl-Overlay"><div class="Tl-Overlay-Tip-Top"></div><div class="Tl-Overlay-Main"></div><div class="Tl-Overlay-Tip-Bottom"></div></div></div></div></div></div>'
- +'<div class="Ls-Main"><div class="Ls-Filtres">'
- + '<div class="Ls-Column"><h2>Filtres :</h2><h3>Univers :</h3><ul class="Ls-Univers"></ul></div>'
- + '<div class="Ls-Column"><h3>Type d\'occurrence :</h3><ul class="Ls-Occtypes"><li data="narrative" class="Ls-Critere Ls-Active Ls-CrWithIcon"><div class="Ls-OccIcon Tl-Occnarrative"></div>Narratives</li><li data="publication" class="Ls-Critere Ls-Active Ls-CrWithIcon"><div class="Ls-OccIcon Tl-Occpublication"></div>de Publication</li></ul>'
- + '<h3>Statut :</h3><ul class="Ls-Occstatuses"><li data="a_realiser" class="Ls-Critere Ls-Active Ls-CrWithIcon"><div class="Ls-OccIcon Tl-Occpublication Tl-Occa_realiser"></div>À réaliser</li><li data="a_valider" class="Ls-Critere Ls-Active Ls-CrWithIcon"><div class="Ls-OccIcon Tl-Occpublication Tl-Occa_valider"></div>À valider</li><li data="valide" class="Ls-Critere Ls-Active Ls-CrWithIcon"><div class="Ls-OccIcon Tl-Occpublication Tl-Occvalide"></div>Validé</li></ul></div>'
- + '<div class="Ls-Column"><h3>Format :</h3><ul class="Ls-Formats"></ul><h3>Est au JT :</h3><ul class="Ls-IsJt"><li class="Ls-Critere Ls-Active" data="1">Oui</li><li class="Ls-Critere Ls-Active" data="0">Non</li></ul></div>'
- + '<div class="Ls-Column"><h3>Réinitialiser filtres :</h3><ul><li class="Ls-Critere Ls-Active Ls-All">Tous les contenus</li></ul><h3>Recherche par titre :</h3><p><input class="Ls-Search" type="search" placeholder="Rechercher" /></p><h3>Date :</h3><p><label class="Ls-Label">Du </label><input class="Ls-From-Date Ls-Input" /></p><p><label class="Ls-Label">à </label><input class="Ls-From-Time Ls-Input" /></p><p><label class="Ls-Label">Au </label><input class="Ls-To-Date Ls-Input" /></p><p><label class="Ls-Label">à </label><input class="Ls-To-Time Ls-Input" /></p></div>'
- + '</div><div class="Ls-Resultats"><h2>Occurrences :</h2><ul class="Ls-Occurrences"></ul></div></div>';
-
-Tlns.Templates.Univers = '<span class="Tl-UniversText">{{title}}</span>';
-
-Tlns.Templates.Univers_List = '{{#univers}}<li data="{{id}}" class="Ls-Critere Ls-Active">{{title}}</li>{{/univers}}';
-
-Tlns.Templates.Formats_List = '{{#formats}}<li class="Ls-Critere Ls-Active">{{.}}</li>{{/formats}}';
+Tlns.Templates.Univers = '<div class="Tl-UniversText">{{title}}</div>';
Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}">'
+ '<div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}'
@@ -230,9 +187,6 @@
+ '{{#occurrences}}<div class="Tl-Occurrence Tl-OccInCluster Tl-Occ{{type}} Tl-Occ{{status}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}">'
+ '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}</div>{{/occurrences}}</div>{{/open_cluster}}';
-Tlns.Templates.Occurrence_List = '{{#occurrences}}<li class="Ls-Occurrence" data-id="{{id}}"><div class="Ls-OccIcon Tl-Occ{{type}} Tl-Occ{{status}}"></div><h4 class="Ls-Occurrence-Title"><a href="#">{{title}}</a></h4>'
- + '<p class="Ls-Occ-More">{{formatted_date}} — {{univers.title}} — {{translated_status}}{{#format}} — {{format}}{{/format}}</p><div style="clear:both;"></div></li>{{/occurrences}}';
-
Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3><p class="Tl-Tooltip-Date">{{formatted_date}} — {{translated_status}} — {{#jt}}Au JT{{/jt}}{{^jt}}Hors JT{{/jt}}{{#format}} — {{format}}{{/format}}</p>'
+ '<p class="Tl-Tooltip-Description">{{description}}</p>'
// + '<p class="Tl-Tooltip-Characters">{{univers.mainCharacter}}{{#characters}}, {{.}}{{/characters}}</p>'
@@ -251,10 +205,11 @@
width : this.width + "px",
height : this.height + "px"
});
- this.main_height = this.height - this.$.find('.Tl-TopBar').outerHeight();
+ this.top_height = this.$.find('.Tl-TopBar').outerHeight();
+ this.main_height = this.height - this.top_height;
//this.main_height = this.height - 27;
this.$.find('.Tl-BottomPart').css("height", this.main_height + "px");
- this.$.find('.Tl-MainPart').css("width", this.main_width + "px");
+ this.$.find('.Tl-MainPart, .Tl-Grid').css("width", this.main_width + "px");
this.$.find('.Tl-Overlay-Container').css("left", (this.$.find('.Tl-BottomPart').outerWidth() - this.main_width) + "px");
var _o = this.$.find('.Tl-MainPart').offset();
@@ -274,29 +229,8 @@
_this.drawGrid();
}, 150);
- this.throttledDrawList = _.throttle(function() {
- _this.drawList();
- }, 150);
-
this.setLevel(this.level);
-
- this.$.find('.Tl-TopBar-Timescales>div').click(function() {
- _this.setLevel($(this).attr("data-level"));
- });
-
- this.$.find('.Tl-TopBar-SyncButton').click(function() {
- _this.sync_now = !_this.sync_now;
- _this.changeSpan();
- })
-
- this.$.find('.Tl-TopBar-PreviousButton').click(function() {
- _this.offsetTime(-_this.timescales[_this.level].span / 4);
- });
-
- this.$.find('.Tl-TopBar-NextButton').click(function() {
- _this.offsetTime(_this.timescales[_this.level].span / 4);
- });
-
+
this.$.find('.Tl-MainPart').mousedown(function(_event) {
_this.onMouseDown(_event);
return false;
@@ -331,70 +265,7 @@
}).mouseout(function(_event) {
$(this).hide();
});
-
- /* LIST */
-
- this.$.find("li.Ls-Critere").click(function() {
- Tlns.Utils.clickActiveProcess($(this));
- _this.throttledDrawList();
- });
- this.$.find(".Ls-Search").bind("keyup change click", function() {
- _this.throttledDrawList();
- });
- this.$.find(".Ls-From-Date, .Ls-To-Date").datepicker(
- {
- dateFormat: "dd/mm/yy",
- dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
- dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ],
- dayNamesMin: [ "D", "L", "Ma", "Me", "J", "V", "S" ],
- monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ],
- monthNamesShort: [ "Jan", "Fév", "Mar", "Avr", "Mai", "Jun", "Jul", "Aoû", "Sep", "Oct", "Nov", "Déc" ],
- showOtherMonths: true,
- selectOtherMonths: true
- }
- ).change(function() {
- var _val = $(this).val();
- if (_val) {
- $(this).val(Tlns.Utils.dateFieldProcess( _val ).text);
- }
- _this.drawList();
- }).bind("keyup", function() {
- _this.throttledDrawList();
- });
- this.$.find(".Ls-From-Time, .Ls-To-Time").change(function() {
- var _val = $(this).val();
- if (_val) {
- $(this).val(Tlns.Utils.timeFieldProcess( _val ).text);
- }
- _this.throttledDrawList();
- }).bind("keyup", function() {
- _this.throttledDrawList();
- });
- this.$.find(".Ls-All").click(function() {
- _this.$.find(".Ls-Critere").addClass("Ls-Active");
- _this.throttledDrawList();
- });
- this.$.find(".Ls-None").click(function() {
- _this.$.find(".Ls-Critere").removeClass("Ls-Active");
- _this.throttledDrawList();
- });
-
- this.$.find(".Onglet-Tl").click(function() {
- _this.$.find(".Tl-Main").show();
- _this.$.find(".Ls-Main").hide();
- _this.$.find(".Onglet-Ls").removeClass("active");
- _this.$.find(".Onglet-Tl").addClass("active");
- _this.throttledDrawGrid();
- });
-
- this.$.find(".Onglet-Ls").click(function() {
- _this.$.find(".Ls-Main").show();
- _this.$.find(".Tl-Main").hide();
- _this.$.find(".Onglet-Tl").removeClass("active");
- _this.$.find(".Onglet-Ls").addClass("active");
- _this.throttledDrawList();
- });
this.onUniversLoaded(this.linelabels);
@@ -463,24 +334,6 @@
this.univers.push(new Tlns.Classes.Univers(_data[_i], this, _i));
}
- this.$.find(".Ls-Univers").html(
- Mustache.to_html(
- Tlns.Templates.Univers_List,
- {
- univers: _(this.univers).map(function(_u) {
- return {
- id: _u.id,
- title: _u.title.replace(/(^.{10,20})[\s].+$/m,'$1…')
- }
- })
- }
- )
- );
- var _this = this;
- this.$.find(".Ls-Univers li.Ls-Critere").click( function() {
- Tlns.Utils.clickActiveProcess($(this));
- _this.throttledDrawList();
- });
this.loadOccurrences();
}
@@ -496,14 +349,6 @@
Tlns.Classes.Timeline.prototype.setLevel = function(_level) {
if (_level >= 0 && _level < this.timescales.length) {
- this.$.find('.Tl-TopBar-Timescales>div').each(function() {
- var _el = $(this);
- if (_el.attr("data-level") == _level) {
- _el.addClass("active");
- } else {
- _el.removeClass("active");
- }
- });
this.level = _level;
this.changeSpan();
}
@@ -518,27 +363,16 @@
this.current_scale = this.main_width / (_timescale.span);
this.start_time = this.central_time - (_timescale.span / 2);
this.end_time = this.central_time + (_timescale.span / 2);
- this.$.find(".Ls-From-Time").val(Tlns.Utils.dateFormat(this.start_time, '{{0hours}}:{{0minutes}}'));
- this.$.find(".Ls-From-Date").val(Tlns.Utils.dateFormat(this.start_time, '{{0dayOfMonth}}/{{0monthNumber}}/{{year}}'));
- this.$.find(".Ls-To-Time").val(Tlns.Utils.dateFormat(this.end_time, '{{0hours}}:{{0minutes}}'));
- this.$.find(".Ls-To-Date").val(Tlns.Utils.dateFormat(this.end_time, '{{0dayOfMonth}}/{{0monthNumber}}/{{year}}'));
this.throttledDrawGrid();
- this.throttledDrawList();
}
Tlns.Classes.Timeline.prototype.drawGrid = function() {
- if (this.sync_now) {
- this.$.find('.Tl-TopBar-SyncButton').addClass("active");
- } else {
- this.$.find('.Tl-TopBar-SyncButton').removeClass("active");
- }
var _now = new Date().valueOf(),
_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,
_html = '';
- this.$.find('.Tl-TopBar-TimeSpan').html(Tlns.Utils.dateFormat(this.start_time, _timescale.start_date_format) + ' - ' + Tlns.Utils.dateFormat(this.end_time, _timescale.end_date_format));
for (var _t = _roundstart; _t < this.end_time; _t += _timescale.grid_interval) {
var _x = this.current_scale * (_t - this.start_time);
if (_x > 0) {
@@ -573,20 +407,6 @@
if (!this.mouse_down) {
this.drawOccurrences();
}
- this.$.find(".Ls-Formats").html(
- Mustache.to_html(
- Tlns.Templates.Formats_List,
- {
- formats: _(this.occurrences).chain().pluck('format').unique().value()
- }
- )
- );
- var _this = this;
- this.$.find(".Ls-Formats li.Ls-Critere").click( function() {
- Tlns.Utils.clickActiveProcess($(this));
- _this.throttledDrawList();
- });
- this.throttledDrawList();
}
Tlns.Classes.Timeline.prototype.deleteOccurrence = function(_id) {
@@ -763,66 +583,6 @@
})
}
-Tlns.Classes.Timeline.prototype.drawList = function() {
- var _universfilter = this.$.find(".Ls-Univers li.Ls-Active").map(function(){return $(this).attr("data")}),
- _occtypefilter = this.$.find(".Ls-Occtypes li.Ls-Active").map(function(){return $(this).attr("data")}),
- _formatsfilter = this.$.find(".Ls-Formats li.Ls-Active").map(function(){return $(this).text()}),
- _statusfilter = this.$.find(".Ls-Occstatuses li.Ls-Active").map(function(){return $(this).attr("data")}),
- _jtfilter = this.$.find(".Ls-IsJt li.Ls-Active").map(function(){return !!+$(this).attr("data")}),
- _title = this.$.find(".Ls-Search").val() || "",
- _titleregexp = new RegExp( "(" + _title.replace(/(\W)/gm, "\\$1") + ")", "gim" ),
- _startdate = false,
- _enddate = false,
- _fromDate = this.$.find(".Ls-From-Date").val(),
- _toDate = this.$.find(".Ls-To-Date").val();
- if (_fromDate) {
- var _date = Tlns.Utils.dateFieldProcess(_fromDate),
- _time = Tlns.Utils.timeFieldProcess(this.$.find(".Ls-From-Time").val());
- _startdate = new Date(_date.year, _date.month - 1, _date.date, _time.hours, _time.minutes);
- }
- if (_toDate) {
- var _date = Tlns.Utils.dateFieldProcess(_toDate),
- _time = Tlns.Utils.timeFieldProcess(this.$.find(".Ls-To-Time").val());
- _enddate = new Date(_date.year, _date.month - 1, _date.date, _time.hours, _time.minutes);
- }
- this.$.find(".Ls-Occurrences").html(
- Mustache.to_html(
- Tlns.Templates.Occurrence_List,
- {
- occurrences: _(this.occurrences).chain().filter(function(_occ) {
- var _titletest = (!!_occ.title.match(_titleregexp)),
- _keep = (
- ( !_title || _titletest )
- && _(_occtypefilter).include(_occ.type)
- && _(_universfilter).include(_occ.univers_id)
- && _(_statusfilter).include(_occ.status)
- && _(_formatsfilter).include(_occ.format)
- && _(_jtfilter).include(_occ.jt)
- && ( !_fromDate || _occ.date >= _startdate )
- && ( !_toDate || _occ.date <= _enddate )
- );
- return _keep;
- }).sortBy(function(_occ) {
- return _occ.date;
- }).value()
- }
- )
- );
- if (_title) {
- this.$.find(".Ls-Occurrence-Title").each(function() {
- $(this).html($(this).text().replace(_titleregexp, "<span style='background:yellow'>$1</span>"));
- });
- }
- this.$.find(".Ls-Occurrence").click(function() {
- var _id = $(this).attr("data-id"),
- _data = {
- id: _id.replace(/^.*_/,''),
- typeOccurrence: "Occurrence" + _id.replace(/_.*$/,'').replace(/^./,function(_l) { return _l.toUpperCase()})
- }
- return false;
- });
-}
-
Tlns.Classes.Timeline.prototype.getUnivers = function(_id) {
return _(this.univers).find(function(_univ) {
return (_univ.id == _id);
@@ -845,6 +605,9 @@
}).html(Mustache.to_html(Tlns.Templates.Univers, this));
_timeline.$.find('.Tl-UniversLabels').append(this.$label);
+
+ var txtdiv = this.$label.find(".Tl-UniversText");
+ txtdiv.css("margin-top", Math.floor((_timeline.univers_height - txtdiv.height()) / 2));
}
/*