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 87	4dc63e325f48
parent 85	7a0de7ed7575
child 88	8bab0eb0d791

equal deleted inserted replaced

-:4da0cc5d73ca
+:4dc63e325f48
 Tlns.Utils.guid = function() {
 return 'xxxx-xxxx-xxxx-xxxx'.replace(/x/g,function() {
 return Math.floor(Math.random()*16).toString(16);
 });
-}
-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,
 Tlns.Defaults.Timeline.timescales[_i].level = _i;
 }
 /* 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>'
++ '<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>'
-+ '<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>'
++ '</div>'
-+ '<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-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">'
 + '<div class="Ls-Column"><h2>Filtres&nbsp;:</h2><h3>Univers&nbsp;:</h3><ul class="Ls-Univers"></ul></div>'
 + '<div class="Ls-Column"><h3>Type d\'occurrence&nbsp;:</h3><ul class="Ls-Occtypes"><li data="narrative" class="Ls-Critere Ls-Active Ls-CrWithIcon"><div class="Ls-OccIcon Tl-Occnarrative"></div>Narratives</li><li data="publication" class="Ls-Critere Ls-Active Ls-CrWithIcon"><div class="Ls-OccIcon Tl-Occpublication"></div>de Publication</li></ul>'
 Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}">'
 + '<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}} &mdash; {{univers.title}} &mdash; {{translated_status}} &mdash; {{#jt}}Au JT{{/jt}}{{^jt}}Hors JT{{/jt}}{{#format}} &mdash; {{format}}{{/format}}</p><div style="clear:both;"></div></li>{{/occurrences}}';
 Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3><p class="Tl-Tooltip-Date">{{formatted_date}} &mdash; {{translated_status}} &mdash; {{#jt}}Au JT{{/jt}}{{^jt}}Hors JT{{/jt}}{{#format}} &mdash; {{format}}{{/format}}</p>'
 _this.drawGrid();
 }, 150);
 this.throttledDrawList = _.throttle(function() {
 _this.drawList();
-}, 150);
-this.throttledShowEditingLinks = _.throttle(function() {
-_this.showEditingLinks();
 }, 150);
 this.setLevel(this.level);
 this.$.find('.Tl-TopBar-Timescales>div').click(function() {
 this.$.find('.Tl-Overlay-Box').mouseover(function(_event) {
 $(this).show();
 }).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);
 });
 _this.$.find(".Tl-Main").hide();
 _this.$.find(".Onglet-Tl").removeClass("active");
 _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();
-})
 }
 Tlns.Classes.Timeline.prototype.onMouseDown = function(_event) {
 this.mouse_down = true;
 this.dragging_type = "timeline";
 }
 }
 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;
 }
 }
 }
 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;
 }
 }
 }
 this.$.find(".Ls-From-Date").val(Tlns.Utils.dateFormat(this.start_time, '{{0dayOfMonth}}/{{0monthNumber}}/{{year}}'));
 this.$.find(".Ls-To-Time").val(Tlns.Utils.dateFormat(this.end_time, '{{0hours}}:{{0minutes}}'));
 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() {
 if (this.sync_now) {
 this.$.find('.Tl-TopBar-SyncButton').addClass("active");
 }).mouseover(function(_event) {
 var _el = $(this),
 _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() {
 var _el = $(this),
 _id = _el.attr("occurrence-id");
 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");
 if (_this.open_cluster == _contents) {
 _this.open_cluster = false;
 } else {
 _this.open_cluster = _contents;
 }
 _this.throttledDrawGrid();
-_this.throttledShowEditingLinks();
 })
 }
 Tlns.Classes.Timeline.prototype.drawList = function() {
 var _universfilter = this.$.find(".Ls-Univers li.Ls-Active").map(function(){return $(this).attr("data")}),
 var _id = $(this).attr("data-id"),
 _data = {
 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);

eulalie