'
+ + '
';
Tlns.Templates.Univers = '
{{title}}';
-Tlns.Templates.Occurrence = '{{#clusters}}
{{/clusters}}{{#occurrences}}
{{/occurrences}}';
+Tlns.Templates.Occurrence = '{{#clusters}}
{{/clusters}}{{#occurrences}}
{{/occurrences}}';
/* Classes */
@@ -154,7 +154,11 @@
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,
@@ -204,8 +208,8 @@
$(this).hide();
})
- this.throttledSetTime = _.throttle(function(_time) {
- _this.setTime(_time)
+ this.throttledDrawGrid = _.throttle(function() {
+ _this.drawGrid();
}, 150);
/* Loading Univers */
@@ -217,17 +221,25 @@
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;
@@ -242,10 +254,17 @@
&& _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 {
@@ -272,7 +291,7 @@
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) {
@@ -308,19 +327,19 @@
_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 += '
'
+ _html += '
'
+ '
' + Tlns.Utils.dateFormat(_t, _timescale.grid_date_format) + '
';
}
/*
for (var _t = _roundstart; _t < _tmax; _t += _timescale.grid_interval) {
var _isMajor = !(Math.floor((_t - _offset) / _timescale.grid_interval) % _timescale.major_interval);
- _html += '
'
+ _html += '
'
+ ( _isMajor ? '
' + Tlns.Utils.dateFormat(_t, _timescale.date_format) + '
' : '' ) + '
';
}
*/
if (this.start_time <= _now && this.end_time >= _now) {
- _html += '
'
+ _html += '
'
}
this.$.find('.Tl-Grid').html(_html);
this.drawOccurrences();
@@ -385,7 +404,7 @@
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;
});
@@ -441,13 +460,47 @@
}
});
+ 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"));
diff -r 37492d1ce841 -r 5d1ac260d3ee timeline/timeline.html
--- a/timeline/timeline.html Wed May 23 18:16:27 2012 +0200
+++ b/timeline/timeline.html Thu May 24 19:02:39 2012 +0200
@@ -19,7 +19,7 @@
url_univers: 'data/univers.json',
url_occurrences: 'data/occurrences.json',
container: "timeline",
- level: 2,
+ level: 4,
sync_now: false,
central_time: Date.parse("2012-05-10T00:00:00Z")
});