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 67	5d1ac260d3ee
parent 66	37492d1ce841
child 68	4def147b1604

equal deleted inserted replaced

-:37492d1ce841
+:5d1ac260d3ee
 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><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><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-Main"></div><div class="Tl-Overlay-Tip"></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="{{#occurrences}}{{type}}|{{id}},{{/occurrences}}"><div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}{{#occurrences}}<div class="Tl-Occurrence Tl-Occ{{type}}" occurrence-type="{{type}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{univers.y}}px;"></div>{{/occurrences}}';
+Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster Tl-Occ{{type}}" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{#occurrences}}{{type}}|{{id}},{{/occurrences}}"><div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}{{#occurrences}}<div class="Tl-Occurrence Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-type="{{type}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{univers.y}}px;"></div>{{/occurrences}}';
 /* Classes */
 Tlns.Classes.Timeline = function(_options) {
 this.$.html(Mustache.to_html(Tlns.Templates.Timeline, this));
 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", Math.floor(this.$.find('.Tl-BottomPart').outerWidth() - this.main_width / 2) + "px");
+this.$.find('.Tl-Overlay-Container').css("left", (this.$.find('.Tl-BottomPart').outerWidth() - this.main_width) + "px");
+this.$.find('.Tl-Canvas').attr({
+width: this.main_width,
+height: this.main_height
+});
 var _o = this.$.find('.Tl-MainPart').offset();
 this.dragging_bounds = {
 left: _o.left,
 top: _o.top,
 right: _o.left + this.$.find('.Tl-MainPart').outerWidth(),
 $(this).show();
 }).mouseout(function(_event) {
 $(this).hide();
 })
-this.throttledSetTime = _.throttle(function(_time) {
+this.throttledDrawGrid = _.throttle(function() {
-_this.setTime(_time)
+_this.drawGrid();
 }, 150);
 /* Loading Univers */
 $.getJSON(this.url_univers, function(_data) {
 _this.onUniversLoaded(_data);
 }
 Tlns.Classes.Timeline.prototype.onMouseDown = function(_event) {
 this.mouse_down = true;
 this.is_dragging = false;
-this.time_at_start = this.central_time;
 this.start_pos = {
 x: _event.pageX,
 y: _event.pageY
 };
 if (typeof this.dragging_type === "undefined") {
+this.time_at_start = this.central_time;
 this.dragging_type = "timeline";
 }
 }
 Tlns.Classes.Timeline.prototype.onMouseUp = function(_event) {
+if (this.is_dragging) {
+switch (this.dragging_type) {
+case "occurrence":
+this.editing_occurrence.editing = false;
+this.throttledDrawGrid();
+break;
+}
+}
 this.mouse_down = false;
 this.is_dragging = false;
 this.dragging_type = undefined;
 }
 if (_event.pageX > this.dragging_bounds.left
 && _event.pageX < this.dragging_bounds.right
 && _event.pageY > this.dragging_bounds.top
 && _event.pageY < this.dragging_bounds.bottom
 ) {
-var _newTime = Math.floor(this.time_at_start + ( this.start_pos.x - _event.pageX ) / this.current_scale);
+var _timeDelta = Math.floor(( this.start_pos.x - _event.pageX ) / this.current_scale);
 switch (this.dragging_type) {
+case "occurrence":
+this.editing_occurrence.date = this.time_at_start - _timeDelta;
+var _u = Math.max(0,Math.min(this.univers.length, Math.floor(this.u_at_start - (this.start_pos.y - _event.pageY) / this.univers_height)));
+this.editing_occurrence.univers = this.univers[_u];
+this.editing_occurrence.univers_id = this.univers[_u].id;
+this.throttledDrawGrid();
+break;
 case "timeline":
-this.throttledSetTime(_newTime);
+this.setTime(this.time_at_start + _timeDelta);
 break;
 }
 } else {
 this.onMouseUp(_event);
 }
 }
 Tlns.Classes.Timeline.prototype.setTime = function(_centralTime) {
 this.sync_now = false;
 this.central_time = _centralTime;
-this.drawGrid();
+this.throttledDrawGrid();
 }
 Tlns.Classes.Timeline.prototype.setLevel = function(_level) {
 if (_level >= 0 && _level < this.timescales.length) {
 this.$.find('.Tl-TopBar-Timescales>div').each(function() {
 var _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) {
-_html += '<div class="Tl-Grid-Column" style="width:' + _grid_width + 'px; left: ' + this.current_scale * (_t - this.central_time) + 'px">'
+_html += '<div class="Tl-Grid-Column" style="width:' + _grid_width + 'px; left: ' + this.current_scale * (_t - this.start_time) + 'px">'
 + '<div class="Tl-Grid-Label">' + Tlns.Utils.dateFormat(_t, _timescale.grid_date_format) + '</div></div>';
 }
 /*
 for (var _t = _roundstart; _t < _tmax; _t += _timescale.grid_interval) {
 var _isMajor = !(Math.floor((_t - _offset) / _timescale.grid_interval) % _timescale.major_interval);
-_html += '<div class="Tl-Grid-Column' + ( _isMajor ? ' Tl-Grid-Major' : '' ) + '" style="width:' + _grid_width + 'px; left: ' + _scale * (_t - this.central_time) + 'px">'
+_html += '<div class="Tl-Grid-Column' + ( _isMajor ? ' Tl-Grid-Major' : '' ) + '" style="width:' + _grid_width + 'px; left: ' + _scale * (_t - this.start_time) + 'px">'
 + ( _isMajor ? '<div class="Tl-Grid-Label">' + Tlns.Utils.dateFormat(_t, _timescale.date_format) + '</div>' : '' ) + '</div>';
 }
 */
 if (this.start_time <= _now && this.end_time >= _now) {
-_html += '<div class="Tl-Grid-Now" style="left: ' + this.current_scale * (_now - this.central_time) + 'px"></div>'
+_html += '<div class="Tl-Grid-Now" style="left: ' + this.current_scale * (_now - this.start_time) + 'px"></div>'
 }
 this.$.find('.Tl-Grid').html(_html);
 this.drawOccurrences();
 }
 var _this = this,
 _visible = _(this.occurrences).filter(function(_occ) {
 return (_occ.date >= _this.start_time && _occ.date <= _this.end_time && _occ.published);
 });
 _(_visible).each(function(_occ) {
-_occ.x = _this.current_scale * (_occ.date - _this.central_time);
+_occ.x = _this.current_scale * (_occ.date - _this.start_time);
 _occ.in_cluster = false;
 });
 var _moved = true;
 while (_moved) {
 break;
 }
 }
 });
+var _links = [];
+_(_visible).each(function(_occurrence) {
+_(_occurrence.dependsOn).each(function(_dependance) {
+var _parent = _(_visible).find(function(_o) {
+return _o.type == "narrative" && _o.id == _dependance;
+});
+if (typeof _parent !== "undefined") {
+_links.push({
+from_x: _occurrence.x,
+from_y: _occurrence.univers.y + Math.floor(_this.univers_height / 2),
+to_x: _parent.x,
+to_y: _parent.univers.y + Math.floor(_this.univers_height / 2)
+});
+}
+});
+});
+var _ctx = this.$.find('.Tl-Canvas')[0].getContext('2d');
+_ctx.clearRect(0,0,this.main_width, this.main_height);
+_(_links).each(function(_link) {
+_ctx.beginPath();
+_ctx.moveTo(_link.from_x,_link.from_y);
+_ctx.lineTo(_link.to_x,_link.to_y);
+_ctx.stroke();
+})
 var _html = Mustache.to_html(Tlns.Templates.Occurrence, {
 occurrences:_(_visible).reject(function(_o) {return _o.in_cluster}),
 clusters: _clusters
 });
 this.$.find('.Tl-Occurrences').html(_html);
 this.$.find('.Tl-Occurrence').mousedown(function() {
-_this.dragging_type = "occurrence"
+var _el = $(this);
+_this.editing_occurrence = _occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
+if (typeof _this.editing_occurrence !== "undefined") {
+_this.dragging_type = "occurrence";
+_this.time_at_start = _this.editing_occurrence.date;
+_this.u_at_start = _this.editing_occurrence.univers.index;
+_this.editing_occurrence.editing = true;
+}
 }).mouseover(function() {
 var _el = $(this),
 _occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id"));
 _this.showTooltip(_occurrence.x, _occurrence.univers.y, _occurrence.title);
 }).mouseout(function() {

eulalie