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 90	50e3c4ba168a
parent 89	6b1a038edbf7
child 91	5b770cf1a6e3

equal deleted inserted replaced

-:6b1a038edbf7
+:50e3c4ba168a
 central_time: 0,
 sync_now: true,
 api_endpoint: "",
 api_method: "searchForTimelineEdito",
 occurrences: [],
-cluster_spacing: 12,
+grid_spacing: 12,
 tooltip_date_format: '{{dayOfMonth}} {{shortMonthName}} {{year}} {{0hours}}:{{0minutes}}',
 statuses: {
 "valide": "Validée",
 "a_valider": "A valider",
 "a_realiser": "A réaliser"
 + '</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>'
 Tlns.Templates.Univers = '<div class="Tl-UniversText">{{title}}</div>';
-Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}">'
+Tlns.Templates.Occurrence =
-+ '<div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}'
+'{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}} Tl-Occ{{status}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;"></div>{{/occurrences}}';
-+ '{{#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>{{/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>{{/occurrences}}</div>{{/open_cluster}}';
 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>'
 + '<p class="Tl-Tooltip-Description">{{description}}</p>'
 //    + '<p class="Tl-Tooltip-Characters">{{univers.mainCharacter}}{{#characters}}, {{.}}{{/characters}}</p>'
 Tlns.Classes.Timeline.prototype.drawOccurrences = function() {
 var _this = this;
 _(this.occurrences).each(function(_occ) {
 _occ.x = _this.current_scale * (_occ.date - _this.start_time);
 _occ.y = _occ.univers.y;
-_occ.in_cluster = false;
 });
 var _visible = _(this.occurrences).filter(function(_occ) {
 return (_occ.date >= _this.start_time && _occ.date <= _this.end_time && _occ.status);
 });
-var _moved = true;
+var _moved = true, l = 0;
-while (_moved) {
+while (_moved && l < 200) {
+l++;
 _moved = false;
 for (var _i = 0; _i < _visible.length; _i++) {
 for (var _j = 0; _j < _i; _j++) {
+var delta = Math.abs(_visible[_j].x-_visible[_i].x);
 if (_visible[_j].univers_id == _visible[_i].univers_id
-&& _visible[_j].x != _visible[_i].x
+&& delta < this.grid_spacing
-&& Math.abs(_visible[_j].x-_visible[_i].x) < this.cluster_spacing
 ) {
+var sign = _visible[_i].x < _visible[_j].x ? 1 : -1,
+add = sign * (this.cluster_spacing - delta) / 2;
 _moved = true;
-_visible[_i].x = this.cluster_spacing * Math.round(_visible[_i].x / this.cluster_spacing);
+_visible[_i].x -= add;
-_visible[_j].x = this.cluster_spacing * Math.round(_visible[_j].x / this.cluster_spacing);
+_visible[_j].x += add;
 }
 }
 }
 }
-var _clusters = [],
-_openCluster = false;
-for (var _i = 0; _i < _visible.length; _i++) {
-for (var _j = 0; _j < _i; _j++) {
-if (_visible[_j].univers_id == _visible[_i].univers_id && _visible[_j].x == _visible[_i].x) {
-_visible[_j].in_cluster = true;
-_visible[_i].in_cluster = true;
-var _x = _visible[_j].x,
-_y = _visible[_j].y;
-_cluster = _(_clusters).find(function(_c) { return _c.x == _x && _c.y == _y });
-if (typeof _cluster === "undefined") {
-_cluster = { x: _x, y: _y, occurrences: [] };
-_clusters.push(_cluster);
-}
-if ("undefined" === typeof _(_cluster.occurrences).find(function(_o) {
-return _o.type == _visible[_j].type && _o.id == _visible[_j].id;
-})) {
-_cluster.occurrences.push(_visible[_j]);
-}
-if ("undefined" === typeof _(_cluster.occurrences).find(function(_o) {
-return _o.type == _visible[_i].type && _o.id == _visible[_i].id;
-})) {
-_cluster.occurrences.push(_visible[_i]);
-}
-}
-}
-}
-_(_clusters).each(function(_cluster) {
-_cluster.occurrences = _(_cluster.occurrences).sortBy(function(_o) {
-return _o.date;
-});
-_cluster.contents = _cluster.occurrences.map(function(_o) {
-return _o.id;
-}).join("|");
-if (_cluster.contents == _this.open_cluster) {
-_openCluster = _cluster;
-}
-});
 var _html = Mustache.to_html(Tlns.Templates.Occurrence, {
-occurrences:_(_visible).reject(function(_o) {return _o.in_cluster}),
+occurrences: _visible
-clusters: _clusters,
-open_cluster: _openCluster
 });
 this.$.find('.Tl-Occurrences').html(_html);
-if (_openCluster) {
-var _w = this.$.find('.Tl-Occurrence').width(),
-_ww = _w * _openCluster.occurrences.length;
-this.$.find('.Tl-ClusterOverlay').css({
-"margin-left": - Math.floor(_ww/2) + "px",
-width: _ww
-});
-_(_openCluster.occurrences).each(function(_o, _i) {
-_o.y = _o.y - 20;
-_o.x = _o.x - (_ww / 2) + ((_i + .5) * _w);
-});
-}
 this.$.find('.Tl-Occurrence').mousedown(function() {
 var _el = $(this),
 _id = _el.attr("occurrence-id");
 if (typeof _id !== "undefined") {
 _this.editing_occurrence = _this.getOccurrence(_id);
 if (typeof _id !== "undefined") {
 var _occurrence = _this.getOccurrence(_id);
 _this.hideTooltip();
 }
 });
-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();
-})
 }
 Tlns.Classes.Timeline.prototype.getUnivers = function(_id) {
 return _(this.univers).find(function(_univ) {
 return (_univ.id == _id);
 this.original_data = _data;
 this.id = _data.id;
 this.date = new Date(1000 * (_data.dateFirstPublication || _data.dateCreate) || Date.now);
 this.formatted_date = Tlns.Utils.dateFormat(this.date,Tlns.Defaults.Timeline.tooltip_date_format);
 this.title = _data.title;
-this.univers_id = this.timeline.univers[Math.floor(this.timeline.univers.length * Math.random())].id;
+this.univers_id = this.timeline.univers[0].id;
 this.univers = this.timeline.getUnivers(this.univers_id);
 this.type = "publication";
 if (typeof _data.statut !== "undefined" || typeof this.status === "undefined") {
 switch(_data.statut) {
 case "Validée":

eulalie