Today I was playing (really working) with a nice animation effect to use for the pagination of a showcase module (or stories).

The concept is quite simple here, we have some items which iterates with a nice effect (fade in this case) automatically or not (decided through options). Every item has a dot controller which shows the item when clicked.

Nothing exceptional here, the cool thing is the effect that I gave to such dot controllers, as it seems that when clicking a not selected dot, the selected one moves forward or backward to reach the clicked point.

Quite difficult ...

read the full post

Ok, the release 0.2 of moogallery is out!, Check out the updated demo here.

The new release offers some new interesting features:

• Youtube and vimeo videos support
• Audio support, mpeg and ogg encoding to assure cross browser capability
• Mobile detection and swipe event handler to navigate through media in the lightbox view (requires Christoph Pojer's mootools-mobile plugin)

Maybe in the future I'll integrate a listener for the changes in the device orientation so that the gallery reloads recalculating the available dimensions. Such thing may be already done manually.

Check out the new release and comment here to let me know which improvements you'd add to the plugin.

moogallery plugin has just been released and charged to the mootools forge. Actually the plugin was already available from ajs, the javascript "addon" library for mootools which I populate with scripts I often use in my work.

moogallery is a plugin for mootools that allows you to create a gallery of images in a table format with tips and lightbox included. It 's enough to provide the container which has to contain the gallery and the path to the thumb and the whole images with related information (title, description, credits) to generate an autosized gallery inside the container in which the thumbs are loaded sequentially. Each thumb has attached an over event (showing the image title) and a click event ...

read the full post

Some times ago I wrote about the private static and instance members in mootools classes. Now it's time to speak about the protected members in mootools classes.

So the goal here is to obtain some members which are inherited from the parent class and accessible to a child class but not outside.

The trick is to use the Object.merge function to merge together the private properties of the parent exposed to the children through a protected method and the private properties of the child. Look at the following code:

1. var ids = 1;
2. 
   
3. var myParentClass = (function(){
4. 
   
5.   var _protected_prop = {};
6. 
   
7.   return new Class({
8. 
   
9.     initialize: function(id, par1, par2) {
10.       this.id = id;
11.       ...

read the full post

Let's see two patterns that may be used to have private members in mootools classes.

Private static members

Here is quite simple, it's enough to use a single execution function and js closures and provide the setter and getter methods to change and retrieve the member's values.

var myclass = (function() {
  var _name = null,
      _age = null;
  return new Class({
    initialize: function() {
      // do some stuffs
    },
    setName: function(name) {
      // do some checks here
      _name = name;
    },
    setAge: function(age) {
      // do some checks here
      _age = age.toInt();
    },
    getName: function() {
      return _name;
    },
    getAge: function() {
      return _age;
    }
  });
}());
var myinstance = new myclass();
console.log(myinstance.name); // undefined
myinstance.setName('jack');
console.log(myinstance.name); // undefined
console.log(myinstance.getName()); // jack

So what happens here is that the two variables

_name and _age

are in the scope of the single execution function, and so not accessible from outside. But their value is retained by the returned object which yes can access them since it is ...

read the full post

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