# HG changeset patch # User veltr # Date 1380270386 -7200 # Node ID a09b26c435a15507a781ae1ac453aea0a261ef61 # Parent 984d0da5e84d3977036ae5b138046b9b5b83db5e some bugfixes diff -r 984d0da5e84d -r a09b26c435a1 src/jocondelab/static/jocondelab/css/front-common.css --- 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 */ diff -r 984d0da5e84d -r a09b26c435a1 src/jocondelab/static/jocondelab/css/front-notice.css --- 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 { diff -r 984d0da5e84d -r a09b26c435a1 src/jocondelab/static/jocondelab/css/front-timeline.css --- 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 { diff -r 984d0da5e84d -r a09b26c435a1 src/jocondelab/static/jocondelab/js/front-common.js --- 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() { diff -r 984d0da5e84d -r a09b26c435a1 src/jocondelab/static/jocondelab/js/front-geo.js --- 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; diff -r 984d0da5e84d -r a09b26c435a1 src/jocondelab/static/jocondelab/js/front-timeline.js --- 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); diff -r 984d0da5e84d -r a09b26c435a1 src/jocondelab/templates/jocondelab/front_base.html --- 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 @@