|
65
|
1 |
/* |
|
|
2 |
* Main Timeline code |
|
|
3 |
*/ |
|
|
4 |
|
|
|
5 |
window.Tlns = { |
|
|
6 |
Utils : {}, |
|
|
7 |
Defaults : {}, |
|
|
8 |
Templates : {}, |
|
|
9 |
Classes : {} |
|
|
10 |
}; |
|
|
11 |
|
|
|
12 |
/* Utility Functions */ |
|
|
13 |
|
|
|
14 |
Tlns.Utils.SetDefaults = function(_object, _defaults, _options) { |
|
|
15 |
var _options = _options || {}; |
|
|
16 |
_(_defaults).each(function(_v, _k) { |
|
|
17 |
if(/^m(in|ax)_/.test(_k)) { |
|
|
18 |
var _tab = _k.split('_') |
|
|
19 |
if( typeof _object[_tab[1]] !== "undefined") { |
|
|
20 |
var _fn = (_tab[0] === "min" ? Math.max : Math.min); |
|
|
21 |
_object[_tab[1]] = _fn(_object[_tab[1]], _v); |
|
|
22 |
} |
|
|
23 |
} else { |
|
|
24 |
if( typeof _options[_k] !== "undefined") { |
|
|
25 |
_object[_k] = _options[_k]; |
|
|
26 |
} else { |
|
|
27 |
_object[_k] = _v; |
|
|
28 |
} |
|
|
29 |
} |
|
|
30 |
}); |
|
|
31 |
} |
|
|
32 |
|
|
|
33 |
Tlns.Utils.dateFormat = function(_date, _template) { |
|
|
34 |
if (typeof _data !== "object") { |
|
|
35 |
_date = new Date(_date); |
|
|
36 |
} |
|
|
37 |
function zeroPad(_n) { |
|
|
38 |
return (_n < 10 ? "0" : "") + _n |
|
|
39 |
} |
|
|
40 |
var _params = { |
|
|
41 |
hours: _date.getHours(), |
|
|
42 |
"0hours": zeroPad(_date.getHours()), |
|
|
43 |
minutes: _date.getMinutes(), |
|
|
44 |
"0minutes": zeroPad(_date.getMinutes()), |
|
|
45 |
seconds: _date.getSeconds(), |
|
|
46 |
"0seconds": zeroPad(_date.getSeconds()), |
|
|
47 |
dayOfWeek: ["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"][_date.getDay()], |
|
|
48 |
shortDayOfWeek: ["Dim","Lun","Mar","Mer","Jeu","Ven","Sam"][_date.getDay()], |
|
|
49 |
dayOfMonth: _date.getDate(), |
|
|
50 |
"0dayOfMonth": zeroPad(_date.getDate()), |
|
|
51 |
monthNumber: 1+_date.getMonth(), |
|
|
52 |
"0monthNumber": zeroPad(1+_date.getMonth()), |
|
|
53 |
monthName: ["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"][_date.getMonth()], |
|
|
54 |
shortMonthName: ["jan","fev","mar","avr","mai","jun","jul","aou","sep","oct","nov","dec"][_date.getMonth()], |
|
|
55 |
year: _date.getFullYear() |
|
|
56 |
} |
|
|
57 |
return Mustache.to_html(_template, _params); |
|
|
58 |
} |
|
|
59 |
|
|
|
60 |
/* Defaults */ |
|
|
61 |
|
|
|
62 |
Tlns.Defaults.Timeline = { |
|
|
63 |
container : "timeline", |
|
|
64 |
width : 950, |
|
|
65 |
height : 200, |
|
|
66 |
url_univers : '', |
|
|
67 |
min_width : 400, |
|
|
68 |
min_height : 100, |
|
|
69 |
main_width : 800, |
|
|
70 |
timescales : [{ |
|
|
71 |
label : "Mois", |
|
|
72 |
span : 32 * 86400 * 1000, |
|
|
73 |
grid_interval : 5 * 86400 * 1000, |
|
|
74 |
grid_date_format : '{{dayOfMonth}} {{shortMonthName}}', |
|
|
75 |
start_date_format : '{{dayOfMonth}} {{shortMonthName}}', |
|
|
76 |
end_date_format : '{{dayOfMonth}} {{shortMonthName}} {{year}}' |
|
|
77 |
}, { |
|
|
78 |
label : "Semaine", |
|
|
79 |
span : 8 * 86400 * 1000, |
|
|
80 |
grid_interval : 86400 * 1000, |
|
|
81 |
grid_date_format : '{{shortDayOfWeek}} {{0dayOfMonth}}/{{0monthNumber}}', |
|
|
82 |
start_date_format : '{{dayOfMonth}} {{shortMonthName}}', |
|
|
83 |
end_date_format : '{{dayOfMonth}} {{shortMonthName}}' |
|
|
84 |
}, { |
|
|
85 |
label : "2 jours", |
|
|
86 |
span : 2 * 86400 * 1000, |
|
|
87 |
grid_interval : 8 * 3600 * 1000, |
|
|
88 |
grid_date_format : '{{shortDayOfWeek}} {{0dayOfMonth}}/{{0monthNumber}} {{hours}}h', |
|
|
89 |
start_date_format : '{{dayOfMonth}} {{shortMonthName}}', |
|
|
90 |
end_date_format : '{{dayOfMonth}} {{shortMonthName}}' |
|
|
91 |
}, { |
|
|
92 |
label : "Demi-Journée", |
|
|
93 |
span : 12 * 3600 * 1000, |
|
|
94 |
grid_interval : 2 * 3600 * 1000, |
|
|
95 |
grid_date_format : '{{hours}}h', |
|
|
96 |
start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h', |
|
|
97 |
end_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h' |
|
|
98 |
}, { |
|
|
99 |
label : "3 Heures", |
|
|
100 |
span : 3 * 3600 * 1000, |
|
|
101 |
grid_interval : 30 * 60 * 1000, |
|
|
102 |
grid_date_format : '{{0hours}}:{{0minutes}}', |
|
|
103 |
start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{0hours}}:{{0minutes}}', |
|
|
104 |
end_date_format : '{{0hours}}:{{0minutes}}' |
|
|
105 |
}, { |
|
|
106 |
label : "1 Heure", |
|
66
|
107 |
span : 60 * 60 * 1000, |
|
65
|
108 |
grid_interval : 15 * 60 * 1000, |
|
|
109 |
grid_date_format : '{{0hours}}:{{0minutes}}', |
|
|
110 |
start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{0hours}}:{{0minutes}}', |
|
|
111 |
end_date_format : '{{0hours}}:{{0minutes}}' |
|
|
112 |
}], |
|
|
113 |
level: 0, |
|
|
114 |
central_time: 0, |
|
|
115 |
sync_now: true, |
|
|
116 |
url_occurrences: '', |
|
66
|
117 |
occurrences: [], |
|
|
118 |
cluster_spacing: 9 |
|
65
|
119 |
} |
|
|
120 |
|
|
|
121 |
for (var _i = 0; _i < Tlns.Defaults.Timeline.timescales.length; _i++) { |
|
|
122 |
Tlns.Defaults.Timeline.timescales[_i].level = _i; |
|
|
123 |
} |
|
|
124 |
|
|
|
125 |
/* Templates */ |
|
|
126 |
|
|
|
127 |
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>' |
|
|
128 |
+ '<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>' |
|
|
129 |
+ '<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>' |
|
|
130 |
+ '<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>' |
|
67
|
131 |
+ '<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>' |
|
66
|
132 |
+ '<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>'; |
|
65
|
133 |
|
|
66
|
134 |
Tlns.Templates.Univers = '<span class="Tl-UniversText">{{title}}</span>'; |
|
|
135 |
|
|
67
|
136 |
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}}'; |
|
65
|
137 |
|
|
|
138 |
/* Classes */ |
|
|
139 |
|
|
|
140 |
Tlns.Classes.Timeline = function(_options) { |
|
|
141 |
|
|
|
142 |
/* Setting Defaults */ |
|
|
143 |
Tlns.Utils.SetDefaults(this, Tlns.Defaults.Timeline, _options); |
|
|
144 |
|
|
|
145 |
/* Setting container CSS */ |
|
|
146 |
this.$ = $('#' + this.container); |
|
|
147 |
this.$.addClass('Tl-Main'); |
|
|
148 |
this.$.css({ |
|
|
149 |
width : this.width + "px", |
|
|
150 |
height : this.height + "px" |
|
|
151 |
}); |
|
|
152 |
this.$.html(Mustache.to_html(Tlns.Templates.Timeline, this)); |
|
|
153 |
|
|
|
154 |
this.main_height = this.height - this.$.find('.Tl-TopBar').outerHeight(); |
|
|
155 |
this.$.find('.Tl-BottomPart').css("height", this.main_height + "px"); |
|
|
156 |
this.$.find('.Tl-MainPart').css("width", this.main_width + "px"); |
|
67
|
157 |
this.$.find('.Tl-Overlay-Container').css("left", (this.$.find('.Tl-BottomPart').outerWidth() - this.main_width) + "px"); |
|
|
158 |
this.$.find('.Tl-Canvas').attr({ |
|
|
159 |
width: this.main_width, |
|
|
160 |
height: this.main_height |
|
|
161 |
}); |
|
65
|
162 |
var _o = this.$.find('.Tl-MainPart').offset(); |
|
|
163 |
this.dragging_bounds = { |
|
|
164 |
left: _o.left, |
|
|
165 |
top: _o.top, |
|
|
166 |
right: _o.left + this.$.find('.Tl-MainPart').outerWidth(), |
|
|
167 |
bottom: _o.top + this.$.find('.Tl-MainPart').outerHeight(), |
|
|
168 |
}; |
|
|
169 |
|
|
|
170 |
this.setLevel(this.level); |
|
|
171 |
|
|
|
172 |
var _this = this; |
|
|
173 |
this.$.find('.Tl-TopBar-Timescales>div').click(function() { |
|
|
174 |
_this.setLevel($(this).attr("data-level")); |
|
|
175 |
}); |
|
|
176 |
|
|
|
177 |
this.$.find('.Tl-TopBar-SyncButton').click(function() { |
|
|
178 |
_this.sync_now = !_this.sync_now; |
|
|
179 |
_this.drawGrid(); |
|
|
180 |
}) |
|
|
181 |
|
|
|
182 |
this.$.find('.Tl-TopBar-PreviousButton').click(function() { |
|
|
183 |
_this.offsetTime(-_this.timescales[_this.level].span / 4); |
|
|
184 |
}); |
|
|
185 |
|
|
|
186 |
this.$.find('.Tl-TopBar-NextButton').click(function() { |
|
|
187 |
_this.offsetTime(_this.timescales[_this.level].span / 4); |
|
|
188 |
}); |
|
|
189 |
|
|
|
190 |
this.$.find('.Tl-MainPart').mousedown(function(_event) { |
|
|
191 |
_this.onMouseDown(_event); |
|
|
192 |
return false; |
|
|
193 |
}); |
|
|
194 |
|
|
|
195 |
this.$.find('.Tl-MainPart').mousemove(function(_event) { |
|
|
196 |
_this.onMouseMove(_event); |
|
|
197 |
return false; |
|
|
198 |
}); |
|
|
199 |
|
|
|
200 |
this.$.find('.Tl-MainPart').mouseup(function(_event) { |
|
|
201 |
_this.onMouseUp(_event); |
|
|
202 |
return false; |
|
|
203 |
}); |
|
|
204 |
|
|
66
|
205 |
this.$.find('.Tl-Overlay-Box').mouseover(function(_event) { |
|
|
206 |
$(this).show(); |
|
|
207 |
}).mouseout(function(_event) { |
|
|
208 |
$(this).hide(); |
|
|
209 |
}) |
|
|
210 |
|
|
67
|
211 |
this.throttledDrawGrid = _.throttle(function() { |
|
|
212 |
_this.drawGrid(); |
|
65
|
213 |
}, 150); |
|
|
214 |
|
|
|
215 |
/* Loading Univers */ |
|
|
216 |
$.getJSON(this.url_univers, function(_data) { |
|
|
217 |
_this.onUniversLoaded(_data); |
|
|
218 |
}); |
|
|
219 |
} |
|
|
220 |
|
|
|
221 |
Tlns.Classes.Timeline.prototype.onMouseDown = function(_event) { |
|
|
222 |
this.mouse_down = true; |
|
|
223 |
this.is_dragging = false; |
|
|
224 |
this.start_pos = { |
|
|
225 |
x: _event.pageX, |
|
|
226 |
y: _event.pageY |
|
|
227 |
}; |
|
66
|
228 |
if (typeof this.dragging_type === "undefined") { |
|
67
|
229 |
this.time_at_start = this.central_time; |
|
66
|
230 |
this.dragging_type = "timeline"; |
|
65
|
231 |
} |
|
|
232 |
} |
|
|
233 |
|
|
|
234 |
Tlns.Classes.Timeline.prototype.onMouseUp = function(_event) { |
|
67
|
235 |
if (this.is_dragging) { |
|
|
236 |
switch (this.dragging_type) { |
|
|
237 |
case "occurrence": |
|
|
238 |
this.editing_occurrence.editing = false; |
|
|
239 |
this.throttledDrawGrid(); |
|
|
240 |
break; |
|
|
241 |
} |
|
|
242 |
} |
|
65
|
243 |
this.mouse_down = false; |
|
|
244 |
this.is_dragging = false; |
|
66
|
245 |
this.dragging_type = undefined; |
|
65
|
246 |
} |
|
|
247 |
|
|
|
248 |
Tlns.Classes.Timeline.prototype.onMouseMove = function(_event) { |
|
|
249 |
if (this.mouse_down) { |
|
|
250 |
this.is_dragging = true; |
|
66
|
251 |
this.$.find('.Tl-Overlay-Box').hide(); |
|
65
|
252 |
if (_event.pageX > this.dragging_bounds.left |
|
|
253 |
&& _event.pageX < this.dragging_bounds.right |
|
|
254 |
&& _event.pageY > this.dragging_bounds.top |
|
66
|
255 |
&& _event.pageY < this.dragging_bounds.bottom |
|
|
256 |
) { |
|
67
|
257 |
var _timeDelta = Math.floor(( this.start_pos.x - _event.pageX ) / this.current_scale); |
|
65
|
258 |
switch (this.dragging_type) { |
|
67
|
259 |
case "occurrence": |
|
|
260 |
this.editing_occurrence.date = this.time_at_start - _timeDelta; |
|
|
261 |
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))); |
|
|
262 |
this.editing_occurrence.univers = this.univers[_u]; |
|
|
263 |
this.editing_occurrence.univers_id = this.univers[_u].id; |
|
|
264 |
this.throttledDrawGrid(); |
|
|
265 |
break; |
|
65
|
266 |
case "timeline": |
|
67
|
267 |
this.setTime(this.time_at_start + _timeDelta); |
|
65
|
268 |
break; |
|
|
269 |
} |
|
|
270 |
} else { |
|
|
271 |
this.onMouseUp(_event); |
|
|
272 |
} |
|
|
273 |
} |
|
|
274 |
} |
|
|
275 |
|
|
|
276 |
Tlns.Classes.Timeline.prototype.onUniversLoaded = function(_data) { |
|
|
277 |
this.univers = []; |
|
|
278 |
if(_data.length) { |
|
|
279 |
this.univers_height = Math.floor(this.main_height / _data.length); |
|
|
280 |
} |
|
|
281 |
for(var _i = 0; _i < _data.length; _i++) { |
|
|
282 |
this.univers.push(new Tlns.Classes.Univers(_data[_i], this, _i)); |
|
|
283 |
} |
|
66
|
284 |
this.loadOccurrences(); |
|
65
|
285 |
} |
|
|
286 |
|
|
|
287 |
Tlns.Classes.Timeline.prototype.offsetTime = function(_timeOffset) { |
|
|
288 |
this.setTime(this.central_time + _timeOffset); |
|
|
289 |
} |
|
|
290 |
|
|
|
291 |
Tlns.Classes.Timeline.prototype.setTime = function(_centralTime) { |
|
|
292 |
this.sync_now = false; |
|
|
293 |
this.central_time = _centralTime; |
|
67
|
294 |
this.throttledDrawGrid(); |
|
65
|
295 |
} |
|
|
296 |
|
|
|
297 |
Tlns.Classes.Timeline.prototype.setLevel = function(_level) { |
|
|
298 |
if (_level >= 0 && _level < this.timescales.length) { |
|
|
299 |
this.$.find('.Tl-TopBar-Timescales>div').each(function() { |
|
|
300 |
var _el = $(this); |
|
|
301 |
if (_el.attr("data-level") == _level) { |
|
|
302 |
_el.addClass("active"); |
|
|
303 |
} else { |
|
|
304 |
_el.removeClass("active"); |
|
|
305 |
} |
|
|
306 |
}); |
|
|
307 |
this.level = _level; |
|
|
308 |
this.drawGrid(); |
|
|
309 |
} |
|
|
310 |
} |
|
|
311 |
|
|
|
312 |
Tlns.Classes.Timeline.prototype.drawGrid = function() { |
|
|
313 |
var _now = new Date().valueOf(); |
|
|
314 |
if (this.sync_now) { |
|
|
315 |
this.central_time = _now; |
|
|
316 |
this.$.find('.Tl-TopBar-SyncButton').addClass("active"); |
|
|
317 |
} else { |
|
|
318 |
this.$.find('.Tl-TopBar-SyncButton').removeClass("active"); |
|
|
319 |
} |
|
|
320 |
var _timescale = this.timescales[this.level], |
|
|
321 |
_offset = new Date().getTimezoneOffset() * 60000; |
|
66
|
322 |
this.current_scale = this.main_width / (_timescale.span) |
|
|
323 |
this.start_time = this.central_time - (_timescale.span / 2); |
|
|
324 |
this.end_time = this.central_time + (_timescale.span / 2); |
|
|
325 |
var _grid_width = Math.floor(_timescale.grid_interval * this.current_scale), |
|
|
326 |
_roundstart = Math.floor((this.start_time - _offset) / _timescale.grid_interval) * _timescale.grid_interval + _offset, |
|
65
|
327 |
_html = ''; |
|
66
|
328 |
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)); |
|
|
329 |
for (var _t = _roundstart; _t < this.end_time; _t += _timescale.grid_interval) { |
|
67
|
330 |
_html += '<div class="Tl-Grid-Column" style="width:' + _grid_width + 'px; left: ' + this.current_scale * (_t - this.start_time) + 'px">' |
|
65
|
331 |
+ '<div class="Tl-Grid-Label">' + Tlns.Utils.dateFormat(_t, _timescale.grid_date_format) + '</div></div>'; |
|
|
332 |
} |
|
|
333 |
/* |
|
|
334 |
|
|
|
335 |
for (var _t = _roundstart; _t < _tmax; _t += _timescale.grid_interval) { |
|
|
336 |
var _isMajor = !(Math.floor((_t - _offset) / _timescale.grid_interval) % _timescale.major_interval); |
|
67
|
337 |
_html += '<div class="Tl-Grid-Column' + ( _isMajor ? ' Tl-Grid-Major' : '' ) + '" style="width:' + _grid_width + 'px; left: ' + _scale * (_t - this.start_time) + 'px">' |
|
65
|
338 |
+ ( _isMajor ? '<div class="Tl-Grid-Label">' + Tlns.Utils.dateFormat(_t, _timescale.date_format) + '</div>' : '' ) + '</div>'; |
|
|
339 |
} |
|
|
340 |
*/ |
|
66
|
341 |
if (this.start_time <= _now && this.end_time >= _now) { |
|
67
|
342 |
_html += '<div class="Tl-Grid-Now" style="left: ' + this.current_scale * (_now - this.start_time) + 'px"></div>' |
|
65
|
343 |
} |
|
|
344 |
this.$.find('.Tl-Grid').html(_html); |
|
66
|
345 |
this.drawOccurrences(); |
|
|
346 |
} |
|
|
347 |
|
|
|
348 |
Tlns.Classes.Timeline.prototype.loadOccurrences = function() { |
|
|
349 |
var _url = Mustache.to_html(this.url_occurrences, { |
|
|
350 |
from_time: this.start_time, |
|
|
351 |
to_time: this.end_time |
|
|
352 |
}), |
|
|
353 |
_this = this; |
|
|
354 |
$.getJSON(_url, function(_data) { |
|
|
355 |
_this.onOccurrencesLoaded(_data); |
|
|
356 |
}); |
|
|
357 |
} |
|
|
358 |
|
|
|
359 |
Tlns.Classes.Timeline.prototype.onOccurrencesLoaded = function(_data) { |
|
|
360 |
if (typeof _data.occurrencesNarratives === "object" && _data.occurrencesNarratives !== null) { |
|
|
361 |
for (var _i = 0; _i < _data.occurrencesNarratives.length; _i++) { |
|
|
362 |
this.createOrUpdateOccurrence("narrative", _data.occurrencesNarratives[_i]); |
|
|
363 |
} |
|
|
364 |
for (var _i = 0; _i < _data.occurrencesProduction.length; _i++) { |
|
|
365 |
this.createOrUpdateOccurrence("production", _data.occurrencesProduction[_i]); |
|
|
366 |
} |
|
|
367 |
} |
|
|
368 |
if (!this.mouse_down) { |
|
|
369 |
this.drawOccurrences(); |
|
|
370 |
} |
|
|
371 |
} |
|
|
372 |
|
|
|
373 |
Tlns.Classes.Timeline.prototype.getOccurrence = function(_type, _id) { |
|
|
374 |
return _(this.occurrences).find(function(_occ) { |
|
|
375 |
return (_occ.type == _type && _occ.id == _id); |
|
|
376 |
}); |
|
|
377 |
} |
|
|
378 |
|
|
|
379 |
Tlns.Classes.Timeline.prototype.createOrUpdateOccurrence = function(_type, _data) { |
|
|
380 |
var _occurrence = this.getOccurrence(_type, _data.id); |
|
|
381 |
if (typeof _occurrence === "undefined") { |
|
|
382 |
_occurrence = new Tlns.Classes.Occurrence(this); |
|
|
383 |
this.occurrences.push(_occurrence); |
|
|
384 |
} |
|
|
385 |
_occurrence.update(_type, _data); |
|
|
386 |
} |
|
|
387 |
|
|
|
388 |
Tlns.Classes.Timeline.prototype.showTooltip = function(_x, _y, _html) { |
|
|
389 |
this.$.find('.Tl-Overlay-Box').show() |
|
|
390 |
.css({ |
|
|
391 |
left: _x + "px", |
|
|
392 |
top: _y + "px" |
|
|
393 |
}); |
|
|
394 |
this.$.find('.Tl-Overlay-Main').html(_html); |
|
|
395 |
} |
|
|
396 |
|
|
|
397 |
Tlns.Classes.Timeline.prototype.hideTooltip = function() { |
|
|
398 |
this.$.find('.Tl-Overlay-Box').hide(); |
|
65
|
399 |
} |
|
|
400 |
|
|
|
401 |
Tlns.Classes.Timeline.prototype.drawOccurrences = function() { |
|
66
|
402 |
var _this = this, |
|
|
403 |
_visible = _(this.occurrences).filter(function(_occ) { |
|
|
404 |
return (_occ.date >= _this.start_time && _occ.date <= _this.end_time && _occ.published); |
|
|
405 |
}); |
|
|
406 |
_(_visible).each(function(_occ) { |
|
67
|
407 |
_occ.x = _this.current_scale * (_occ.date - _this.start_time); |
|
66
|
408 |
_occ.in_cluster = false; |
|
|
409 |
}); |
|
65
|
410 |
|
|
66
|
411 |
var _moved = true; |
|
|
412 |
while (_moved) { |
|
|
413 |
_moved = false; |
|
|
414 |
for (var _i = 0; _i < _visible.length; _i++) { |
|
|
415 |
for (var _j = 0; _j < _i; _j++) { |
|
|
416 |
if (_visible[_j].univers_id == _visible[_i].univers_id |
|
|
417 |
&& _visible[_j].x != _visible[_i].x |
|
|
418 |
&& Math.abs(_visible[_j].x-_visible[_i].x) < this.cluster_spacing |
|
|
419 |
) { |
|
|
420 |
_moved = true; |
|
|
421 |
_visible[_i].x = this.cluster_spacing * Math.round(_visible[_i].x / this.cluster_spacing); |
|
|
422 |
_visible[_j].x = this.cluster_spacing * Math.round(_visible[_j].x / this.cluster_spacing); |
|
|
423 |
} |
|
|
424 |
} |
|
|
425 |
} |
|
|
426 |
} |
|
|
427 |
var _clusters = []; |
|
|
428 |
for (var _i = 0; _i < _visible.length; _i++) { |
|
|
429 |
for (var _j = 0; _j < _i; _j++) { |
|
|
430 |
if (_visible[_j].univers_id == _visible[_i].univers_id && _visible[_j].x == _visible[_i].x) { |
|
|
431 |
_visible[_j].in_cluster = true; |
|
|
432 |
_visible[_i].in_cluster = true; |
|
|
433 |
var _x = _visible[_j].x, |
|
|
434 |
_y = _visible[_j].univers.y; |
|
|
435 |
_cluster = _(_clusters).find(function(_c) { return _c.x == _x && _c.y == _y }); |
|
|
436 |
if (typeof _cluster === "undefined") { |
|
|
437 |
_cluster = { x: _x, y: _y, occurrences: [] }; |
|
|
438 |
_clusters.push(_cluster); |
|
|
439 |
} |
|
|
440 |
if ("undefined" === typeof _(_cluster.occurrences).find(function(_o) { |
|
|
441 |
return _o.type == _visible[_j].type && _o.id == _visible[_j].id; |
|
|
442 |
})) { |
|
|
443 |
_cluster.occurrences.push({type: _visible[_j].type, id: _visible[_j].id}); |
|
|
444 |
} |
|
|
445 |
if ("undefined" === typeof _(_cluster.occurrences).find(function(_o) { |
|
|
446 |
return _o.type == _visible[_i].type && _o.id == _visible[_i].id; |
|
|
447 |
})) { |
|
|
448 |
_cluster.occurrences.push({type: _visible[_i].type, id: _visible[_i].id}); |
|
|
449 |
} |
|
|
450 |
} |
|
|
451 |
} |
|
|
452 |
} |
|
|
453 |
_(_clusters).each(function(_cluster) { |
|
|
454 |
_cluster.type = _cluster.occurrences[0].type; |
|
|
455 |
for (var _i = 1; _i < _cluster.occurrences.length; _i++) { |
|
|
456 |
if (_cluster.occurrences[_i].type !== _cluster.type) { |
|
|
457 |
_cluster.type = "both"; |
|
|
458 |
break; |
|
|
459 |
} |
|
|
460 |
} |
|
|
461 |
}); |
|
|
462 |
|
|
67
|
463 |
var _links = []; |
|
|
464 |
|
|
|
465 |
_(_visible).each(function(_occurrence) { |
|
|
466 |
_(_occurrence.dependsOn).each(function(_dependance) { |
|
|
467 |
var _parent = _(_visible).find(function(_o) { |
|
|
468 |
return _o.type == "narrative" && _o.id == _dependance; |
|
|
469 |
}); |
|
|
470 |
if (typeof _parent !== "undefined") { |
|
|
471 |
_links.push({ |
|
|
472 |
from_x: _occurrence.x, |
|
|
473 |
from_y: _occurrence.univers.y + Math.floor(_this.univers_height / 2), |
|
|
474 |
to_x: _parent.x, |
|
|
475 |
to_y: _parent.univers.y + Math.floor(_this.univers_height / 2) |
|
|
476 |
}); |
|
|
477 |
} |
|
|
478 |
}); |
|
|
479 |
}); |
|
|
480 |
|
|
|
481 |
var _ctx = this.$.find('.Tl-Canvas')[0].getContext('2d'); |
|
|
482 |
_ctx.clearRect(0,0,this.main_width, this.main_height); |
|
|
483 |
_(_links).each(function(_link) { |
|
|
484 |
_ctx.beginPath(); |
|
|
485 |
_ctx.moveTo(_link.from_x,_link.from_y); |
|
|
486 |
_ctx.lineTo(_link.to_x,_link.to_y); |
|
|
487 |
_ctx.stroke(); |
|
|
488 |
}) |
|
|
489 |
|
|
66
|
490 |
var _html = Mustache.to_html(Tlns.Templates.Occurrence, { |
|
|
491 |
occurrences:_(_visible).reject(function(_o) {return _o.in_cluster}), |
|
|
492 |
clusters: _clusters |
|
|
493 |
}); |
|
|
494 |
this.$.find('.Tl-Occurrences').html(_html); |
|
|
495 |
this.$.find('.Tl-Occurrence').mousedown(function() { |
|
67
|
496 |
var _el = $(this); |
|
|
497 |
_this.editing_occurrence = _occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id")); |
|
|
498 |
if (typeof _this.editing_occurrence !== "undefined") { |
|
|
499 |
_this.dragging_type = "occurrence"; |
|
|
500 |
_this.time_at_start = _this.editing_occurrence.date; |
|
|
501 |
_this.u_at_start = _this.editing_occurrence.univers.index; |
|
|
502 |
_this.editing_occurrence.editing = true; |
|
|
503 |
} |
|
66
|
504 |
}).mouseover(function() { |
|
|
505 |
var _el = $(this), |
|
|
506 |
_occurrence = _this.getOccurrence(_el.attr("occurrence-type"),_el.attr("occurrence-id")); |
|
|
507 |
_this.showTooltip(_occurrence.x, _occurrence.univers.y, _occurrence.title); |
|
|
508 |
}).mouseout(function() { |
|
|
509 |
_this.hideTooltip(); |
|
|
510 |
}); |
|
65
|
511 |
} |
|
|
512 |
|
|
66
|
513 |
Tlns.Classes.Timeline.prototype.getUnivers = function(_id) { |
|
|
514 |
return _(this.univers).find(function(_univ) { |
|
|
515 |
return (_univ.id == _id); |
|
|
516 |
}); |
|
|
517 |
} |
|
|
518 |
|
|
|
519 |
/* |
|
|
520 |
* Univers |
|
|
521 |
*/ |
|
|
522 |
|
|
65
|
523 |
Tlns.Classes.Univers = function(_data, _timeline, _index) { |
|
|
524 |
this.id = _data.id; |
|
|
525 |
this.index = _index; |
|
|
526 |
this.title = _data.nom; |
|
|
527 |
this.mainCharacter = _data.personnage; |
|
66
|
528 |
this.y = (_timeline.univers_height * _index); |
|
65
|
529 |
|
|
|
530 |
this.$label = $('<li>').css({ |
|
|
531 |
height : _timeline.univers_height + "px" |
|
|
532 |
}).html(Mustache.to_html(Tlns.Templates.Univers, this)) |
|
66
|
533 |
.addClass((_index % 2) ? 'Tl-Line-Odd' : 'Tl-Line-Even'); |
|
65
|
534 |
|
|
|
535 |
_timeline.$.find('.Tl-UniversLabels').append(this.$label); |
|
|
536 |
var _txt = _data.nom, |
|
|
537 |
_span = this.$label.find('span'); |
|
|
538 |
|
|
|
539 |
while (_span.outerWidth() > (_timeline.width - _timeline.main_width) && _txt) { |
|
|
540 |
_txt = _txt.substr(0, _txt.length - 1); |
|
|
541 |
_span.html(_txt + '…'); |
|
|
542 |
} |
|
|
543 |
} |
|
66
|
544 |
|
|
|
545 |
/* |
|
|
546 |
* Occurrence |
|
|
547 |
*/ |
|
|
548 |
|
|
|
549 |
Tlns.Classes.Occurrence = function(_timeline) { |
|
|
550 |
this.timeline = _timeline; |
|
|
551 |
} |
|
|
552 |
|
|
|
553 |
Tlns.Classes.Occurrence.prototype.update = function(_type, _data) { |
|
|
554 |
this.type = _type; |
|
|
555 |
this.id = _data.id || _.uniqueId(); |
|
|
556 |
this.date = _data.date || _data.datePublication; |
|
|
557 |
this.title = _data.titre || "<untitled>"; |
|
|
558 |
this.univers_id = _data.univers; |
|
|
559 |
this.univers = this.timeline.getUnivers(this.univers_id); |
|
|
560 |
this.status = _data.statut; |
|
|
561 |
this.published = _data.publie || false; |
|
|
562 |
this.locked = _data.verrouille || false; |
|
|
563 |
this.characters = _data.personnagesSecondaires || []; |
|
|
564 |
this.dependsOn = _data.dependDe || []; |
|
|
565 |
} |
|
|
566 |
|
|
|
567 |
Tlns.Classes.Occurrence.prototype.toString = function() { |
|
|
568 |
return "Occurrence " + this.type + ': "' + this.title + '"'; |
|
|
569 |
} |