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. |
collapseAll | Chiude tutti i tab. |
showTabByIndex | Visualizza un determinato tab passandogli la posizione (indice) |
showTabById | Visualizza un determinato tab passandogli l’id (html) |
showTabByMapKey | Visualizza un determinato tab. |
refreshMap | Aggiorna il set di tab/toggler. |
addEventToggler | Di servizio aggiunge l’evento per la visualizzazione del tab ad un toggler. |
cleanEventToggler | Di servizio ripulisce un toggler dagli eventi. |
Wood | Classe che gestisce gli alberi e i menu |
Functions | |
initialize | Di servizio esegue le operazioni necessarie ad istanziare un Wood. |
initMenu | Di servizio per l’istanza del menu |
openWoodById | Apre/chiude il ramo dato l’id (html) dell’elemento |
makeWoodById | Apre/chiude il ramo desiderato passandogli un id (html) |
makeWoodByElement | Apre/chiude il ramo desiderato passandogli un elemento dal dom |
updateWoodCookie | Aggiorna il cookie per il Wood di tipo “menu”. |
collapseAll | Chiude ricorsivamente tutti i rami di un Wood. |
expandAll | Apre ricorsivamente tutti i rami di un wood |
injectTools | Di servizio genera la toolbar per Wood |
refreshMap | Aggiorna la mappa dei rami del Wood. |
addEventToggler | Di servizio aggiunge gli eventi ai togglers |
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
tabs | classe css dei contenitori dei tab |
tabTogglers | classe css degli elementi che attivano e disattivano la visualizzazione dei tab (default: 0) |
startTabIndex | indice di quale tab mostrare in fase di istanziazione |
startTab | id (html) del tab da mostrare in fase di istanziazione |
hideClass | classe css che da applicare quando il tab si trova in stato nascosto (default: noscreen) |
showClass | classe css che da applicare quando il tab si trova in stato visibile (default: showClass) |
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. |
collapseAll | Chiude tutti i tab. |
showTabByIndex | Visualizza un determinato tab passandogli la posizione (indice) |
showTabById | Visualizza un determinato tab passandogli l’id (html) |
showTabByMapKey | Visualizza un determinato tab. |
refreshMap | Aggiorna il set di tab/toggler. |
addEventToggler | Di servizio aggiunge l’evento per la visualizzazione del tab ad un toggler. |
cleanEventToggler | Di servizio ripulisce un toggler dagli eventi. |
initialize: function( options )
Esegue le operazioni necessarie ad istanziare un Taboo.
Nelle varie fasi dell’inizializzazione del Taboo è presente il controllo per la visualizzazione del tab desiderato.
L’ordine di controllo è
options | oggetto contenente: tabs, tabTogglers, startTabIndex, startTab, hideClass, showClass |
Classe che gestisce gli alberi e i menu
rootId | id (html) dell’elemento di riferimento, necessario se showTools è true |
menuToggler | classe css degli elementi attivatori dell’albero/menu |
hideClass | classe css utilizzata nei rami per lo stato nascosto (default: noscreen) |
showClass | classe css utilizzata nei rami per lo stato visibile (default: undoNoscreen) |
openClass | classe utilizzata nei rami per lo stato aperto (default: openmenu) |
closedClass | classe utilizzata nei rami per lo stato chiuso (default: closedMenu) |
showTools | boolean, decide se creare la toolbar. (opzionale) |
expandAllLabel | etichetta per il link che espande tutto (default: +) |
collapseAllLabel | etichetta per il link che “chiude tutto” (default: -) |
startIndex | id (html) del ramo da aprire in fase di istanziazione |
toolClass | classe css utilizzata per gli strumenti (default: toolClass) |
type | tipo di oggetto, tipi attualmente implentati tree e menu |
enableHistory | boolean, che attiva o disattiva la funzionalità per la memoria del Wood menu |
cookieName | nome del cookie dove salvare lo stato del Wood menu |
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 | Di servizio esegue le operazioni necessarie ad istanziare un Wood. |
initMenu | Di servizio per l’istanza del menu |
openWoodById | Apre/chiude il ramo dato l’id (html) dell’elemento |
makeWoodById | Apre/chiude il ramo desiderato passandogli un id (html) |
makeWoodByElement | Apre/chiude il ramo desiderato passandogli un elemento dal dom |
updateWoodCookie | Aggiorna il cookie per il Wood di tipo “menu”. |
collapseAll | Chiude ricorsivamente tutti i rami di un Wood. |
expandAll | Apre ricorsivamente tutti i rami di un wood |
injectTools | Di servizio genera la toolbar per Wood |
refreshMap | Aggiorna la mappa dei rami del Wood. |
addEventToggler | Di servizio aggiunge gli eventi ai togglers |
openWoodById: function( id )
Apre/chiude il ramo dato l’id (html) dell’elemento
Accetta solo stringhe
id | stringa, id (html) del ramo da visualizzare |
makeWoodByElement: function( el, forceOpen, store )
Apre/chiude il ramo desiderato passandogli un elemento dal dom
el | elemento del dom, rappresenta il ramo che si vuole manipolare |
open | boolean, forza il ramo in stato “aperto” indipendentemente dal suo stato attuale |
store | boolean, indica che questa azione è da “storicizzare” |
addEventToggler: function( el )
Di servizio aggiunge gli eventi ai togglers
Gli eventi possono essere considerati principalmente 2: il click e la pressione del tasto TAB.
Per Intercettare la pressione del tasto TAB è stato necessario aggiungere un evento di controllo che esegua il controllo sul tasto premuto. Dunque l’evento keypress si preoccupa principalmente di intercettare il codice del tasto premuto e lanciare l’evento associato al quel tasto.
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 )
Chiude tutti i tab.
collapseAll: function()
Visualizza un determinato tab passandogli la posizione (indice)
showTabByIndex: function( index )
Visualizza un determinato tab passandogli l’id (html)
showTabById: function( id )
Visualizza un determinato tab.
showTabByMapKey: function( key )
Aggiorna il set di tab/toggler.
refreshMap: function()
Di servizio aggiunge l’evento per la visualizzazione del tab ad un toggler.
addEventToggler: function( index )
Di servizio ripulisce un toggler dagli eventi.
cleanEventToggler: function( index )
Di servizio esegue le operazioni necessarie ad istanziare un Wood.
initialize: function( options )
Di servizio per l’istanza del menu
initMenu: function()
Apre/chiude il ramo dato l’id (html) dell’elemento
openWoodById: function( id )
Apre/chiude il ramo desiderato passandogli un id (html)
makeWoodById: function( id )
Apre/chiude il ramo desiderato passandogli un elemento dal dom
makeWoodByElement: function( el, forceOpen, store )
Aggiorna il cookie per il Wood di tipo “menu”.
updateWoodCookie: function()
Chiude ricorsivamente tutti i rami di un Wood.
collapseAll: function()
Apre ricorsivamente tutti i rami di un wood
expandAll: function()
Di servizio genera la toolbar per Wood
injectTools: function()
Aggiorna la mappa dei rami del Wood.
refreshMap: function()
Di servizio aggiunge gli eventi ai togglers
addEventToggler: function( el )
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 )