/* ** Advance MooTools ** ** ** Classi presenti: ** ** Request.DivWin ** Request.AutoComplete ** ** Change notes ** V 0.1.4 10/10/2008 ** Request.DivWin ** Aggiunti stili 2,3 ** Spostata struttura del sistema, ora il css e le immagini sono sotto la cartella advance sotto ai javascript, e vengono caricati dinamicamente ** all'inizializzazione delle classi se servono e se non sono stati caricati ** Aggiunta funzione statica Request.DivWin.getInstance(num) che ritorna l'istanza dell'oggetto richiesto ** il numero dell'istanza viene passato in get alla pagina chiamata il parametro si chiama _div_num * Agginta la funzione setTitle alla classe che imposta il titolo ** V 0.1.3 03/10/2008 ** Request.DivWin ** Aggiunto style 1 ** Aggiunta proprietà div_position default 'R', definisce il sistema di posizionamento: ** se 'R' il posizionamento è relativo alla porzione visibile della pagina ** se 'A' invece il posizionamento è relativo al body ** se invece viene inserito l'id di un elemento o un elemento il posizionamento è relativo all'elemento. ** V 0.1.2 25/09/2008 ** Request.DivWin ** Implementata funzionalità che permette di non presentare i pulsanti di resize e di chiusura ** Aggiunta proprietà div_overflow default 'S' che permette di non far dimensionare la finestra dipendentemente al contenuto ** V 0.1.1 23/09/2008 ** Request.DivWin ** L'apertura della pop-up viene fatta appena chiamata la funzione open e non alla ricezione della risposta. ** è stato aggiunta anche la classe che fa da attesa, che viene tolta alla risposta del server. */ /* ** classe per aprire un div sopra a forma di finestra, ridimensionabile e spostabile. ** ** ** Esempio: ** var options={}; ** options["div_title"]="Ricerca"; ** options["div_width"]="500px"; ** options["url"]="pagina da chiamare"; ** var oggetto=new Request.DivWin(options); ** oggetto.open(); ** ** i possibili parametri sono: ** ** div_style: default 0, serve per lo stile prende le classi css con quel postfisso, per avere più tipi di layout ** div_close: default true, per decidere se inserire il pulsante di chiusura ** div_resize: default true, per decidere se inserire il pulsante per minimizzare o meno la finestra ** div_height: default 300px, altezza della finestra ** div_width: default 400px, larghezza della finestra ** div_position: default 'R', tipo di posizionamento R relativo alla porzione di pagina visualizzata, A assoluto al body, id di un elemento all'elemento stesso ** div_left: default 400px, distanza dal margine sinistro ** div_top: default 200px, distanza dal margine superiore ** div_resizable: default true, per decidere se è possibile spostare o meno la finestra ** div_dragable: default true, per decidere se farla ridimensionabile ** div_title: default TITOLO, il titolo della finestra ** div_display: default "", per decidere se presentare o meno la finestra una volta fatta la chiamata ** div_overflow: default "S", per decidere se la dimensione minima della finesta dipende dal contenuto o meno. 'S' dipende dal contenuto 'N' no. ** ** + tutti i parametri di Request.HTML, ** ** url: la pagina da aprire ** onComplete: funzione da chiamare una volta che è stata fatta la richiesta ** evalScripts: default true ** evalResponse: default false; ** ** !!!!!!!!!!!!!!!!!!!!!!!!!!! NOTA BENE !!!!!!!!!!!!!!!!!!!!!!!!!!! ** ** IL SISTEMA NECESSITA DI MOOTOOLS 1.2 CORE+MORE ** LE CLASSI CSS INIZIANO TUTTE PER div_win e SI TROVANO NEL FILE advance.mootools.css (le immagini associate sono in img/window/) ** ** NON UTILIZZARE IL PARAMETRO update ** ** alla pagina richiesta viene aggiunto un parametro _div_cont e _div_num con l'id del div in cui è scritto il contenuto e il numero dell'istanza da utilizzare per riprendere l'istanza stessa tramite la funzione getIstanze. ** ** per sapere da javascript l'id del'elemento che dove viene inserito il contenuto si utilizza oggetto.div_contenuto, ** che viene creato quando si fa la richiesta e non prima. ** ** ** Funzioni : ** ** open(options) options è opzionale, se non passato verranno presi i parametri passati in inizializzazione: ** se c'è un url impostato viene fatta la chiamata ajax altrimenti no. ** crea il box, se già creato viene distrutto e ricreato. ** ** close() distrugge il box ** ** toggle() minimizza o massimizza a seconda dello stato ** ** show() lo visualizza (funziona solo dopo la chiamata ad open che crea il box) ** ** hide() lo nasconde (funziona solo dopo la chiamata ad open che crea il box) ** ** setTitle(title) imposta il titolo della finestra ** ** ** funzione statica ** Request.DivWin.getInstance(num) funzione che rida' l'istanza di un oggetto già creato. **/ Request.DivWin = new Class({ Extends: Request.HTML, options: { div_id: "DivWin", div_style: "0", div_display: "", div_overflow: "S", div_close: true, div_resize: true, div_height: "300px", div_width: "400px", div_position: 'R', div_left: "400px", div_top: "200px", div_resizable: true, div_dragable: true, div_title: "TITOLO", update: null, onComplete: Class.empty, evalScripts: true, evalResponse: false, url : null }, initialize: function(options, url){ if (options || url){ if (!document.adv_div_win){ document.adv_div_win=new Array(); } if (!this.num_obj) { this.num_obj=document.adv_div_win.length; document.adv_div_win[this.num_obj]=this; } if (!this.base){ var nl=document.getElementsByTagName('script'); for (i=0; i"; if (this.options.div_resize)bottoni+="
"; /* ** a seconda se devo attivare le barre di scorrimento o meno creo la struttura, cioè se devo creare con le barre ** inserisco il contenuto in un div altrimenti direttamente nel td */ var contenuto=""; if (this.options.div_overflow=="S") contenuto=""; else contenuto="
"; this.obj_div.innerHTML= ""+ ""+ ""+ ""+ contenuto+ ""+ ""+ ""+ "
"+this.options.div_title+"
"+ bottoni+ "
"; this.obj_div_cont=$(this.options.div_id+"_cont"); this.obj_div_cont.style.width=this.options.div_width; this.obj_div_cont.style.height=this.options.div_height; this.obj_div_title=$(this.options.div_id+"_title"); if (this.options.div_dragable){ new Drag.Move(this.options.div_id, {'handle': this.options.div_id+"_title"}); $(this.options.div_id+"_title").addClass("cursor_hand"); } if (this.options.div_resizable){ this.obj_div_cont.makeResizable({'handle': this.options.div_id+"_cb", modifiers: {x: false, y: 'height'}}); $(this.options.div_id+"_cb").addClass("div_win_cbr"+this.options.div_style); this.obj_div_cont.makeResizable({'handle': this.options.div_id+"_rb"}); $(this.options.div_id+"_rb").addClass("div_win_rbr"+this.options.div_style); this.obj_div_cont.makeResizable({'handle': this.options.div_id+"_rm", modifiers: {x: 'width', y: false}}); $(this.options.div_id+"_rm").addClass("div_win_rmr"+this.options.div_style); } this.maximized=true; }, open: function(options){ options = $extend(this.options, options); //if (url)options.url=url; if (options.url && options.url!=""){ if (options.url.indexOf("_div_cont=")==-1){ options.url=options.url+ (options.url.contains('?') ? '&' : '?') +"_div_cont="+options.div_id+"_cont&_div_num="+this.num_obj; } this.createBox(); return this.send(options); }else{ this.onComplete(); return this; } }, close: function(){ this.obj_div.destroy(); }, toggle: function(){ if (this.maximized){ $(this.options.div_id+"_title").style.width=$(this.options.div_id+"_cont").style.width; $(this.options.div_id+"_r_middle").style.display="none"; $(this.options.div_id+"_r_bottom").style.display="none"; $(this.options.div_id+"_toggle").removeClass("div_win_toggle_min"+this.options.div_style); $(this.options.div_id+"_toggle").addClass("div_win_toggle_max"+this.options.div_style); this.maximized=false; }else{ $(this.options.div_id+"_r_middle").style.display=""; $(this.options.div_id+"_r_bottom").style.display=""; $(this.options.div_id+"_toggle").removeClass("div_win_toggle_max"+this.options.div_style); $(this.options.div_id+"_toggle").addClass("div_win_toggle_min"+this.options.div_style); this.maximized=true; $(this.options.div_id+"_title").style.width=""; } }, show: function(){ this.obj_div.style.display=""; }, hide: function(){ this.obj_div.style.display="none"; }, setTitle: function(title){ this.obj_div_title.set("html", title); this.options.div_title=title; } }); Request.DivWin.getInstance=function (num){ return document.adv_div_win[parseInt(num, 10)]; } /* ** classe per aprire fare l'autocompletion. ** ** ** Esempio: ** var options={}; ** options["id_target"]="autocomm_target"; ** options["text_name"]="ds_comune"; ** options["text_value"]="valore"; ** options["hidden_name"]="id_comune"; ** options["hidden_value"]="id"; ** options["path_js"]=""; ** options["query"]="LIST_AUTOCOMPLETION"; ** ** var autocom=new Request.AutoComplete(options); ** ** i possibili parametri sono: ** ** id_target: id dell'elemento dove inserire l'autocomletion, crea automaticamente i textbox necessari ** se non presente causa l'errore: Unable to create autocomplete object. (1) ** div_style: default 0, serve per lo stile prende le classi css con quel postfisso, per avere più tipi di layout ** div_height: default 200px, altezza del box di autocompletion ** div_width: default 300px, larghezza del box di autocompletion ** ** text_class: default "", classe del text box ** text_style: default "width:300px", l'attributo style del text box ** text_name: attributo name del text box ** se non presente causa l'errore: Unable to create autocomplete object. (2) ** text_value: default "", valore di inizializzazione del textbox ** ** hidden_name: attributo name dell'hidden box ** se non presente causa l'errore: Unable to create autocomplete object. (2) ** hidden_value: default "", valore di inizializzazione dell'hidden box ** ** post_param: parametro da passare alla funzione che viene chiamata in aggiunta una volta selezionato il valore desiderato ** post_function: funzione da chiamare in aggiunta una volta selezionato il valore desiderato ** alla funzione vengono passati due parametri, il primo l'oggetto selezionato, il secondo il parametro aggiuntivo ** ** empty_param: parametro da passare alla funzione che viene chiamata in aggiunta una volta che si preme esc o cliccato fuori dal box ** empty_function: funzione da chiamare in aggiunta una volta che si preme esc o cliccato fuori dal box ** alla funzione vengono passati due parametri, il primo l'oggetto selezionato, il secondo il parametro aggiuntivo ** ** limit_result: default 50, Ú il numero di risultati da presentare, viene passato come parametro (limit) alla richiesta in ajax ** naturalmente se si utilizza una pagina diversa da quella standard è a discrizione dello sviluppatore utilizzarlo o meno ** limit_char_start: default 0, numero minimo di caratteri dopo cui far partire la richiesta ** ** path_img: default "", url fino alla cartella img, ** viene utilizzato nel caso in cui si desideri visualizzare anche l'immagine, cioÚ nella query c'è una colonna denominata src ** che è l'url all'immagine ** query: default "", serve nel caso non si voglia fare una versione custom della pagina che legge i dati, ** nel caso in cui invece si specifichi l'url questo parametro non è necessario. ** La query deve essere nel file SQLAdvance, deve avere un parametro necessario, non deve avere la limit. ** Qui bisogna inserire l'indice ** nel caso in cui serva e manchi causa l'errore: Unable to create autocomplete object. (5) ** ** url: default "advance/autocomplete.php", se non si vuole utilizzare la procedura standard si può richiamare una qualsiasi ** altra pagina, se viene passato questo parametro path_js e query non servono, se non viene passato sono necessari. ** alla pagina oltre ai parametri già  inseriti dall'utente vengono aggiunti: ** key: il valore presente nel text box da ricercare ** limit: il parametro limit, il numero massimo di risultati desiderati ** path_img: il path alle immagini passato come parametro ** query: la query da eseguire ** ** ** ** !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! NOTA BENE !!!!!!!!!!!!!!!!!!!!!!!!!!!!! ** ** NON UTILIZZARE GLI ALTRI PARAMETRI POSSIBILI DALLA CLASSE Request.HTTP, update, onComplete, etc... ** ** IL SISTEMA NECESSITA DI MOOTOOLS 1.2 CORE ** LE CLASSI CSS INIZIANO TUTTE PER .autocomplete e SI TROVANO NEL FILE advance.mootools.css ** NECESSITA ANCHE DI UNA LABEL NELLE LINGUE public static $ADV_NO_RESULT="No result"; ** ** **/ Request.AutoComplete = new Class({ Extends: Request.HTML, options: { id_target: null, div_style: "0", div_height: "200px", div_width: "300px", text_class: "", text_style: "width:300px", text_name: "", text_value: "", hidden_name: "", hidden_value: "", post_function:null, post_param:null, empty_function:null, empty_param:null, limit_result:50, limit_char_start:0, path_img: "", path_js: "", query: "", custom_url: false, update: null, onComplete: Class.empty, evalScripts: true, evalResponse: false, method: 'get', url : "advance/autocomplete.php" }, initialize: function(options, url){ if (!document.adv_autocomplete){ document.adv_autocomplete=new Array(); } if (!this.num_obj) { this.num_obj=document.adv_autocomplete.length; document.adv_autocomplete[this.num_obj]=this; } if (!this.base){ var nl=document.getElementsByTagName('script'); for (i=0; i0){ obj.risultati[obj.selection].removeClass("selected"); obj.selection-=1; obj.risultati[obj.selection].addClass("selected"); obj.risultati[obj.selection].scrollIntoView(false); } }else if (e.key=="down"){ if (obj.selection < (obj.risultati.length - 1) ){ obj.risultati[obj.selection].removeClass("selected"); obj.selection+=1; obj.risultati[obj.selection].addClass("selected"); obj.risultati[obj.selection].scrollIntoView(false); } }else if (e.key=="enter" || e.key=="tab"){ obj.select(); }else if (e.key=="esc"){ /* * non sono impazzito faccio diversamente dall'invio perchÚ il pulsante esc sembra funzionare diversamente e * non riesco a vuotare i campi, sembra che browser anche se gli ho detto di stoppare gli eventi faccia come voglia * rimettendo i dati precedenti, allora chiamo la funzione temporizzata */ obj.empty.delay(200, obj); } } if (!["shift", "up", "down", "enter", "esc", "tab", "ctrl", "alt", "bloc", "left", "right"].contains(e.key)){ obj.open.delay(200, obj); } }, select: function(){ if (this.risultati && this.risultati.length>this.selection && this.obj_text.value!=this.risultati[this.selection].lang){ this.obj_text.value=this.risultati[this.selection].lang; this.obj_hidden.value=this.risultati[this.selection].id; if (this.options.post_function){ this.options.post_function(this.risultati[this.selection], this.options.post_param); } this.hide(); }else{ this.empty(); } }, empty: function(){ if (this.risultati && this.risultati.length>this.selection && this.risultati[this.selection] && this.obj_text.value!=this.risultati[this.selection].lang){ this.obj_text.value=""; this.obj_hidden.value="0"; if (this.options.empty_function){ this.options.empty_function(this.risultati[this.selection], this.options.empty_param); } } this.hide(); }, open: function(){ if (this.options.limit_char_start <= this.obj_text.value.length) { var options=this.options; options.correctUrl=options.url; var pos=this.obj_anchor.getPosition(); if (this.obj_div){ this.obj_div.empty(); this.obj_div.style.top=pos.y; this.obj_div.style.left=pos.x; this.obj_div.style.width=this.options.div_width; this.obj_div.style.height=this.options.div_height; this.obj_div.addClass("ajax-loading"); }else{ this.obj_div=new Element("div", { 'id': this.options.id_target+this.num_obj, 'num_obj': this.num_obj, 'class': "autocomplete"+this.options.div_style+" ajax-loading", 'styles': { 'top': pos.y+"px", 'left': pos.x+"px", 'width': this.options.div_width, 'height': this.options.div_height } }); this.obj_div.injectTop(document.body); } this.show(); if (options.url && options.url!=""){ options.url=options.url+ (options.url.contains('?') ? '&' : '?') + "key="+this.obj_text.value+ "&limit="+options.limit_result+ "&path_img="+options.path_img+ "&query="+options.query; options.update=this.obj_div; this.send(options); options.url=options.correctUrl; return this; }else{ alert ("Unable to start autocomplete. (4)"); return this; } } }, onComplete: function(){ if (this.response && this.response.text){ if (this.obj_div) { this.obj_div.empty().set("html", this.response.text); this.risultati=this.obj_div.getElements('li'); if (this.risultati.length>0){ this.risultati[0].addClass("selected"); this.selection=0; this.risultati[0].scrollIntoView(false); } this.risultati.each(this.addMouseEvent, this); this.obj_div.removeClass("ajax-loading"); } } }, addMouseEvent: function (item, index){ item.addEvent("mouseover", this.mouseEnterOption); item.addEvent("click", this.mouseClickOption); }, mouseEnterOption: function (e){ var ris=$(e.target); while (ris && ris.tagName!="LI"){ if (ris.getParent()) ris=ris.getParent(); } if (ris){ var obj_div=ris.getParent().getParent(); if (obj_div){ var index=parseInt(obj_div.getProperty("num_obj")); var obj=document.adv_autocomplete[index]; obj.mouseOver=true; obj.risultati[obj.selection].removeClass("selected"); obj.selection=obj.risultati.indexOf(ris); obj.risultati[obj.selection].addClass("selected"); } } }, mouseClickOption: function (e){ var ris=$(e.target); while (ris && ris.tagName!="LI"){ if (ris.getParent()) ris=ris.getParent(); } if (ris){ var obj_div=ris.getParent().getParent(); var index=parseInt(obj_div.getProperty("num_obj")); var obj=document.adv_autocomplete[index]; obj.select(); } }, mouseOutDiv: function (e){ var obj_div=$(e.target); while (obj_div && obj_div.tagName!="DIV"){ if (obj_div.getParent()) obj_div=obj_div.getParent(); } if (obj_div){ var index=parseInt(obj_div.getProperty("num_obj")); var obj=document.adv_autocomplete[index]; obj.mouseOver=false; } }, show: function(){ this.obj_div.style.display=""; this.obj_div.addEvent("mouseleave", this.mouseOutDiv); }, hide: function(){ this.obj_div.style.display="none"; this.obj_div.removeEvent("mouseleave"); this.mouseOver=false; } });