// base.js version for www.prosa.com // last revised feb 29 2008 // Questo insieme di script è utile per le seguenti cose: // // 1. Automatizzare il processo di submit di una form // -------------------------------------------------- // A tal scopo bisogna: // 1.1. prevedere, nelle form di una pagina, degli input di type submit // a cui associare, all'evento onclick, uno script complesso a piacere, // ma che si concluda con l'invocazione della funzione: // // function submitForm( nomeForm, messaggioAttesa ) // // la quale visualizza una progress-bar con il messaggioAttesa mentre // opera il submit della form. // N.B. in caso di disattivazione di javascript, il submit delle form // continua a funzionare grazie all'utilizzo degli input standard di tipo // submit, ma tutti gli eventuali controlli fatti dallo script associato // all'input non vengono eseguiti: di questo dev'essere tenuto conto // nell'URL richiamato. // // 1.2. fornire ai campi input di testo che acquisiscono i dati di input della // form, un id che abbia un nome che contenga la stringa // // +"ConInvio" // // dove è il nome dell'id del campo input di tipo // submit di cui al punto 1.1 sopra. // In questo modo si crea automaticamente l'associazione tra lo script // e la pressione di "invio" da tastiera sul campo di input testuale. // // // 2. Visualizzare dialoghi modali // ------------------------------- // Usando la funzione // // function showModalDialog( titolo, messaggio, etichettaBottone ) // // // 3. Visualizzare progress bar // ---------------------------- // Usando la funzione // // function showProgressBar( testoDiAttesa ) // // // ----------------------------------------------------------------------------- // ATTENZIONE: non è necessario prevedere nel layout della pagina nulla di // aggiuntivo affinché il funzionamento delle cose sopra sia operato. // Tutto viene automatizzato dall'unica funzione che dev'essere chiamata // nella pagina nel seguente modo: // // // function getElemento( idElemento ) { if(document.getElementById) { return document.getElementById( idElemento ); } else { return eval( idElemento ); } } function getKeyPress(e) { var code; if (!e) var e = window.event; if (e.keyCode) code = e.keyCode; else if (e.which) code = e.which; return code; } // determina le dimensioni effettive della finestra del browser function getBrowserWidth() { browserWidth=0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE browserWidth = window.innerWidth; } else { if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' browserWidth = document.documentElement.clientWidth; } else { if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible browserWidth = document.body.clientWidth; } } } return browserWidth; } function getBrowserHeight() { browserHeight=0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE browserHeight = window.innerHeight; } else { if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' browserHeight = document.documentElement.clientHeight; } else { if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible browserHeight = document.body.clientHeight; } } } return browserHeight; } // trova la posizione dell'oggetto all'interno della pagina function findPosX(obj) { var curleft = 0; if (obj.offsetParent) { while (obj.offsetParent) { curleft += obj.offsetLeft obj = obj.offsetParent; } } else if (obj.x) curleft += obj.x; return curleft; } function findPosY(obj) { var curtop = 0; if (obj.offsetParent) { while (obj.offsetParent) { curtop += obj.offsetTop obj = obj.offsetParent; } } else if (obj.y) curtop += obj.y; return curtop; } // commuta la visibilità function mostraNascondi( idElemento ){ // mostra o nasconde lasciando lo spazio var elemento = getElemento( idElemento ); if (elemento.style.visibility != "visible"){ elemento.style.visibility = "visible"; } else { elemento.style.visibility = "hidden"; } } function mostraCela( idElemento ){ // mostra o nasconde togliendo lo spazio var elemento = getElemento( idElemento ); if (elemento.style.display == "none"){ elemento.style.display = ""; } else { elemento.style.display = "none"; } } function selezionaDeseleziona( idElemento ){ var elemento = getElemento( idElemento ); if (elemento.className == "voceselez"){ elemento.className = "vocedeselez"; } else { elemento.className = "voceselez"; } } // gestione sottomenu function showSottomenu( idMenu ) { // a causa di un eventuale ridimensionamento della finestra del browser // va ricalcolata la posizione del contenitore dei sotto-menu menuBar = getElemento( 'menu' ); riposizionaContenitoreSottomenu( menuBar ); var submenu = getElemento( idMenu ); submenu.style.display = "block"; } function hideSottomenu( idMenu ) { var submenu = getElemento( idMenu ); submenu.style.display = "none"; } function riposizionaContenitoreSottomenu( menuBar ){ var contenitoreSottomenu = getElemento( 'contenitoreSottomenu' ); // posizionamento assoluto del contenitore dei sottomenu rispetto // al menu 'menuBar' (senza javascript rimarrebbe posizionato sempre in // assoluto, ma in percentuale della larghezza schermo, dunque non // precisamente sotto il menu 'menuBar') contenitoreSottomenu.style.left = (menuBar.offsetLeft + menuBar.offsetWidth - contenitoreSottomenu.offsetWidth)+'px'; contenitoreSottomenu.style.top = (menuBar.offsetHeight - 4)+'px'; // '-4' affinché i sottomenu si sovrappongano leggermente al menu, // così da far transitare il 'mousover' dal menu al sottomenu return contenitoreSottomenu; } function creaMeccanismoMenu(){ menubar = getElemento( 'menu' ); var contenitoreSottomenu = riposizionaContenitoreSottomenu( menubar ); // posizionamento di tutti i sottomenu in modo assoluto senza alcuna // specifica di coordinate (vanno dunque tutti in alto a sinistra del // contenitore dei sottomenu). // Tutti i sottomenu vanno poi nascosti (vengono visualizzati solo con // l'hover dei relativi menu). // Ogni sottomenu, inoltre, va equipaggiato con il corredo javascrpt per // nasconderlo e visualizzarlo coerentemente al menu. var elencoSottomenu = contenitoreSottomenu.getElementsByTagName( "div" ); if ( elencoSottomenu.length < 1 ) return false; var nomeFunzione; for (var i=0; i < elencoSottomenu.length; i++) { if ( elencoSottomenu[i].className.indexOf( "sottomenu" ) != -1 ) { elencoSottomenu[i].style.position = "absolute"; // la seguente istruzione sarebbe inutile, se IE6 e IE7 // funzionassero correttamente elencoSottomenu[i].style.left = '0px'; elencoSottomenu[i].style.display = "none"; // assegnazione delle necessarie funzioni per la visualizzazione // del sottomenu in mutua esclusione nomeFunzione = "showSottomenu('" + elencoSottomenu[i].id + "')"; elencoSottomenu[i].onmouseover = new Function(nomeFunzione); nomeFunzione = "hideSottomenu('" + elencoSottomenu[i].id + "')"; elencoSottomenu[i].onmouseout = new Function(nomeFunzione); } } // Assegnazione a ciascun menu delle opportune funzionalità per far // comparire e scomparire i relativi sottomenu. // N.B. E' necessario che il nome dell'ID del sottomenu da correlare a un // menu sia della forma 'sotto'. var elencoMenu = menubar.getElementsByTagName( "a" ); if ( elencoMenu.length < 1 ) return false; for (var i=0; i < elencoMenu.length; i++) { if ( elencoMenu[i].className.indexOf( "goHome" ) != -1 ) continue; nomeFunzione = "showSottomenu('sotto" + elencoMenu[i].id + "')"; elencoMenu[i].onmouseover = new Function(nomeFunzione); nomeFunzione = "hideSottomenu('sotto" + elencoMenu[i].id + "')"; elencoMenu[i].onmouseout = new Function(nomeFunzione); } } function showModalDialog( titolo, messaggio, etichettaBottone ) { var dialogoElement = getElemento( 'dialogoModale' ); if ( dialogoElement != null ) { var titoloOutput = getElemento( 'titoloDialogo' ); var testoOutput = getElemento( 'testoDialogo' ); var finestra = getElemento( 'finestraDialogo' ); titoloOutput.lastChild.nodeValue = titolo; testoOutput.lastChild.nodeValue = messaggio; var elencoBottoni = finestra.getElementsByTagName( "a" ); elencoBottoni[0].lastChild.nodeValue = etichettaBottone; dialogoElement.style.display = 'inline'; } else { // se il dialogo non esiste ancora, va creato il div opportuno con // tutti i div necessari per il velo, la finestra, ecc. // La forma finale del div dev'essere: //---------------------------------------------------------------------------- //

//

//

//

titolo

//

messaggio

// etichettaBottone //

//

//---------------------------------------------------------------------------- var titoloOutput = document.createElement("div"); titoloOutput.setAttribute("id", "titoloDialogo"); var testoTitolo = document.createTextNode( titolo ); titoloOutput.appendChild( testoTitolo ); //

titolo

-- fatto! var testoOutput = document.createElement("div"); testoOutput.setAttribute("id", "testoDialogo"); var testoMessaggio = document.createTextNode( messaggio ); testoOutput.appendChild( testoMessaggio ); //

messaggio

-- fatto! var bottoneChiudi = document.createElement("a"); bottoneChiudi.className = "bottone"; bottoneChiudi.setAttribute("href", "#"); var nomeFunzione = "hideModalDialog(); return false;"; bottoneChiudi.onclick = new Function(nomeFunzione); var testoBottone = document.createTextNode( etichettaBottone ); bottoneChiudi.appendChild( testoBottone ); // etichettaBottone -- fatto! var finestra = document.createElement("div"); finestra.setAttribute("id", "finestraDialogo"); finestra.appendChild( titoloOutput ); finestra.appendChild( testoOutput ); finestra.appendChild( bottoneChiudi ); // finestraDialogo -- fatto! var veloElement = document.createElement("div"); veloElement.setAttribute("id", "velo"); dialogoElement = document.createElement("div"); dialogoElement.setAttribute("id", "dialogoModale"); dialogoElement.appendChild( veloElement ); dialogoElement.appendChild( finestra ); // dialogoModale -- fatto! // Inserimento strutturale nel body var corpoPagina = getElemento( 'pagina' ); corpoPagina.parentNode.insertBefore( dialogoElement, null ); // Posizionamento spaziale: var veloPos = findPosY( veloElement ); var browserHeight = getBrowserHeight(); if ( browserHeight > veloPos ){ veloElement.style.height = browserHeight+'px'; } else { veloElement.style.height = veloPos+'px'; } veloElement.style.width = getBrowserWidth()+'px'; veloElement.style.top = 0; veloElement.style.left = 0; dialogoElement.style.display = 'inline'; finestra.style.top = (getBrowserHeight()/2 - finestra.offsetHeight)+'px'; finestra.style.left = (getBrowserWidth()/2 - finestra.offsetWidth/2)+'px'; } return false; } function hideModalDialog( ) { dialogoElement = getElemento( 'dialogoModale' ); dialogoElement.style.display = 'none'; return false; } function showProgressBar( testoDiAttesa ){ var progBar = getElemento( 'barraProgresso' ); if ( progBar != null ) { progBar.lastChild.nodeValue = testoDiAttesa; } // altrimenti va creato il div opportuno all'interno del body else progBar = creaProgressBar( testoDiAttesa ); progBar.style.display = 'inline'; progBar.style.top = (getBrowserHeight()/2 - progBar.offsetHeight)+'px'; progBar.style.left = (getBrowserWidth()/2 - progBar.offsetWidth/2)+'px'; } function hideProgressBar( ){ var progBar = getElemento( 'barraProgresso' ); progBar.style.display = 'none'; return false; } function submitForm( nomeForm, messaggioAttesa ) { showProgressBar( messaggioAttesa ); getElemento( nomeForm ).submit(); return false; } // gestione avvio logon. // Scrivere qui tutta la logica di logon. function avviaLogon( nomeForm, nomeLogin, stringaPassword, messaggioAttesa, titoloDialogo, messaggioDialogo, etichettaBottoneDialogo ) { var stringaLogin = getElemento( nomeLogin ); var stringaPwd = getElemento( stringaPassword ); if ( stringaLogin.value.length < 2 || stringaPwd.value.length < 2 ) { showModalDialog( titoloDialogo, messaggioDialogo, etichettaBottoneDialogo ); return false; } else return submitForm( nomeForm, messaggioAttesa ); } // script per generare automaticamente, per ciascuna img la cui classe // ha un nome che contiene il termine "figura", una vera e propria figura con // didascalia incorporata (il testo della didascalia è quello // dell'attributo 'alt') function creaFigure() { var figuraFlottante = true; if (!document.getElementsByTagName) return false; if (!document.createElement) return false; var elencoImmagini = document.getElementsByTagName( "img" ); if ( elencoImmagini.length < 1 ) return false; for (var i=0; i < elencoImmagini.length; i++) { if ( elencoImmagini[i].className.indexOf( "figura" ) != -1 ) { elemImmagine = elencoImmagini[i]; figuraFlottante = ( elemImmagine.className.indexOf( "figuraFlottante" ) != -1 ); conDidascalia = ( elemImmagine.alt.length >= 1 ); if ( conDidascalia ) { var elemDidascalia = document.createElement("div"); elemDidascalia.className = "didascalia"; var testoDidascalia = document.createTextNode( elemImmagine.alt ); elemDidascalia.appendChild( testoDidascalia ); } var contenitoreImmagine = document.createElement("div"); if ( figuraFlottante ) { contenitoreImmagine.className = "riquadroFiguraFlottante"; contenitoreImmagine.style.width = ( elemImmagine.width )+"px"; } else contenitoreImmagine.className = "riquadroFiguraFissa"; elemImmagine.parentNode.insertBefore( contenitoreImmagine, elemImmagine ); contenitoreImmagine.appendChild( elemImmagine ); if ( conDidascalia ) { if ( figuraFlottante ) elemDidascalia.style.width = ( elemImmagine.width )+"px"; contenitoreImmagine.appendChild( elemDidascalia ); } } } return true; } function creaProgressBar( testoDiAttesa ){ var corpoPagina = getElemento( 'pagina' ); var progBar = document.createElement("div"); progBar.setAttribute("id", "barraProgresso"); var testoAttesa = document.createTextNode( testoDiAttesa ); progBar.appendChild( testoAttesa ); corpoPagina.parentNode.insertBefore( progBar, null ); return progBar; } // script per associare a opportuni campi di input, il cui id sia riconducibile // all'id di un bottone submit, lo stesso comportamento relativamente al tasto // "invio" della tastiera, e dissociare da qualsiasi comportamento su invio // altri campi. // Detto l'id del bottone (cioè INPUT di type="submit"), i // campi di input a cui viene associato il medesimo script in caso di "invio" // avranno l'id = +"ConInvio". // In questo modo il comportamento associato al submit vale in automatico // anche su invio su alcuni campi prefissati. // Al tempo stesso, a tutti i campi di input il cui id contiene la stringa // "NoInvio" viene associato uno script che non fa nulla (anzi, all'invio da // tastiera sposta il focus al campo successivo, come un TAB). // // IMPORTANTE: l'URL richiamato dai bottoni NON dovrà avere come pre-condizioni // gli eventuali controlli fatti dalle funzioni javascript legate al bottone // 'ConJS', altrimenti il funzionamento di tale URL in mancanza di javascript // potrebbe essere compromesso. function attivaFormConJS() { var elencoForm = document.getElementsByTagName( "form" ); if ( elencoForm.length < 1 ) return false; var pressioneInvio = "if (getKeyPress(event) == 13) "; var azioneSuInvio = "return false;"; for (var i=0; i < elencoForm.length; i++) { var elencoInput = elencoForm[i].getElementsByTagName( "input" ); for (var j=0; j < elencoInput.length; j++) { if ( elencoInput[j].type == "submit" ){ var idDelCampoAssosiato = elencoInput[j].id + "ConInvio"; // Per ciascun INPUT di type="submit" viene creato un con il // medesimo aspetto e comportamento var bottoneSubmit = document.createElement("a"); bottoneSubmit.className = elencoInput[j].className; bottoneSubmit.setAttribute("href", "#"); bottoneSubmit.onclick = elencoInput[j].onclick; var testoBottone = document.createTextNode( elencoInput[j].value ); bottoneSubmit.appendChild( testoBottone ); elencoInput[j].parentNode.insertBefore( bottoneSubmit, elencoInput[j] ); // Viene cercato uno o più campi a cui associare il medesimo script // appena associato al nuovo bottone di input, e l'associazione al // campo vale per la pressione del tasto "invio" sulla tastiera for (var k=0; k < elencoInput.length; k++) { if ( elencoInput[k].id.indexOf( idDelCampoAssosiato ) == -1 ) continue; // se l'ID del campo contiene la sottostringa +"ConInvio" var corpoFunzione = "" + bottoneSubmit.onclick.valueOf(); corpoFunzione = pressioneInvio + corpoFunzione.substring( corpoFunzione.indexOf("{") ); elencoInput[k].onkeypress = new Function( "event", corpoFunzione ); } } else if ( elencoInput[j].id.indexOf( "NoInvio" ) != -1 ) { // simula l'invio di un TAB al posto dell'invio portando il focus sul // successivo, se c'è, campo di input, che può essere anche un bottone if ( j + 1 < elencoInput.length ){ azioneSuInvio = "{getElemento( '" + elencoInput[j+1].id + "' ).focus(); return false;}" } elencoInput[j].onkeypress = new Function( "event", pressioneInvio + azioneSuInvio ); } } // Poi si rimuovono tutti i bottoni prima sostituiti con for (var j=0; j < elencoInput.length; j++) { if ( elencoInput[j].type == "submit" ){ elencoInput[j].parentNode.removeChild( elencoInput[j] ); // siccome l'eliminazione dal DOM comporta anche l'eliminazione // dall'array che si sta scorrendo... (cosa un po' strana)... // bisogna tornare indietro di una posizione j--; } } } } // script necessario al completamento del layout. Tale pratica è condotta // per due scopi: 1. consentire alla pagina di funzionare anche in assenza // di attivazione di javascript; 2. mantenere la pagina estremamente // leggera, demandando a questo script il compito di introdurre tutti // quegli aspetti di layout e di rendering automatizzabili. // In particolare, questo script prepara il meccanismo alla base dei menu, // confeziona tutte le immagini di tipo "figura[..]" in modo che vengano // collegate alle loro didascalie e collega i campi delle form agli script // associato ai submit che s'intende legare al campo con l'"invio". // Come ultima cosa viene invocata una funzione necessaria per pre-caricare // l'immagine utile alla prgress-bar, progress-bar aggiunta dinamicamente // alla pagina. function completaLayout() { showProgressBar( "Loading page..." ); creaMeccanismoMenu(); creaFigure(); attivaFormConJS(); window.onunload = hideProgressBar; hideProgressBar( ); }