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 97	0444ad28e6ba
parent 96	7d1c2c21d891
child 98	abead2de6332

equal deleted inserted replaced

-:7d1c2c21d891
+:0444ad28e6ba
 } else {
 _object[_k] = _v;
 }
 }
 });
-}
+};
 Tlns.Utils.dateFormat = function(_date, _template) {
 if (typeof _date !== "object") {
 _date = new Date(parseInt(_date));
 }
 dayOfMonth: _date.getDate(),
 "0dayOfMonth": Tlns.Utils.zeroPad(_date.getDate()),
 monthNumber: 1+_date.getMonth(),
 "0monthNumber": Tlns.Utils.zeroPad(1+_date.getMonth()),
 monthName: ["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"][_date.getMonth()],
-shortMonthName: ["jan","fev","mar","avr","mai","jun","jul","aou","sep","oct","nov","dec"][_date.getMonth()],
+shortMonthName: ["jan.","fev.","mar.","avr.","mai","jun.","jul.","aou.","sep.","oct.","nov.","dec."][_date.getMonth()],
 year: _date.getFullYear()
 }
 return Mustache.to_html(_template, _params);
-}
+};
 Tlns.Utils.guid = function() {
 return 'xxxx-xxxx-xxxx-xxxx'.replace(/x/g,function() {
 return Math.floor(Math.random()*16).toString(16);
 });
-}
+};
 Tlns.Utils.timeFieldProcess = function(_val) {
 var _h = 0,
 _m = 0,
 _matches = _val.match(/(\d+)/g);
 return {
 hours: _h,
 minutes: _m,
 text: Tlns.Utils.zeroPad(_h) + ':' + Tlns.Utils.zeroPad(_m)
 }
-}
+};
 Tlns.Utils.dateFieldProcess = function(_val) {
 var _now = new Date(),
 _y = _now.getFullYear(),
 _m = 1 + _now.getMonth(),
 year: _y,
 month: _m,
 date: _d,
 text: Tlns.Utils.zeroPad(_d) + '/' + Tlns.Utils.zeroPad(_m) + '/' + _y
 }
-}
+};
 /* Defaults */
 Tlns.Defaults.Timeline = {
 email: "",
 token: "",
 container : "timeline",
-width : 780,
+width : 790,
 height : 225,
 min_width : 400,
 min_height : 100,
 main_width : 726,
 linelabels : [
 show: true
 }
 },
 maxtime: false,
 url_base: ""
-}
+};
 for (var _i = 0; _i < Tlns.Defaults.Timeline.timescales.length; _i++) {
 Tlns.Defaults.Timeline.timescales[_i].level = _i;
 }
 /* Templates */
 Tlns.Templates.Timeline = '<div class="Tl-Main"><div class="Tl-Grid"></div><div class="Tl-TopBar"></div>'
-+ '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul>'
++ '<div class="Tl-BottomPart"><div class="Tl-AnotherGroup"><ul class="Tl-UniversLabels"></ul>'
 + '<div class="Tl-MainPart"><div class="Tl-Occurrences"></div>'
-+ '</div>'
++ '</div></div><div class="Tl-Slider-Container"><a class="Tl-Slider-Zoom-In" href="#"></a><div class="Tl-Slider"></div><a class="Tl-Slider-Zoom-Out" href="#"></a></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></div></div></div></div>'
++ '<div class="Tl-Overlay-Container"><div class="Tl-Overlay-Box"><div class="Tl-Overlay"><div class="Tl-Overlay-Main"></div></div></div></div></div></div>'
-+ '<div class="Tl-Details"></div>'
++ '<div class="Tl-Details"></div>';
 Tlns.Templates.Univers = '<div class="Tl-UniversText">{{title}}</div>';
 Tlns.Templates.Occurrence =
 '{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;">'
 height : this.height + "px"
 });
 this.top_height = this.$.find('.Tl-TopBar').outerHeight();
 this.main_height = this.height - this.top_height;
 //this.main_height = this.height - 27;
+var labelsWidth = this.$.find('.Tl-UniversLabels').width();
+this.main_width = this.width - labelsWidth - this.$.find('.Tl-Slider-Container').width();
 this.$.find('.Tl-BottomPart').css("height", this.main_height + "px");
-this.$.find('.Tl-MainPart, .Tl-Grid').css("width", this.main_width + "px");
+this.$.find('.Tl-MainPart').css("width", this.main_width + "px");
+this.$.find('.Tl-Grid').css({
+"left": labelsWidth + "px",
+"width": this.main_width + "px"
+});
 this.$.find('.Tl-Overlay-Container').css("left", (this.$.find('.Tl-BottomPart').outerWidth() - this.main_width) + "px");
+this.$slider = this.$.find('.Tl-Slider');
-var _o = this.$.find('.Tl-MainPart').offset();
+var $mainpart = this.$.find('.Tl-MainPart'),
+_o = $mainpart.offset();
 this.dragging_bounds = {
 left: _o.left,
 top: _o.top,
-right: _o.left + this.$.find('.Tl-MainPart').outerWidth(),
+right: _o.left + $mainpart.outerWidth(),
-bottom: _o.top + this.$.find('.Tl-MainPart').outerHeight(),
+bottom: _o.top + $mainpart.outerHeight(),
 };
-this.$.find('.Tl-UniversLabels').css({
-width: this.width - this.main_width
-});
 var _this = this;
 this.throttledDrawGrid = _.throttle(function() {
 _this.drawGrid();
 }, 150);
-this.setLevel(this.level);
+var $scrollgroup = this.$.find('.Tl-AnotherGroup');
-this.$.find('.Tl-MainPart').mousedown(function(_event) {
+$scrollgroup.mousedown(function(_event) {
 _this.onMouseDown(_event);
 return false;
 });
-this.$.find('.Tl-MainPart').mousemove(function(_event) {
+$scrollgroup.mousemove(function(_event) {
 _this.onMouseMove(_event);
 return false;
 });
-this.$.find('.Tl-MainPart').mouseup(function(_event) {
+$scrollgroup.mouseup(function(_event) {
 _this.onMouseUp(_event);
 return false;
 });
-this.$.find('.Tl-MainPart').mousewheel(function(_event, _delta) {
+$scrollgroup.mousewheel(function(_event, _delta) {
 var _newLevel = Math.max(0,Math.min(_this.timescales.length-1, (_delta < 0 ? -1 : 1) + parseInt(_this.level)));
 if (_newLevel != _this.level) {
 _this.hideTooltip();
 var _deltaX = _event.pageX - _this.dragging_bounds.left,
 _tAtMouse = _this.timeFromMouse(_event.pageX),
 $(this).show();
 }).mouseout(function(_event) {
 $(this).hide();
 });
+this.$slider.slider({
+orientation: "vertical",
+min: 0,
+max: this.timescales.length - 1,
+value: this.level,
+slide: function(e, ui) {
+_this.setLevel(ui.value);
+}
+});
+this.$.find('.Tl-Slider-Container').mousewheel(function(_event, _delta) {
+var _newLevel = Math.max(0,Math.min(_this.timescales.length-1, (_delta < 0 ? -1 : 1) + parseInt(_this.level)));
+if (_newLevel != _this.level) {
+_this.hideTooltip();
+_this.setLevel(_newLevel);
+}
+return false;
+});
+$(".Tl-Slider-Zoom-In").click(function() {
+_this.setLevel(Math.min(_this.timescales.length-1,parseInt(_this.level)+1));
+return false;
+});
+$(".Tl-Slider-Zoom-Out").click(function() {
+_this.setLevel(Math.max(0,parseInt(_this.level)-1));
+return false;
+});
+this.setLevel(this.level);
 this.onUniversLoaded(this.linelabels);
-}
+};
 Tlns.Classes.Timeline.prototype.onMouseDown = function(_event) {
 this.mouse_down = true;
 this.is_dragging = false;
 this.start_pos = {
 };
 if (typeof this.dragging_type === "undefined") {
 this.time_at_start = this.central_time;
 this.dragging_type = "timeline";
 }
-}
+};
 Tlns.Classes.Timeline.prototype.onMouseUp = function(_event) {
 this.mouse_down = false;
 this.is_dragging = false;
 this.dragging_type = undefined;
-}
+};
 Tlns.Classes.Timeline.prototype.timeFromX = function(_x) {
 return this.start_time + _x / this.current_scale;
-}
+};
 Tlns.Classes.Timeline.prototype.timeFromMouse = function(_pageX) {
 return this.timeFromX(_pageX - this.dragging_bounds.left);
-}
+};
 Tlns.Classes.Timeline.prototype.universFromY = function(_y) {
-return Math.max(0,Math.min(this.univers.length, Math.floor(_y / this.univers_height)))
+return Math.max(0,Math.min(this.univers.length, Math.floor(_y / this.univers_height)));
-}
+};
 Tlns.Classes.Timeline.prototype.universFromMouse = function(_pageY) {
 return this.universFromY(_pageY - this.dragging_bounds.top);
-}
+};
 Tlns.Classes.Timeline.prototype.onMouseMove = function(_event) {
 if (this.mouse_down && !this.is_dragging) {
 var _dx = this.start_pos.x - _event.pageX,
 _dy = this.start_pos.y - _event.pageY,
 case "timeline":
 this.setTime(this.time_at_start + Math.floor(( this.start_pos.x - _event.pageX ) / this.current_scale));
 break;
 }
 }
-}
+};
 Tlns.Classes.Timeline.prototype.onUniversLoaded = function(_data) {
 this.univers = [];
 if(_data.length) {
 this.univers_height = Math.floor(this.main_height / _data.length);
 for(var _i = 0; _i < _data.length; _i++) {
 this.univers.push(new Tlns.Classes.Univers(_data[_i], this, _i));
 }
 this.loadOccurrences();
-}
+};
 Tlns.Classes.Timeline.prototype.offsetTime = function(_timeOffset) {
 this.setTime(this.central_time + _timeOffset);
-}
+};
 Tlns.Classes.Timeline.prototype.setTime = function(_centralTime) {
 this.sync_now = false;
 this.central_time = this.maxtime ? Math.min(_centralTime, this.maxtime) : _centralTime;
 this.changeSpan();
-}
+};
 Tlns.Classes.Timeline.prototype.setLevel = function(_level) {
 if (_level >= 0 && _level < this.timescales.length) {
 this.level = _level;
+this.$slider.slider("value", _level);
 this.changeSpan();
 }
-}
+};
 Tlns.Classes.Timeline.prototype.changeSpan = function() {
 var _now = new Date().valueOf();
 if (this.sync_now) {
 this.central_time = _now;
 var _timescale = this.timescales[this.level];
 this.current_scale = this.main_width / (_timescale.span);
 this.start_time = this.central_time - (_timescale.span / 2);
 this.end_time = this.central_time + (_timescale.span / 2);
 this.throttledDrawGrid();
-}
+};
 Tlns.Classes.Timeline.prototype.drawGrid = function() {
 var _now = new Date().valueOf(),
 _timescale = this.timescales[this.level],
 _offset = new Date().getTimezoneOffset() * 60000,
 _grid_width = Math.floor(_timescale.grid_interval * this.current_scale),
 _roundstart = Math.floor((this.start_time - _offset) / _timescale.grid_interval) * _timescale.grid_interval + _offset,
 _html = '';
 for (var _t = _roundstart; _t < this.end_time; _t += _timescale.grid_interval) {
-var _x = this.current_scale * (_t - this.start_time);
+var _x = this.current_scale * (_t - this.start_time),
+isMajor = !((_t - _offset)%(24*60*60*1000));
 if (_x > 0) {
-_html += '<div class="Tl-Grid-Column" style="width:' + _grid_width + 'px; left: ' + _x + 'px">'
+_html += '<div class="Tl-Grid-Column' + (isMajor ? ' Tl-Grid-Major':'') + '" style="width:' + _grid_width + 'px; left: ' + _x + 'px">'
 + '<div class="Tl-Grid-Label">' + Tlns.Utils.dateFormat(_t, _timescale.grid_date_format) + '</div></div>';
 }
 }
 if (this.start_time <= _now && this.end_time >= _now) {
-_html += '<div class="Tl-Grid-Now" style="left: ' + this.current_scale * (_now - this.start_time) + 'px"></div>'
+_html += '<div class="Tl-Grid-Now" style="left: ' + this.current_scale * (_now - this.start_time) + 'px"></div>';
+}
+if (this.editing_occurrence && this.editing_occurrence.date <= this.end_time && this.editing_occurrence.date >= this.start_time) {
+_html += '<div class="Tl-Grid-Editing" style="left: ' + this.editing_occurrence.x + 'px"></div>';
 }
 this.$.find('.Tl-Grid').html(_html);
 this.drawOccurrences();
-}
+};
 Tlns.Classes.Timeline.prototype.loadOccurrences = function() {
 var _this = this;
 $.getJSON(this.api_endpoint, {
 method: this.api_method,
 }, function(_data) {
 console.log(_data);
 _this.onOccurrencesLoaded(_data);
 });
-}
+};
 Tlns.Classes.Timeline.prototype.onOccurrencesLoaded = function(_data) {
 for (var _i = 0; _i < _data.data.length; _i++) {
 this.createOrUpdateOccurrence(_data.data[_i]);
 }
 if (!this.mouse_down) {
 this.drawOccurrences();
 }
-}
+};
 Tlns.Classes.Timeline.prototype.deleteOccurrence = function(_id) {
 this.occurrences = _(this.occurrences).reject(function(_occ) {
 return _occ.id == _id;
 });
-}
+};
 Tlns.Classes.Timeline.prototype.getOccurrence = function(_id) {
 return _(this.occurrences).find(function(_occ) {
 return _occ.id == _id;
 });
-}
+};
 Tlns.Classes.Timeline.prototype.createOrUpdateOccurrence = function(_data) {
 var _id = _data.id,
 _occurrence = this.getOccurrence(_id),
 typeinfo = this.class_info[_data.__CLASS__];
 this.occurrences.push(_occurrence);
 }
 _occurrence.update(_data);
 }
 return _occurrence;
-}
+};
 Tlns.Classes.Timeline.prototype.showTooltip = function(_x, _y, _html) {
 this.$.find('.Tl-Overlay-Box')
 .show()
 .css({
 left: _x + "px",
 top: _y + "px"
 });
 this.$.find('.Tl-Overlay-Main').html(_html);
-}
+};
 Tlns.Classes.Timeline.prototype.hideTooltip = function() {
 this.$.find('.Tl-Overlay-Box').hide();
-}
+};
 Tlns.Classes.Timeline.prototype.drawOccurrences = function() {
 var _this = this;
 _(this.occurrences).each(function(_occ) {
 _occ.x = _this.current_scale * (_occ.date - _this.start_time);
 _id = _el.attr("occurrence-id");
 if (typeof _id !== "undefined") {
 var _occurrence = _this.getOccurrence(_id);
 if (!_this.is_dragging) {
 var _html = Mustache.to_html(Tlns.Templates.OccurrenceTooltip, _occurrence);
-_this.showTooltip(_occurrence.x + 19, _occurrence.y + 20, _html);
+_this.showTooltip(_occurrence.x, _occurrence.y, _html);
 }
 }
 }).mouseout(function() {
 var _el = $(this),
 _id = _el.attr("occurrence-id");
 var _occurrence = _this.getOccurrence(_id);
 _this.hideTooltip();
 }
 });
-}
+};
 Tlns.Classes.Timeline.prototype.getUnivers = function(_id) {
 return _(this.univers).find(function(_univ) {
 return (_univ.id == _id);
 });
-}
+};
 /*
 * Univers
 */
 _timeline.$.find('.Tl-UniversLabels').append(this.$label);
 var txtdiv = this.$label.find(".Tl-UniversText");
 txtdiv.css("margin-top", Math.floor((_timeline.univers_height - txtdiv.height()) / 2));
-}
+};
 /*
 * Occurrence
 */
 Tlns.Classes.Occurrence = function(_timeline) {
 this.timeline = _timeline;
-}
+};
 Tlns.Classes.Occurrence.prototype.update = function(_data) {
 this.original_data = _data;
 this.id = _data.id;
 this.date = new Date(1000 * (_data.dateFirstPublication || _data.dateCreate) || Date.now);
 this.title = _data.title;
 this.type = _data.__CLASS__;
 this.importance = _data.importance;
 var typeinfo = this.timeline.class_info[_data.__CLASS__];
 this.univers_id = typeinfo.univers_id;
-if (_data.contentHasMedias && _data.contentHasMedias.length) {
+var media = _(_data.contentHasMedias).find(function(m) {
-this.image = _data.contentHasMedias[0].media.carre.replace(/carre\/[\d]+\/[\d]+/,'carre/32/32');
+return !!m.media.carre;
-this.detail_image = _data.contentHasMedias[0].media.carre.replace(/carre\/[\d]+\/[\d]+/,'carre/135/135');
+});
+if (media) {
+this.image = media.media.carre.replace(/carre\/[\d]+\/[\d]+/,'carre/32/32');
+this.detail_image = media.media.carre.replace(/carre\/[\d]+\/[\d]+/,'carre/135/135');
 }
 if (typeinfo.picto) {
 this.image = this.timeline.picto_url + typeinfo.picto;
 }
 this.univers = this.timeline.univers[this.univers_id];
 var _tmp = $('<p>').html(_data.resume || "");
 var trimmedDesc = _tmp.text().trim().replace(/(\n|\r|\r\n)/mg,' ');
 this.description = trimmedDesc.replace(/(^.{60,80})[\s].+$/m,'$1&hellip;');
 this.detail_description = trimmedDesc.replace(/(^.{360,380})[\s].+$/m,'$1&hellip;');
 this.url = this.timeline.url_base + _data.url;
-}
+};
-Tlns.Classes.Occurrence.prototype.addDependency = function(_id) {
-if (_(this.dependsOn).indexOf(_id) == -1) {
-this.dependsOn.push(_id);
-}
-}
-Tlns.Classes.Occurrence.prototype.removeDependency = function(_id) {
-this.dependsOn = _(this.dependsOn).reject(function(_n) {
-return _n == _id;
-});
-}
 Tlns.Classes.Occurrence.prototype.toString = function() {
 return "Occurrence " + this.type + ': "' + this.title + '"';
-}
+};

eulalie