# HG changeset patch # User veltr # Date 1376659720 -7200 # Node ID 87443e64bece8c056f3b1b5e256e1ea15c4a10af # Parent 70cc8154164caaee3164454662f31d0bd1513470 Added Dbpedia popins diff -r 70cc8154164c -r 87443e64bece src/jocondelab/static/jocondelab/css/front-common.css --- a/src/jocondelab/static/jocondelab/css/front-common.css Wed Aug 14 16:42:33 2013 +0200 +++ b/src/jocondelab/static/jocondelab/css/front-common.css Fri Aug 16 15:28:40 2013 +0200 @@ -183,3 +183,25 @@ opacity: 1; } +/* DBPEDIA OVERLAY */ + +.dbpedia-overlay { + position: absolute; width: 400px; background: #ffffff; border: 1px solid #999999; box-shadow: 5px 5px 10px rgba(0,0,0,.5); + display: none; z-index: 8; +} + +.dbpedia-overlay h2 { + font-size: 16px; font-weight: 700; margin: 10px; +} + +.dbpedia-abstract { + font-size: 12px; margin: 0 10px 10px; +} + +.dbpedia-source { + color: #0063DC; font-size: 11px; margin: 0 10px 10px; clear: both; +} + +.dbpedia-overlay img { + max-width: 200px; max-height: 180px; float: left; margin: 10px 10px 2px; +} diff -r 70cc8154164c -r 87443e64bece src/jocondelab/static/jocondelab/css/front-search.css --- a/src/jocondelab/static/jocondelab/css/front-search.css Wed Aug 14 16:42:33 2013 +0200 +++ b/src/jocondelab/static/jocondelab/css/front-search.css Fri Aug 16 15:28:40 2013 +0200 @@ -14,7 +14,7 @@ } .notice-popin { - position: absolute; padding: 10px; + position: absolute; padding: 10px; z-index: 1; background: url('../img/background-pinstripe-yellow.png'); border: 1px solid #cccccc; box-shadow: 0 0 5px #333333; } diff -r 70cc8154164c -r 87443e64bece src/jocondelab/static/jocondelab/js/front-common.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/jocondelab/static/jocondelab/js/front-common.js Fri Aug 16 15:28:40 2013 +0200 @@ -0,0 +1,118 @@ +$(function() { + + var lang = $("html").attr("lang"), + sparqlTpl = _.template( + 'select distinct * where { ' + + '<<%= uri %>> rdfs:label ?l FILTER( lang(?l) = "<%- lang %>" ). ' + + 'OPTIONAL { <<%= uri %>> dbpedia-owl:thumbnail ?t }. ' + + 'OPTIONAL { <<%= uri %>> dbpedia-owl:abstract ?a FILTER( lang(?a) = "<%- lang %>" ) }. ' + + 'OPTIONAL { <<%= uri %>> foaf:isPrimaryTopicOf ?w }. ' + + 'OPTIONAL { <<%= uri %>> dbpedia-owl:wikiPageRedirects ?r }. ' + + 'OPTIONAL { ?r dbpedia-owl:thumbnail ?tr }. ' + + 'OPTIONAL { ?r dbpedia-owl:abstract ?ar FILTER( lang(?ar) = "fr" ) }. ' + + '}' + ), + $overlay = $(".dbpedia-overlay"), + hovering = null, + $refdiv = null, + $win = $(window), + dbpediaCache = {}, + $img = $overlay.find("img"), + $h2 = $overlay.find("h2"), + $abstract = $overlay.find(".dbpedia-abstract"), + $source = $overlay.find(".dbpedia-source a"); + + function moveDbpediaPopin() { + if (hovering && $refdiv) { + var refoff = $refdiv.offset(), + refw = $refdiv.outerWidth(), + refh = $refdiv.outerHeight(), + refx = refoff.left, + refy = refoff.top, + ovw = $overlay.outerWidth(), + ovh = $overlay.outerHeight(), + showAbove = (refy + refh + ovh) > ($win.height() + $win.scrollTop()); + $overlay.css({ + top: showAbove ? (refy - ovh) : (refy + refh), + left: Math.max(5, Math.min($win.width() - ovw - 5, refx + (refw / 2) - (ovw / 2))) + }); + } + } + + function showUriData(dbpediaUri) { + var uriData = dbpediaCache[dbpediaUri]; + if (!uriData) { + return false; + } + if (hovering) { + $overlay.show().attr("data-dbpedia-uri", dbpediaUri); + if (uriData.t || uriData.tr) { + $img.load(moveDbpediaPopin).attr("src",uriData.t || uriData.tr).show(); + } else { + $img.hide(); + } + $h2.text(uriData.l || ""); + $abstract.text((uriData.a || uriData.ar || "").replace(/^(.{240,260})\s.+$/,'$1…')); + $source.attr("href", uriData.w || "http://www.wikipedia.org/").show(); + moveDbpediaPopin(); + } + return true; + } + + function getUriData(dbpediaUri) { + if (typeof dbpediaCache[dbpediaUri] !== "undefined") { + return; + } + var sparqlEndpoint = dbpediaUri.replace(/\/resource\/.*$/,'/sparql'), + query = sparqlTpl({uri: dbpediaUri, lang: lang}); + dbpediaCache[dbpediaUri] = false; + $.getJSON(sparqlEndpoint, { + query: query, + format: "application/sparql-results+json" + }, function(data) { + if (!data.results || !data.results.bindings || !data.results.bindings.length) { + return; + } + var res = data.results.bindings[0], cacheData = {}; + for (var k in res) { + if (res.hasOwnProperty(k)) { + cacheData[k] = res[k].value; + } + } + dbpediaCache[dbpediaUri] = cacheData; + if (hovering === dbpediaUri) { + showUriData(dbpediaUri); + } + }); + } + + function onDbpediaLeave() { + hovering = null; + setTimeout(function() { + if (!hovering) { + $overlay.hide(); + } + }, 0); + } + + $("body").on({ + mouseenter: function(e) { + $refdiv = $(this); + var dbpediaUri = $refdiv.attr("data-dbpedia-uri"); + hovering = dbpediaUri; + showUriData(dbpediaUri) || getUriData(dbpediaUri); + }, + mouseleave: onDbpediaLeave + }, "a[data-dbpedia-uri]"); + + $overlay.hover(function() { + var $this = $(this), + dbpediaUri = $this.attr("data-dbpedia-uri"); + if (dbpediaUri) { + hovering = dbpediaUri; + } + }, onDbpediaLeave); + + $(window).resize(moveDbpediaPopin).scroll(moveDbpediaPopin); + +}) diff -r 70cc8154164c -r 87443e64bece src/jocondelab/static/jocondelab/js/front-search.js --- a/src/jocondelab/static/jocondelab/js/front-search.js Wed Aug 14 16:42:33 2013 +0200 +++ b/src/jocondelab/static/jocondelab/js/front-search.js Fri Aug 16 15:28:40 2013 +0200 @@ -3,12 +3,13 @@ * */ $(function() { - + var $tblist = $(".notice-list"), $tbparent = $tblist.parent(), $win = $(window), gridsize = $(".notice-item").width() || 160, - $popin = null; + $popin = null, + $dbpOverlay = $(".dbpedia-overlay"); function removePopin() { if ($popin) { @@ -59,6 +60,8 @@ } } + var hoverPopin = false; + $tblist.find(".notice-item").mouseenter(function() { var $this = $(this); removePopin(); @@ -70,9 +73,22 @@ $popin.find(".notice-image").css("margin", 0); $("body").append($popin); movePopin(); - $popin.mouseleave(removePopin); + $popin.hover(function() { + hoverPopin = true; + }, function() { + hoverPopin = false; + if ($dbpOverlay.is(":hidden")) { + removePopin(); + } + }); }); + $dbpOverlay.mouseleave(function() { + if (!hoverPopin) { + removePopin(); + } + }) + function adaptGrid() { $tblist.css({ padding: "0 " + Math.floor($tbparent.width() % gridsize / 2) + "px" diff -r 70cc8154164c -r 87443e64bece src/jocondelab/templates/jocondelab/front_base.html --- a/src/jocondelab/templates/jocondelab/front_base.html Wed Aug 14 16:42:33 2013 +0200 +++ b/src/jocondelab/templates/jocondelab/front_base.html Fri Aug 16 15:28:40 2013 +0200 @@ -12,7 +12,6 @@ - {% endblock %} {% block css_import %} @@ -67,6 +66,12 @@ {% endblock %} +
+ +

+

+

{% trans 'Source: Wikipedia' %}

+
{% endblock %} diff -r 70cc8154164c -r 87443e64bece src/jocondelab/templates/jocondelab/front_notice.html --- a/src/jocondelab/templates/jocondelab/front_notice.html Wed Aug 14 16:42:33 2013 +0200 +++ b/src/jocondelab/templates/jocondelab/front_notice.html Fri Aug 16 15:28:40 2013 +0200 @@ -58,7 +58,7 @@ diff -r 70cc8154164c -r 87443e64bece src/jocondelab/templates/jocondelab/front_search.html --- a/src/jocondelab/templates/jocondelab/front_search.html Wed Aug 14 16:42:33 2013 +0200 +++ b/src/jocondelab/templates/jocondelab/front_search.html Fri Aug 16 15:28:40 2013 +0200 @@ -27,7 +27,7 @@ @@ -60,7 +60,7 @@

{% trans thesaurus %}{% trans ':' %}

diff -r 70cc8154164c -r 87443e64bece src/jocondelab/views/front_office.py --- a/src/jocondelab/views/front_office.py Wed Aug 14 16:42:33 2013 +0200 +++ b/src/jocondelab/views/front_office.py Fri Aug 16 15:28:40 2013 +0200 @@ -58,7 +58,8 @@ for n in ns: terms = [{ "locale_label": ts.dbpediaresource.translations.get(lang=lang).label, - "thesaurus": ts.thesaurus.label + "thesaurus": ts.thesaurus.label, + "dbpedia_uri": ts.dbpediaresource.uri } for ts in n.dbpedia_resources.filter(dbpediaresource__translations__lang=lang)] termsbythesaurus = {} for term in terms: