# HG changeset patch
# User veltr
# Date 1380902047 -7200
# Node ID d4c6a262c600b2a0c2028763479ce3208caa9d20
# Parent 717bb6d5bbcdd3ea28b085a53c29753e6dbedfca
Mobile adaptation for Timeline
diff -r 717bb6d5bbcd -r d4c6a262c600 src/jocondelab/static/jocondelab/css/front-timeline.css
--- a/src/jocondelab/static/jocondelab/css/front-timeline.css Tue Oct 01 18:45:59 2013 +0200
+++ b/src/jocondelab/static/jocondelab/css/front-timeline.css Fri Oct 04 17:54:07 2013 +0200
@@ -45,12 +45,11 @@
.timeline-item-box {
position: absolute; height: 15px; top: 0; margin-bottom: 4px;
- border-bottom: 8px solid #0000c0; cursor: pointer;
+ border-bottom: 8px solid #0000c0; cursor: pointer; font-size: 13px; line-height: 15px;
}
.timeline-item-label {
- position: absolute; top: 0; text-align: center; width: 200px; margin-left: -100px;
- font-size: 13px; left: 50%; line-height: 15px;
+ position: absolute; top: 0; text-align: center; width: 200px; margin-left: -100px; left: 50%;
}
.timeline-current {
@@ -72,3 +71,46 @@
.timeline-mill-submit span {
font-weight: bold;
}
+
+.timeline-arrows {
+ margin-right: 30px; height: 30px; clear:both; text-align: center; background: #ffffff; font-size: 16px; line-height: 30px;
+}
+
+.timeline-arrows a {
+ line-height: 25px; font-size: 25px; color: #000000; background: #ffffff; padding: 0 10px 5px; font-weight: bold;
+}
+
+.timeline-arrows a:hover {
+ text-decoration: none; background: #999999; color: #ffffff;
+}
+
+a.timeline-goleft {
+ float: left; padding-right: 40px;
+}
+
+a.timeline-goright {
+ float: right; padding-left: 40px;
+}
+
+@media screen and (max-height: 500px) {
+ .timeline-wrapper {
+ height: 336px;
+ }
+
+ .timeline-list {
+ top: 72px;
+ }
+
+ .timeline-item {
+ height: 20px;
+ }
+
+ .timeline-item-box {
+ height: 12px; top: 0; margin-bottom: 2px;
+ border-bottom: 5px solid #0000c0; cursor: pointer; font-size: 11px; line-height: 12px;
+ }
+
+ .timeline-slider {
+ height: 210px;
+ }
+}
diff -r 717bb6d5bbcd -r d4c6a262c600 src/jocondelab/static/jocondelab/js/front-timeline.js
--- 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),
diff -r 717bb6d5bbcd -r d4c6a262c600 src/jocondelab/templates/jocondelab/front_timeline.html
--- a/src/jocondelab/templates/jocondelab/front_timeline.html Tue Oct 01 18:45:59 2013 +0200
+++ b/src/jocondelab/templates/jocondelab/front_timeline.html Fri Oct 04 17:54:07 2013 +0200
@@ -38,6 +38,13 @@
+
{% trans 'Recherche par date' %}