enabling wikipedia auto complete
authorHarris Baptiste <harris.baptiste@iri.centrepompidou.fr>
Fri, 01 Jul 2016 16:47:22 +0200
changeset 52 d47b3b09b15a
parent 51 4ae5f5d28da1
child 53 ed9acfa5dd6e
enabling wikipedia auto complete
src/iconolab/static/iconolab/js/iconolab-bundle/src/App.vue
src/iconolab/static/iconolab/js/iconolab-bundle/src/components/typeahead/Typeahead.vue
src/iconolab/static/iconolab/js/iconolab-bundle/src/components/typeahead/template.html
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/App.vue	Fri Jul 01 12:05:20 2016 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,22 +0,0 @@
-<template>
-  <div id="app">
-    <img src="./assets/logo.png">
-    <h1>{{ msg }}</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      msg: 'Hello Vue 2.0!'
-    }
-  }
-}
-</script>
-
-<style>
-body {
-  font-family: Helvetica, sans-serif;
-}
-</style>
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/typeahead/Typeahead.vue	Fri Jul 01 12:05:20 2016 +0200
+++ b/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/typeahead/Typeahead.vue	Fri Jul 01 16:47:22 2016 +0200
@@ -6,21 +6,22 @@
 	import Taglist from '../taglist/Taglist.vue'
 
 	var autoCompletePath = "http://lookup.dbpedia.org/api/search/PrefixSearch?MaxHits=5";
-
+	var wikipediaPath= "http://fr.wikipedia.org/w/api.php"
 	var parentsMethods = {
 		reset: typeahead.methods.reset
 	};
 
+
 	var get = function (url, data) {
 		var dfd = jQuery.Deferred();
 		var promise = jQuery.getJSON(url, data).done( function (response) {
 			var envelope = {};
 			envelope.data = response;
 			dfd.resolve(envelope);
-		}).fail(dfd.fail);
+		}).fail(dfd.reject);
 		return dfd.promise();
 	}
-
+	
 	export default {
 		mixins: [typeahead],
 		components: { 'taglist' : Taglist },
@@ -42,6 +43,7 @@
 				limit: 7,
 				minChars: 2,
 				showAddButton: false,
+				datasource: "wikipedia",
 				selectedTags: "[]",
 				items: [],
 				queryParamName: "QueryString"
@@ -58,9 +60,39 @@
       		},
       		
       		fetch() {
-				var query = {};
-				query[this.queryParamName] = this.query;
-				return get(this.src, query);
+      			if (this.datasource === "wikipedia") {
+      				return this.fetchWikiPedia();
+      			}
+
+      			else {
+      				var request = {};
+					request[this.queryParamName] = this.query;
+					return get(this.src, query);	
+      			}
+			},
+
+			fetchWikiPedia () {
+				this.src = wikipediaPath;
+				var self = this;
+				var request = {
+					'action': 'opensearch',
+					'format': 'json',
+					'search': this.query
+				};
+
+				/* make request */
+				var dfd = jQuery.Deferred(); 
+				jQuery.ajax({
+					url: this.src,
+				 	data: request,
+				 	dataType: "jsonp",
+				 	success: function (response) {
+				 		var envelope = {};
+				 		envelope.data = response;
+				 		dfd.resolve(envelope);
+				 	}
+				});
+				return dfd.promise();
 			},
 
       		reset () {
@@ -68,10 +100,38 @@
       			parentsMethods.reset.call(this);
       		},
 
+      		prepareWikipediaResponse (data) {
+      			var results = [];
+      			if (data.length !== 4) { return results; }
+      			var labelsList = data[1];
+      			var urlsList = data[3];
+
+      			if (labelsList.length !== urlsList.length) {
+      				return;
+      			}
+
+      			labelsList.map(function(item, index) {
+      				var tagItem = {};
+      				tagItem.tag_label = item;
+      				var link = urlsList[index];
+      				link = link.replace("https://fr.wikipedia.org/wiki/", "http://fr.dbpedia.org/resource/");
+      				tagItem.tag_link = link;
+      				tagItem.accuracy = 1;
+      				tagItem.relevancy = 1;
+      				results.push(tagItem);
+      			});
+
+      			return results;
+      		},
+
       		prepareResponseData (data) {
       			var data = (typeof data === 'string') ? JSON.parse(data): data;
       			var results = [];
 
+      			if(this.datasource === "wikipedia") {
+      				return this.prepareWikipediaResponse(data);
+      			}
+
       			if (data && data.hasOwnProperty('results')) {
       				var rawResults = data.results; 
       				rawResults.map(function (item) {
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/typeahead/template.html	Fri Jul 01 12:05:20 2016 +0200
+++ b/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/typeahead/template.html	Fri Jul 01 16:47:22 2016 +0200
@@ -8,9 +8,9 @@
          v-on:keyup.8="checkQuery"
          @keydown.down="down"
          @keydown.up="up"
-         @keydown.enter="hit"
+         @keydown.enter="hit($event)"
          @keydown.esc="reset"
-         @input="update"/>
+         @keyup="update"/>
 
   <a style="border: 1px solid red" @click="addTag" v-show="showAddButton"><i class="fa fa-plus"></i> Créer ce tag</a>