1 /* semantictree.js : We suppose that jquery, jquery ui, tag-it, jstree and smoothness theme have been loaded */ |
1 /* semantictree.js : We suppose that jquery, jquery ui, tag-it, jstree and smoothness theme have been loaded */ |
|
2 |
|
3 var semantictree_config = { |
|
4 cancel_button_text : "Cancel", |
|
5 ok_button_text : "Ok", |
|
6 } |
|
7 |
2 function init_autocomplete() |
8 function init_autocomplete() |
3 { |
9 { |
4 // Wikipedia search management (new tag) |
10 // Wikipedia search management (new tag) |
5 $(".semantic-tree").autocomplete({ |
11 $(".semantic-tree").autocomplete({ |
6 source: function( request, response ) { |
12 source: function( request, response ) { |
7 // We use "this" because there can be several autocomplete in the same form. |
13 // We use "this" because there can be several autocomplete in the same form. |
8 // this.element[0] is the input. |
14 // this.element[0] is the input. |
9 var the_input = $(this.element[0]); |
15 var the_input = $(this.element[0]); |
10 var reg = the_input.val(); |
16 var reg = the_input.val(); |
11 var url = the_input.attr("data-url"); |
17 var url = the_input.attr("data-url"); |
12 var query = the_input.attr("data-query"); |
18 var query = the_input.attr("data-query"); |
13 $.ajax({ |
19 $.ajax({ |
14 url : url, |
20 url : url, |
15 data: { |
21 data: { |
16 query: query, |
22 query: query, |
17 $reg: '"'+reg+'"', |
23 $reg: '"'+reg+'"', |
18 $language: '"fr"' |
24 $language: '"fr"' |
19 }, |
25 }, |
20 headers: { |
26 headers: { |
21 Accept: "application/sparql-results+json;charset=UTF-8" |
27 Accept: "application/sparql-results+json;charset=UTF-8" |
22 }, |
28 }, |
23 success: function( data ) { |
29 success: function( data ) { |
24 // build response |
30 // build response |
25 response( $.map( data["results"]["bindings"], function( item ) { |
31 response( $.map( data["results"]["bindings"], function( item ) { |
26 // If acronym |
32 // If acronym |
27 var s = (("acro" in item)?(item["acro"]["value"] + ". "):"") + item["label"]["value"]; |
33 var s = (("acro" in item)?(item["acro"]["value"] + ". "):"") + item["label"]["value"]; |
28 return { |
34 return { |
29 label: s, |
35 label: s, |
30 value: s + " (" + item["uri"]["value"] + ")" |
36 value: s + " (" + item["uri"]["value"] + ")" |
31 } |
37 } |
32 })); |
38 })); |
33 } |
39 } |
34 }); |
40 }); |
35 }, |
41 }, |
36 select: function(event, ui) { |
42 select: function(event, ui) { |
37 // We use "this" because there can be several autocomplete in the same form. |
43 // We use "this" because there can be several autocomplete in the same form. |
38 // this is the input. |
44 // this is the input. |
39 // addSubjectText is like "label (uri)" so we get the chars inner the last brackets |
45 // addSubjectText is like "label (uri)" so we get the chars inner the last brackets |
40 uri = ui.item.value.match(/\(([^)]*)\)[^(]*$/)[1] |
46 uri = ui.item.value.match(/\(([^)]*)\)[^(]*$/)[1] |
41 // First we update the uri/label dict |
47 // First we update the uri/label dict |
42 angular.element(this).scope().updateUriLabelDict(uri, ui.item.label); |
48 angular.element(this).scope().updateUriLabelDict(uri, ui.item.label); |
43 // Angular does not listen to val() event so we update the model value manually: |
49 // Angular does not listen to val() event so we update the model value manually: |
44 angular.element(this).controller('ngModel').$setViewValue(uri); |
50 angular.element(this).controller('ngModel').$setViewValue(uri); |
45 angular.element(this).scope().$apply(); |
51 angular.element(this).scope().$apply(); |
46 }, |
52 }, |
47 minLength: 2 |
53 minLength: 2 |
48 }); |
54 }); |
49 } |
55 } |
50 |
56 |
51 |
57 |
52 function init_browse() { |
58 function init_browse() { |
53 |
59 |
54 $( ".dialog-link" ).each(function() { |
60 $( ".dialog-link" ).each(function() { |
55 var input_name = this.id.substr(12); |
61 var input_name = this.id.substr(12); |
56 |
62 |
57 // Link to open the dialog |
63 // Link to open the dialog |
58 $( '#dialog-link-'+input_name ).click(function( event ) { |
64 $( '#dialog-link-'+input_name ).click(function( event ) { |
59 event.preventDefault(); |
65 event.preventDefault(); |
60 var input_name = this.id.substr(12); |
66 var input_name = this.id.substr(12); |
61 $( '#dialog-'+input_name ).dialog( "open" ); |
67 $( '#dialog-'+input_name ).dialog( "open" ); |
62 }); |
68 }); |
63 |
69 |
64 $( '#dialog-'+input_name ).dialog({ |
70 $( '#dialog-'+input_name ).dialog({ |
65 autoOpen: false, |
71 autoOpen: false, |
66 width: 400, |
72 width: 600, |
67 height: "auto", |
73 height: "auto", |
68 maxHeight: 800, |
74 //maxHeight: 800, |
69 resizable: false, |
75 resizable: true, |
70 position: {my: "left top", at:"left bottom+5", of:$("#dialog-link-container-"+input_name), collision: 'none'}, |
76 position: {my: "left top", at:"left bottom+5", of:$("#dialog-link-container-"+input_name), collision: 'none'}, |
71 open: function(event, ui) { |
77 open: function(event, ui) { |
72 // this is the span with class="dialog" and id="dialog-inputname" |
78 // this is the span with class="dialog" and id="dialog-inputname" |
73 var input_name = this.id.substr(7); |
79 var input_name = this.id.substr(7); |
74 var url = $("#id_"+input_name).attr("data-url"); |
80 var url = $("#id_"+input_name).attr("data-url"); |
75 var root_query = $("#id_"+input_name).attr("data-root-query"); |
81 var root_query = $("#id_"+input_name).attr("data-root-query"); |
76 var childs_query = $("#id_"+input_name).attr("data-childs-query"); |
82 var childs_query = $("#id_"+input_name).attr("data-childs-query"); |
77 var child_count_query = $("#id_"+input_name).attr("data-child-count-query"); |
83 var child_count_query = $("#id_"+input_name).attr("data-child-count-query"); |
78 // We load the tree only once |
84 // We load the tree only once |
79 if(!$('#term-tree-'+input_name).hasClass("jstree")){ |
85 if(!$('#term-tree-'+input_name).hasClass("jstree")){ |
80 $('#term-tree-'+input_name).jstree({ |
86 $('#term-tree-'+input_name).jstree({ |
81 themes: { |
87 themes: { |
82 theme: "apple", |
88 dots: true, |
83 dots: true, |
89 icons: true |
84 icons: true |
90 }, |
85 }, |
91 core: { |
86 json_data: { |
92 data: { |
87 ajax: { |
93 url : url, |
88 url : url, |
94 data: function(node){ |
89 data: function(node){ |
95 var res = {}; |
90 var res = {}; |
96 if(node.original && node.original.metadata) { |
91 if(node.data) { |
97 res.query = childs_query; |
92 res.query = childs_query; |
98 res.$root = node.original.metadata.uri; |
93 res.$root = node.data('uri'); |
99 } |
94 } |
100 else{ |
95 else{ |
101 res.query = root_query; |
96 res.query = root_query; |
102 } |
97 } |
103 res.$language = '"fr"'; |
98 res.$language = '"fr"'; |
104 return res; |
99 return res; |
105 }, |
100 }, |
106 headers: { |
101 headers: { |
107 Accept: "application/sparql-results+json;charset=UTF-8" |
102 Accept: "application/sparql-results+json;charset=UTF-8" |
108 }, |
103 }, |
109 dataFilter: function(data) { |
104 success: function(json) { |
110 var json_obj = JSON.parse(data); |
105 var b = json["results"]["bindings"]; |
111 var b = json_obj["results"]["bindings"]; |
106 var mytree = []; |
112 var mytree = []; |
107 var l = b.length; |
113 var l = b.length; |
108 for(var i=0;i<l;i++){ |
114 for(var i=0;i<l;i++){ |
109 var uri = b[i]["uri"]["value"]; |
115 var uri = b[i]["uri"]["value"]; |
110 // We test if the uri has childs. |
116 // We test if the uri has childs. |
111 var nb = 0; |
117 var nb = 0; |
112 if(child_count_query && child_count_query!=""){ |
118 if(child_count_query && child_count_query!=""){ |
113 $.ajax({ |
119 $.ajax({ |
114 url:url, |
120 url:url, |
115 data:{ |
121 data:{ |
116 query: child_count_query, |
122 query: child_count_query, |
117 $root: "<"+uri+">" |
123 $root: "<"+uri+">" |
118 }, |
124 }, |
119 headers: { |
125 headers: { |
120 Accept: "application/sparql-results+json;charset=UTF-8" |
126 Accept: "application/sparql-results+json;charset=UTF-8" |
121 }, |
127 }, |
122 async: false, |
128 async: false, |
123 success:function(json_count){ |
129 success:function(json_count){ |
124 nb = parseInt(json_count["results"]["bindings"][0]["nb"]["value"]); |
130 nb = parseInt(json_count["results"]["bindings"][0]["nb"]["value"]); |
125 } |
131 } |
126 }); |
132 }); |
127 } |
133 } |
128 // Test if the node is a collection and not selectable |
134 // Test if the node is a collection and not selectable |
129 var attr = {'rel':'default'}; |
135 var attr = {'rel':'default'}; |
130 if("type" in b[i]){ |
136 if("type" in b[i]){ |
131 type_uri = b[i]["type"]["value"]; |
137 type_uri = b[i]["type"]["value"]; |
132 // type uri in kind of http://www[...]#Concept or http://www[...]#Collection |
138 // type uri in kind of http://www[...]#Concept or http://www[...]#Collection |
133 if(type_uri.substr(type_uri.indexOf("#") + 1).toLowerCase()=="collection"){ |
139 if(type_uri.substr(type_uri.indexOf("#") + 1).toLowerCase()=="collection"){ |
134 attr = {'rel':'leaf'}; |
140 attr = {'rel':'leaf'}; |
135 } |
141 } |
136 } |
142 } |
137 // If acronym : |
143 // If acronym : |
138 var s = (("acro" in b[i])?(b[i]["acro"]["value"] + ". "):"") + b[i]["label"]["value"]; |
144 var s = (("acro" in b[i])?(b[i]["acro"]["value"] + ". "):"") + b[i]["label"]["value"]; |
139 // nb of child > 0 : state closed if yes, no state if not. |
145 // nb of child > 0 : state closed if yes, no state if not. |
140 if(nb>0){ |
146 if(nb>0){ |
141 mytree.push({ |
147 mytree.push({ |
142 "data" : { |
148 text : s + " (" + nb + ") ", |
143 "title" : s + " (" + nb + ") " |
149 state : { |
144 }, |
150 opened: false, |
145 "state" : "closed", |
151 }, |
146 "metadata" : {uri: "<"+uri+">", label:s}, |
152 children: true, |
147 "attr": attr |
153 metadata : {uri: "<"+uri+">", label:s}, |
148 }); |
154 li_attr: attr |
149 } |
155 }); |
150 else{ |
156 } |
151 mytree.push({ |
157 else{ |
152 "data" : { |
158 mytree.push({ |
153 "title" : s |
159 text : s, |
154 }, |
160 metadata : {uri: "<"+uri+">", label:s}, |
155 "metadata" : {uri: "<"+uri+">", label:s}, |
161 li_attr: attr |
156 "attr": attr |
162 }); |
157 }); |
163 } |
158 } |
164 } |
159 } |
165 return JSON.stringify(mytree); |
160 return mytree; |
166 }, |
161 }, |
167 error: function() { |
162 error: function() { |
168 $(".jstree-loading").removeClass("jstree-loading").addClass("jstree-error").html("Error when loading tree"); |
163 console.log("FAIL"); |
169 } |
164 $(".jstree-loading").removeClass("jstree-loading").addClass("jstree-error").html("Error when loading tree"); |
170 }, |
165 } |
171 }, |
166 }, |
172 types : { |
167 progressive_render: true |
173 types: { |
168 }, |
174 "leaf" : { |
169 types : { |
175 'hover_node' : false, |
170 types: { |
176 'select_node': function () {return false;} |
171 "leaf" : { |
177 } |
172 'hover_node' : false, |
178 } |
173 'select_node': function () {return false;} |
179 }, |
174 } |
180 plugins : [ "types"] |
175 } |
181 }); |
176 }, |
182 } |
177 plugins : [ "themes", "json_data", "ui", "types"] |
183 }, |
178 }); |
184 buttons: [ |
179 } |
185 { |
180 }, |
186 text: semantictree_config.ok_button_text, |
181 buttons: [ |
187 click: function() { |
182 { |
188 // this is the span with id="dialog-inputname" |
183 text: "Ok", |
189 var input_name = this.id.substr(7); |
184 click: function() { |
190 selected = $.jstree.reference($('#term-tree-'+input_name)).get_selected(true); |
185 // this is the span with id="dialog-inputname" |
191 if(selected.length) { |
186 var input_name = this.id.substr(7); |
192 selected_node = $(selected[0]); |
187 selected = $.jstree._reference($('#term-tree-'+input_name)).get_selected(); |
193 // Update text input : val() if classical input, add tag to tagit instance if necessary |
188 if(selected.length) { |
194 if($('#id_'+input_name).hasClass("semantic-tree-tagit")){ |
189 selected_node = $(selected[0]); |
195 // #TODO : update when we add tag-it for real |
190 // Update text input : val() if classical input, add tag to tagit instance if necessary |
196 $('#id_'+input_name).tagit("createTag", selected_node.attr('original').metadata.label); |
191 if($('#id_'+input_name).hasClass("semantic-tree-tagit")){ |
197 } |
192 // #TODO : update when we add tag-it for real |
198 else{ |
193 $('#id_'+input_name).tagit("createTag", selected_node.data('label')); |
199 // First we update the uri/label dict |
194 } |
200 uri = selected_node.attr('original').metadata.uri; |
195 else{ |
201 // We remove the <> from the uri |
196 // First we update the uri/label dict |
202 uri = uri.slice(1,-1); |
197 uri = selected_node.data('uri'); |
203 label = selected_node.attr('original').metadata.label; |
198 // We remove the <> from the uri |
204 angular.element($('#id_'+input_name)[0]).scope().updateUriLabelDict(uri, label); |
199 uri = uri.slice(1,-1); |
205 // Angular does not listen to val() event so we update the model value manually: |
200 label = selected_node.data('label'); |
206 angular.element($('#id_'+input_name)[0]).controller('ngModel').$setViewValue(uri); |
201 angular.element($('#id_'+input_name)[0]).scope().updateUriLabelDict(uri, label); |
207 angular.element($('#id_'+input_name)[0]).scope().$apply(); |
202 // Angular does not listen to val() event so we update the model value manually: |
208 // And update the text field val |
203 angular.element($('#id_'+input_name)[0]).controller('ngModel').$setViewValue(uri); |
209 $('#id_'+input_name).val(label + " (" + uri + ")"); |
204 angular.element($('#id_'+input_name)[0]).scope().$apply(); |
210 } |
205 // And update the text field val |
211 //$('#thesaurus_tree').data('term_tree_node',selected_node.data('term_tree_node')); |
206 $('#id_'+input_name).val(label + " (" + uri + ")"); |
212 //$('#thesaurus_tree').val(selected_node.data('term_tree_node').id).trigger('change'); |
207 } |
213 } |
208 //$('#thesaurus_tree').data('term_tree_node',selected_node.data('term_tree_node')); |
214 $( this ).dialog( "close" ); |
209 //$('#thesaurus_tree').val(selected_node.data('term_tree_node').id).trigger('change'); |
215 } |
210 } |
216 }, |
211 $( this ).dialog( "close" ); |
217 { |
212 } |
218 text: semantictree_config.cancel_button_text, |
213 }, |
219 click: function() { |
214 { |
220 $(this).dialog( "close" ); |
215 text: "Cancel", |
221 } |
216 click: function() { |
222 } |
217 $(this).dialog( "close" ); |
223 ] |
218 } |
224 }); |
219 } |
225 }); |
220 ] |
|
221 }); |
|
222 }); |
|
223 } |
226 } |
224 |
227 |
225 function init_tagit_autocomplete() |
228 function init_tagit_autocomplete() |
226 { |
229 { |
227 // Semantic search management with tag-it feature |
230 // Semantic search management with tag-it feature |