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 70	43012525c832
parent 69	7bb5f89ad242
child 71	fa03eb8a3fe5

equal deleted inserted replaced

-:7bb5f89ad242
+:43012525c832
 level: 0,
 central_time: 0,
 sync_now: true,
 url_occurrences: '',
 occurrences: [],
-cluster_spacing: 10
+cluster_spacing: 10,
+tooltip_date_format: '{{dayOfMonth}} {{shortMonthName}} {{year}} {{0hours}}:{{0minutes}}'
 }
 for (var _i = 0; _i < Tlns.Defaults.Timeline.timescales.length; _i++) {
 Tlns.Defaults.Timeline.timescales[_i].level = _i;
 }
 Tlns.Templates.Timeline = '<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><div class="Tl-Layer Tl-Occurrences"></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></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>';
 Tlns.Templates.Univers = '<span class="Tl-UniversText">{{title}}</span>';
-Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster Tl-Occ{{type}}" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}"><div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-type="{{type}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;"></div>{{/occurrences}}{{#open_cluster}}<div class="Tl-ClusterOverlay" style="left: {{x}}px; top: {{y}}px;">{{#occurrences}}<div class="Tl-Occurrence Tl-OccInCluster Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-type="{{type}}" occurrence-id="{{id}}"></div>{{/occurrences}}</div>{{/open_cluster}}';
+Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster Tl-Occ{{type}}" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}">'
++ '<div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}'
++ '{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-type="{{type}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;">'
++ '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}<div class="Tl-Link"{{#editing}} style="display: block"{{/editing}}></div></div>{{/occurrences}}{{#open_cluster}}<div class="Tl-ClusterOverlay" style="left: {{x}}px; top: {{y}}px;">'
++ '{{#occurrences}}<div class="Tl-Occurrence Tl-OccInCluster Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-type="{{type}}" occurrence-id="{{id}}">'
++ '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}<div class="Tl-Link"{{#editing}} style="display: block"{{/editing}}></div></div>{{/occurrences}}</div>{{/open_cluster}}';
+Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3><p class="Tl-Tooltip-Date">{{formatted_date}}</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.main_height = this.height - this.$.find('.Tl-TopBar').outerHeight();
 this.$.find('.Tl-BottomPart').css("height", this.main_height + "px");
 this.$.find('.Tl-MainPart').css("width", this.main_width + "px");
 this.$.find('.Tl-Overlay-Container').css("left", (this.$.find('.Tl-BottomPart').outerWidth() - this.main_width) + "px");
-this.$.find('.Tl-Canvas').attr({
+this.$.find('canvas.Tl-Layer').attr({
 width: this.main_width,
 height: this.main_height
 });
 var _o = this.$.find('.Tl-MainPart').offset();
 this.dragging_bounds = {
 if (this.is_dragging) {
 switch (this.dragging_type) {
 case "occurrence":
 this.editing_occurrence.editing = false;
 this.throttledDrawGrid();
+break;
+case "link":
+this.editing_occurrence.editing = false;
+this.throttledDrawGrid();
+var _ctx = this.$.find('.Tl-Linking-Canvas')[0].getContext('2d');
+_ctx.clearRect(0,0,this.main_width, this.main_height);
 break;
 }
 }
 this.mouse_down = false;
 this.is_dragging = false;
 this.editing_occurrence.univers_id = this.univers[_u].id;
 this.throttledDrawGrid();
 break;
 case "timeline":
 this.setTime(this.time_at_start + Math.floor(( this.start_pos.x - _event.pageX ) / this.current_scale));
+break;
+case "link":
+var _ctx = this.$.find('.Tl-Linking-Canvas')[0].getContext('2d');
+_ctx.clearRect(0,0,this.main_width, this.main_height);
+_ctx.beginPath();
+_ctx.strokeStyle = '#800080';
+_ctx.moveTo(this.editing_occurrence.x,this.editing_occurrence.y + Math.floor(this.univers_height / 2));
+_ctx.lineTo(_event.pageX - this.dragging_bounds.left, _event.pageY - this.dragging_bounds.top);
+_ctx.stroke();
 break;
 }
 }
 }
 }
 }
 }
 }
 _(_clusters).each(function(_cluster) {
+_cluster.occurrences = _(_cluster.occurrences).sortBy(function(_o) {
+return _o.date;
+});
 _cluster.type = _cluster.occurrences[0].type;
 _cluster.contents = _cluster.occurrences.map(function(_o) {
 return _o.type + ":" + _o.id;
 }).join("|");
 if (_cluster.contents == _this.open_cluster) {
 _(_links).each(function(_link) {
 _ctx.beginPath();
 _ctx.moveTo(_link.from_x,_link.from_y);
 _ctx.lineTo(_link.to_x,_link.to_y);
 _ctx.stroke();
-})
+});
-console.log(_openCluster);
 var _html = Mustache.to_html(Tlns.Templates.Occurrence, {
 occurrences:_(_visible).reject(function(_o) {return _o.in_cluster}),
 clusters: _clusters,
 open_cluster: _openCluster
 });
 }
 this.$.find('.Tl-Occurrence').mousedown(function() {
 var _el = $(this);
-_this.editing_occurrence = _occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
+_this.editing_occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
-if (typeof _this.editing_occurrence !== "undefined") {
+if (typeof _this.dragging_type === "undefined" && typeof _this.editing_occurrence !== "undefined" && !_this.editing_occurrence.locked) {
 _this.dragging_type = "occurrence";
 _this.editing_occurrence.editing = true;
 }
 }).mouseover(function(_event) {
 var _el = $(this),
 _occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
-_this.showTooltip(_occurrence.x, _occurrence.y, _occurrence.title, (_event.pageY - _this.dragging_bounds.top) > (_this.main_height / 2) );
+if (!_occurrence.locked) {
+_el.find('.Tl-Link').show();
+}
+_occurrence.formatted_date = Tlns.Utils.dateFormat(_occurrence.date,_this.tooltip_date_format);
+var _html = Mustache.to_html(Tlns.Templates.OccurrenceTooltip, _occurrence);
+_this.showTooltip(_occurrence.x, _occurrence.y, _html, (_event.pageY - _this.dragging_bounds.top) >= (.4 * _this.main_height) );
 }).mouseout(function() {
+var _el = $(this),
+_occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
 _this.hideTooltip();
-});
+if (!_occurrence.editing) {
+$(this).find('.Tl-Link').hide();
+}
+}).mouseup(function() {
+var _el = $(this);
+if (_this.dragging_type == "link" && _el.attr("occurrence-type") == "narrative") {
+_this.editing_occurrence.addDependency(_el.attr("occurrence-id"));
+}
+});
+this.$.find('.Tl-Link').mousedown(function() {
+var _el = $(this).parent();
+_this.editing_occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
+if (typeof _this.editing_occurrence !== "undefined" && !_this.editing_occurrence.locked) {
+_this.dragging_type = "link";
+_this.editing_occurrence.editing = true;
+}
+})
 this.$.find('.Tl-Cluster').click(function() {
 var _el = $(this),
 _contents = _el.attr("cluster-contents");
 if (_this.open_cluster == _contents) {
 _this.open_cluster = false;
 } else {
 _this.open_cluster = _contents;
 }
-console.log(_this.open_cluster);
 _this.throttledDrawGrid();
 })
 }
 Tlns.Classes.Timeline.prototype.getUnivers = function(_id) {
 this.status = _data.statut;
 this.published = _data.publie || false;
 this.locked = _data.verrouille || false;
 this.characters = _data.personnagesSecondaires || [];
 this.dependsOn = _data.dependDe || [];
+this.description = _data.description || "";
+}
+Tlns.Classes.Occurrence.prototype.addDependency = function(_id) {
+if (_(this.dependsOn).indexOf(_id) == -1) {
+this.dependsOn.push(_id);
+}
 }
 Tlns.Classes.Occurrence.prototype.toString = function() {
 return "Occurrence " + this.type + ': "' + this.title + '"';
 }

eulalie