moo-jAPS

version 0.2.1fixed HoofEd when loading buttons files, changed buttons files structure now simpler, added HoofEd buttons separator
version 0.2added Taboo focus when switching
version 0.2added HoofEd a simple textarea editor/tagger, added documentation,
Summary
moo-jAPS
TabooClasse che gestisce blocchi di informazioni in stile TAB
Functions
initializeEsegue le operazioni necessarie ad istanziare un Taboo.
collapseAllChiude tutti i tab.
showTabByIndexVisualizza un determinato tab passandogli la posizione (indice)
showTabByIdVisualizza un determinato tab passandogli l’id (html)
showTabByMapKeyVisualizza un determinato tab.
refreshMapAggiorna il set di tab/toggler.
addEventTogglerDi servizio aggiunge l’evento per la visualizzazione del tab ad un toggler.
cleanEventTogglerDi servizio ripulisce un toggler dagli eventi.
WoodClasse che gestisce gli alberi e i menu
Functions
initializeDi servizio esegue le operazioni necessarie ad istanziare un Wood.
initMenuDi servizio per l’istanza del menu
openWoodByIdApre/chiude il ramo dato l’id (html) dell’elemento
makeWoodByIdApre/chiude il ramo desiderato passandogli un id (html)
makeWoodByElementApre/chiude il ramo desiderato passandogli un elemento dal dom
updateWoodCookieAggiorna il cookie per il Wood di tipo “menu”.
collapseAllChiude ricorsivamente tutti i rami di un Wood.
expandAllApre ricorsivamente tutti i rami di un wood
injectToolsDi servizio genera la toolbar per Wood
refreshMapAggiorna la mappa dei rami del Wood.
addEventTogglerDi servizio aggiunge gli eventi ai togglers
HoofEdGenera un piccolo editor da utilizzare per la formattazione del testo nelle textarea
Functions
initializeDi servizio chiamato al momento dell’istanziazione.
injectToolsDi servizio inietta la toolbar dove richiesto
createButtonMapDi servizio crea la mappa dei bottoni (etichette + tags)
addEventButtonDi servizio aggiunge gli eventi necessari ai bottoni della toolbar
encloseSelectionServizio che viene chiamato per applicare i tag

Taboo

Classe che gestisce blocchi di informazioni in stile TAB

Parameters

tabsclasse css dei contenitori dei tab
tabTogglersclasse css degli elementi che attivano e disattivano la visualizzazione dei tab (default: 0)
startTabIndexindice di quale tab mostrare in fase di istanziazione
startTabid (html) del tab da mostrare in fase di istanziazione
hideClassclasse css che da applicare quando il tab si trova in stato nascosto (default: noscreen)
showClassclasse css che da applicare quando il tab si trova in stato visibile (default: showClass)

Esempio di struttura con due tab

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>
Summary
Functions
initializeEsegue le operazioni necessarie ad istanziare un Taboo.
collapseAllChiude tutti i tab.
showTabByIndexVisualizza un determinato tab passandogli la posizione (indice)
showTabByIdVisualizza un determinato tab passandogli l’id (html)
showTabByMapKeyVisualizza un determinato tab.
refreshMapAggiorna il set di tab/toggler.
addEventTogglerDi servizio aggiunge l’evento per la visualizzazione del tab ad un toggler.
cleanEventTogglerDi servizio ripulisce un toggler dagli eventi.

Functions

initialize

initialize: function(options)

Esegue le operazioni necessarie ad istanziare un Taboo.

  • Setta le opzioni passate al costruttore
  • Crea l’hashmap con gli elementi dom interessati
  • Prepara la visualizzazione
  • Visualizza il tab desiderato

Nelle varie fasi dell’inizializzazione del Taboo è presente il controllo per la visualizzazione del tab desiderato.

L’ordine di controllo è

  • startTabIndex
  • startTab
  • ancora nell’url (document.location.hash che restituisce #id)

Parameters

optionsoggetto contenente: tabs, tabTogglers, startTabIndex, startTab, hideClass, showClass

collapseAll

collapseAll: function()

Chiude tutti i tab.  Per ogni coppia della mappa viene rimossa la classe css showClass ed aggiunta la classe hideClass.

showTabByIndex

showTabByIndex: function(index)

Visualizza un determinato tab passandogli la posizione (indice)

Parameters

indexint, rappresenta l’indice del tab che si vuole visualizzare

showTabById

showTabById: function(id)

Visualizza un determinato tab passandogli l’id (html)

Parameters

idstring, rappresenta l’id (html) del tab che si vuole visualizzare

showTabByMapKey

showTabByMapKey: function(key)

Visualizza un determinato tab.

Nasconde il tab visualizzato corrente e visualizza il tab estratto dalla mappa fornendo una chiave.

Parameters

keychiave della mappa Taboo.options.Map

refreshMap

refreshMap: function()

Aggiorna il set di tab/toggler.

Si preoccupa di preparare anche gli eventi per la visualizzazione.

addEventToggler

addEventToggler: function(index)

Di servizio aggiunge l’evento per la visualizzazione del tab ad un toggler.

Parameters

indexl’indice (riferito al dom) del toggler

cleanEventToggler

cleanEventToggler: function(index)

Di servizio ripulisce un toggler dagli eventi.

Parameters

indexl’indice (riferito al dom) del toggler

Wood

Classe che gestisce gli alberi e i menu

Parameters

rootIdid (html) dell’elemento di riferimento, necessario se showTools è true
menuTogglerclasse css degli elementi attivatori dell’albero/menu
hideClassclasse css utilizzata nei rami per lo stato nascosto (default: noscreen)
showClassclasse css utilizzata nei rami per lo stato visibile (default: undoNoscreen)
openClassclasse utilizzata nei rami per lo stato aperto (default: openmenu)
closedClassclasse utilizzata nei rami per lo stato chiuso (default: closedMenu)
showToolsboolean, decide se creare la toolbar.  (opzionale)
expandAllLabeletichetta per il link che espande tutto (default: +)
collapseAllLabeletichetta per il link che “chiude tutto” (default: -)
startIndexid (html) del ramo da aprire in fase di istanziazione
toolClassclasse css utilizzata per gli strumenti (default: toolClass)
typetipo di oggetto, tipi attualmente implentati tree e menu
enableHistoryboolean, che attiva o disattiva la funzionalità per la memoria del Wood menu
cookieNamenome del cookie dove salvare lo stato del Wood menu

Wood è stato pensato per essere un menu oppure un albero.

La struttura di esempio per il menu

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>

La struttura di esempio per il tree

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>
Summary
Functions
initializeDi servizio esegue le operazioni necessarie ad istanziare un Wood.
initMenuDi servizio per l’istanza del menu
openWoodByIdApre/chiude il ramo dato l’id (html) dell’elemento
makeWoodByIdApre/chiude il ramo desiderato passandogli un id (html)
makeWoodByElementApre/chiude il ramo desiderato passandogli un elemento dal dom
updateWoodCookieAggiorna il cookie per il Wood di tipo “menu”.
collapseAllChiude ricorsivamente tutti i rami di un Wood.
expandAllApre ricorsivamente tutti i rami di un wood
injectToolsDi servizio genera la toolbar per Wood
refreshMapAggiorna la mappa dei rami del Wood.
addEventTogglerDi servizio aggiunge gli eventi ai togglers

Functions

initialize

initialize: function(options)

Di servizio esegue le operazioni necessarie ad istanziare un Wood.

  • Setta le opzioni passate al costruttore
  • Crea l’hashmap
  • Chiama il metodo initMenu

Parameters

optionsoggetto contenente i parametri di istanza

initMenu

initMenu: function()

Di servizio per l’istanza del menu

  • Controlla se creare la toolbar
  • Popola la mappa con i rami
  • Chiude tutti i rami
  • Mostra quello desiderato

openWoodById

openWoodById: function(id)

Apre/chiude il ramo dato l’id (html) dell’elemento

Accetta solo stringhe

  • prepara il livelo padre
  • prepara il toggler
  • prepara la lista degli elementi da aprire
  • id da cui partire per l’individuazione dei rami
  • controllo sul tipo di Wood
  • rifermimenti per gli elementi da aprire
  • cicla su tutti gli elementi da aprire

Parameters

idstringa, id (html) del ramo da visualizzare

makeWoodById

makeWoodById: function(id)

Apre/chiude il ramo desiderato passandogli un id (html)

  • Individua il tipo di wood
  • Chiama makeWoodByElement a seconda del tipo di wood presente

Parameters

idtipo string, l’id (html) del ramo da visualizzare

makeWoodByElement

makeWoodByElement: function(el,
forceOpen,
store)

Apre/chiude il ramo desiderato passandogli un elemento dal dom

  • individua il tipo di wood
  • prende il riferimento
  • ricerca il toggler e il suo ramo associato
  • dalla mappa effettua il cambio di classi css

Parameters

elelemento del dom, rappresenta il ramo che si vuole manipolare
openboolean, forza il ramo in stato “aperto” indipendentemente dal suo stato attuale
storeboolean, indica che questa azione è da “storicizzare”

updateWoodCookie

updateWoodCookie: function()

Aggiorna il cookie per il Wood di tipo “menu”.

  • legge e pulisce il set di menu attivi e li scrive nel cookie del browser

collapseAll

collapseAll: function()

Chiude ricorsivamente tutti i rami di un Wood.

  • per ogni elemento della mappa dei rami rimuove le classs openClass e showClass ed applica closedClass e hideClass

expandAll

expandAll: function()

Apre ricorsivamente tutti i rami di un wood

  • Per ogni elemento della mappa rimuove closedClass e hideClass ed applica openClass e showClass

injectTools

injectTools: function()

Di servizio genera la toolbar per Wood

  • crea un nuovo elemento dom “p” e gli applica la classe css “toolClass”
  • inietta prima di “rootId”
  • crea nuovo elemento dom “a” per *espandere tutto”
  • crea nuovo elemento dom “a” per *chiudere tutto”
  • inietta i due a dentro il p

refreshMap

refreshMap: function()

Aggiorna la mappa dei rami del Wood.

Utile quando si rimuovono o si aggiungono rami e si vuole aggiornare il Wood

addEventToggler

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.

HoofEd

Genera un piccolo editor da utilizzare per la formattazione del testo nelle textarea

Parameters

buttonsFileNamestringa, suffisso con il quale indicare i file catalogo e delle lingue
basePathstringa, URI della cartella contentende i file di catalogo e della lingua
textareaIDstringa, l’id (html) della textarea di riferimento
toolClassstringa, classe css da applicare all’HoofEd
toolPositionstringa, indica dove posizionare Hoofed rispetto <textareaID>.  Accetta i valori: before ed after (default: before)
buttonsarray, array js dove dichiarare i bottoni (i bottoni devono essere presenti nel file di catalogo)
langstringa, di 2 caratteri rappresenta la lingua dell’editor
separatorClassstring, css class for the separator element
separatorElementstring, element type for the separator
separatorTextstring, 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

File di supporto

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"
}
Summary
Functions
initializeDi servizio chiamato al momento dell’istanziazione.
injectToolsDi servizio inietta la toolbar dove richiesto
createButtonMapDi servizio crea la mappa dei bottoni (etichette + tags)
addEventButtonDi servizio aggiunge gli eventi necessari ai bottoni della toolbar
encloseSelectionServizio che viene chiamato per applicare i tag

Functions

initialize

initialize: function(options)

Di servizio chiamato al momento dell’istanziazione.

Parameters

optionsobj che racchiude i parametri di istanza: <textareaID> <toolClass> <toolPosition> <button>

injectTools

injectTools: function ()

Di servizio inietta la toolbar dove richiesto

createButtonMap

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

addEventButton

addEventButton: function(el)

Di servizio aggiunge gli eventi necessari ai bottoni della toolbar

Parameters

elelemento del dom che rappresenta il bottone

encloseSelection

encloseSelection: function(key)

Servizio che viene chiamato per applicare i tag

  • legge dalla mappa dei tag, gli startTag e gli endTag
  • legge la selezione nella textarea
  • applica il tab
initialize: function(options)
Esegue le operazioni necessarie ad istanziare un Taboo.
collapseAll: function()
Chiude tutti i tab.
showTabByIndex: function(index)
Visualizza un determinato tab passandogli la posizione (indice)
showTabById: function(id)
Visualizza un determinato tab passandogli l’id (html)
showTabByMapKey: function(key)
Visualizza un determinato tab.
refreshMap: function()
Aggiorna il set di tab/toggler.
addEventToggler: function(index)
Di servizio aggiunge l’evento per la visualizzazione del tab ad un toggler.
cleanEventToggler: function(index)
Di servizio ripulisce un toggler dagli eventi.
initialize: function(options)
Di servizio esegue le operazioni necessarie ad istanziare un Wood.
initMenu: function()
Di servizio per l’istanza del menu
openWoodById: function(id)
Apre/chiude il ramo dato l’id (html) dell’elemento
makeWoodById: function(id)
Apre/chiude il ramo desiderato passandogli un id (html)
makeWoodByElement: function(el,
forceOpen,
store)
Apre/chiude il ramo desiderato passandogli un elemento dal dom
updateWoodCookie: function()
Aggiorna il cookie per il Wood di tipo “menu”.
collapseAll: function()
Chiude ricorsivamente tutti i rami di un Wood.
expandAll: function()
Apre ricorsivamente tutti i rami di un wood
injectTools: function()
Di servizio genera la toolbar per Wood
refreshMap: function()
Aggiorna la mappa dei rami del Wood.
addEventToggler: function(el)
Di servizio aggiunge gli eventi ai togglers
initialize: function(options)
Di servizio chiamato al momento dell’istanziazione.
injectTools: function ()
Di servizio inietta la toolbar dove richiesto
createButtonMap: function()
Di servizio crea la mappa dei bottoni (etichette + tags)
addEventButton: function(el)
Di servizio aggiunge gli eventi necessari ai bottoni della toolbar
encloseSelection: function(key)
Servizio che viene chiamato per applicare i tag
Close