wikipedia overlay with sparql request.
authorcavaliet
Tue, 25 Feb 2014 15:37:36 +0100
changeset 257 47dd76d18891
parent 256 f4b443fcddc7
child 258 bfa951bac3e3
wikipedia overlay with sparql request.
src/egonomy/static/egonomy/css/style.css
src/egonomy/static/egonomy/js/main.js
src/egonomy/templates/egonomy_create_fragment.html
--- 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;
--- 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<n;i++){
                     		var l = data[1][i];
-                    		choices.push({ label:l, value:( 'http://fr.wikipedia.org/wiki/' + l.replace(" ","_")) });
+                    		var l_uri = l.replace(new RegExp(" ","g"),"_");
+                    		choices.push({ label:l, value:( 'http://fr.wikipedia.org/wiki/' + l_uri), dbpedia_uri: ('http://fr.dbpedia.org/resource/' + l_uri) });
                     	}
                         showChoices(choices);
                     }
                 });
             },
+			autocomplete: {
+	            focus: function(e, ui) {
+                    showDbpediaBox(ui.item.dbpedia_uri);
+                    setDbpediaBoxAnchor({type: "dom", selector: $(e.target).autocomplete("widget"), positioning: "side"});
+	            }
+	        },
             beforeTagAdded: function(event, ui) {
                 if($(ui.tag.children()[0]).hasClass("tagit-label")){
                 	var tagit_label = $(ui.tag.children()[0]).html();
                 	if(tagit_label.substr(0, 29) == 'http://fr.wikipedia.org/wiki/'){
-                		var label = tagit_label.substr(29).replace("_"," ");
+                		var label = tagit_label.substr(29).replace(new RegExp("_","g")," ");
                 		$(ui.tag.children()[0]).html(label + ' <a href="' + tagit_label + '" target="_blank"><span class="logo_wikipedia f-right">&nbsp;</span></a>');
                 	}
                 }
--- 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 @@
                     <p>coucou</p>
                 </div>
             </article>
+	        <div class="dbpedia-overlay clearfix">
+	            <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&nbsp;: Wikipédia' %}</a></p>
+	        </div>
 {% endblock %}
 
 {% block js_page %}