moo-jAPS

version 0.2.311/2009 Wood refactoring, Taboo refactoring.
version 0.2.128/04/2009 fixed cookie path
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
setupTabooCerca e prepara i tab al corretto funzionamento
startupTabApre il tab corretto all’avvio
makeTabooApre un tab
makeTabooTogglersSeleziona il toggler
WoodClasse che gestisce gli alberi e i menu
Functions
initializeEsegue le operazioni necessarie ad istanziare un Wood.
setupToolBarPrepara la ToolBar se showTools è true.
startIndexApre il ramode desiderato secondo il parametro startIndex.
updateBouquetSi preoccupa di sincronizzare il Wood con il relativo Cookie del browser e vice versa
setupTogglersRicerca tutti i Toggler e crea il meccanismo per apertura e chiusura del ramo.
makeWoodChiamato per aprire e chiudere i rami del Wood.
collapseAllChiude tutti i rami di Wood
expandAllApre tutti i rami di Wood
updateWoodCookieSalva la situazione del Wood e la salva nel Cookie
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

Info

Version0.2
Date24 Nov 2009

ChangeLog

11/2009refactoring delle funzioni interne, richiamo dei tab.  Pulizia e miglioramento performance in generale.

Parameters

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

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
setupTabooCerca e prepara i tab al corretto funzionamento
startupTabApre il tab corretto all’avvio
makeTabooApre un tab
makeTabooTogglersSeleziona il toggler

Functions

initialize

initialize: function(options)

Esegue le operazioni necessarie ad istanziare un Taboo

  • Setta le opzioni passate al costruttore
  • Organizza i tab
  • Apre il tab d’inizio

Parameters

options{Obj} options

setupTaboo

setupTaboo: function()

Cerca e prepara i tab al corretto funzionamento

  • Cerca le accoppiate tab/toggler
  • Scarta i tab e i toggler disaccoppiati
  • Setta gli eventi

startupTab

startupTab: function()

Apre il tab corretto all’avvio

Si preoccupa di aprire il primo tab verificando i parametri di istanza, nell’ordine

  • startTabIndex
  • startTab
  • ancora del documento (document.location.hash)
  • altrimenti il primo in ordine di comparizione

makeTaboo

makeTaboo: function(tab)

Apre un tab

Il tab in ingresso può essere sotto forma di stringa, numero o Element.

  • verifica il dato input
  • chiude tutti gli altri tab
  • apre il tab ingresso
  • seleziona il toggler corretto
  • restituisce true

Parameters

tab{String|Number|El} tab da aprire

Returns

Booleantrue se ha trovato il tab passato, altrimenti false

makeTabooTogglers

makeTabooTogglers: function(toggler)

Seleziona il toggler

Deseleziona tutti gli altri toggler e attiva quello corrente.

Parameters

toggler{String|El} toggler da attivare

Wood

Classe che gestisce gli alberi e i menu

Info

Version0.2
Date18 Oct 2009

ChangeLog

10/2009refactoring delle funzioni interne per lo storage dei rami.  Pulizia in generale.

Parameters

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.

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
initializeEsegue le operazioni necessarie ad istanziare un Wood.
setupToolBarPrepara la ToolBar se showTools è true.
startIndexApre il ramode desiderato secondo il parametro startIndex.
updateBouquetSi preoccupa di sincronizzare il Wood con il relativo Cookie del browser e vice versa
setupTogglersRicerca tutti i Toggler e crea il meccanismo per apertura e chiusura del ramo.
makeWoodChiamato per aprire e chiudere i rami del Wood.
collapseAllChiude tutti i rami di Wood
expandAllApre tutti i rami di Wood
updateWoodCookieSalva la situazione del Wood e la salva nel Cookie

Functions

initialize

initialize: function(options)

Esegue le operazioni necessarie ad istanziare un Wood.

  • Setta le opzioni passate al costruttore
  • Istanzia i Togglers
  • Istanzia la ToolBar
  • Chiude tutto
  • Aggiorna i Cookie
  • Apre il ramo desiderato secondo l’opzione StartIndex

Parameters

optionsoggetto contenente le opzioni.  Si veda Wood

setupToolBar

setupToolBar: function()

Prepara la ToolBar se showTools è true.

Crea i link per le azioni collapseAll e expandAll ed inietta un paragrafo prima dell Wood

startIndex

startIndex: function()

Apre il ramode desiderato secondo il parametro startIndex.

Se startIndex il Wood viene esploso sino in quel ramo.

updateBouquet

updateBouquet: function()

Si preoccupa di sincronizzare il Wood con il relativo Cookie del browser e vice versa

Viene chiamato in causa sempre, ma attiva il Cookie solo se enableHistory è true

setupTogglers

setupTogglers: function()

Ricerca tutti i Toggler e crea il meccanismo per apertura e chiusura del ramo.

Prende tutti gli elementi con la classe menuToggler ed associa loro un eventu onclick e un evento custom chiamato clickMenu

makeWood

makeWood: function (rami,
action,
doHistory)

Chiamato per aprire e chiudere i rami del Wood.

Nel dettaglio

  • Recupera i rami in ingresso
  • Verifica di che tipo sono
  • Forza l’apertura o la chiusura
  • Eventualmente salva lo storico

Parameters

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

collapseAll

collapseAll: function(history)

Chiude tutti i rami di Wood

Parameters

history{Boolean} specifica storicizzare la situazione di Wood, defaule false

expandAll

expandAll: function(history)

Apre tutti i rami di Wood

Parameters

history{Boolean} specifica storicizzare la situazione di Wood, defaule false

updateWoodCookie

updateWoodCookie: function()

Salva la situazione del Wood e la salva nel Cookie

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
setupTaboo: function()
Cerca e prepara i tab al corretto funzionamento
startupTab: function()
Apre il tab corretto all’avvio
makeTaboo: function(tab)
Apre un tab
makeTabooTogglers: function(toggler)
Seleziona il toggler
initialize: function(options)
Esegue le operazioni necessarie ad istanziare un Wood.
setupToolBar: function()
Prepara la ToolBar se showTools è true.
startIndex: function()
Apre il ramode desiderato secondo il parametro startIndex.
updateBouquet: function()
Si preoccupa di sincronizzare il Wood con il relativo Cookie del browser e vice versa
setupTogglers: function()
Ricerca tutti i Toggler e crea il meccanismo per apertura e chiusura del ramo.
makeWood: function (rami,
action,
doHistory)
Chiamato per aprire e chiudere i rami del Wood.
collapseAll: function(history)
Chiude tutti i rami di Wood
expandAll: function(history)
Apre tutti i rami di Wood
updateWoodCookie: function()
Salva la situazione del Wood e la salva nel Cookie
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