Sometimes I like playing with html5 and javascript. Today I was playing around with a sort of paint project for mootools. Clearly I used the html5 canvas element and I wrote some tools (pencil, rectangle, ...) to draw in it.

Well, one of the first problems encountered is the need for a undo/redo functionality. Let's see a way to implement such thing.

Essentially when drawing we can imagine we pass through a series of different states. Each state represents the canvas aspect at that time. Clearly we have a continuous set of states, but it would be to "expensive" to consider and implement this way.

So we may consider a discrete set of states, where a new state is created consequentially to a user action (and not time dependent). Let's consider the creation of a new state consequent to a mousedown-mouseup action of the user, in other words a new state is created when the user draws something in one move.

Now imagine to consider three categories: past, present and future.

The present category includes only the present ...

read the full post

E' online la release 0.1 di mooTree, un plugin javascript che inserisce automaticamente i controlli per espandere/comprimere i rami di un albero infinito rappresentato tramite una lista html non ordinata (ul tag).

I controlli possono essere facilmente personalizzati con poche righe di css. Il behavior iniziale, ovvero quali rami espandere/collassare inizialmente è controllabile tramite opzioni di classe, data-attributes e classi css (per l'item selezionato).

Per saperne di più vi invito a leggere la pagina del progetto, per capire subito meglio di cosa si tratta, visitate la pagina demo.

E' online la release 0.1  di mooReadAll, un plugin javascript per troncare contenuto html mantenendo la formattazione corretta.
Che c'è di nuovo direte voi, da sempre i CMS gestisono questa cosa e ci sono svariate funzioni php o python che lo fanno... Vero, ma questo plugin ottiene lo stesso risultato clientside! Dunque se non avete modo di mettere mano al sorgente, al linguaggio server etc... potete comunque troncare contenuti troppo lunghi usando questo script che lavora solo clientside!

mooReadAll è altamente e facilmente configurabile, sia nel comportamento che nella grafica. Quest'ultima è totalmente controllabile tramite css, il pacchetto comprende già un css di base con delle immagini che potete modificare a vostro piacimento.

Per quanto riguarda il comportamento, la caratteristica principale di mooReadAll è quella di consentire diversi tipi di azione in seguito al click sul classico link "leggi tutto", in particolare:

• "inplace": l'intero contenuto viene mostrato ...

read the full post