# HG changeset patch # User veltr # Date 1377182779 -7200 # Node ID b174c4467f7cbaccdb17c6fa9b55fe96e746204e # Parent e7c675c548161fe1d393f389a55b6052290fbfd1 Added timeline view diff -r e7c675c54816 -r b174c4467f7c src/jocondelab/static/jocondelab/css/front-common.css --- a/src/jocondelab/static/jocondelab/css/front-common.css Wed Aug 21 19:20:14 2013 +0200 +++ b/src/jocondelab/static/jocondelab/css/front-common.css Thu Aug 22 16:46:19 2013 +0200 @@ -74,6 +74,10 @@ text-decoration: underline; } +b { + font-weight: 800; +} + /* FONT DECLARATIONS */ @font-face { @@ -170,36 +174,58 @@ background: url(../img/search-icon.png) right center no-repeat #ffffff; } +/* HEADER > MENUS */ + +.top-menus { + float: right; +} + +.menu-container { + float: right; position: relative; +} + +.menu-list { + position: absolute; top: 25px; right: 0; background: #ffffff; display: none; + font-size: 12px; box-shadow: 1px 1px 3px #333333; z-index: 2; text-align: right; +} + +.menu-item { + border-bottom: 1px solid #cccccc; height: 20px; + line-height: 20px; padding: 0 5px; +} + +.menu-container:hover .menu-list { + display: block; +} + /* HEADER > FLAGS */ -.language-select { - position: absolute; text-align: right; top: 5px; height: 22px; right: 0; width: 28px; -} - .language-current { - display: block; margin: 5px 0; + display: block; margin: 10px 0 10px 10px; } .language-list { - position: absolute; top: 22px; right: 0; background: #ffffff; display: none; - font-size: 12px; width: 100px; box-shadow: 1px 1px 3px #333333; z-index: 2; -} - -.language-select:hover .language-list { - display: block; -} - -.language-item { - border-bottom: 1px solid #cccccc; height: 20px; + width: 100px; } .language-label { - line-height: 20px; cursor: pointer; + cursor: pointer; } .language-button { width: 18px; height: 12px; border: none; padding: 0; text-indent: -9999px; - float: right; margin: 4px 4px 0 6px; cursor: pointer; + float: right; margin: 4px 0 0 6px; cursor: pointer; +} + +/* HEADER > MAIN MENU */ + +.main-menu-title { + display: block; height: 16px; line-height: 16px; font-size: 13px; + text-transform: uppercase; margin: 7px; +} + +.main-menu-list { + width: 140px; } /* DBPEDIA OVERLAY */ @@ -227,6 +253,10 @@ /* RESULTS LIST */ +.resultcount { + font-size: 18px; margin: 10px 0; +} + .notice-list { margin: 0 auto; } diff -r e7c675c54816 -r b174c4467f7c src/jocondelab/static/jocondelab/css/front-timeline.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/jocondelab/static/jocondelab/css/front-timeline.css Thu Aug 22 16:46:19 2013 +0200 @@ -0,0 +1,30 @@ +.timeline-container { + position: relative; width: 100%; height: 376px; margin-top: 10px; + background: #ffffff; overflow: hidden; +} + +.timeline-canvas { + width: 100%; height: 100%; +} + +.timeline-list { + position: absolute; left: 0; top: 20px; width: 100%; +} + +.timeline-item { + position: relative; height: 28px; width: 100%; +} + +.timeline-item-box { + position: absolute; height: 16px; top: 0; margin-bottom: 4px; + border-bottom: 8px solid #0000c0; cursor: pointer; +} + +.timeline-item-label { + position: absolute; top: 0; text-align: center; width: 200px; margin-left: -100px; + font-size: 13px; left: 50%; line-height: 16px; +} + +.timeline-current { + border-color: #e06000; +} diff -r e7c675c54816 -r b174c4467f7c src/jocondelab/static/jocondelab/js/front-common.js --- a/src/jocondelab/static/jocondelab/js/front-common.js Wed Aug 21 19:20:14 2013 +0200 +++ b/src/jocondelab/static/jocondelab/js/front-common.js Thu Aug 22 16:46:19 2013 +0200 @@ -271,10 +271,11 @@ $(".language-label").click(function() { $(this).siblings(".language-button").click(); }); +/* $(".language-current").click(function() { $(".language-list").toggle(); }); - +*/ $overlayImg.load(moveDbpediaPopin); }); diff -r e7c675c54816 -r b174c4467f7c src/jocondelab/static/jocondelab/js/front-geo.js --- a/src/jocondelab/static/jocondelab/js/front-geo.js Wed Aug 21 19:20:14 2013 +0200 +++ b/src/jocondelab/static/jocondelab/js/front-geo.js Thu Aug 22 16:46:19 2013 +0200 @@ -34,6 +34,9 @@ coordCache.push(coord); } }); + coordCache = _(coordCache).sortBy(function(coord) { + return -coord.nb_notice; + }); showData(); } ); @@ -102,6 +105,9 @@ if (coordIdCache.indexOf(coord.term_id) === -1) { coordIdCache.push(coord.term_id); coordCache.push(coord); + coordCache = _(coordCache).sortBy(function(coord) { + return -coord.nb_notice; + }); } selectCoord(coord); } diff -r e7c675c54816 -r b174c4467f7c src/jocondelab/static/jocondelab/js/front-notice.js --- a/src/jocondelab/static/jocondelab/js/front-notice.js Wed Aug 21 19:20:14 2013 +0200 +++ b/src/jocondelab/static/jocondelab/js/front-notice.js Thu Aug 22 16:46:19 2013 +0200 @@ -1,3 +1,4 @@ $(function() { $('.notice-images a').magnificPopup({type:'image'}); + bindDbpediaBox(".notice-term a"); }); diff -r e7c675c54816 -r b174c4467f7c src/jocondelab/static/jocondelab/js/front-timeline.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/jocondelab/static/jocondelab/js/front-timeline.js Thu Aug 22 16:46:19 2013 +0200 @@ -0,0 +1,166 @@ +$(function() { + var startYear = -500, + endYear = 2012, + zoomLevel = 1, + zoomStep = Math.SQRT2, + minZoomLevel = .5, + maxZoomLevel = 128, + baseSpan = (endYear - startYear), + $tlcontainer = $(".timeline-container"), + canvas = $tlcontainer.find('canvas')[0], + lineDistances = [ 1000, 500, 200, 100, 50, 25, 10, 5, 2, 1 ], + cWidth, cHeight, + wSpan, wStart, wEnd, wScale, wLineDist, + wCenter = baseSpan / 2 + startYear, + itemCount = 12, + tlCache = [], tlIdCache = [], currentTerm = null; + + function updateCoords() { + cWidth = $tlcontainer.width(); + cHeight = $tlcontainer.height(); + wSpan = baseSpan / zoomLevel; + wStart = wCenter - wSpan / 2; + wEnd = wCenter + wSpan / 2; + wScale = cWidth / wSpan; + wLineDist = null; + for (var i = 0; i < lineDistances.length; i++) { + if (lineDistances[i] * wScale < 50) { + break; + } + wLineDist = lineDistances[i]; + } + } + + function yrToX(yr) { + return wScale * (yr - wStart); + } + + function xToYr(x) { + return wStart + x / wScale; + } + + var itemTpl = _.template( + '
  • ' + + '
    " data-term-id="<%- item.term_id %>"' + + ' data-dbpedia-uri="<%- item.dbpedia_uri %>" style="left: <%- left %>px; width: <%- width %>px;">' + + '
    <%- item.label %>
    • ' + ); + + function redrawView() { + canvas.width = cWidth; + canvas.height = cHeight; + + var ctx = canvas.getContext("2d"); + + for (var y = wLineDist * Math.ceil(wStart/wLineDist); y <= wEnd; y += wLineDist ) { + var x = yrToX(y+1/2); + ctx.beginPath(); + ctx.moveTo(x, 20); + ctx.lineTo(x, cHeight - 20); + ctx.stroke(); + ctx.textAlign = 'center'; + ctx.fillText(y || 1, x, 12); + ctx.fillText(y || 1, x, cHeight - 8); + } + var html = _(tlCache).chain() + .filter(function(item) { + return (item.end_year >= wStart && item.start_year <= wEnd); + }).first(itemCount) + .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)); + return itemTpl({ + current: (item.term_id == currentTerm), + item: item, + left: l, + width: (r-l) + }); + }).value().join(""); + $(".timeline-list").html(html); + bindDbpediaBox(".timeline-item-box"); + $(".timeline-item-box").click(function() { + var $this = $(this); + currentTerm = $this.attr("data-term-id") + $(".timeline-item-box").removeClass("timeline-current"); + $this.addClass("timeline-current"); + $(".results").empty().load( + urls.ajax_contents_by_term + "?random=1&term_id=" + currentTerm + ); + }) + } + + function getData() { + $.getJSON( + urls.ajax_years, + { + from_year: Math.floor(wStart), + to_year: Math.floor(wEnd) + }, + function(data) { + _(data).each(function(term) { + if (tlIdCache.indexOf(term.term_id) === -1) { + tlIdCache.push(term.term_id); + tlCache.push(term); + } + }); + tlCache = _(tlCache).sortBy(function(item) { + return -item.nb_notice; + }); + throttledRedraw(); + } + ); + } + + var throttledRedraw = _.throttle(function() { + updateCoords(); + redrawView(); + }, 100); + + var debouncedGetData = _.debounce(getData, 1000); + + var mousedown = false, dragging = false, xstart = null, wcStart; + + throttledRedraw(); + + $tlcontainer.mousedown(function(e) { + dragging = false; + mousedown = true; + xstart = e.clientX; + wcStart = wCenter; + return false; + }).mousemove(function(e) { + if (mousedown) { + dragging = true; + wCenter = Math.max(startYear, Math.min(endYear, wcStart + (xstart - e.clientX) / wScale )); + throttledRedraw(); + debouncedGetData(); + return false; + } + }).mousewheel(function(e, d) { + var yrMouse = xToYr(e.clientX - $(this).offset().left), + scaleRatio = (d > 0 ? zoomStep : 1/zoomStep); + if (d < 0 && zoomLevel <= minZoomLevel) { + return; + } + if (d >= 0 && zoomLevel >= maxZoomLevel) { + return; + } + zoomLevel *= scaleRatio; + console.log(zoomLevel); + wCenter = Math.max(startYear, Math.min(endYear, yrMouse * (1 - 1 / scaleRatio) + wCenter / scaleRatio )); + throttledRedraw(); + debouncedGetData(); + }); + + $("body").mouseup(function() { + mousedown = false; + dragging = false; + }); + + getData(); + + $(window).resize(throttledRedraw); + +}); diff -r e7c675c54816 -r b174c4467f7c src/jocondelab/static/jocondelab/lib/jquery.mousewheel.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/jocondelab/static/jocondelab/lib/jquery.mousewheel.js Thu Aug 22 16:46:19 2013 +0200 @@ -0,0 +1,117 @@ +/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net) + * Licensed under the MIT License (LICENSE.txt). + * + * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers. + * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. + * Thanks to: Seamus Leahy for adding deltaX and deltaY + * + * Version: 3.1.3 + * + * Requires: 1.2.2+ + */ + +(function (factory) { + if ( typeof define === 'function' && define.amd ) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else if (typeof exports === 'object') { + // Node/CommonJS style for Browserify + module.exports = factory; + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + + var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll']; + var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll']; + var lowestDelta, lowestDeltaXY; + + if ( $.event.fixHooks ) { + for ( var i = toFix.length; i; ) { + $.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks; + } + } + + $.event.special.mousewheel = { + setup: function() { + if ( this.addEventListener ) { + for ( var i = toBind.length; i; ) { + this.addEventListener( toBind[--i], handler, false ); + } + } else { + this.onmousewheel = handler; + } + }, + + teardown: function() { + if ( this.removeEventListener ) { + for ( var i = toBind.length; i; ) { + this.removeEventListener( toBind[--i], handler, false ); + } + } else { + this.onmousewheel = null; + } + } + }; + + $.fn.extend({ + mousewheel: function(fn) { + return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel"); + }, + + unmousewheel: function(fn) { + return this.unbind("mousewheel", fn); + } + }); + + + function handler(event) { + var orgEvent = event || window.event, + args = [].slice.call(arguments, 1), + delta = 0, + deltaX = 0, + deltaY = 0, + absDelta = 0, + absDeltaXY = 0, + fn; + event = $.event.fix(orgEvent); + event.type = "mousewheel"; + + // Old school scrollwheel delta + if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; } + if ( orgEvent.detail ) { delta = orgEvent.detail * -1; } + + // New school wheel delta (wheel event) + if ( orgEvent.deltaY ) { + deltaY = orgEvent.deltaY * -1; + delta = deltaY; + } + if ( orgEvent.deltaX ) { + deltaX = orgEvent.deltaX; + delta = deltaX * -1; + } + + // Webkit + if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; } + if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; } + + // Look for lowest delta to normalize the delta values + absDelta = Math.abs(delta); + if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; } + absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX)); + if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; } + + // Get a whole value for the deltas + fn = delta > 0 ? 'floor' : 'ceil'; + delta = Math[fn](delta / lowestDelta); + deltaX = Math[fn](deltaX / lowestDeltaXY); + deltaY = Math[fn](deltaY / lowestDeltaXY); + + // Add event and delta to the front of the arguments + args.unshift(event, delta, deltaX, deltaY); + + return ($.event.dispatch || $.event.handle).apply(this, args); + } + +})); diff -r e7c675c54816 -r b174c4467f7c src/jocondelab/templates/jocondelab/ajax_contents.html --- a/src/jocondelab/templates/jocondelab/ajax_contents.html Wed Aug 21 19:20:14 2013 +0200 +++ b/src/jocondelab/templates/jocondelab/ajax_contents.html Thu Aug 22 16:46:19 2013 +0200 @@ -1,5 +1,5 @@ {% load i18n %} -
    {{count}} {% trans 'results for' %} {{termlabel}}
    +

    {{count}} {% trans 'results for:' %} {{termlabel}}

    -
    {{rescount}} {% trans 'results' %} -- {{duration}} secondes
    +

    {{rescount}} {% if queryterms %}{% trans 'results for:' %} {{queryterms}}{% else %}{% trans 'results' %}{% endif %}