59 |
59 |
60 Tlns.Utils.guid = function() { |
60 Tlns.Utils.guid = function() { |
61 return 'xxxx-xxxx-xxxx-xxxx'.replace(/x/g,function() { |
61 return 'xxxx-xxxx-xxxx-xxxx'.replace(/x/g,function() { |
62 return Math.floor(Math.random()*16).toString(16); |
62 return Math.floor(Math.random()*16).toString(16); |
63 }); |
63 }); |
|
64 } |
|
65 |
|
66 Tlns.Utils.drawArrow = function(_ctx, _color, _x1, _y1, _x2, _y2) { |
|
67 _ctx.strokeStyle = _color; |
|
68 _ctx.fillStyle = _color; |
|
69 _ctx.beginPath(); |
|
70 _ctx.moveTo(_x1,_y1); |
|
71 _ctx.lineTo(_x2,_y2); |
|
72 _ctx.stroke(); |
|
73 var _mod = Math.sqrt(Math.pow(_x2 - _x1, 2) + Math.pow(_y2 - _y1, 2)), |
|
74 _xu = (_x2 - _x1) / _mod, |
|
75 _yu = (_y2 - _y1) / _mod, |
|
76 _xm = (_x1 + _x2) / 2, |
|
77 _ym = (_y1 + _y2) / 2, |
|
78 _arrowWidth = 4, |
|
79 _arrowLength = 8, |
|
80 _x3 = _xm - _arrowLength * _xu + _arrowWidth * _yu, |
|
81 _y3 = _ym - _arrowLength * _yu - _arrowWidth * _xu, |
|
82 _x4 = _xm - _arrowLength * _xu - _arrowWidth * _yu, |
|
83 _y4 = _ym - _arrowLength * _yu + _arrowWidth * _xu; |
|
84 _ctx.beginPath(); |
|
85 _ctx.moveTo(_x3, _y3); |
|
86 _ctx.lineTo(_xm, _ym); |
|
87 _ctx.lineTo(_x4, _y4); |
|
88 _ctx.fill(); |
|
89 _ctx.stroke(); |
64 } |
90 } |
65 |
91 |
66 /* Defaults */ |
92 /* Defaults */ |
67 |
93 |
68 Tlns.Defaults.Timeline = { |
94 Tlns.Defaults.Timeline = { |
136 + '<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>' |
162 + '<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>' |
137 + '<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>' |
163 + '<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>' |
138 + '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul>' |
164 + '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul>' |
139 + '<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>' |
165 + '<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>' |
140 + '<ul class="Tl-Adding"><li class="Tl-AddingTitle">Ajout d\'une occurrence</li><li><span>Narrative</span><div class="Tl-AddOccurrence Tl-Occnarrative" occurrence-type="narrative" title="Glisser sur la frise chronologique pour ajouter"></div></li>' |
166 + '<ul class="Tl-Adding"><li class="Tl-AddingTitle">Ajout d\'une occurrence</li><li><span>Narrative</span><div class="Tl-AddOccurrence Tl-Occnarrative" occurrence-type="narrative" title="Glisser sur la frise chronologique pour ajouter"></div></li>' |
141 + '<li><span>De Production</span><div class="Tl-AddOccurrence Tl-Occproduction" occurrence-type="production" title="Glisser sur la frise chronologique pour ajouter"></div></li></ul></div>' |
167 + '<li><span>De Publication</span><div class="Tl-AddOccurrence Tl-Occpublication" occurrence-type="publication" title="Glisser sur la frise chronologique pour ajouter"></div></li></ul></div>' |
142 + '<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>'; |
168 + '<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>'; |
143 |
169 |
144 Tlns.Templates.Univers = '<span class="Tl-UniversText">{{title}}</span>'; |
170 Tlns.Templates.Univers = '<span class="Tl-UniversText">{{title}}</span>'; |
145 |
171 |
146 Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster Tl-Occ{{type}}" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}">' |
172 Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster Tl-Occ{{type}}" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}">' |
356 this.setTime(this.time_at_start + Math.floor(( this.start_pos.x - _event.pageX ) / this.current_scale)); |
382 this.setTime(this.time_at_start + Math.floor(( this.start_pos.x - _event.pageX ) / this.current_scale)); |
357 break; |
383 break; |
358 case "link": |
384 case "link": |
359 var _ctx = this.$.find('.Tl-Linking-Canvas')[0].getContext('2d'); |
385 var _ctx = this.$.find('.Tl-Linking-Canvas')[0].getContext('2d'); |
360 _ctx.clearRect(0,0,this.main_width, this.main_height); |
386 _ctx.clearRect(0,0,this.main_width, this.main_height); |
361 _ctx.beginPath(); |
387 Tlns.Utils.drawArrow( |
362 _ctx.strokeStyle = '#800080'; |
388 _ctx, |
363 _ctx.moveTo(this.editing_occurrence.x,this.editing_occurrence.y + Math.floor(this.univers_height / 2)); |
389 '#800080', |
364 _ctx.lineTo(_event.pageX - this.dragging_bounds.left, _event.pageY - this.dragging_bounds.top); |
390 this.editing_occurrence.x, |
365 _ctx.stroke(); |
391 this.editing_occurrence.y + Math.floor(this.univers_height / 2), |
|
392 _event.pageX - this.dragging_bounds.left, |
|
393 _event.pageY - this.dragging_bounds.top |
|
394 ); |
366 break; |
395 break; |
367 } |
396 } |
368 } |
397 } |
369 } |
398 } |
370 |
399 |
457 Tlns.Classes.Timeline.prototype.onOccurrencesLoaded = function(_data) { |
486 Tlns.Classes.Timeline.prototype.onOccurrencesLoaded = function(_data) { |
458 if (typeof _data.occurrencesNarratives === "object" && _data.occurrencesNarratives !== null) { |
487 if (typeof _data.occurrencesNarratives === "object" && _data.occurrencesNarratives !== null) { |
459 for (var _i = 0; _i < _data.occurrencesNarratives.length; _i++) { |
488 for (var _i = 0; _i < _data.occurrencesNarratives.length; _i++) { |
460 this.createOrUpdateOccurrence("narrative", _data.occurrencesNarratives[_i]); |
489 this.createOrUpdateOccurrence("narrative", _data.occurrencesNarratives[_i]); |
461 } |
490 } |
462 for (var _i = 0; _i < _data.occurrencesProduction.length; _i++) { |
491 for (var _i = 0; _i < _data.occurrencesPublication.length; _i++) { |
463 this.createOrUpdateOccurrence("production", _data.occurrencesProduction[_i]); |
492 this.createOrUpdateOccurrence("publication", _data.occurrencesPublication[_i]); |
464 } |
493 } |
465 } |
494 } |
466 if (!this.mouse_down) { |
495 if (!this.mouse_down) { |
467 this.drawOccurrences(); |
496 this.drawOccurrences(); |
468 } |
497 } |
600 }); |
629 }); |
601 |
630 |
602 var _ctx = this.$.find('.Tl-Canvas')[0].getContext('2d'); |
631 var _ctx = this.$.find('.Tl-Canvas')[0].getContext('2d'); |
603 _ctx.clearRect(0,0,this.main_width, this.main_height); |
632 _ctx.clearRect(0,0,this.main_width, this.main_height); |
604 _(_links).each(function(_link) { |
633 _(_links).each(function(_link) { |
605 _ctx.beginPath(); |
634 Tlns.Utils.drawArrow(_ctx, "#505050", _link.from_x,_link.from_y, _link.to_x,_link.to_y); |
606 _ctx.moveTo(_link.from_x,_link.from_y); |
|
607 _ctx.lineTo(_link.to_x,_link.to_y); |
|
608 _ctx.stroke(); |
|
609 }); |
635 }); |
610 |
636 |
611 var _html = Mustache.to_html(Tlns.Templates.Occurrence, { |
637 var _html = Mustache.to_html(Tlns.Templates.Occurrence, { |
612 occurrences:_(_visible).reject(function(_o) {return _o.in_cluster}), |
638 occurrences:_(_visible).reject(function(_o) {return _o.in_cluster}), |
613 clusters: _clusters, |
639 clusters: _clusters, |
645 if (typeof _id !== "undefined") { |
671 if (typeof _id !== "undefined") { |
646 var _occurrence = _this.getOccurrence(_id); |
672 var _occurrence = _this.getOccurrence(_id); |
647 if (!_occurrence.locked) { |
673 if (!_occurrence.locked) { |
648 _el.find('.Tl-Link').show(); |
674 _el.find('.Tl-Link').show(); |
649 } |
675 } |
650 _occurrence.formatted_date = Tlns.Utils.dateFormat(_occurrence.date,_this.tooltip_date_format); |
676 if (!_this.is_dragging) { |
651 var _html = Mustache.to_html(Tlns.Templates.OccurrenceTooltip, _occurrence); |
677 _occurrence.formatted_date = Tlns.Utils.dateFormat(_occurrence.date,_this.tooltip_date_format); |
652 _this.showTooltip(_occurrence.x, _occurrence.y, _html, (_event.pageY - _this.dragging_bounds.top) >= (.4 * _this.main_height) ); |
678 var _html = Mustache.to_html(Tlns.Templates.OccurrenceTooltip, _occurrence); |
|
679 _this.showTooltip(_occurrence.x, _occurrence.y, _html, (_event.pageY - _this.dragging_bounds.top) >= (.4 * _this.main_height) ); |
|
680 } |
653 } |
681 } |
654 }).mouseout(function() { |
682 }).mouseout(function() { |
655 var _el = $(this), |
683 var _el = $(this), |
656 _id = _el.attr("occurrence-id"); |
684 _id = _el.attr("occurrence-id"); |
657 if (typeof _id !== "undefined") { |
685 if (typeof _id !== "undefined") { |