--- a/src/jocondelab/static/jocondelab/js/front-timeline.js Tue Oct 01 18:45:59 2013 +0200
+++ b/src/jocondelab/static/jocondelab/js/front-timeline.js Fri Oct 04 17:54:07 2013 +0200
@@ -92,6 +92,13 @@
function deltaMiniToDeltaW(m) {
return (isRtl ? -1 : 1) * m / cWidth;
}
+ function miniToW(m) {
+ var res = deltaMiniToDeltaW(m);
+ if (isRtl) {
+ res = cWidth - res;
+ }
+ return res;
+ }
function wToSlider(w) {
var res = zoomFactor * sliderWidth * (w - wCenter + (.5 / zoomFactor));
if (isRtl) {
@@ -174,22 +181,22 @@
/* We first draw the darkish rectangle showing the full timeline */
ctx.fillStyle = "#e0e0e0";
- ctx.fillRect( 0, 0, cWidth, 30 );
+ ctx.fillRect( 0, 0, cWidth, cHeight/14 );
/* We draw the rectangle for the main timeline */
ctx.fillStyle = "#f8f8f8";
- ctx.fillRect(0, 60, cWidth, cHeight - 60);
+ ctx.fillRect(0, cHeight/7, cWidth, cHeight*6/7);
/* We now draw the blue "funnel" showing the relationship between timelines */
ctx.fillStyle = "rgba(0, 64, 255, .05)";
ctx.strokeStyle = "#3090ff";
ctx.beginPath();
ctx.moveTo(xleft, 0);
ctx.lineTo(xright, 0);
- ctx.lineTo(xright, 30);
- ctx.lineTo(cWidth, 60);
+ ctx.lineTo(xright, cHeight/14);
+ ctx.lineTo(cWidth, cHeight/7);
ctx.lineTo(cWidth, cHeight);
ctx.lineTo(0, cHeight);
- ctx.lineTo(0, 60);
- ctx.lineTo(xleft, 30);
+ ctx.lineTo(0, cHeight/7);
+ ctx.lineTo(xleft, cHeight/14);
ctx.closePath();
ctx.stroke();
ctx.fill();
@@ -203,12 +210,12 @@
x = yrToMiniX(y);
ctx.beginPath();
ctx.moveTo(x,0);
- ctx.lineTo(x,6);
- ctx.moveTo(x,24);
- ctx.lineTo(x,30);
+ ctx.lineTo(x,cHeight/70);
+ ctx.moveTo(x,cHeight*2/35);
+ ctx.lineTo(x,cHeight/14);
ctx.stroke();
ctx.textAlign = (i ? (i == miniLines.length - 1 ? (isRtl ? "left" : "right" ) : "center") : (isRtl ? "right" : "left" ) );
- ctx.fillText(y || 1, x,20);
+ ctx.fillText(y || 1, x,cHeight/21);
}
/* Now, we draw the years on the main timeline */
ctx.textAlign = 'center';
@@ -219,12 +226,12 @@
isPrimary = !((y/wLineDist) % 2);
ctx.strokeStyle = (isPrimary ? "#000000": "#999999");
ctx.beginPath();
- ctx.moveTo(x, 90);
- ctx.lineTo(x, cHeight - 20);
+ ctx.moveTo(x, cHeight*3/14);
+ ctx.lineTo(x, cHeight - cHeight/14);
ctx.stroke();
if (isPrimary) {
ctx.fillText(y || 1, x, cHeight - 4);
- ctx.fillText(y || 1, x, 80);
+ ctx.fillText(y || 1, x, cHeight*4/21);
}
}
/* Now displaying the different terms that we will show on the timeline */
@@ -254,6 +261,15 @@
$this.addClass("timeline-current");
loadSearchResults({ dbpedia_uri: currentTerm });
});
+ $(".timeline-span-from").text(Math.round(fromYear) || 1);
+ $(".timeline-span-to").text(Math.round(toYear));
+ }
+
+ function setCenter(c) {
+ var halfSpan = .5/zoomFactor;
+ wCenter = Math.max(halfSpan, Math.min(1 - halfSpan, c));
+ throttledRedraw();
+ debouncedGetData();
}
function setZoomLevel(level, center) {
@@ -261,10 +277,7 @@
zoomLevel = Math.max(minZoomLevel, Math.min(maxZoomLevel, level));
$zoomSlider.slider("value",zoomLevel);
updateZoomFactor();
- var halfSpan = .5/zoomFactor;
- wCenter = Math.max(halfSpan, Math.min(1 - halfSpan, c));
- throttledRedraw();
- debouncedGetData();
+ setCenter(c);
}
function getData() {
@@ -300,25 +313,32 @@
h = Hammer($tlcontainer[0]);
h.on("dragstart", function(e) {
+ if (!e.gesture) {
+ return;
+ }
dragmini = (e.gesture.center.pageY - $tlcontainer.offset().top < 40);
wcStart = wCenter;
}).on("drag", function(e) {
- var halfSpan = .5/zoomFactor;
- wCenter = Math.max(
- halfSpan,
- Math.min(
- 1 - halfSpan,
- dragmini ?
- (wcStart + deltaMiniToDeltaW(e.gesture.deltaX)) :
- (wcStart - deltaXToDeltaW(e.gesture.deltaX))
- )
- );
- throttledRedraw();
- debouncedGetData();
+ if (!e.gesture) {
+ return;
+ }
+ setCenter(
+ dragmini ?
+ (wcStart + deltaMiniToDeltaW(e.gesture.deltaX)) :
+ (wcStart - deltaXToDeltaW(e.gesture.deltaX))
+ );
e.gesture.preventDefault();
+ }).on("tap", function(e) {
+ var o = $tlcontainer.offset();
+ if (e.gesture && e.gesture.center.pageY - o.top < 40) {
+ setCenter(miniToW(e.gesture.center.pageX - o.left));
+ }
}).on("touch", function(e) {
startLevel = zoomLevel;
}).on("pinchin pinchout", function(e) {
+ if (!e.gesture) {
+ return;
+ }
var newLevel = Math.max(
minZoomLevel,
Math.min(
@@ -332,6 +352,26 @@
e.gesture.preventDefault();
});
+ var arrowTo, arrowDir = false;
+
+ function goGoGo() {
+ if (arrowDir) {
+ setCenter(wCenter + arrowDir/(100*zoomFactor));
+ }
+ }
+
+ setInterval(goGoGo, 100);
+
+ $(".timeline-arrows a").on("mousedown touchstart", function() {
+ arrowDir = parseInt($(this).attr("data-direction"));
+ return false;
+ }).on("mouseout touchend", function() {
+ arrowDir = false;
+ });
+ $("body").mouseup(function() {
+ arrowDir = false;
+ });
+
$tlcontainer.mousewheel(function(e, d) {
var wMouse = xToW(e.pageX - $tlcontainer.offset().left),
zoomDelta = (d > 0 ? 1 : -1),