--- a/timeline/js/timeline.js Tue Aug 13 11:12:01 2013 +0200
+++ b/timeline/js/timeline.js Tue Aug 13 11:14:25 2013 +0200
@@ -64,32 +64,6 @@
});
}
-Tlns.Utils.drawArrow = function(_ctx, _color, _x1, _y1, _x2, _y2) {
- _ctx.strokeStyle = _color;
- _ctx.fillStyle = _color;
- _ctx.beginPath();
- _ctx.moveTo(_x1,_y1);
- _ctx.lineTo(_x2,_y2);
- _ctx.stroke();
- var _mod = Math.sqrt(Math.pow(_x2 - _x1, 2) + Math.pow(_y2 - _y1, 2)),
- _xu = (_x2 - _x1) / _mod,
- _yu = (_y2 - _y1) / _mod,
- _xm = (_x1 + _x2) / 2,
- _ym = (_y1 + _y2) / 2,
- _arrowWidth = 4,
- _arrowLength = 8,
- _x3 = _xm - _arrowLength * _xu + _arrowWidth * _yu,
- _y3 = _ym - _arrowLength * _yu - _arrowWidth * _xu,
- _x4 = _xm - _arrowLength * _xu - _arrowWidth * _yu,
- _y4 = _ym - _arrowLength * _yu + _arrowWidth * _xu;
- _ctx.beginPath();
- _ctx.moveTo(_x3, _y3);
- _ctx.lineTo(_xm, _ym);
- _ctx.lineTo(_x4, _y4);
- _ctx.fill();
- _ctx.stroke();
-}
-
Tlns.Utils.timeFieldProcess = function(_val) {
var _h = 0,
_m = 0,
@@ -222,14 +196,13 @@
/* Templates */
-Tlns.Templates.Timeline = '<ul class="Onglets"><li class="Onglet-Tl active">Frise chronologique</li><li class="Onglet-Ls">Liste des occurrences</li></ul><div class="Tl-Main"><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>'
+Tlns.Templates.Timeline = '<ul class="Onglets"><li class="Onglet-Tl active">Frise chronologique</li><li class="Onglet-Ls">Liste des occurrences</li></ul><div class="Tl-Main"><div class="Tl-TopBar">'
+ '<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><canvas class="Tl-Layer Tl-Linking-Canvas"></canvas><div class="Tl-Layer Tl-Occurrences"></div>'
- + '<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>'
- + '<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>'
+ + '<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-Tip-Top"></div><div class="Tl-Overlay-Main"></div><div class="Tl-Overlay-Tip-Bottom"></div></div></div></div></div></div>'
+'<div class="Ls-Main"><div class="Ls-Filtres">'
@@ -250,9 +223,9 @@
+ '<div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}'
+ '{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}} Tl-Occ{{status}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;">'
// + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}'
- + '<div class="Tl-Link"></div></div>{{/occurrences}}{{#open_cluster}}<div class="Tl-ClusterOverlay" 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}} Tl-Occ{{status}}{{#editing}} Tl-Editing{{/editing}}" 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}}';
+ + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}</div>{{/occurrences}}</div>{{/open_cluster}}';
Tlns.Templates.Occurrence_List = '{{#occurrences}}<li class="Ls-Occurrence" data-id="{{id}}"><div class="Ls-OccIcon Tl-Occ{{type}} Tl-Occ{{status}}"></div><h4 class="Ls-Occurrence-Title"><a href="#">{{title}}</a></h4>'
+ '<p class="Ls-Occ-More">{{formatted_date}} — {{univers.title}} — {{translated_status}} — {{#jt}}Au JT{{/jt}}{{^jt}}Hors JT{{/jt}}{{#format}} — {{format}}{{/format}}</p><div style="clear:both;"></div></li>{{/occurrences}}';
@@ -302,10 +275,6 @@
_this.drawList();
}, 150);
- this.throttledShowEditingLinks = _.throttle(function() {
- _this.showEditingLinks();
- }, 150);
-
this.setLevel(this.level);
this.$.find('.Tl-TopBar-Timescales>div').click(function() {
@@ -359,44 +328,7 @@
}).mouseout(function(_event) {
$(this).hide();
});
-
- this.$.find('.Tl-TopBar-AddButton').click(function() {
- $(this).toggleClass('active');
- _this.$.find('.Tl-Adding').toggle();
- });
-
- this.$.find('.Tl-AddOccurrence').mousedown(function(_event) {
- var _el = $(this),
- _type = _el.attr("occurrence-type"),
- _d = _this.timeFromMouse(_event.pageX),
- _u = _this.universFromMouse(_event.pageY),
- _occ = _this.createOrUpdateOccurrence(
- _type,
- {
- datePublication: Math.floor(_d / 1000),
- titre: '<Nouvelle occurrence>',
- idUnivers: _this.univers[_u].id,
- statut: 'a_realiser',
- jt: false
- }
- );
- _occ.just_created = true;
- _(_this.occurrences).each(function(_occ) {
- _occ.editing = false;
- });
- _occ.editing = true;
- _this.editing_occurrence = _occ;
- _this.dragging_type = "occurrence";
- window.setTimeout(function () {
- _this.$.find('.Tl-TopBar-AddButton').removeClass('active');
- _this.$.find('.Tl-Adding').hide();
- }, 200);
- _this.throttledDrawGrid();
- }).mouseup(function(_event) {
- _this.onMouseUp(_event);
- return false;
- });
-
+
/* Loading Univers */
$.getJSON(this.url_univers, function(_data) {
_this.onUniversLoaded(_data);
@@ -464,46 +396,7 @@
_this.$.find(".Onglet-Ls").addClass("active");
_this.throttledDrawList();
});
-
-
- /* BINDING MEDIADATA EVENTS */
-
- $("body").bind("AjoutOccurrenceEditeur MiseAJourOccurrenceEditeur", function(_event, _data) {
- var _type = _data.typeOccurrence.replace(/^Occurrence/i,'').toLowerCase();
- _this.createOrUpdateOccurrence(_type, _data);
- _this.throttledDrawGrid();
- _this.throttledDrawList();
- });
-
- $("body").bind("SuppressionOccurrenceEditeur", function(_event, _data) {
- var _id = _data.typeOccurrence.replace(/^Occurrence/i,'').toLowerCase() + '_' + _data.id;
- _this.deleteOccurrence(_id);
- _this.throttledDrawGrid();
- _this.throttledDrawList();
- });
-
- $("body").bind("AjoutDependanceEditeur", function(_event, _data) {
- var _sourceId = _data.typeOccurrence.replace(/^Occurrence/i,'').toLowerCase() + '_' + _data.id,
- _targetId = _data.typeOccurrenceCible.replace(/^Occurrence/i,'').toLowerCase() + '_' + _data.idCible;
- _this.getOccurrence(_sourceId).addDependency(_targetId);
- _this.throttledDrawGrid();
- });
-
- $("body").bind("SuppressionDependanceEditeur", function(_event, _data) {
- var _sourceId = _data.typeOccurrence.replace(/^Occurrence/i,'').toLowerCase() + '_' + _data.id,
- _targetId = _data.typeOccurrenceCible.replace(/^Occurrence/i,'').toLowerCase() + '_' + _data.idCible;
- _this.getOccurrence(_sourceId).removeDependency(_targetId);
- _this.throttledDrawGrid();
- });
-
- $("body").bind("SelectionOccurrenceEditeur", function(_event, _data) {
- var _id = _data.typeOccurrence.replace(/^Occurrence/i,'').toLowerCase() + '_' + _data.id;
- _(_this.occurrences).each(function(_occ) {
- _occ.editing = (_occ.id == _id);
- });
- _this.throttledDrawGrid();
- })
-
+
}
@@ -521,44 +414,6 @@
}
Tlns.Classes.Timeline.prototype.onMouseUp = function(_event) {
- if (this.is_dragging) {
- switch (this.dragging_type) {
- case "occurrence":
- var _event = ( this.editing_occurrence.just_created ? "Ajout" : "MiseAJour" ) + "OccurrenceTimeline",
- _data = {
- id: this.editing_occurrence.original_id,
- typeOccurrence: "Occurrence" + this.editing_occurrence.type.replace(/^./,function(_l) { return _l.toUpperCase()}),
- datePublication : Math.floor(this.editing_occurrence.date / 1000),
- titre : this.editing_occurrence.title,
- idUnivers: this.editing_occurrence.univers_id,
- statut: this.statuses[this.editing_occurrence.status],
- JT: +!!this.editing_occurrence.jt
- }
- $("body").trigger(_event, _data);
- this.editing_occurrence.just_created = false;
- this.throttledDrawGrid();
- break;
- case "link":
- this.throttledDrawGrid();
- var _ctx = this.$.find('.Tl-Linking-Canvas')[0].getContext('2d');
- _ctx.clearRect(0,0,this.main_width, this.main_height);
- break;
- }
- } else {
- if (this.dragging_type == "occurrence" || this.dragging_type == "link") {
- if (this.editing_occurrence.just_created) {
- this.deleteOccurrence(this.editing_occurrence.id);
- this.throttledDrawGrid();
- } else {
- var _data = {
- id: this.editing_occurrence.original_id,
- typeOccurrence: "Occurrence" + this.editing_occurrence.type.replace(/^./,function(_l) { return _l.toUpperCase()})
- }
- $("body").trigger("SelectionOccurrenceTimeline", _data);
- }
- }
- }
- this.$.find('.Tl-Link').hide();
this.mouse_down = false;
this.is_dragging = false;
this.dragging_type = undefined;
@@ -592,30 +447,9 @@
if (this.is_dragging) {
this.hideTooltip();
switch (this.dragging_type) {
- case "occurrence":
- var _d = this.timeFromMouse(_event.pageX);
- this.editing_occurrence.date = _d;
- this.editing_occurrence.formatted_date = Tlns.Utils.dateFormat(this.editing_occurrence.date,this.tooltip_date_format);
- var _u = this.universFromMouse(_event.pageY);
- this.editing_occurrence.univers = this.univers[_u];
- 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);
- Tlns.Utils.drawArrow(
- _ctx,
- '#800080',
- this.editing_occurrence.x,
- this.editing_occurrence.y + Math.floor(this.univers_height / 2),
- _event.pageX - this.dragging_bounds.left,
- _event.pageY - this.dragging_bounds.top
- );
- break;
}
}
}
@@ -690,7 +524,6 @@
this.$.find(".Ls-To-Date").val(Tlns.Utils.dateFormat(this.end_time, '{{0dayOfMonth}}/{{0monthNumber}}/{{year}}'));
this.throttledDrawGrid();
this.throttledDrawList();
- this.throttledShowEditingLinks();
}
Tlns.Classes.Timeline.prototype.drawGrid = function() {
@@ -901,13 +734,9 @@
_id = _el.attr("occurrence-id");
if (typeof _id !== "undefined") {
var _occurrence = _this.getOccurrence(_id);
-// if (!_occurrence.locked) {
- _el.find('.Tl-Link').show();
-// }
if (!_this.is_dragging) {
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) );
-// _this.showLinks(_id);
}
}
}).mouseout(function() {
@@ -916,36 +745,9 @@
if (typeof _id !== "undefined") {
var _occurrence = _this.getOccurrence(_id);
_this.hideTooltip();
- _this.$.find('.Tl-Link').hide();
- _this.throttledShowEditingLinks();
- }
- }).mouseup(function() {
- var _el = $(this);
- if (_this.dragging_type == "link") {
- var _target = _el.attr("occurrence-id");
- if (_target != _this.editing_occurrence.id) {
- _this.editing_occurrence.addDependency(_target);
- $("body").trigger("AjoutDependanceTimeline",
- {
- id: _this.editing_occurrence.original_id,
- typeOccurrence: "Occurrence" + _this.editing_occurrence.type.replace(/^./,function(_l) { return _l.toUpperCase()}),
- idCible: _target.replace(/^.*_/,''),
- typeOccurrenceCible: "Occurrence" + _target.replace(/_.*$/,'').replace(/^./,function(_l) { return _l.toUpperCase()})
- }
- );
- }
}
});
-
- this.$.find('.Tl-Link').mousedown(function() {
- var _el = $(this).parent(),
- _id = _el.attr("occurrence-id");
- _this.editing_occurrence = _this.getOccurrence(_id);
- if (typeof _this.editing_occurrence !== "undefined" /* && !_this.editing_occurrence.locked */ ) {
- _this.dragging_type = "link";
- }
- })
-
+
this.$.find('.Tl-Cluster').click(function() {
var _el = $(this),
_contents = _el.attr("cluster-contents");
@@ -955,7 +757,6 @@
_this.open_cluster = _contents;
}
_this.throttledDrawGrid();
- _this.throttledShowEditingLinks();
})
}
@@ -1015,41 +816,10 @@
id: _id.replace(/^.*_/,''),
typeOccurrence: "Occurrence" + _id.replace(/_.*$/,'').replace(/^./,function(_l) { return _l.toUpperCase()})
}
- $("body").trigger("SelectionOccurrenceTimeline", _data);
return false;
});
}
-Tlns.Classes.Timeline.prototype.showLinks = function(_id) {
- var _ctx = this.$.find('.Tl-Canvas')[0].getContext('2d');
- _ctx.clearRect(0,0,this.main_width, this.main_height);
-
- if (typeof _id !== "undefined") {
- var _links = [],
- _this = this;
- _(this.occurrences).each(function(_occurrence) {
- _(_occurrence.dependsOn).each(function(_dependance) {
- var _parent = _this.getOccurrence(_dependance);
- if (typeof _parent !== "undefined" && (_parent.id == _id || _occurrence.id == _id)) {
- _links.push({
- from_x: _occurrence.x,
- from_y: _occurrence.y + Math.floor(_this.univers_height / 2),
- to_x: _parent.x,
- to_y: _parent.y + Math.floor(_this.univers_height / 2)
- });
- }
- });
- });
- }
- _(_links).each(function(_link) {
- Tlns.Utils.drawArrow(_ctx, "#505050", _link.from_x,_link.from_y, _link.to_x,_link.to_y);
- });
-}
-
-Tlns.Classes.Timeline.prototype.showEditingLinks = function() {
- this.showLinks(typeof this.editing_occurrence !== "undefined" ? this.editing_occurrence.id : undefined);
-}
-
Tlns.Classes.Timeline.prototype.getUnivers = function(_id) {
return _(this.univers).find(function(_univ) {
return (_univ.id == _id);