--- a/timeline/js/timeline.js Thu Sep 19 19:34:29 2013 +0200
+++ b/timeline/js/timeline.js Fri Sep 20 17:34:07 2013 +0200
@@ -32,7 +32,7 @@
}
}
});
-}
+};
Tlns.Utils.dateFormat = function(_date, _template) {
if (typeof _date !== "object") {
@@ -53,17 +53,17 @@
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,
@@ -80,7 +80,7 @@
minutes: _m,
text: Tlns.Utils.zeroPad(_h) + ':' + Tlns.Utils.zeroPad(_m)
}
-}
+};
Tlns.Utils.dateFieldProcess = function(_val) {
var _now = new Date(),
@@ -107,7 +107,7 @@
date: _d,
text: Tlns.Utils.zeroPad(_d) + '/' + Tlns.Utils.zeroPad(_m) + '/' + _y
}
-}
+};
/* Defaults */
@@ -115,7 +115,7 @@
email: "",
token: "",
container : "timeline",
- width : 780,
+ width : 790,
height : 225,
min_width : 400,
min_height : 100,
@@ -215,7 +215,7 @@
},
maxtime: false,
url_base: ""
-}
+};
for (var _i = 0; _i < Tlns.Defaults.Timeline.timescales.length; _i++) {
Tlns.Defaults.Timeline.timescales[_i].level = _i;
@@ -224,11 +224,11 @@
/* 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 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-Details"></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-Main"></div></div></div></div></div></div>'
+ + '<div class="Tl-Details"></div>';
Tlns.Templates.Univers = '<div class="Tl-UniversText">{{title}}</div>';
@@ -260,20 +260,25 @@
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(),
- bottom: _o.top + this.$.find('.Tl-MainPart').outerHeight(),
+ right: _o.left + $mainpart.outerWidth(),
+ bottom: _o.top + $mainpart.outerHeight(),
};
- this.$.find('.Tl-UniversLabels').css({
- width: this.width - this.main_width
- });
var _this = this;
@@ -281,24 +286,24 @@
_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();
@@ -319,10 +324,38 @@
$(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;
@@ -335,29 +368,29 @@
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) {
@@ -376,7 +409,7 @@
break;
}
}
-}
+};
Tlns.Classes.Timeline.prototype.onUniversLoaded = function(_data) {
this.univers = [];
@@ -388,24 +421,25 @@
}
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();
@@ -417,7 +451,7 @@
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(),
@@ -427,18 +461,22 @@
_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;
@@ -451,7 +489,7 @@
_this.onOccurrencesLoaded(_data);
});
-}
+};
Tlns.Classes.Timeline.prototype.onOccurrencesLoaded = function(_data) {
for (var _i = 0; _i < _data.data.length; _i++) {
@@ -460,19 +498,19 @@
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,
@@ -486,7 +524,7 @@
_occurrence.update(_data);
}
return _occurrence;
-}
+};
Tlns.Classes.Timeline.prototype.showTooltip = function(_x, _y, _html) {
this.$.find('.Tl-Overlay-Box')
@@ -497,11 +535,11 @@
});
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;
@@ -564,7 +602,7 @@
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() {
@@ -576,13 +614,13 @@
}
});
-}
+};
Tlns.Classes.Timeline.prototype.getUnivers = function(_id) {
return _(this.univers).find(function(_univ) {
return (_univ.id == _id);
});
-}
+};
/*
* Univers
@@ -602,7 +640,7 @@
var txtdiv = this.$label.find(".Tl-UniversText");
txtdiv.css("margin-top", Math.floor((_timeline.univers_height - txtdiv.height()) / 2));
-}
+};
/*
* Occurrence
@@ -610,7 +648,7 @@
Tlns.Classes.Occurrence = function(_timeline) {
this.timeline = _timeline;
-}
+};
Tlns.Classes.Occurrence.prototype.update = function(_data) {
this.original_data = _data;
@@ -622,9 +660,12 @@
this.importance = _data.importance;
var typeinfo = this.timeline.class_info[_data.__CLASS__];
this.univers_id = typeinfo.univers_id;
- if (_data.contentHasMedias && _data.contentHasMedias.length) {
- this.image = _data.contentHasMedias[0].media.carre.replace(/carre\/[\d]+\/[\d]+/,'carre/32/32');
- this.detail_image = _data.contentHasMedias[0].media.carre.replace(/carre\/[\d]+\/[\d]+/,'carre/135/135');
+ var media = _(_data.contentHasMedias).find(function(m) {
+ return !!m.media.carre;
+ });
+ 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;
@@ -639,20 +680,8 @@
this.description = trimmedDesc.replace(/(^.{60,80})[\s].+$/m,'$1…');
this.detail_description = trimmedDesc.replace(/(^.{360,380})[\s].+$/m,'$1…');
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 + '"';
-}
+};