version 0.2.3 | 11/2009 Wood refactoring, Taboo refactoring. |
version 0.2.1 | 28/04/2009 fixed cookie path |
version 0.2.1 | fixed HoofEd when loading buttons files, changed buttons files structure now simpler, added HoofEd buttons separator |
version 0.2 | added Taboo focus when switching |
version 0.2 | added HoofEd a simple textarea editor/tagger, added documentation |
moo-jAPS | |
Taboo | Classe che gestisce blocchi di informazioni in stile TAB |
Functions | |
initialize | Esegue le operazioni necessarie ad istanziare un Taboo |
setupTaboo | Cerca e prepara i tab al corretto funzionamento |
startupTab | Apre il tab corretto all’avvio |
makeTaboo | Apre un tab |
makeTabooTogglers | Seleziona il toggler |
Wood | Classe che gestisce gli alberi e i menu |
Functions | |
initialize | Esegue le operazioni necessarie ad istanziare un Wood. |
setupToolBar | Prepara la ToolBar se showTools è true. |
startIndex | Apre il ramode desiderato secondo il parametro startIndex. |
updateBouquet | Si preoccupa di sincronizzare il Wood con il relativo Cookie del browser e vice versa |
setupTogglers | Ricerca tutti i Toggler e crea il meccanismo per apertura e chiusura del ramo. |
makeWood | Chiamato per aprire e chiudere i rami del Wood. |
collapseAll | Chiude tutti i rami di Wood |
expandAll | Apre tutti i rami di Wood |
updateWoodCookie | Salva la situazione del Wood e la salva nel Cookie |
HoofEd | Genera un piccolo editor da utilizzare per la formattazione del testo nelle textarea |
Functions | |
initialize | Di servizio chiamato al momento dell’istanziazione. |
injectTools | Di servizio inietta la toolbar dove richiesto |
createButtonMap | Di servizio crea la mappa dei bottoni (etichette + tags) |
addEventButton | Di servizio aggiunge gli eventi necessari ai bottoni della toolbar |
encloseSelection | Servizio che viene chiamato per applicare i tag |
Classe che gestisce blocchi di informazioni in stile TAB
Version | 0.2 |
Date | 24 Nov 2009 |
11/2009 | refactoring delle funzioni interne, richiamo dei tab. Pulizia e miglioramento performance in generale. |
tabs | {String} classe css dei contenitori dei tab |
tabTogglers | {String} classe css degli elementi che attivano e disattivano la visualizzazione dei tab |
startTabIndex | {String|Number} indice dell’array dei tab, quale tab mostrare in fase di istanziazione |
startTab | {String|El} id (html) del tab da mostrare in fase di istanziazione |
activeTabClass | {String} clases css applicata al toggler attivo (default: activetab) |
hideClass | {String} classe css che da applicare quando il tab si trova in stato nascosto (default: noscreen) |
showClass | {String} classe css che da applicare quando il tab si trova in stato visibile (default: showClass) |
anchorTab | {String} suffisso per il link, all’interno del tab, che prendrà il focus |
Taboo prevede che vi siano dei gli elementi <a> che puntino ai contenitori dei tab. Le ancore devono avere come attributo href l’id del tab. Gli attivatori (tabTogglers) devono avere una classe comune. Anche i contenitori dei tab devono avere una classe in comune.
<a href="#idTab1" class="classeAttivatoreTab">Tab Uno</a> <a href="#idTab2" class="classeAttivatoreTab">Tab Due</a> <div id="idTab1" class="classeContenitoreTab" > Contenuto del tab numero uno. </div> <div id="idTab2" class="classeContenitoreTab"> Questo il contenuto del tab numero due. </div>
Functions | |
initialize | Esegue le operazioni necessarie ad istanziare un Taboo |
setupTaboo | Cerca e prepara i tab al corretto funzionamento |
startupTab | Apre il tab corretto all’avvio |
makeTaboo | Apre un tab |
makeTabooTogglers | Seleziona il toggler |
makeTaboo: function( tab )
Apre un tab
Il tab in ingresso può essere sotto forma di stringa, numero o Element.
tab | {String|Number|El} tab da aprire |
Boolean | true se ha trovato il tab passato, altrimenti false |
Classe che gestisce gli alberi e i menu
Version | 0.2 |
Date | 18 Oct 2009 |
10/2009 | refactoring delle funzioni interne per lo storage dei rami. Pulizia in generale. |
rootId | {String} id (html) dell’elemento di riferimento, necessario se showTools è true |
menuToggler | {String} classe css degli elementi attivatori dell’albero/menu |
hideClass | {String} classe css utilizzata nei rami per lo stato nascosto (default: noscreen) |
showClass | {String} classe css utilizzata nei rami per lo stato visibile (default: undoNoscreen) |
openClass | {String} classe utilizzata nei rami per lo stato aperto (default: openmenu) |
closedClass | {String} classe utilizzata nei rami per lo stato chiuso (default: closedMenu) |
showTools | {Boolean} decide se creare la toolbar. (opzionale) |
expandAllLabel | {String} etichetta per il link che espande tutto (default: +) |
collapseAllLabel | {String} etichetta per il link che “chiude tutto” (default: -) |
startIndex | {String} id (html) del ramo da aprire in fase di istanziazione |
toolClass | {String} classe css utilizzata per gli strumenti (default: toolClass) |
type | {String} tipo di oggetto, tipi attualmente implentati tree e menu |
enableHistory | {Boolean} attiva o disattiva la funzionalità per la memoria del Wood menu |
cookieName | {String} nome del cookie dove salvare lo stato del Wood menu |
cookiePath | {String} path del cookie, default “/” |
toolTextIntro | {String} Testo introduttivo per la toolbar |
toolexpandAllLabelTitle | {String} Titolo per expandAll |
toolcollapseLabelTitle | {String} titolo per collapseAll |
Wood è stato pensato per essere un menu oppure un albero.
E’ possibile annidare all’infinito i rami del menu.
<ul id="MyMenu"> <li class="menuAperto"> <a href="#menu_PrimaVoce" rel="menu_PrimaVoce" class="attivatoreDelMenu">Prima Voce</a> <ul id="menu_PrimaVoce"> <li><a href="http://link1">Uno</a></li> <li><a href="http://link2">Due</a></li> </ul> </li> <li class="menuAperto"> <a href="#menu_SecondaVoce" rel="menu_SecondaVoce" class="attivatoreDelMenu">Seconda Voce</a> <ul id="menu_SecondaVoce"> <li><a href="http://link3">Tre</a></li> <li><a href="http://link4">Quattro</a></li> </ul> </li> </ul>
E’ possibile annidare all’infinito i rami del tree.
<ul id="MyTree"> <li> <input type="radio" name="" id="id_numero_1" value="" class="attivatoreMyTree" /> <label for="id_numero_1">Primo Ramo</label> <ul class="treeToggler"> <li> <input type="radio" name="" id="id_numero_2" value="" /> <label for="id_numero_2">Primo Ramo del primo ramo</label> </li> <li> <input type="radio" name="" id="id_numero_3" value="" /> <label for="id_numero_3">Secondo Ramo del primo ramo</label> </li> <li> <input type="radio" name="" id="id_numero_4" value="" class="attivatoreMyTree" /> <label for="id_numero_4">Terzo Ramo del primo ramo</label> <ul class="treeToggler"> <li> <input type="radio" name="" id="id_numero_5" value="" /> <label for="id_numero_5">Sottovoce Uno</label> </li> <li> <input type="radio" name="" id="id_numero_6" value="" /> <label for="id_numero_6">Sottovoce Due</label> </li> </ul> </li> </ul> </li> </ul>
Functions | |
initialize | Esegue le operazioni necessarie ad istanziare un Wood. |
setupToolBar | Prepara la ToolBar se showTools è true. |
startIndex | Apre il ramode desiderato secondo il parametro startIndex. |
updateBouquet | Si preoccupa di sincronizzare il Wood con il relativo Cookie del browser e vice versa |
setupTogglers | Ricerca tutti i Toggler e crea il meccanismo per apertura e chiusura del ramo. |
makeWood | Chiamato per aprire e chiudere i rami del Wood. |
collapseAll | Chiude tutti i rami di Wood |
expandAll | Apre tutti i rami di Wood |
updateWoodCookie | Salva la situazione del Wood e la salva nel Cookie |
initialize: function( options )
Esegue le operazioni necessarie ad istanziare un Wood.
options | oggetto contenente le opzioni. Si veda Wood |
makeWood: function ( rami, action, doHistory )
Chiamato per aprire e chiudere i rami del Wood.
rami | {String | El | Array(String|El)} elementi su cui azionare makeWood |
action | {String} valori accettati: open | close | *null*(default). Specifica cosa fare |
doHistory | {Boolean} Specifica se salvare l’azione nello storico oppure no |
Genera un piccolo editor da utilizzare per la formattazione del testo nelle textarea
buttonsFileName | stringa, suffisso con il quale indicare i file catalogo e delle lingue |
basePath | stringa, URI della cartella contentende i file di catalogo e della lingua |
textareaID | stringa, l’id (html) della textarea di riferimento |
toolClass | stringa, classe css da applicare all’HoofEd |
toolPosition | stringa, indica dove posizionare Hoofed rispetto <textareaID>. Accetta i valori: before ed after (default: before) |
buttons | array, array js dove dichiarare i bottoni (i bottoni devono essere presenti nel file di catalogo) |
lang | stringa, di 2 caratteri rappresenta la lingua dell’editor |
separatorClass | string, css class for the separator element |
separatorElement | string, element type for the separator |
separatorText | string, text separator |
Per il funzionamento di HoofEd si pressupone che esistano due file: il file con il catalogo dei bottoni disponibili e il file contenente le etichette tradotte.
Il file di catalogo si deve chiamare <buttonsFileName>.js
Il file con delle traduzioni si deve chiamare <buttonsFileName>_<lang>.js
Esempio di file catalogo <buttonsFileName>.js
var HoofEd_buttons = { //il nome dell'oggetto DEVE rimanere inviariato "bold" : ['<span class="bold">',"</span>"], "underline" : ['<span class="underline"','</span>'], "italic" : ['<span class="italic"','</span>'] }
Esempio di file delle traduzioni in italiano
var HoofEd_buttons_it = { "bold" : "Grassetto", "underline" : "Sottolineato", "italic" : "Corsivo" }
Functions | |
initialize | Di servizio chiamato al momento dell’istanziazione. |
injectTools | Di servizio inietta la toolbar dove richiesto |
createButtonMap | Di servizio crea la mappa dei bottoni (etichette + tags) |
addEventButton | Di servizio aggiunge gli eventi necessari ai bottoni della toolbar |
encloseSelection | Servizio che viene chiamato per applicare i tag |
createButtonMap: function()
Di servizio crea la mappa dei bottoni (etichette + tags)
Carica dinamicamente il file con la configurazione dei bottoni/tag disponibili e carica dinamicamente il file delle etichette nella lingua selezionata
Vengono richiamati i file con suffisso <buttonsFileName>.
Il file contentente il set di bottoni disponibili si chiama <buttonsFileName>.js mentre il file della lingua <buttonsFileName>_<lang>.js.
Al caricamento di questi due file vengono richiamati i tag e le etichette, necessarie a comporre l’editor che si vuole istanziare, e caricate nella mappa principale dell’editor
Esegue le operazioni necessarie ad istanziare un Taboo
initialize: function( options )
Cerca e prepara i tab al corretto funzionamento
setupTaboo: function()
Apre il tab corretto all’avvio
startupTab: function()
Apre un tab
makeTaboo: function( tab )
Seleziona il toggler
makeTabooTogglers: function( toggler )
Esegue le operazioni necessarie ad istanziare un Wood.
initialize: function( options )
Prepara la ToolBar se showTools è true.
setupToolBar: function()
Apre il ramode desiderato secondo il parametro startIndex.
startIndex: function()
Si preoccupa di sincronizzare il Wood con il relativo Cookie del browser e vice versa
updateBouquet: function()
Ricerca tutti i Toggler e crea il meccanismo per apertura e chiusura del ramo.
setupTogglers: function()
Chiamato per aprire e chiudere i rami del Wood.
makeWood: function ( rami, action, doHistory )
Chiude tutti i rami di Wood
collapseAll: function( history )
Apre tutti i rami di Wood
expandAll: function( history )
Salva la situazione del Wood e la salva nel Cookie
updateWoodCookie: function()
Di servizio chiamato al momento dell’istanziazione.
initialize: function( options )
Di servizio inietta la toolbar dove richiesto
injectTools: function ()
Di servizio crea la mappa dei bottoni (etichette + tags)
createButtonMap: function()
Di servizio aggiunge gli eventi necessari ai bottoni della toolbar
addEventButton: function( el )
Servizio che viene chiamato per applicare i tag
encloseSelection: function( key )