# HG changeset patch
# User ymh <ymh.work@gmail.com>
# Date 1372365056 -7200
# Node ID eb6e0a3b3b01df907ba7c369ea4a40d78abcb010
# Parent  9c1994571d23b10c00989bb5700fe4f902bd5eae
change wikipedia search box to use Opensearch and dbpedia

diff -r 9c1994571d23 -r eb6e0a3b3b01 src/jocondelab/static/jocondelab/css/style.css
--- a/src/jocondelab/static/jocondelab/css/style.css	Thu Jun 27 16:53:58 2013 +0200
+++ b/src/jocondelab/static/jocondelab/css/style.css	Thu Jun 27 22:30:56 2013 +0200
@@ -517,14 +517,22 @@
 	top: 0px;
 	left: 0px;
 	cursor: default;
-	max-width: 200px;
+	max-width: 300px;
 	padding: 0 10px 10px 10px;
 }
 
 .wp-infobox-wp-link {
-	margin-top: 1em;
+	margin-bottom: 1em;
 }
 
 #wp-infobox a {
 	color: rgb(80, 164, 163);
 }
+
+.wp-img {
+	float: left;
+	max-width: 80px;
+	max-height: 60px;
+	margin: 5px 2px 2px 0px;
+	padding-right: 5px;
+}
\ No newline at end of file
diff -r 9c1994571d23 -r eb6e0a3b3b01 src/jocondelab/static/jocondelab/js/jocondelab.js
--- a/src/jocondelab/static/jocondelab/js/jocondelab.js	Thu Jun 27 16:53:58 2013 +0200
+++ b/src/jocondelab/static/jocondelab/js/jocondelab.js	Thu Jun 27 22:30:56 2013 +0200
@@ -40,38 +40,23 @@
     $("#wp_search").autocomplete({
         source: function( request, response ) {
             $.ajax({
-                url: "http://fr.wikipedia.org/w/api.php",
-                dataType: "jsonp",
-                data: {
-                    list: "search",
-                    action: "query",
-                    srlimit: "20",
-                    format: "json",
-                    srsearch: request.term,
-                    srprop: 'titlesnippet|snippet',
-                },
-                success: function( data ) {
-                    response( $.map( data.query.search, function( item ) {
-                        return {
-                            label: item.title,
-                            value: item.title,
-                            snippet: item.snippet,
-                            titlesnippet: item.titlesnippet
-                        }
-                    }));
-                }
+               url : "http://fr.wikipedia.org/w/api.php",
+               dataType: "jsonp",
+               data : {
+                   action: "opensearch",
+                   search: request.term,
+                   format: "json",
+                   limit: 10                   
+               },
+               success: function( data ) {
+                   response( $.map( data[1], function( item ) {
+                       return {
+                           label: item,
+                           value: item
+                       };
+                   }));
+               }
             });
-            //response( $.map(
-            //    JSON.parse('[{"ns":0,"title":"Napol\u00e9on Ier","snippet":"<span class=\'searchmatch\'>Napol\u00e9on</span> , n\u00e9 le 15 | ao\u00fbt | 1769 \u00e0 Ajaccio  en Corse , dans le royaume de France , et mort le 5 | mai | 1821 sur l\'\u00eele Sainte-H\u00e9l\u00e8ne , au  <b>...</b> ","titlesnippet":"<span class=\'searchmatch\'>Napol\u00e9on</span> Ier"},{"ns":0,"title":"Napol\u00e9on III","snippet":"Charles Louis <span class=\'searchmatch\'>Napol\u00e9on</span> Bonaparte, dit Louis-<span class=\'searchmatch\'>Napol\u00e9on</span> Bonaparte puis <span class=\'searchmatch\'>Napol\u00e9on</span> III, est n\u00e9 \u00e0 Paris , le 20 | avril | 1808 et mort \u00e0  <b>...</b> ","titlesnippet":"<span class=\'searchmatch\'>Napol\u00e9on</span> III"},{"ns":0,"title":"Famille Bonaparte","snippet":"Trois de ses membres ont r\u00e9gn\u00e9 sur la France  dans le cadre de la monarchie imp\u00e9riale fran\u00e7aise  : <span class=\'searchmatch\'>Napol\u00e9on</span> I er  (de 1804  \u00e0 1814 , puis  <b>...</b> ","titlesnippet":""},{"ns":0,"title":"Napol\u00e9on (film, 1927)","snippet":"<span class=\'searchmatch\'>Napol\u00e9on</span> est le titre de r\u00e9f\u00e9rence d\'un film historique fran\u00e7ais, r\u00e9alis\u00e9 par Abel Gance , sorti initialement en 1927, dont le titre \u00e0  <b>...</b> ","titlesnippet":"<span class=\'searchmatch\'>Napol\u00e9on</span> (film, 1927)"},{"ns":0,"title":"Guerres napol\u00e9oniennes","snippet":"Les Guerres napol\u00e9oniennes sont la s\u00e9rie de guerre s qui eurent lieu en Europe  lorsque <span class=\'searchmatch\'>Napol\u00e9on</span>  dirigeait la France . Elles sont en partie <b>...</b> ","titlesnippet":""},{"ns":0,"title":"Napol\u00e9on (film, 1955)","snippet":"<span class=\'searchmatch\'>Napol\u00e9on</span> est un film franco -italien  r\u00e9alis\u00e9 par Sacha Guitry  en 1954 , sorti en salles en 1955 .  R\u00e9sum\u00e9 de l\'\u0153uvre : vie de <span class=\'searchmatch\'>Napol\u00e9on</span> de  <b>...</b> ","titlesnippet":"<span class=\'searchmatch\'>Napol\u00e9on</span> (film, 1955)"},{"ns":0,"title":"Napol\u00e9on II","snippet":"<span class=\'searchmatch\'>Napol\u00e9on</span> Fran\u00e7ois Charles Joseph Bonaparte, prince imp\u00e9rial , titr\u00e9 roi de Rome  \u00e0 sa naissance, puis prince de Parme, proclam\u00e9 <span class=\'searchmatch\'>Napol\u00e9on</span> II <b>...</b> ","titlesnippet":"<span class=\'searchmatch\'>Napol\u00e9on</span> II"},{"ns":0,"title":"Louis-Napol\u00e9on Bonaparte (1856-1879)","snippet":"Le prince <span class=\'searchmatch\'>Napol\u00e9on</span> Eug\u00e8ne Louis Jean Joseph Bonaparte, prince imp\u00e9rial , dit Louis-<span class=\'searchmatch\'>Napol\u00e9on</span>, n\u00e9 le 16 | mars | 1856 \u00e0 Paris  et mort le 1er <b>...</b> ","titlesnippet":"Louis-<span class=\'searchmatch\'>Napol\u00e9on</span> Bonaparte (1856-1879)"},{"ns":0,"title":"Napol\u00e9on (mini-s\u00e9rie)","snippet":"<span class=\'searchmatch\'>Napol\u00e9on</span> est une mini-s\u00e9rie  historique compos\u00e9e de quatre \u00e9pisodes de 100 | minutes, r\u00e9alis\u00e9e par Yves Simoneau  et diffus\u00e9e \u00e0 partir du <b>...</b> ","titlesnippet":"<span class=\'searchmatch\'>Napol\u00e9on</span> (mini-s\u00e9rie)"},{"ns":0,"title":"Victor Napol\u00e9on","snippet":"<span class=\'searchmatch\'>Napol\u00e9on</span> Victor J\u00e9r\u00f4me Fr\u00e9d\u00e9ric Bonaparte, dit Victor <span class=\'searchmatch\'>Napol\u00e9on</span>, \u00ab prince <span class=\'searchmatch\'>Napol\u00e9on</span>  \u00bb, n\u00e9 le 18 juillet  1862 , mort le 3 mai  1926 , est le <b>...</b> ","titlesnippet":"Victor <span class=\'searchmatch\'>Napol\u00e9on</span>"}]'),
-            //    function( item ) {
-            //        return {
-            //            label: item.title,
-            //            value: item.title,
-            //            snippet: item.snippet,
-            //            titlesnippet: item.titlesnippet
-            //        };
-            //    }
-            //));
         },
         select: function(event, ui) { 
             // Since the event still did not update wp_search's val, we force it.
@@ -93,20 +78,37 @@
             if(wp_infobox.length === 0) {
                 wp_infobox = $("<div>",{id: 'wp-infobox'}).addClass( "ui-widget-content ui-corner-all").appendTo('body');
             }
-            label = ui.item.titlesnippet;
-            if(!label) {
-                label = ui.item.label;
-            }
-            var html_str = "<h3>"+label+"</h3>" +
-                "<div>" + ui.item.snippet + "</div>" +
-                "<div class='wp-infobox-wp-link'>" +
-                    "<a target='_blank' href='http://fr.wikipedia.org/wiki/"+encodeURIComponent(ui.item.label)+"'>Source wikipedia</a>" +
-                "</div>";
-            wp_infobox
-                .html(html_str)
-                .position({my: "left top", at:"right+5 top", of: $(".ui-autocomplete")})
-                .css("z-index", $(".ui-autocomplete").css("z-index"))
-                .show();
+            var page_name = ui.item.label.replace(/ /g, "_");
+            var resource_url = "http://fr.dbpedia.org/resource/" + page_name;
+            $.ajax({
+                url: "http://fr.dbpedia.org/sparql",
+                data: {
+                    query: "select distinct ?t ?y ?l where { OPTIONAL { <"+resource_url+"> dbpedia-owl:thumbnail ?t} . OPTIONAL { <"+resource_url+"> dbpedia-owl:abstract ?y . FILTER(langMatches(lang(?y), \"fr\")) } . OPTIONAL { <"+resource_url+"> foaf:isPrimaryTopicOf ?l } } LIMIT 100",
+                    format: "application/sparql-results+json"
+                },
+                dataType: "json",
+                success: function(data) {
+                    console.log(data);
+                    res = data.results.bindings.length>0?data.results.bindings[0]:{y:"",l:"http://fr.wikipedia.org/"+page_name,t:""};
+                    var item = {
+                        abstract: res.y?res.y.value:"",
+                        url: res.l?res.l.value:"",
+                        thumbnail: res.t?res.t.value:""
+                    };
+                    var html_str = "<h3>"+ui.item.label+"</h3>" +
+                    "<div class='wp-infobox-wp-link'>" +
+                    "<a target='_blank' href='"+ item.url +"'>Source wikipedia</a>" +
+                    "</div>" +
+                    "<img class='wp-img' src=\""+ item.thumbnail+"\"/>" +
+                    "<div>" + item.abstract + "</div>" ;
+                    
+                    wp_infobox
+                        .html(html_str)
+                        .position({my: "left top", at:"right+5 top", of: $(".ui-autocomplete")})
+                        .css("z-index", $(".ui-autocomplete").css("z-index"))
+                        .show();                    
+                }
+            });
         }
     })
     .data( "ui-autocomplete" )._renderItem = function( ul, item ) {