(function() {

Questa è la continuazione del post precedente

Scrivendo il primo post mi è venuta in mente una piccola modifica.
Creare una sorta di “manager” (ah che brutto termine per un programmatore!) che abiliti le funzionalità ui grazie ad un evento jQuery.hover();

Non so se ci sia un risparmio di risorse…
ma mi sembrava una puona applicazione del pattern lazy… che in questi giorni mi frullava nella testa.

JLazy = {
    build : function(options)
    {
        return this.each(
            function(nr)
            {
                jQuery(this)
                .draggable({ stop : function(){this.recorder.on_resize()}})
                .draggable("disable")
                .resizable({ stop : function(){this.recorder.on_resize()}, transparent: true })
                .resizable("disable")
                .JResizeRecorder()
                .hover(
                    function(){
                        jQuery(this)
                        .resizable("enable")
                        .draggable("enable");

                        console.log("Abilitato il dragging e il resize " + jQuery(this));
                    },
                    function(){
                        jQuery(this)
                        .resizable("disable")
                        .draggable("disable");

                        console.log("Disabilitato il dragging e il resize " + jQuery(this));
                    }
                );
            }
        );
    }
};
jQuery.fn.JLazy = JLazy.build;

Quindi invece di:

elem.resizable({ transparent: true, stop : function(){this.recorder.on_resize()} }).JResizeRecorder();

scriverò:

elem.JLazy();

Ecco il document.ready della demo:

$(document).ready(function(){
    var add = jQuery('<a href="#">ADD BOX</a>').click(function(){
        var count = jQuery(".box").length + 1;
        var id_div = "div" + count;
        jQuery("#playground").append("<div id=\""+id_div+"\" class=\"box\"></div>");//<h1>"+ id_div +"</h1>
        var elem = jQuery("#" + id_div);
        elem.JLazy();
    });
    var add5 = jQuery('<a href="#">ADD 5 BOX</a>').click(function(){
        var count = jQuery(".box").length + 1;
        for(var x = 0;x < 5;x++){
            var id_div = "div" + (count + x);
            jQuery("#playground").append("<div id=\""+ id_div +"\" class=\"box\"></div>");//<h1>"+ id_div +"</h1>
            var elem = jQuery("#" + id_div);
            elem.JLazy();
        }
    });
    jQuery("#top").append(add , "  | ");
    jQuery("#top").append(add5 , "  | ");
});

DEMO