# HG changeset patch # User cavaliet # Date 1393339056 -3600 # Node ID 47dd76d18891f3d026c77950b9a4b3b4bbd01614 # Parent f4b443fcddc7a2f0dccb7b45a71c57c18cebda73 wikipedia overlay with sparql request. diff -r f4b443fcddc7 -r 47dd76d18891 src/egonomy/static/egonomy/css/style.css --- a/src/egonomy/static/egonomy/css/style.css Mon Feb 24 18:22:07 2014 +0100 +++ b/src/egonomy/static/egonomy/css/style.css Tue Feb 25 15:37:36 2014 +0100 @@ -410,6 +410,33 @@ padding: 0; } +/* DBPEDIA OVERLAY */ +.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: 1500; +} +.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 { + font-size: 11px; margin: 0 10px 10px; +} +.dbpedia-source { + color: #0063DC; font-size: 10px; margin: 0 10px 10px; clear: both; +} +.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; +} + /* tests */ .svg_over_image{ opacity: 0; diff -r f4b443fcddc7 -r 47dd76d18891 src/egonomy/static/egonomy/js/main.js --- a/src/egonomy/static/egonomy/js/main.js Mon Feb 24 18:22:07 2014 +0100 +++ b/src/egonomy/static/egonomy/js/main.js Tue Feb 25 15:37:36 2014 +0100 @@ -35,7 +35,185 @@ $('.popin').bind('click', function(e){ e.stopPropagation(); }); -//tag it + + /* DBPEDIA OVERLAY */ + + var sparqlTpl = 'select distinct * where { ' + + 'OPTIONAL { <<%= uri %>> rdfs:label ?l FILTER( langMatches( lang(?l), "<%- lang %>" ) ) }. ' + + 'OPTIONAL { <<%= uri %>> dbpedia-owl:thumbnail ?t }. ' + + 'OPTIONAL { <<%= uri %>> dbpedia-owl:abstract ?a FILTER( langMatches( lang(?a), "<%- lang %>" ) ) }. ' + + 'OPTIONAL { <<%= uri %>> dbpedia-owl:wikiPageRedirects ?r }. ' + + 'OPTIONAL { ?r rdfs:label ?lr FILTER( langMatches( lang(?lr), "<%- lang %>" ) ) }. ' + + 'OPTIONAL { ?r dbpedia-owl:thumbnail ?tr }. ' + + 'OPTIONAL { ?r dbpedia-owl:abstract ?ar FILTER( langMatches( lang(?ar), "<%- lang %>" ) ) }. ' + + '}', + $overlay = $(".dbpedia-overlay"), + hovering = null, + anchor = null, + $win = $(window), + dbpediaCache = {}, + $overlayImg = $overlay.find("img"), + $h2 = $overlay.find("h2"), + $abstract = $overlay.find(".dbpedia-abstract"), + $source = $overlay.find(".dbpedia-source a"); + + function setDbpediaBoxAnchor(a) { + anchor = a || null; + if (anchor) { + recentreDbpediaBox(); + } + } + + function recentreDbpediaBox() { + if (!anchor) { return; } + var ovw = $overlay.outerWidth(), + ovh = $overlay.outerHeight(), + refbox; + switch (anchor.type) { + case "dom": + var $refdiv = anchor.selector, + refoff = $refdiv.offset(), + refw = $refdiv.outerWidth(), + refh = $refdiv.outerHeight(), + refx = refoff.left, + refy = refoff.top; + refbox = { left: refx, right: refx + refw, top: refy, bottom: refy + refh }; + break; + case "box": + refbox = anchor.box; + break; + case "callback": + refbox = anchor.callback(); + break; + } + if (!refbox) { return; } + if (!refbox.right) { refbox.right = refbox.left; } + if (!refbox.bottom) { refbox.bottom = refbox.top; } + refbox.hcentre = (refbox.left + refbox.right) / 2; + switch (anchor.positioning) { + case "side": + var showLeft = (refbox.right + ovw) > $win.width(); + css = { left: showLeft ? (refbox.left - ovw) : (refbox.right), top: refbox.top }; + break; + case "bottom": + css = { left: refbox.hcentre - ovw / 2, top: refbox.bottom }; + break; + case "vertical": + default: + var showAbove = (refbox.bottom + ovh) > ($win.height() + $win.scrollTop()); + css = { left: refbox.hcentre - ovw / 2, top: showAbove ? refbox.top - ovh : refbox.bottom }; + } + if (css) { + css.left = Math.max(5, Math.min($win.width() - ovw - 5, css.left)); + $overlay.css(css); + } + } + + function showDbpediaBox(dbpediaUri) { + if (!dbpediaUri) { + return; + } + hovering = dbpediaUri; + $overlay.hide(); + $overlayImg.attr("src",""); + var uriData = dbpediaCache[dbpediaUri]; + if (!uriData) { + getUriData(dbpediaUri); + return; + } + $overlay.show().attr("data-dbpedia-uri", dbpediaUri); + if (uriData.t || uriData.tr) { + $overlayImg.attr("src",uriData.t || uriData.tr).show(); + } else { + $overlayImg.hide(); + } + var label = uriData.l || uriData.lr || "", + wkUrl = "http://fr.wikipedia.org/"; + if (label) { + wkUrl += "wiki/" + encodeURI(label.replace(/ /g,'_')); + } + $h2.text((uriData.l && uriData.lr) ? (uriData.l + " → " + uriData.lr) : label); + $abstract.text((uriData.a || uriData.ar || "").replace(/^(.{240,260})\s.+$/,'$1…').substr(0,261)); + $source.attr("href", wkUrl); + recentreDbpediaBox(); + } + + function getUriData(dbpediaUri) { + if (typeof dbpediaCache[dbpediaUri] !== "undefined") { + return; + } + var sparqlEndpoint = dbpediaUri.replace(/\/resource\/.*$/,'/sparql'), + query = sparqlTpl.replace(new RegExp("<%= uri %>", "g"), decodeURI(dbpediaUri)).replace(new RegExp("<%- lang %>", "g"), "fr"); + 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) { + showDbpediaBox(dbpediaUri); + } + }); + } + + function hideDbpediaBox() { + hovering = null; + setTimeout(function() { + if (!hovering) { + $overlay.hide(); + setDbpediaBoxAnchor(); + } + }, 0); + } + + function bindDbpediaBox(selector, defaultUri) { + var $sel = $(selector); + $sel.off("mouseenter mouseleave"); + $sel.mouseenter(function(e) { + var $this = $(this); + setDbpediaBoxAnchor({ selector: $this, type: "dom", positioning: "vertical" }); + var dbpediaUri = $this.attr("data-dbpedia-uri") || defaultUri; + if (!dbpediaUri || dbpediaUri === "None") { + return; + } + showDbpediaBox(dbpediaUri); + }); + $sel.mouseleave(hideDbpediaBox); + } + + $overlay.hover(function() { + var $this = $(this), + dbpediaUri = $this.attr("data-dbpedia-uri"); + if (dbpediaUri) { + hovering = dbpediaUri; + } + }, hideDbpediaBox); + + $overlay.find(".dbpedia-close").click(function() { + hideDbpediaBox(); + return false; + }); + + window.dbpediaBox = { + bind: bindDbpediaBox, + hide: hideDbpediaBox, + show: showDbpediaBox, + setAnchor: setDbpediaBoxAnchor, + recentre: recentreDbpediaBox + }; + + /* END DBPEDIA OVERLAY MANAGEMENT */ + + // TAG IT if($('.tag-it').length){ var keywordsTagIt = $('.tag-it').tagit({ allowSpaces : true, @@ -55,17 +233,24 @@ var choices = []; for(var i=0;i '); } } diff -r f4b443fcddc7 -r 47dd76d18891 src/egonomy/templates/egonomy_create_fragment.html --- a/src/egonomy/templates/egonomy_create_fragment.html Mon Feb 24 18:22:07 2014 +0100 +++ b/src/egonomy/templates/egonomy_create_fragment.html Tue Feb 25 15:37:36 2014 +0100 @@ -142,6 +142,13 @@

coucou

+
+ × + +

+

+

{% trans 'Source : Wikipédia' %}

+
{% endblock %} {% block js_page %}