src/p4l/static/p4l/js/semantictree.js
changeset 37 7ff73789a851
child 38 c4e5bb735ec1
equal deleted inserted replaced
36:08cffedf6e60 37:7ff73789a851
       
     1 /* semantictree.js : We suppose that jquery, jquery ui, tag-it, jstree and smoothness theme have been loaded */
       
     2 function init_autocomplete()
       
     3 {
       
     4     // Wikipedia search management (new tag)
       
     5     $(".semantic-tree").autocomplete({
       
     6         source: function( request, response ) {
       
     7         	// We use "this" because there can be several autocomplete in the same form.
       
     8         	// this.element[0] is the input.
       
     9             var reg = $(this.element[0]).val();
       
    10             var url = $(this.element[0]).attr("data-url");
       
    11             var query = $(this.element[0]).attr("data-query");
       
    12             $.ajax({
       
    13             	url : url,
       
    14                 data: {
       
    15                 	query: query,
       
    16                 	$reg: '"'+reg+'"',
       
    17                 	$language: '"fr"'
       
    18                 },
       
    19             	headers: { 
       
    20                     Accept: "application/sparql-results+json;charset=UTF-8"
       
    21             	},
       
    22                 success: function( data ) {
       
    23                 	response( $.map( data["results"]["bindings"], function( item ) {
       
    24                 		return {
       
    25                 			label: item["label"]["value"],
       
    26                 			value: item["label"]["value"]
       
    27                 		}
       
    28                     }));
       
    29                 }
       
    30             });
       
    31         },
       
    32         select: function(event, ui) { 
       
    33             // Since the event still did not update wp_search's val, we force it.
       
    34             //$("#wp_search").val(ui.item.label);
       
    35             //select_done = true;
       
    36             //$("#ok_search").click();
       
    37         },
       
    38         minLength: 2,
       
    39         open: function() {
       
    40             //$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
       
    41         },
       
    42         close: function() {
       
    43             /*$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
       
    44             setTimeout(function(){$("#wp-infobox").hide();},500);
       
    45             var request = $("#wp_search").data('request');
       
    46             var chained = $("#wp_search").data('chained');
       
    47             if(request) {
       
    48                 request.abort();
       
    49             }
       
    50             if(chained && typeof(chained.abort) === typeof(Function)) {
       
    51                 chained.abort();
       
    52             }*/
       
    53         }
       
    54     });  
       
    55 }
       
    56 
       
    57 
       
    58 function init_browse() {
       
    59 	
       
    60 	$( ".dialog-link" ).each(function() {
       
    61 		var input_name = this.id.substr(12);
       
    62 		
       
    63 		// Link to open the dialog
       
    64 		$( '#dialog-link-'+input_name ).click(function( event ) {
       
    65 	        event.preventDefault();
       
    66 			var input_name = this.id.substr(12);
       
    67 			console.log("input_name 2 = " + input_name);
       
    68 			console.log($( '#dialog-'+input_name ));
       
    69 			$( '#dialog-'+input_name ).dialog( "open" );
       
    70 	        //if(! $('#thesaurus_tree').is(":disabled")) {
       
    71 	        //    $( ".dialog" ).dialog( "open" );
       
    72 	        //}
       
    73 	    });
       
    74 		
       
    75 	    $( '#dialog-'+input_name ).dialog({
       
    76 	        autoOpen: false,
       
    77 	        width: 400,
       
    78 	        height: "auto",
       
    79 	        maxHeight: 800,
       
    80 	        resizable: false,
       
    81 	        position: {my: "left top", at:"left bottom+5", of:$("#dialog-link-container-"+input_name), collision: 'none'},
       
    82 	        open: function(event, ui) {
       
    83 	        	// this is the span with class="dialog" and id="dialog-inputname"
       
    84 	        	var input_name = this.id.substr(7);
       
    85 	        	var url = $("#id_"+input_name).attr("data-url");
       
    86 	            var root_query = $("#id_"+input_name).attr("data-root-query");
       
    87 	            var childs_query = $("#id_"+input_name).attr("data-childs-query");
       
    88 	            var child_count_query = $("#id_"+input_name).attr("data-child-count-query");
       
    89 	            $('#term-tree-'+input_name)
       
    90 	                .jstree({
       
    91 	                    themes: {
       
    92 	                        theme: "apple",
       
    93 	                        dots: true,
       
    94 	                        icons: true
       
    95 	                    },
       
    96 	                    json_data: {
       
    97 	                        ajax: {
       
    98 	                        	url : url,
       
    99 	                            data: function(node){
       
   100 	                            	var res = {};
       
   101 	                                if(node.data) {
       
   102 	                                    res.query = childs_query;
       
   103 	                                    res.$root = node.data('uri');
       
   104 	                                }                                
       
   105 	                                else{
       
   106 	                                	res.query = root_query;
       
   107 	                                }                                
       
   108 	                            	res.$language = '"fr"';
       
   109 	                            	return res;
       
   110 	                            },
       
   111 	                        	headers: { 
       
   112 	                                Accept: "application/sparql-results+json;charset=UTF-8"
       
   113 	                            },
       
   114 	                            success: function(json) {
       
   115 	                            	var b = json["results"]["bindings"];
       
   116 	                            	var mytree = [];
       
   117 	                            	var l = b.length;
       
   118 	                            	for(var i=0;i<l;i++){
       
   119 	                            		var uri = b[i]["uri"]["value"];
       
   120 	                            		// We test if the uri has childs.
       
   121 	                            		var nb = 0;
       
   122 	                            		$.ajax({
       
   123 	                            			url:url,
       
   124 	                            			data:{
       
   125 	                            				query: child_count_query,
       
   126 	                            				$root: "<"+uri+">"
       
   127 	                            			},
       
   128 	        	                        	headers: { 
       
   129 	        	                                Accept: "application/sparql-results+json;charset=UTF-8"
       
   130 	        	                            },
       
   131 	                            			async: false,
       
   132 	                            			success:function(json_count){
       
   133 	                            				nb = parseInt(json_count["results"]["bindings"][0]["nb"]["value"]);
       
   134 	                            			}
       
   135 	                            		});
       
   136 	                            		// nb of child > 0 : state closed if yes, no state if not.
       
   137 	                            		if(nb>0){
       
   138 		                            		mytree.push({
       
   139 			                            		"data" : { 
       
   140 			                            			"title" : b[i]["label"]["value"] + " (" + nb + ") " + uri.substr(uri.lastIndexOf("/")+1),
       
   141 			                            		},
       
   142 			                            		"state" : "closed",
       
   143 			                            		"metadata" : {uri: "<" + uri + ">", label:b[i]["label"]["value"]}
       
   144 			                            		//"language" : "en"
       
   145 			                            	});
       
   146 	                            		}
       
   147 	                            		else{
       
   148 	                            			mytree.push({
       
   149 			                            		"data" : { 
       
   150 			                            			"title" : b[i]["label"]["value"] + " " + uri.substr(uri.lastIndexOf("/")+1),
       
   151 			                            		},
       
   152 			                            		"metadata" : {uri: "<" + uri + ">", label:b[i]["label"]["value"]}
       
   153 			                            	});
       
   154 	                            		}
       
   155 	                            	}
       
   156 	                            	return mytree;
       
   157 	                            },
       
   158 	                            error: function() {
       
   159 	                            	console.log("FAIL");
       
   160 	                                $(".jstree-loading").removeClass("jstree-loading").addClass("jstree-error").html("Error when loading tree");
       
   161 	                            }
       
   162 	                        },
       
   163 	                        progressive_render: true
       
   164 	                    },
       
   165 	                    ui : {
       
   166 	                        select_limit: 1,
       
   167 	                        initially_select: $('#thesaurus_tree').val()?['node-term-'+$('#thesaurus_tree').val()]:[]
       
   168 	                    },
       
   169 	                    plugins : [ "themes", "json_data", "ui"]
       
   170 	                });
       
   171 	        },
       
   172 	        close: function( event, ui ) {
       
   173 	        	//console.log("close");
       
   174 	        	// this is the span with class="dialog" and id="dialog-inputname"
       
   175 	        	var input_name = this.id.substr(7);
       
   176 	            $.jstree._reference($('#term-tree-'+input_name)).destroy();
       
   177 	        },
       
   178 	        buttons: [
       
   179 	            {
       
   180 	                text:  "Ok",
       
   181 	                click: function() {
       
   182 	    	        	// this is the span with id="dialog-inputname"
       
   183 	    	        	var input_name = this.id.substr(7);
       
   184 	                    selected = $.jstree._reference($('#term-tree-'+input_name)).get_selected();
       
   185 	                    if(selected.length) {
       
   186 	                        selected_node = $(selected[0]);
       
   187 	                        // Update text input : val() if classical input, add tag to tagit instance if necessary
       
   188 	                        if($('#id_'+input_name).hasClass("semantic-tree-tagit")){
       
   189 	                        	$('#id_'+input_name).tagit("createTag", selected_node.data('label'));
       
   190 	                        }
       
   191 	                        else{
       
   192 	                        	$('#id_'+input_name).val(selected_node.data('label'));
       
   193 	                        }
       
   194 	                        //$('#thesaurus_tree').data('term_tree_node',selected_node.data('term_tree_node'));
       
   195 	                        //$('#thesaurus_tree').val(selected_node.data('term_tree_node').id).trigger('change');                        
       
   196 	                    }
       
   197 	                    $( this ).dialog( "close" );                    
       
   198 	                }
       
   199 	            },
       
   200 	            {
       
   201 	                text: "Cancel",
       
   202 	                click: function() {
       
   203 	                    $(this).dialog( "close" );
       
   204 	                }
       
   205 	            }
       
   206 	        ]
       
   207 	    });
       
   208 	});
       
   209 }
       
   210 
       
   211 function init_tagit_autocomplete()
       
   212 {
       
   213     // Semantic search management with tag-it feature
       
   214     $(".semantic-tree-tagit").tagit({
       
   215     	tagSource: function(request, response) {
       
   216         	// We use "this" because there can be several autocomplete in the same form.
       
   217         	// this.element[0] is the input.
       
   218             var url = $(this.element[0]).attr("data-url");
       
   219             var query = $(this.element[0]).attr("data-query");
       
   220             $.ajax({
       
   221             	url : url,
       
   222                 data: {
       
   223                 	query: query,
       
   224                 	$reg: '"'+request.term+'"',
       
   225                 	$language: '"fr"'
       
   226                 },
       
   227             	headers: { 
       
   228                     Accept: "application/sparql-results+json;charset=UTF-8"
       
   229             	},
       
   230                 success: function( data ) {
       
   231                 	response( $.map( data["results"]["bindings"], function( item ) {
       
   232                 		return {
       
   233                 			label: item["label"]["value"],
       
   234                 			value: item["uri"]["value"]
       
   235                 		}
       
   236                     }));
       
   237                 }
       
   238             });
       
   239         },
       
   240         allowSpaces: true
       
   241     });
       
   242 }
       
   243 
       
   244 
       
   245 $(document).ready(function(){
       
   246     init_autocomplete();
       
   247     init_browse();
       
   248     init_tagit_autocomplete();
       
   249 });