some bugfixes
authorveltr
Fri, 27 Sep 2013 10:26:26 +0200
changeset 120 a09b26c435a1
parent 119 984d0da5e84d
child 121 1487dcf42f0e
child 123 11f2aa317b70
some bugfixes
src/jocondelab/static/jocondelab/css/front-common.css
src/jocondelab/static/jocondelab/css/front-notice.css
src/jocondelab/static/jocondelab/css/front-timeline.css
src/jocondelab/static/jocondelab/js/front-common.js
src/jocondelab/static/jocondelab/js/front-geo.js
src/jocondelab/static/jocondelab/js/front-timeline.js
src/jocondelab/templates/jocondelab/front_base.html
src/jocondelab/templates/jocondelab/front_notice.html
src/jocondelab/templates/jocondelab/front_search.html
src/jocondelab/templates/jocondelab/front_timeline.html
src/jocondelab/templates/jocondelab/partial/notice_list.html
src/jocondelab/templates/jocondelab/partial/wrapped_notice_list.html
--- a/src/jocondelab/static/jocondelab/css/front-common.css	Thu Sep 26 13:54:06 2013 +0200
+++ b/src/jocondelab/static/jocondelab/css/front-common.css	Fri Sep 27 10:26:26 2013 +0200
@@ -75,7 +75,7 @@
 }
 
 a:hover {
-    text-decoration: underline;
+    text-decoration: underline; color: #800000;
 }
 
 b {
@@ -285,7 +285,11 @@
 }
 
 .menu-item {
-    display: inline-block;
+    display: inline-block; color: #666666;
+}
+
+.menu-item-current {
+    font-weight: bold; color: #000000;
 }
 
 .menu-item:before {
@@ -304,11 +308,15 @@
 
 .dbpedia-overlay {
     position: absolute; width: 280px; background: #ffffff; border: 1px solid #999999; box-shadow: 5px 5px 10px rgba(0,0,0,.5);
-    display: none; z-index: 8;
+    display: none; z-index: 1500;
 }
 
-.dbpedia-overlay h2 {
-    font-size: 14px; font-weight: 700; margin: 10px;
+.dbpedia-close {
+    float: right; font-weight: bold; margin: 5px; line-height: 12px; font-size: 20px;
+}
+
+.dbpedia-title {
+    font-size: 14px; font-weight: 700; margin: 8px 10px 10px;
 }
 
 .dbpedia-abstract {
@@ -319,8 +327,16 @@
     color: #0063DC; font-size: 10px; margin: 0 10px 10px; clear: both;
 }
 
-.dbpedia-overlay img {
-    max-width: 160px; max-height: 150px; float: left; margin: 10px 10px 2px;
+.dbpedia-image {
+    max-width: 120px; max-height: 120px; float: left; margin: 10px 10px 2px;
+}
+
+html[dir=rtl] .dbpedia-image {
+    float: right;
+}
+
+html[dir=rtl] .dbpedia-close {
+    float: left;
 }
 
 /* RESULTS LIST */
--- a/src/jocondelab/static/jocondelab/css/front-notice.css	Thu Sep 26 13:54:06 2013 +0200
+++ b/src/jocondelab/static/jocondelab/css/front-notice.css	Fri Sep 27 10:26:26 2013 +0200
@@ -1,17 +1,17 @@
 .notice-images {
-    float: left; width: 33%; margin-top: 15px; text-align: center;
+    float: right; width: 33%; margin-top: 15px; text-align: center; line-height: 0;
 }
 
 .notice-images li {
-    margin: 5px 0;
+    margin-bottom: 10px; background: #ffffff; box-shadow: 0 0 3px #999999;
 }
 
 .notice-images img {
-    max-width: 100%;
+    max-width: 100%; max-height: 420px;
 }
 
 .notice-colright-wrapper {
-    float: left; width: 67%; margin-top: 10px;
+    float: right; width: 67%; margin-top: 10px;
 }
 
 .notice-colright {
@@ -19,9 +19,12 @@
 }
 
 @media screen and (max-width: 520px) {
-    .notice-images, .notice-colright {
+    .notice-images, .notice-colright-wrapper {
         width: 100%;
     }
+    .notice-colright {
+        margin-left: 0;
+    }
 }
 
 .notice-datasheet {
--- a/src/jocondelab/static/jocondelab/css/front-timeline.css	Thu Sep 26 13:54:06 2013 +0200
+++ b/src/jocondelab/static/jocondelab/css/front-timeline.css	Fri Sep 27 10:26:26 2013 +0200
@@ -2,17 +2,41 @@
     font-size: 16px; font-weight: bold; margin: 5px 0 10px;
 }
 
+.timeline-wrapper {
+    position: relative; width: 100%; height: 420px; margin-top: 10px;
+}
+
 .timeline-container {
-    position: relative; width: 100%; height: 390px; margin-top: 10px;
-    background: #ffffff; overflow: hidden;
+    position: absolute; left: 0; top: 0; bottom: 0; right: 30px; overflow: hidden;
 }
 
 .timeline-canvas {
-    width: 100%; height: 100%;
+    width: 100%; height: 100%; background: #ffffff;
 }
 
 .timeline-list {
-    position: absolute; left: 0; top: 60px; width: 100%;
+    position: absolute; left: 0; top: 90px;
+}
+
+.timeline-slider-container {
+    position: absolute; right: 0; width: 30px; top: 60px; bottom: 0;
+}
+
+.timeline-zoom-button {
+    display: block; margin: 5px auto; width: 10px; height: 2px; background: #000000;
+    border-color: #e8e8e8; border-style: solid; border-width: 9px 5px; border-radius: 8px; position: relative;
+}
+
+.timeline-zoom-in:after {
+    content: ""; position: absolute; top: -4px; left: 4px; width: 2px; height: 10px; background: inherit;
+}
+
+.timeline-zoom-button:hover {
+    border-color: #cccccc; background: #ffffff;
+}
+
+.timeline-slider {
+    height: 290px; margin: 8px; font-size: 14px;
 }
 
 .timeline-item {
@@ -34,7 +58,7 @@
 }
 
 .timeline-mill-slider {
-    font-size: 16px; margin-bottom: 10px;
+    font-size: 16px; margin-bottom: 10px; margin-right: 30px;
 }
 
 .timeline-mill-slider .ui-slider-range {
@@ -42,7 +66,7 @@
 }
 
 .timeline-mill-submit {
-    float: right; clear: both; padding: 5px 10px; line-height: 20px; font-size: 14px;
+    float: right; padding: 5px 10px; line-height: 20px; font-size: 14px; margin-right: 30px;
 }
 
 .timeline-mill-submit span {
--- a/src/jocondelab/static/jocondelab/js/front-common.js	Thu Sep 26 13:54:06 2013 +0200
+++ b/src/jocondelab/static/jocondelab/js/front-common.js	Fri Sep 27 10:26:26 2013 +0200
@@ -46,7 +46,6 @@
         ),
         $overlay = $(".dbpedia-overlay"),
         hovering = null,
-        dontclose = false,
         anchor = null,
         $win = $(window),
         dbpediaCache = {},
@@ -65,7 +64,8 @@
     function recentreDbpediaBox() {
         if (!anchor) { return; }
         var ovw = $overlay.outerWidth(),
-            ovh = $overlay.outerHeight();
+            ovh = $overlay.outerHeight(),
+            refbox;
         switch (anchor.type) {
             case "dom":
                 var $refdiv = anchor.selector,
@@ -73,11 +73,14 @@
                     refw = $refdiv.outerWidth(),
                     refh = $refdiv.outerHeight(),
                     refx = refoff.left,
-                    refy = refoff.top,
-                    refbox = { left: refx, right: refx + refw, top: refy, bottom: refy + refh };
+                    refy = refoff.top;
+                refbox = { left: refx, right: refx + refw, top: refy, bottom: refy + refh };
+            break;
+            case "box":
+                refbox = anchor.box;
             break;
             case "callback":
-                var refbox = anchor.callback()
+                refbox = anchor.callback();
             break;
         }
         if (!refbox) { return; }
@@ -103,11 +106,10 @@
         }
     }
         
-    function showDbpediaBox(dbpediaUri, cancelClose) {
+    function showDbpediaBox(dbpediaUri) {
         if (!dbpediaUri) {
             return;
         }
-        dontclose = cancelClose || false;
         hovering = dbpediaUri;
         $overlay.hide();
         $overlayImg.attr("src","");
@@ -192,10 +194,11 @@
         if (dbpediaUri) {
             hovering = dbpediaUri;
         }
-    }, function() {
-        if (!dontclose) {
-            hideDbpediaBox();
-        }
+    }, hideDbpediaBox);
+    
+    $overlay.find(".dbpedia-close").click(function() {
+        hideDbpediaBox();
+        return false;
     });
     
     window.dbpediaBox = {
@@ -391,33 +394,42 @@
                 bindResultsMouseover();
                 $(".loading-please-wait").hide();
                 scrollLoad(query);
+                resizeWikiInfo();
             }
         });
     };
     
-    /* */
+    /* Resizing text in the wikipedia abstract in search results */
     
-    var $wikinfo = $(".wiki-info"), $wiabstract = $(".wiki-info-abstract"), abstract = $wiabstract.text(), wkw, wkh, wkcontents;
+    var currentAbstract, currentUri, currentW, currentH;
     
     function resizeWikiInfo() {
+        var $wikinfo = $(".wiki-info");
         if (!$wikinfo.length) {
             return;
         }
-        var w = $wikinfo.width(), h = $wikinfo.height();
-        if (w === wkw && h === wkh) {
-            return;
+        var uri = $wikinfo.attr("data-dbpedia-uri"), w = $wikinfo.width(), h = $wikinfo.height(), $wiabstract = $wikinfo.find(".wiki-info-abstract");
+        if (uri === currentUri) {
+            if (w === currentW && h === currentH) {
+                return;
+            }
+        } else {
+            currentUri = uri;
+            currentAbstract = $wiabstract.text();
         }
-        wkw = w;
-        wkh = h;
-        var leftSpace = h - ($(".wiki-info-title").outerHeight(true) + $(".wiki-info-source").outerHeight(true));
-        $wiabstract.text(abstract);
-        var shortenedAbstract = abstract;
+        currentW = w;
+        currentH = h;
+        var leftSpace = h - ($wikinfo.find(".wiki-info-title").outerHeight(true) + $wikinfo.find(".wiki-info-source").outerHeight(true));
+        $wiabstract.text(currentAbstract);
+        var shortenedAbstract = currentAbstract;
         while ($wiabstract.height() > leftSpace) {
             shortenedAbstract = shortenedAbstract.replace(/\s[\S]+$/,'…');
             $wiabstract.text(shortenedAbstract);
         }
     }
     
+    /* */
+    
     resizeWikiInfo();
     
     $win.resize(function() {
--- a/src/jocondelab/static/jocondelab/js/front-geo.js	Thu Sep 26 13:54:06 2013 +0200
+++ b/src/jocondelab/static/jocondelab/js/front-geo.js	Fri Sep 27 10:26:26 2013 +0200
@@ -19,9 +19,10 @@
         country_uris = _(countries).pluck("dbpedia_uri"),
         itemCount = 12,
         scaleBase = Math.log(countries[0].nb_notices),
-        currentFeature = null,
-        stickyFeature = null,
-        $overlay = $(".dbpedia-overlay"),
+        currentCountry = null,
+        hideCountryTimeout = false,
+        preHideTimeout = false,
+        mapDragging = false,
         $map = $("#map");
     
     function getData() {
@@ -62,8 +63,6 @@
                 c.layer.setStyle({weight: 1, color: "#000080", opacity: .3});
             }
         });
-        stickyFeature = feature;
-        showDbpedia(feature);
         loadSearchResults({ dbpedia_uri: feature.dbpedia_uri });
     }
     
@@ -82,28 +81,16 @@
     }
     
     function showDbpedia(feature) {
-        if (stickyFeature && feature !== stickyFeature) {
-            return;
-        }
-        currentFeature = feature;
+        clearCountryTimeout();
         if (!feature) {
             dbpediaBox.hide();
             return;
         }
-        dbpediaBox.show(feature.dbpedia_uri, (feature === stickyFeature));
-        dbpediaBox.setAnchor({type: "callback", callback: moveCurrentFeature, positioning: "bottom"});
-        throttledMove();
-    }
-    
-    function moveCurrentFeature() {
-        if (!currentFeature) {
-            return;
-        }
-        var fb = currentFeature.bounds,
+        var fb = feature.bounds,
             mb = map.getBounds();
         if (fb) {
             if (!mb.intersects(fb)) {
-                hideDbpedia(true);
+                hideDbpedia();
                 return;
                 }
             var c = L.latLngBounds(
@@ -111,37 +98,57 @@
                 [Math.min(mb.getNorth(),fb.getNorth()), Math.min(mb.getEast(),fb.getEast())]
             ).getCenter();
         } else {
-            var c = currentFeature.latlng;
+            var c = feature.latlng;
         }
         if (!mb.contains(c)) {
-            hideDbpedia(true);
+            hideDbpedia();
             return;
         }
         var p = map.latLngToContainerPoint(c),
             mo = $map.offset(),
             y = p.y + mo.top;
-        return ({ top: y - (fb ? 0 : 30), left: p.x + mo.left, bottom: y });
+        
+        dbpediaBox.show(feature.dbpedia_uri);
+        dbpediaBox.setAnchor({
+            type: "box",
+            box: { top: y - (fb ? 0 : 30), left: p.x + mo.left, bottom: y },
+            positioning: "bottom"});
+        dbpediaBox.recentre();
     }
     
-    var throttledMove = _.throttle(dbpediaBox.recentre,200);
+    function hideDbpedia() {
+        dbpediaBox.setAnchor();
+        dbpediaBox.hide();
+    }
+
+    function setCountryTimeout() {
+        hideCountryTimeout = setTimeout(function() {
+            dbpediaBox.hide();
+        }, 1000);
+    }
     
-    function hideDbpedia(force) {
-        if (!stickyFeature) {
-            currentFeature = null;
+    function clearCountryTimeout() {
+        if (preHideTimeout) {
+            clearTimeout(preHideTimeout);
+            preHideTimeout = false;
         }
-        if (!stickyFeature || force) {
-            dbpediaBox.setAnchor();
-            dbpediaBox.hide();
+        if (hideCountryTimeout) {
+            clearTimeout(hideCountryTimeout);
+            hideCountryTimeout = false;
         }
-    }
+    }    
     
     function showCoord(coord) {
         if (!coord.marker) {
             coord.latlng = L.latLng(coord.latitude, coord.longitude);
             coord.marker = L.marker(coord.latlng).addTo(map);
             coord.marker.on("click", function() { selectMarker(coord); });
-            coord.marker.on("mouseover", function() { showDbpedia(coord); });
-            coord.marker.on("mouseout", function() { hideDbpedia(); });
+            coord.marker.on("mouseover", function() {
+                if (!mapDragging) {
+                    showDbpedia(coord);
+                }
+            });
+            coord.marker.on("mouseout", hideDbpedia );
         }
     }
     
@@ -189,8 +196,25 @@
                 f.dbCountry.latlng = f.dbCountry.bounds.getCenter();
                 f.dbCountry.layer = l;
                 l.on("click", function() { selectCountry(f.dbCountry); });
-                l.on("mouseover", function() { showDbpedia(f.dbCountry); });
-                l.on("mouseout", function() { hideDbpedia(); });
+                l.on("mouseover", function() {
+                    if (!mapDragging && f.dbCountry !== currentCountry) {
+                        showDbpedia(f.dbCountry);
+                        currentCountry = f.dbCountry;
+                        clearCountryTimeout();
+                        preHideTimeout = setTimeout(function() {
+                            l.once("mousemove", function() {
+                                if (currentCountry === f.dbCountry && !hideCountryTimeout) {
+                                    setCountryTimeout();
+                                }
+                            });
+                        }, 1000);
+                    }
+                });
+                l.on("mouseout", hideDbpedia);
+            } else {
+                l.on("mouseover", function() {
+                    currentCountry = false;
+                });
             }
         }
     });
@@ -205,8 +229,15 @@
         
     debouncedGetData();
     
-    map.on("move", throttledMove);
-    map.on("moveend", debouncedGetData);
+    map.on("movestart", function() {
+        hideDbpedia();
+    });
+    map.on("moveend", function() {
+        debouncedGetData();
+        
+    });
+    
+    $(".dbpedia-overlay").mouseover(clearCountryTimeout);
     
     var blockUnsticking = false;
     
--- a/src/jocondelab/static/jocondelab/js/front-timeline.js	Thu Sep 26 13:54:06 2013 +0200
+++ b/src/jocondelab/static/jocondelab/js/front-timeline.js	Fri Sep 27 10:26:26 2013 +0200
@@ -1,23 +1,24 @@
 $(function() {
     
-    var startYear = -20000,
+    var startYear = -21000,
         endYear = 2012,
         gamma = 2,
         zoomLevel = 4,
         zoomStep = Math.SQRT2,
-        minZoomLevel = 1,
-        maxZoomLevel = 256,
+        minZoomLevel = 0,
+        maxZoomLevel = 14,
         sliderWidth = 3000,
         $slider = $(".timeline-mill-slider"),
+        $zoomSlider = $(".timeline-slider"),
         $tlcontainer = $(".timeline-container"),
         canvas = $tlcontainer.find('canvas')[0],
         lineDistances = [ 50000, 25000, 10000, 5000, 2500, 1000, 500, 250, 100, 50, 25, 10, 5, 2 ],
-        miniLines = [-20000, -5000, -1000, 0, 500, 1000, 1500, 2000],
+        miniLines = [-20000, -5000, -2000, -1000, 0, 1000, 2000],
         wCenter = .875,
         itemCount = 12,
         tlCache = [], tlIdCache = [], currentTerm = null,
         startSlide = startYear, endSlide = endYear, userStartSlide = startSlide, userEndSlide = endSlide,
-        fromYear, toYear,
+        fromYear, toYear, cWidth, wLineDist, zoomFactor,
         isRtl = $("html").is("[dir=rtl]");
     
     function tToW(t) {
@@ -41,16 +42,16 @@
         return tToW(yrToT(yr));
     }
     function deltaXToDeltaW(dx) {
-        return (isRtl ? -1 : 1) * dx / (zoomLevel * cWidth);
+        return (isRtl ? -1 : 1) * dx / (zoomFactor * cWidth);
     }
     function deltaWToDeltaX(dw) {
-        return (isRtl ? -1 : 1) * dw * zoomLevel * cWidth;
+        return (isRtl ? -1 : 1) * dw * zoomFactor * cWidth;
     }
     function wToX(w) {
-        return (isRtl ? cWidth : 0) + deltaWToDeltaX(w - wCenter + (.5 / zoomLevel));
+        return (isRtl ? cWidth : 0) + deltaWToDeltaX(w - wCenter + (.5 / zoomFactor));
     }
     function xToW(x) {
-        return deltaXToDeltaW(x - (isRtl ? cWidth : 0)) + wCenter - (.5 / zoomLevel);
+        return deltaXToDeltaW(x - (isRtl ? cWidth : 0)) + wCenter - (.5 / zoomFactor);
     }
     function wToMini(w) {
         var res = cWidth * w;
@@ -63,7 +64,7 @@
         return (isRtl ? -1 : 1) * m / cWidth;
     }
     function wToSlider(w) {
-        var res = zoomLevel * sliderWidth * (w - wCenter + (.5 / zoomLevel));
+        var res = zoomFactor * sliderWidth * (w - wCenter + (.5 / zoomFactor));
         if (isRtl) {
             res = sliderWidth - res;
         }
@@ -74,7 +75,7 @@
         if (isRtl) {
             p = sliderWidth - p;
         }
-        return p / (sliderWidth * zoomLevel) + wCenter - (.5 / zoomLevel);
+        return p / (sliderWidth * zoomFactor) + wCenter - (.5 / zoomFactor);
     }
     function yrToMiniX(yr) {
         return wToMini(yrToW(yr));
@@ -88,17 +89,19 @@
     function sliderPosToYr(slidepos) {
         return wToYr(sliderToW(slidepos));
     }
-    
     function boundValue(val) {
         return Math.max(Math.floor(fromYear), Math.min(Math.floor(toYear), val));
     }
+    function updateZoomFactor() {
+        zoomFactor = Math.pow(Math.SQRT2, zoomLevel);
+    }
     function updateCoords() {
         cWidth = $tlcontainer.width();
         cHeight = $tlcontainer.height();
         wLineDist = null;
-        fromYear = wToYr(wCenter - .5 / zoomLevel);
-        toYear = wToYr(wCenter + .5 / zoomLevel);
-        var wAtQuarter = (wCenter - .25 /zoomLevel),
+        fromYear = wToYr(wCenter - .5 / zoomFactor);
+        toYear = wToYr(wCenter + .5 / zoomFactor);
+        var wAtQuarter = (wCenter - .25 /zoomFactor),
             yearAtQuarter = wToYr(wAtQuarter),
             posAtQuarter = wToX(wAtQuarter);
         for (var i = 0; i < lineDistances.length; i++) {
@@ -134,24 +137,24 @@
             xend = yrToMiniX(toYear),
             xleft = Math.min(xstart, xend),
             xright = Math.max(xstart, xend);
-        ctx.fillStyle = "#f0f2ff";
+        ctx.fillStyle = "#e0e0e0";
+        ctx.fillRect( 0, 0, cWidth, 30 );
+        ctx.fillStyle = "#f8f8f8";
+        ctx.fillRect(0, 60, cWidth, cHeight - 60);
+        ctx.fillStyle = "rgba(0, 64, 255, .05)";
         ctx.strokeStyle = "#3090ff";
         ctx.beginPath();
         ctx.moveTo(xleft, 0);
         ctx.lineTo(xright, 0);
-        ctx.lineTo(xright, 35);
-        ctx.lineTo(cWidth, 70);
+        ctx.lineTo(xright, 30);
+        ctx.lineTo(cWidth, 60);
         ctx.lineTo(cWidth, cHeight);
         ctx.lineTo(0, cHeight);
-        ctx.lineTo(0, 70);
-        ctx.lineTo(xleft, 35);
+        ctx.lineTo(0, 60);
+        ctx.lineTo(xleft, 30);
         ctx.closePath();
         ctx.stroke();
         ctx.fill();
-        ctx.fillStyle = "#666666";
-        ctx.strokeStyle = "#666666";
-        ctx.fillStyle = "rgba(220, 220, 220, .5)";
-        ctx.fillRect( 0, 0, cWidth, 30 );
         ctx.font = 'bold 12px Arial,Helvetica';
         ctx.fillStyle = "#333333";
         for (var i = 0; i < miniLines.length; i++ ) {
@@ -174,11 +177,12 @@
                 isPrimary = !((y/wLineDist) % 2);
             ctx.strokeStyle = (isPrimary ? "#000000": "#999999");
             ctx.beginPath();
-            ctx.moveTo(x, 60);
+            ctx.moveTo(x, 90);
             ctx.lineTo(x, cHeight - 20);
             ctx.stroke();
             if (isPrimary) {
                 ctx.fillText(y || 1, x, cHeight - 4);
+                ctx.fillText(y || 1, x, 80);
             }
         }
         var html = _(tlCache).chain()
@@ -188,8 +192,8 @@
             .sortBy(function(item) {
                 return (item.start_year + item.end_year);
             }).map(function(item) {
-                var l = Math.max(0, yrToX(item.start_year)),
-                    r = Math.min(cWidth, yrToX(item.end_year + 1));
+                var l = Math.min(cWidth, Math.max(0, yrToX(item.start_year))),
+                    r = Math.min(cWidth, Math.max(0, yrToX(item.end_year + 1)));
                 return itemTpl({
                     current: (item.dbpedia_uri == currentTerm),
                     item: item,
@@ -207,6 +211,17 @@
             loadSearchResults({ dbpedia_uri: currentTerm });
         });
     }
+    
+    function setZoomLevel(level, center) {
+        var c = (typeof center === "number" ? center : wCenter);
+        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();
+    }
   
     function getData() {
         $.getJSON(
@@ -249,7 +264,7 @@
     }).mousemove(function(e) {
         if (mousedown) {
             dragging = true;
-            var halfSpan = .5/zoomLevel;
+            var halfSpan = .5/zoomFactor;
             wCenter = Math.max(
                 halfSpan,
                 Math.min(
@@ -265,18 +280,16 @@
         }
     }).mousewheel(function(e, d) {
         var wMouse = xToW(e.clientX - $(this).offset().left),
-            scaleRatio = (d > 0 ? zoomStep : 1/zoomStep);
+            zoomDelta = (d > 0 ? 1 : -1),
+            scaleRatio = Math.pow(zoomStep, zoomDelta);
         if (d < 0 && zoomLevel <= minZoomLevel) {
             return;
         }
         if (d >= 0 && zoomLevel >= maxZoomLevel) {
             return;
         }
-        zoomLevel *= scaleRatio;
-        var halfSpan = .5/zoomLevel;
-        wCenter = Math.max(halfSpan, Math.min(1 - halfSpan, wMouse * (1 - 1 / scaleRatio) + wCenter / scaleRatio ));
-        throttledRedraw();
-        debouncedGetData();
+        setZoomLevel(zoomLevel + zoomDelta, wMouse * (1 - 1 / scaleRatio) + wCenter / scaleRatio);
+        return false;
     });
     
     $("body").mouseup(function() {
@@ -308,12 +321,31 @@
         }
     });
     
+    $zoomSlider.slider({
+        orientation: "vertical",
+        min: minZoomLevel,
+        max: maxZoomLevel,
+        range: "min",
+        value: zoomLevel,
+        slide: function(e, ui) {
+            setZoomLevel(ui.value);
+        }
+    });
+    
+    $(".timeline-zoom-in").click(function() {
+        setZoomLevel(zoomLevel + 1);
+    });
+    
+    $(".timeline-zoom-out").click(function() {
+        setZoomLevel(zoomLevel - 1);
+    });
+    
     $(".timeline-mill-submit").click(function() {
         loadSearchResults({ from_year: startSlide, to_year: endSlide, show_years: 1 });
     });
-
+    
+    updateZoomFactor();
     throttledRedraw();
-    
     getData();
     
     $(window).resize(throttledRedraw);
--- a/src/jocondelab/templates/jocondelab/front_base.html	Thu Sep 26 13:54:06 2013 +0200
+++ b/src/jocondelab/templates/jocondelab/front_base.html	Fri Sep 27 10:26:26 2013 +0200
@@ -42,7 +42,7 @@
             <ul class="language-menu menu-list">
             {% get_language_info_list for LANGUAGES as languages %}
             {% for language in languages %}
-                <li class="menu-item">
+                <li class="menu-item{% if language.code == LANGUAGE_CODE %} menu-item-current{% endif %}">
                     <a href="#" data-language-code="{{ language.code }}">{{ language.name_local }}</a>
                 </li>
             {% endfor %}
@@ -109,8 +109,9 @@
             </footer>
         </div>
         <div class="dbpedia-overlay clearfix">
-            <img />
-            <h2></h2>
+            <a class="dbpedia-close" href="#">&times;</a>
+            <img class="dbpedia-image" />
+            <h2 class="dbpedia-title"></h2>
             <p class="dbpedia-abstract"></p>
             <p class="dbpedia-source"><a href="#" target="_blank">{% trans 'Source: Wikipedia' %}</a></p>
         </div>
--- a/src/jocondelab/templates/jocondelab/front_notice.html	Thu Sep 26 13:54:06 2013 +0200
+++ b/src/jocondelab/templates/jocondelab/front_notice.html	Fri Sep 27 10:26:26 2013 +0200
@@ -35,15 +35,6 @@
 {% block breadcrumbs %}<a href="{% url 'front_notice' object.id %}">{% trans "Détail d'une notice" %}</a>{% endblock %}
 
 {% block main %}
-            <ul class="notice-images">
-                {% for img in images %}
-                <li>
-                    <a href="{{img}}" title="{{title}}">
-                        <img src="{{img}}" />
-                    </a>
-                </li>
-                {% endfor %}
-            </ul>
             <div class="notice-colright-wrapper">
                 <div class="notice-colright">
                     <table class="notice-datasheet">
@@ -126,10 +117,11 @@
                         </tr>
                     {% endif %}
                     </table>
-                    
+
                     <p class="notice-jocondelink">
                         <a href="{{JOCONDE_NOTICE_BASE_URL}}{{ notice.ref }}" target="_blank">{% trans 'Visiter sur le portail Joconde' %}</a>
                     </p>
+
 {% block contribution %}
                     <div class="contribution-frame folksonomy-frame">
                         <h2>{% trans 'Contribution (Folksonomie)' %}</h2>
@@ -147,4 +139,13 @@
 
                 </div>
             </div>
+            <ul class="notice-images">
+                {% for img in images %}
+                <li>
+                    <a href="{{img}}" title="{{title}}">
+                        <img src="{{img}}" />
+                    </a>
+                </li>
+                {% endfor %}
+            </ul>
 {% endblock %}
--- a/src/jocondelab/templates/jocondelab/front_search.html	Thu Sep 26 13:54:06 2013 +0200
+++ b/src/jocondelab/templates/jocondelab/front_search.html	Fri Sep 27 10:26:26 2013 +0200
@@ -17,7 +17,7 @@
 
 {% block main %}
             
-            <form class="big-search-form search-form">
+            <form class="big-search-form search-form" action="{% url 'front_search' %}">
                 <input class="big-search-input search-input" type="search" name="q" value="{{searchterm}}" />
             </form>
             
--- a/src/jocondelab/templates/jocondelab/front_timeline.html	Thu Sep 26 13:54:06 2013 +0200
+++ b/src/jocondelab/templates/jocondelab/front_timeline.html	Fri Sep 27 10:26:26 2013 +0200
@@ -26,9 +26,16 @@
 {% block main %}
             
             <h2 class="timeline-section-title">{% trans 'Rechercher par période nommée' %}</h2>
-            <div class="timeline-container">
-                <canvas class="timeline-canvas"></canvas>
-                <ul class="timeline-list"></ul>
+            <div class="timeline-wrapper">
+                <div class="timeline-container">
+                    <canvas class="timeline-canvas"></canvas>
+                    <ul class="timeline-list"></ul>
+                </div>
+                <div class="timeline-slider-container">
+                    <a class="timeline-zoom-button timeline-zoom-in" href="#"></a>
+                    <div class="timeline-slider"></div>
+                    <a class="timeline-zoom-button timeline-zoom-out" href="#"></a>
+                </div>
             </div>
             <h2 class="timeline-section-title">{% trans 'Rechercher par millésime' %}</h2>
             <div class="timeline-mill-slider"></div>
--- a/src/jocondelab/templates/jocondelab/partial/notice_list.html	Thu Sep 26 13:54:06 2013 +0200
+++ b/src/jocondelab/templates/jocondelab/partial/notice_list.html	Fri Sep 27 10:26:26 2013 +0200
@@ -1,22 +1,5 @@
 {% load i18n %}
-{% load jlutils %}
 
-{% if wkinfo %}
-    <li class="wiki-info">
-        {% if wkinfo.thumbnail %}
-        <a href="{{wkinfo.label|wikiurl:lang}}" target="_blank">
-            <img class="wiki-info-image" src="{{wkinfo.thumbnail}}" alt="{{wkinfo.label}}" />
-        </a>
-        {% endif %}
-        <h3 class="wiki-info-title">
-            <a href="{{wkinfo.label|wikiurl:lang}}" target="_blank">{{wkinfo.label}}</a>
-        </h3>
-        <p class="wiki-info-abstract">{{wkinfo.abstract}}</p>
-        <p class="wiki-info-source">
-            <a href="{{wkinfo.label|wikiurl:lang}}" target="_blank">{% trans 'Source : Wikipédia' %}</a>
-        </p>
-    </li>
-{% endif %}
 {% for notice in notices %}
     <li class="notice-item" data-notice-id="{{notice.id}}">
         <div class="notice-contents">
--- a/src/jocondelab/templates/jocondelab/partial/wrapped_notice_list.html	Thu Sep 26 13:54:06 2013 +0200
+++ b/src/jocondelab/templates/jocondelab/partial/wrapped_notice_list.html	Fri Sep 27 10:26:26 2013 +0200
@@ -1,7 +1,24 @@
 {% load i18n %}
+{% load jlutils %}
 
 <h2 class="resultcount"><b>{{count}}</b> {% if searchterm %}{% trans 'résultats pour :' %} <b>{{searchterm}}</b>{% else %}{% trans 'résultats' %}{% endif %}</h2>
 
 <ul class="notice-list clearfix"{% if page_count %} data-page-count="{{page_count}}"{% endif %} data-current-page="{{current_page}}">
+{% if wkinfo %}
+    <li class="wiki-info" data-dbpedia-uri="{{wkinfo.dbpedia_uri}}">
+        {% if wkinfo.thumbnail %}
+        <a href="{{wkinfo.label|wikiurl:lang}}" target="_blank">
+            <img class="wiki-info-image" src="{{wkinfo.thumbnail}}" alt="{{wkinfo.label}}" />
+        </a>
+        {% endif %}
+        <h3 class="wiki-info-title">
+            <a href="{{wkinfo.label|wikiurl:lang}}" target="_blank">{{wkinfo.label}}</a>
+        </h3>
+        <p class="wiki-info-abstract">{{wkinfo.abstract|default_if_none:""}}</p>
+        <p class="wiki-info-source">
+            <a href="{{wkinfo.label|wikiurl:lang}}" target="_blank">{% trans 'Source : Wikipédia' %}</a>
+        </p>
+    </li>
+{% endif %}
 {% include 'jocondelab/partial/notice_list.html' %}
 </ul>
\ No newline at end of file