# HG changeset patch
# User veltr
# Date 1380106039 -7200
# Node ID 18b5748069f7a06bad41f2e8e6cac35773fbec7a
# Parent  04791c6330b8c8c1cde682474685eed77430a45c
RTL Timeline for Arabic language

diff -r 04791c6330b8 -r 18b5748069f7 src/jocondelab/static/jocondelab/js/front-timeline.js
--- a/src/jocondelab/static/jocondelab/js/front-timeline.js	Wed Sep 25 12:44:50 2013 +0200
+++ b/src/jocondelab/static/jocondelab/js/front-timeline.js	Wed Sep 25 12:47:19 2013 +0200
@@ -6,7 +6,7 @@
         zoomLevel = 4,
         zoomStep = Math.SQRT2,
         minZoomLevel = 1,
-        maxZoomLevel = 64,
+        maxZoomLevel = 256,
         sliderWidth = 3000,
         $slider = $(".timeline-mill-slider"),
         $tlcontainer = $(".timeline-container"),
@@ -17,7 +17,8 @@
         itemCount = 12,
         tlCache = [], tlIdCache = [], currentTerm = null,
         startSlide = startYear, endSlide = endYear, userStartSlide = startSlide, userEndSlide = endSlide,
-        fromYear, toYear;
+        fromYear, toYear,
+        isRtl = $("html").is("[dir=rtl]");
     
     function tToW(t) {
         //return Math.pow(2 / (2-Math.min(1,Math.max(0,t))) - 1,gamma);
@@ -40,28 +41,40 @@
         return tToW(yrToT(yr));
     }
     function deltaXToDeltaW(dx) {
-        return dx / (zoomLevel * cWidth);
+        return (isRtl ? -1 : 1) * dx / (zoomLevel * cWidth);
     }
     function deltaWToDeltaX(dw) {
-        return dw * zoomLevel * cWidth;
+        return (isRtl ? -1 : 1) * dw * zoomLevel * cWidth;
     }
     function wToX(w) {
-        return deltaWToDeltaX(w - wCenter + (.5 / zoomLevel));
+        return (isRtl ? cWidth : 0) + deltaWToDeltaX(w - wCenter + (.5 / zoomLevel));
     }
     function xToW(x) {
-        return deltaXToDeltaW(x) + wCenter - (.5 / zoomLevel);
+        return deltaXToDeltaW(x - (isRtl ? cWidth : 0)) + wCenter - (.5 / zoomLevel);
     }
     function wToMini(w) {
-        return cWidth * w;
+        var res = cWidth * w;
+        if (isRtl) {
+            res = cWidth - res;
+        }
+        return res;
     }
-    function miniToW(m) {
-        return m / cWidth;
+    function deltaMiniToDeltaW(m) {
+        return (isRtl ? -1 : 1) * m / cWidth;
     }
     function wToSlider(w) {
-        return zoomLevel * sliderWidth * (w - wCenter + (.5 / zoomLevel));
+        var res = zoomLevel * sliderWidth * (w - wCenter + (.5 / zoomLevel));
+        if (isRtl) {
+            res = sliderWidth - res;
+        }
+        return res;
     }
     function sliderToW(slidepos) {
-        return slidepos / (sliderWidth * zoomLevel) + wCenter - (.5 / zoomLevel);
+        var p = slidepos;
+        if (isRtl) {
+            p = sliderWidth - p;
+        }
+        return p / (sliderWidth * zoomLevel) + wCenter - (.5 / zoomLevel);
     }
     function yrToMiniX(yr) {
         return wToMini(yrToW(yr));
@@ -85,16 +98,23 @@
         wLineDist = null;
         fromYear = wToYr(wCenter - .5 / zoomLevel);
         toYear = wToYr(wCenter + .5 / zoomLevel);
-        var yearAtQuarter = wToYr(wCenter - .25 / zoomLevel);
+        var wAtQuarter = (wCenter - .25 /zoomLevel),
+            yearAtQuarter = wToYr(wAtQuarter),
+            posAtQuarter = wToX(wAtQuarter);
         for (var i = 0; i < lineDistances.length; i++) {
-            if (yrToX(yearAtQuarter + lineDistances[i]) - cWidth / 4 < 50) {
+            var yr = yearAtQuarter + lineDistances[i],
+                x = yrToX(yr),
+                delta = x - posAtQuarter;
+            if (Math.abs(delta) < 50) {
                 break;
             }
             wLineDist = lineDistances[i];
         }
         startSlide = boundValue(userStartSlide);
         endSlide = boundValue(userEndSlide);
-        $slider.slider("values",[yrToSliderPos(startSlide),yrToSliderPos(endSlide)]);
+        var startPos = yrToSliderPos(startSlide),
+            endPos = yrToSliderPos(endSlide);
+        $slider.slider("values",[Math.min(startPos, endPos),Math.max(startPos, endPos)]);
         updateSpans();
     }
     
@@ -111,18 +131,20 @@
         var ctx = canvas.getContext("2d");
         
         var xstart = yrToMiniX(fromYear),
-            xend = yrToMiniX(toYear);
+            xend = yrToMiniX(toYear),
+            xleft = Math.min(xstart, xend),
+            xright = Math.max(xstart, xend);
         ctx.fillStyle = "#f0f2ff";
         ctx.strokeStyle = "#3090ff";
         ctx.beginPath();
-        ctx.moveTo(xstart, 0);
-        ctx.lineTo(xend, 0);
-        ctx.lineTo(xend, 35);
+        ctx.moveTo(xleft, 0);
+        ctx.lineTo(xright, 0);
+        ctx.lineTo(xright, 35);
         ctx.lineTo(cWidth, 70);
         ctx.lineTo(cWidth, cHeight);
         ctx.lineTo(0, cHeight);
         ctx.lineTo(0, 70);
-        ctx.lineTo(xstart, 35);
+        ctx.lineTo(xleft, 35);
         ctx.closePath();
         ctx.stroke();
         ctx.fill();
@@ -141,7 +163,7 @@
             ctx.moveTo(x,24);
             ctx.lineTo(x,30);
             ctx.stroke();
-            ctx.textAlign = (i ? (i == miniLines.length - 1 ? "right" : "center") : "left" );
+            ctx.textAlign = (i ? (i == miniLines.length - 1 ? (isRtl ? "left" : "right" ) : "center") : (isRtl ? "right" : "left" ) );
             ctx.fillText(y || 1, x,20);
         }
         ctx.textAlign = 'center';
@@ -171,8 +193,8 @@
                 return itemTpl({
                     current: (item.dbpedia_uri == currentTerm),
                     item: item,
-                    left: l,
-                    width: (r-l)
+                    left: Math.min(l,r),
+                    width: Math.abs(r-l)
                 });
             }).value().join("");
         $(".timeline-list").html(html);
@@ -233,7 +255,7 @@
                 Math.min(
                     1 - halfSpan,
                     dragmini ?
-                        (wcStart + miniToW(e.clientX - xstart)) :
+                        (wcStart + deltaMiniToDeltaW(e.clientX - xstart)) :
                         (wcStart + deltaXToDeltaW(xstart - e.clientX))
                     )
                 );
@@ -278,8 +300,10 @@
         max: sliderWidth,
         values: [0, sliderWidth],
         slide: function(e, ui) {
-            userStartSlide = startSlide = Math.floor(sliderPosToYr(ui.values[0]));
-            userEndSlide = endSlide = Math.floor(sliderPosToYr(ui.values[1]));
+            var y0 = Math.floor(sliderPosToYr(ui.values[0])),
+                y1 = Math.floor(sliderPosToYr(ui.values[1]));
+            userStartSlide = startSlide = Math.min(y0,y1);
+            userEndSlide = endSlide = Math.max(y0,y1);
             updateSpans();
         }
     });