[jquery-ui] Re: saving portlet state

[Ralph Bean]

I got this working with multiple columns and both order of portlets
and sate saved to cookies.

Here's a demo:  http://www.cs.rit.edu/~rjb6296/jquery_demo/

Source:
**** Javascript ****
// function that writes the list order to a cookie
function saveOrder() {
    $(".column").each(function(index, value){
        var colid = value.id;
        var cookieName = "cookie-" + colid;
        // Get the order for this column.
        var order = $('#' + colid).sortable("toArray");
        // For each portlet in the column
        for ( var i = 0, n = order.length; i < n; i++ ) {
            // Determine if it is 'opened' or 'closed'
            var v = $('#' + order[i] ).find('.portlet-
content').is(':visible');
            // Modify the array we're saving to indicate what's open
and
            //  what's not.
            order[i] = order[i] + ":" + v;
        }
        $.cookie(cookieName, order, { path: "/", expiry: new
Date(2012, 1, 1)});
    });
}

// function that restores the list order from a cookie
function restoreOrder() {
    $(".column").each(function(index, value) {
        var colid = value.id;
        var cookieName = "cookie-" + colid
        var cookie = $.cookie(cookieName);
        if ( cookie == null ) { return; }
        var IDs = cookie.split(",");
        for (var i = 0, n = IDs.length; i < n; i++ ) {
            var toks = IDs[i].split(":");
            if ( toks.length != 2 ) {
                continue;
            }
            var portletID = toks[0];
            var visible = toks[1]
            var portlet = $(".column")
                .find('#' + portletID)
                .appendTo($('#' + colid));
            if (visible === 'false') {
                portlet.find(".ui-icon").toggleClass("ui-icon-minus");
                portlet.find(".ui-icon").toggleClass("ui-icon-plus");
                portlet.find(".portlet-content").hide();
            }
        }
    });
}


$(document).ready( function () {
    $(".column").sortable({
        connectWith: ['.column'],
        stop: function() { saveOrder(); }
    });

    $(".portlet")
        .addClass("ui-widget ui-widget-content")
        .addClass("ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all")
        .prepend('<span class="ui-icon ui-icon-minus"></span>')
        .end()
        .find(".portlet-content");

    restoreOrder();

    $(".portlet-header .ui-icon").click(function() {
        $(this).toggleClass("ui-icon-minus");
        $(this).toggleClass("ui-icon-plus");
        $(this).parents(".portlet:first").find(".portlet-
content").toggle();
        saveOrder(); // This is important
    });
    $(".portlet-header .ui-icon").hover(
        function() {$(this).addClass("ui-icon-hover"); },
        function() {$(this).removeClass('ui-icon-hover'); }
    );
});

**** HTML ****
<div class="column" id="col1">
    <div class="portlet" id="box_feeds">

        <div class="portlet-header">Feeds</div>
        <div class="portlet-content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
        </div>
    </div>
    <div class="portlet" id="box_news">
        <div class="portlet-header">News</div>
        <div class="portlet-content">

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
        </div>
    </div>
</div>
<div class="column" id="col2">
    <div class="portlet" id="box_shopping">
        <div class="portlet-header">Shopping</div>
        <div class="portlet-content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
        </div>

    </div>
</div>
<div class="column" id="col3">
    <div class="portlet" id="box_links">
        <div class="portlet-header">Links</div>
        <div class="portlet-content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
        </div>
    </div>
    <div class="portlet" id="box_images">

        <div class="portlet-header">Images</div>
        <div class="portlet-content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
        </div>
    </div>
</div>


On May 6, 8:27 pm, sspatrudu <sspatr...@gmail.com> wrote:
> what is div.ui-sortable in your code?
> --
> View this message in 
> context:http://old.nabble.com/saving-portlet-state-tp21951006s27240p28480918....
> Sent from the jQuery UI Discussion mailing list archive at Nabble.com.
>
> --
> You received this message because you are subscribed to the Google Groups 
> "jQuery UI" group.
> To post to this group, send email to jquery...@googlegroups.com.
> To unsubscribe from this group, send email to 
> jquery-ui+unsubscr...@googlegroups.com.
> For more options, visit this group 
> athttp://groups.google.com/group/jquery-ui?hl=en.

-- 
You received this message because you are subscribed to the Google Groups 
"jQuery UI" group.
To post to this group, send email to jquery...@googlegroups.com.
To unsubscribe from this group, send email to 
jquery-ui+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/jquery-ui?hl=en.