# HG changeset patch
# User ymh <ymh.work@gmail.com>
# Date 1372344838 -7200
# Node ID 9c1994571d23b10c00989bb5700fe4f902bd5eae
# Parent  594b48ccd963db739f4d57b5599b9ac48ea2a579
Improve wikipedia search box

diff -r 594b48ccd963 -r 9c1994571d23 src/jocondelab/static/jocondelab/css/style.css
--- a/src/jocondelab/static/jocondelab/css/style.css	Wed Jun 26 16:25:54 2013 +0200
+++ b/src/jocondelab/static/jocondelab/css/style.css	Thu Jun 27 16:53:58 2013 +0200
@@ -507,3 +507,24 @@
 #info-wk > td > span {
     margin-right:10px;
 }
+
+.searchmatch {
+	color: #c000c0;
+}
+
+#wp-infobox {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	cursor: default;
+	max-width: 200px;
+	padding: 0 10px 10px 10px;
+}
+
+.wp-infobox-wp-link {
+	margin-top: 1em;
+}
+
+#wp-infobox a {
+	color: rgb(80, 164, 163);
+}
diff -r 594b48ccd963 -r 9c1994571d23 src/jocondelab/static/jocondelab/js/jocondelab.js
--- a/src/jocondelab/static/jocondelab/js/jocondelab.js	Wed Jun 26 16:25:54 2013 +0200
+++ b/src/jocondelab/static/jocondelab/js/jocondelab.js	Thu Jun 27 16:53:58 2013 +0200
@@ -43,21 +43,35 @@
                 url: "http://fr.wikipedia.org/w/api.php",
                 dataType: "jsonp",
                 data: {
-                    action: "opensearch",
-                    limit: "20",
-                    namespace: "0",
+                    list: "search",
+                    action: "query",
+                    srlimit: "20",
                     format: "json",
-                    search: request.term
+                    srsearch: request.term,
+                    srprop: 'titlesnippet|snippet',
                 },
                 success: function( data ) {
-                    response( $.map( data[1], function( item ) {
+                    response( $.map( data.query.search, function( item ) {
                         return {
-                            label: item,
-                            value: item
+                            label: item.title,
+                            value: item.title,
+                            snippet: item.snippet,
+                            titlesnippet: item.titlesnippet
                         }
                     }));
                 }
             });
+            //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.
@@ -71,8 +85,40 @@
         },
         close: function() {
             $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+            setTimeout(function(){$("#wp-infobox").hide();},500);
+        },
+        focus: function(event,ui) {
+            
+            var wp_infobox = $("#wp-infobox");
+            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();
         }
-    });
+    })
+    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
+        label = item.titlesnippet;
+        if(!label) {
+            label = item.label;
+        }
+        return $( "<li></li>" )
+        .data( "item.autocomplete", item )
+        .append( "<a>" + label + "</a>" )
+        .appendTo( ul );
+    };
     $('#wp_search').keyup(function(e){
         if((e.keyCode==13) && ($("#wp_search").val()!="") && (select_done==false)){
             update_link($("#wp_search").val());
diff -r 594b48ccd963 -r 9c1994571d23 src/jocondelab/templates/jocondelab/term_edit.html
--- a/src/jocondelab/templates/jocondelab/term_edit.html	Wed Jun 26 16:25:54 2013 +0200
+++ b/src/jocondelab/templates/jocondelab/term_edit.html	Thu Jun 27 16:53:58 2013 +0200
@@ -29,15 +29,16 @@
     {% endblock %}
     
     {% block css_import %}
+    <link rel="stylesheet" href="{{STATIC_URL}}jocondelab/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css"/>
     {{block.super}}
-    <link rel="stylesheet" href="{{STATIC_URL}}jocondelab/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css"/>
     {% endblock %}
     
     {% block css_declaration %}
     {{block.super}}
     <style type="text/css">
     .ui-autocomplete {
-        max-height: 100px;
+        max-height: 300px;
+        max-width: 230px;
         overflow-y: auto;
         /* prevent horizontal scrollbar */
         overflow-x: hidden;