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 77	04b8157f077b
parent 75	ef3377d7a4f7
child 78	3fe54fb581f5

equal deleted inserted replaced

-:9b98700d12b7
+:04b8157f077b
 end_date_format : '{{0hours}}:{{0minutes}}'
 }],
 level: 0,
 central_time: 0,
 sync_now: true,
-url_occurrences: '',
+urls_occurrences: [],
 occurrences: [],
 cluster_spacing: 12,
 tooltip_date_format: '{{dayOfMonth}} {{shortMonthName}} {{year}} {{0hours}}:{{0minutes}}',
 statuses: {
 "valide": "Validée",
 Tlns.Defaults.Timeline.timescales[_i].level = _i;
 }
 /* Templates */
-Tlns.Templates.Timeline = '<ul class="Onglets"><li>Frise chronologique</li><li>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-AddButton"></div></div><div class="Tl-TopBar-Spacer Tl-Border-Right"></div>'
+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-AddButton"></div></div><div class="Tl-TopBar-Spacer Tl-Border-Right"></div>'
 + '<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>'
 + '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul>'
 + '<div class="Tl-MainPart"><div class="Tl-Layer Tl-Grid"></div><canvas class="Tl-Layer Tl-Canvas"></canvas><canvas class="Tl-Layer Tl-Linking-Canvas"></canvas><div class="Tl-Layer Tl-Occurrences"></div>'
 + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}<div class="Tl-Link"{{#editing}} style="display: block"{{/editing}}></div></div>{{/occurrences}}</div>{{/open_cluster}}';
 Tlns.Templates.Occurrence_List = '{{#occurrences}}<li class="Ls-Occurrence"><div class="Ls-OccIcon Tl-Occ{{type}} Tl-Occ{{status}}"></div><div class="Ls-Occurrence-Title">{{title}}</div><div class="Tl-Tooltip-Date">{{formatted_date}}</div><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}}</p>'
-+ '<p class="Tl-Tooltip-Description">{{description}}</p><p class="Tl-Tooltip-Characters">{{univers.mainCharacter}}{{#characters}}, {{.}}{{/characters}}</p>'
++ '<p class="Tl-Tooltip-Description">{{description}}</p>'
+//    + '<p class="Tl-Tooltip-Characters">{{univers.mainCharacter}}{{#characters}}, {{.}}{{/characters}}</p>'
 /* Classes */
 Tlns.Classes.Timeline = function(_options) {
 _this.setLevel($(this).attr("data-level"));
 });
 this.$.find('.Tl-TopBar-SyncButton').click(function() {
 _this.sync_now = !_this.sync_now;
-_this.drawGrid();
+_this.changeSpan();
 })
 this.$.find('.Tl-TopBar-PreviousButton').click(function() {
 _this.offsetTime(-_this.timescales[_this.level].span / 4);
 });
 _d = _this.timeFromMouse(_event.pageX),
 _u = _this.universFromMouse(_event.pageY),
 _occ = _this.createOrUpdateOccurrence(
 _type,
 {
-date: _d,
+datePublication: Math.floor(_d / 1000),
 titre: '<Nouvelle occurrence>',
-univers: _this.univers[_u].id,
+idUnivers: _this.univers[_u].id,
-publie: true,
 statut: 'a_realiser'
 }
 );
 _occ.just_created = true;
 _occ.editing = true;
 _this.onUniversLoaded(_data);
 });
 /* LIST */
-$("li.Ls-Critere").click(function() {
+this.$.find("li.Ls-Critere").click(function() {
 $(this).toggleClass("Ls-Active");
 _this.throttledDrawList();
 });
-$(".Ls-Search").bind("keyup change click", function() {
+this.$.find(".Ls-Search").bind("keyup change click", function() {
 _this.throttledDrawList();
 });
-$(".Ls-From-Date, .Ls-To-Date").datepicker(
+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" ],
 }
 _this.drawList();
 }).bind("keyup", function() {
 _this.throttledDrawList();
 });
-$(".Ls-From-Time, .Ls-To-Time").change(function() {
+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(".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.$.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");
+});
 }
 Tlns.Classes.Timeline.prototype.onMouseDown = function(_event) {
 this.mouse_down = true;
 this.is_dragging = false;
 }
 for(var _i = 0; _i < _data.length; _i++) {
 this.univers.push(new Tlns.Classes.Univers(_data[_i], this, _i));
 }
-$(".Ls-Univers").html(Mustache.to_html(Tlns.Templates.Univers_List, this));
+this.$.find(".Ls-Univers").html(Mustache.to_html(Tlns.Templates.Univers_List, this));
 var _this = this;
-$(".Ls-Univers li.Ls-Critere").click( function() {
+this.$.find(".Ls-Univers li.Ls-Critere").click( function() {
 $(this).toggleClass("Ls-Active");
 _this.throttledDrawList();
 });
 this.loadOccurrences();
 }
 Tlns.Classes.Timeline.prototype.changeSpan = function() {
 var _now = new Date().valueOf();
 if (this.sync_now) {
 this.central_time = _now;
-this.$.find('.Tl-TopBar-SyncButton').addClass("active");
-} else {
-this.$.find('.Tl-TopBar-SyncButton').removeClass("active");
 }
 var _timescale = this.timescales[this.level];
 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);
-$(".Ls-From-Time").val(Tlns.Utils.dateFormat(this.start_time, '{{0hours}}:{{0minutes}}'));
+this.$.find(".Ls-From-Time").val(Tlns.Utils.dateFormat(this.start_time, '{{0hours}}:{{0minutes}}'));
-$(".Ls-From-Date").val(Tlns.Utils.dateFormat(this.start_time, '{{0dayOfMonth}}/{{0monthNumber}}/{{year}}'));
+this.$.find(".Ls-From-Date").val(Tlns.Utils.dateFormat(this.start_time, '{{0dayOfMonth}}/{{0monthNumber}}/{{year}}'));
-$(".Ls-To-Time").val(Tlns.Utils.dateFormat(this.end_time, '{{0hours}}:{{0minutes}}'));
+this.$.find(".Ls-To-Time").val(Tlns.Utils.dateFormat(this.end_time, '{{0hours}}:{{0minutes}}'));
-$(".Ls-To-Date").val(Tlns.Utils.dateFormat(this.end_time, '{{0dayOfMonth}}/{{0monthNumber}}/{{year}}'));
+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,
 this.$.find('.Tl-Grid').html(_html);
 this.drawOccurrences();
 }
 Tlns.Classes.Timeline.prototype.loadOccurrences = function() {
-var _url = Mustache.to_html(this.url_occurrences, {
+var _this = this;
-from_time: this.start_time,
+_(this.urls_occurrences).each(function(_url_occ) {
-to_time: this.end_time
+$.getJSON(_url_occ.url, function(_data) {
-}),
+_this.onOccurrencesLoaded(_data, _url_occ.type);
-_this = this;
+});
-$.getJSON(_url, function(_data) {
+});
-_this.onOccurrencesLoaded(_data);
-});
+}
-}
+Tlns.Classes.Timeline.prototype.onOccurrencesLoaded = function(_data, _type) {
-Tlns.Classes.Timeline.prototype.onOccurrencesLoaded = function(_data) {
+for (var _i = 0; _i < _data.length; _i++) {
-if (typeof _data.occurrencesNarratives === "object" && _data.occurrencesNarratives !== null) {
+this.createOrUpdateOccurrence(_type, _data[_i]);
-for (var _i = 0; _i < _data.occurrencesNarratives.length; _i++) {
-this.createOrUpdateOccurrence("narrative", _data.occurrencesNarratives[_i]);
-}
-for (var _i = 0; _i < _data.occurrencesPublication.length; _i++) {
-this.createOrUpdateOccurrence("publication", _data.occurrencesPublication[_i]);
-}
 }
 if (!this.mouse_down) {
 this.drawOccurrences();
 }
 this.throttledDrawList();
 }
 Tlns.Classes.Timeline.prototype.drawOccurrences = function() {
 var _this = this,
 _visible = _(this.occurrences).filter(function(_occ) {
-return (_occ.date >= _this.start_time && _occ.date <= _this.end_time && _occ.published);
+return (_occ.date >= _this.start_time && _occ.date <= _this.end_time && _occ.status);
 });
 _(_visible).each(function(_occ) {
 _occ.x = _this.current_scale * (_occ.date - _this.start_time);
 _occ.y = _occ.univers.y;
 _occ.in_cluster = false;
 _this.throttledDrawGrid();
 })
 }
 Tlns.Classes.Timeline.prototype.drawList = function() {
-var _universfilter = $(".Ls-Univers li.Ls-Active").map(function(){return $(this).attr("data")}),
+var _universfilter = this.$.find(".Ls-Univers li.Ls-Active").map(function(){return $(this).attr("data")}),
-_occtypefilter = $(".Ls-Occtypes li.Ls-Active").map(function(){return $(this).attr("data")}),
+_occtypefilter = this.$.find(".Ls-Occtypes li.Ls-Active").map(function(){return $(this).attr("data")}),
-_statusfilter = $(".Ls-Occstatuses li.Ls-Active").map(function(){return $(this).attr("data")}),
+_statusfilter = this.$.find(".Ls-Occstatuses li.Ls-Active").map(function(){return $(this).attr("data")}),
-_title = $(".Ls-Search").val() || "",
+_title = this.$.find(".Ls-Search").val() || "",
 _titleregexp = new RegExp( "(" + _title.replace(/(\W)/gm, "\\$1") + ")", "gim" ),
 _startdate = false,
 _enddate = false,
-_fromDate = $(".Ls-From-Date").val(),
+_fromDate = this.$.find(".Ls-From-Date").val(),
-_toDate = $(".Ls-To-Date").val();
+_toDate = this.$.find(".Ls-To-Date").val();
 if (_fromDate) {
 var _date = Tlns.Utils.dateFieldProcess(_fromDate),
-_time = Tlns.Utils.timeFieldProcess($(".Ls-From-Time").val());
+_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($(".Ls-To-Time").val());
+_time = Tlns.Utils.timeFieldProcess(this.$.find(".Ls-To-Time").val());
 _enddate = new Date(_date.year, _date.month - 1, _date.date, _time.hours, _time.minutes);
 }
-$(".Ls-Occurrences").html(
+this.$.find(".Ls-Occurrences").html(
 Mustache.to_html(
 Tlns.Templates.Occurrence_List,
 {
 occurrences: this.occurrences.filter(function(_occ) {
 var _titletest = (!!_occ.title.match(_titleregexp)),
 })
 }
 )
 );
 if (_title) {
-$(".Ls-Occurrence-Title").each(function() {
+this.$.find(".Ls-Occurrence-Title").each(function() {
 $(this).html($(this).text().replace(_titleregexp, "<span style='background:yellow'>$1</span>"));
 });
 }
 }
 /*
 * Univers
 */
 Tlns.Classes.Univers = function(_data, _timeline, _index) {
-this.id = _data.id;
+this.id = _data.idUnivers;
 this.index = _index;
-this.title = _data.nom;
+this.title = _data.nomUnivers;
-this.mainCharacter = _data.personnage;
+//    this.mainCharacter = _data.personnage;
 this.y = (_timeline.univers_height * _index);
 this.$label = $('<li>').css({
 height : _timeline.univers_height + "px"
 }).html(Mustache.to_html(Tlns.Templates.Univers, this))
 .addClass((_index % 2) ? 'Tl-Line-Odd' : 'Tl-Line-Even');
 _timeline.$.find('.Tl-UniversLabels').append(this.$label);
-var _txt = _data.nom,
+var _txt = this.title,
 _span = this.$label.find('span');
 while (_span.outerWidth() > (_timeline.width - _timeline.main_width) && _txt) {
 _txt = _txt.substr(0, _txt.length - 1);
 _span.html(_txt + '&hellip;');
 }
 }
 this.timeline = _timeline;
 }
 Tlns.Classes.Occurrence.prototype.update = function(_type, _data) {
 this.type = _type;
-this.original_id = _data.id || Tlns.Utils.guid();
+this.original_id = _data.idOccurrencePublication || _data.id || Tlns.Utils.guid();
 this.id = _type + "_" + this.original_id;
-this.date = _data.date || _data.datePublication;
+this.date = 1000 * (_data.datePublication || _data.date);
 this.formatted_date = Tlns.Utils.dateFormat(this.date,Tlns.Defaults.Timeline.tooltip_date_format);
 this.title = _data.titre || "<untitled>";
-this.univers_id = _data.univers;
+this.univers_id = _data.idUnivers;
 this.univers = this.timeline.getUnivers(this.univers_id);
-this.status = _data.statut;
+switch(_data.statut) {
+case "Validée":
+case "valide":
+this.status = "valide"
+break;
+case "A valider":
+case "a_valider":
+this.status = "a_valider";
+break;
+case "A réaliser":
+case "a_realiser":
+this.status = "a_realiser";
+break;
+default:
+this.status = false;
+}
 this.translated_status = Tlns.Defaults.Timeline.statuses[this.status];
-this.published = _data.publie || false;
+//    this.published = (_data.publication && _data.publication == "En ligne");
 //    this.locked = _data.verrouille || false;
-this.characters = _data.personnagesSecondaires || [];
+//    this.characters = _data.personnagesSecondaires || [];
-this.dependsOn = _(_data.dependDe || []).map(function(_id) {
+this.dependsOn = [];
-return "narrative_" + _id;
+if (_data.dependanceNarrative) {
-});
+for (var _i = 0; _i < _data.dependanceNarrative.length; _i++) {
-this.description = _data.description || "";
+this.dependsOn.push("narrative_" + _data.dependanceNarrative[_i])
+}
+}
+if (_data.dependancePublication) {
+for (var _i = 0; _i < _data.dependancePublication.length; _i++) {
+this.dependsOn.push("publication_" + _data.dependancePublication[_i])
+}
+}
+var _tmp = $('<p>').html(_data.accroche || "");
+this.description = _tmp.text().trim().replace(/(^.{60,80})[\s].+$/m,'$1&hellip;');
 }
 Tlns.Classes.Occurrence.prototype.addDependency = function(_id) {
 if (_(this.dependsOn).indexOf(_id) == -1) {
 this.dependsOn.push(_id);

eulalie