kombai / freewall

Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...
MIT License
1.85k stars 375 forks source link

Filtering do not remove fixed position blocks #144

Open migplay opened 9 years ago

migplay commented 9 years ago

Is it possible to remove the fixed position blocks when filtering ? It would be great to have an option no ?

migplay commented 9 years ago

My solution here, I backup data-width and data-height and make it zero.

        if ( !$portfolio.hasClass("filtered") ) {
            $('.fix-block', $portfolio).each(function( index ) {
                $(this).attr( 'data-width-bak', $(this).attr('data-width') )
                        .attr( 'data-height-bak', $(this).attr('data-height') );
                //$(this).attr('data-width','250').attr('data-height','250');
                $(this).attr('data-width','0').attr('data-height','0');
                //console.log( index + ": " + $( this ).text() );
            });
        }

        // filter grid
        wall.filter("."+className);
        refreshWall();
        $portfolio.addClass("filtered");

So when unfiltering I can retrieve it

        // retrieve original size of fixed block
        $('.fix-block', $portfolio).each(function( index ) {
            if ( $(this).attr("data-width-bak") ) {
                $(this).attr('data-width', $(this).attr('data-width-bak') )
                        .attr('data-height', $(this).attr('data-height-bak') );
            }
        });

        // unfilter grid
        wall.unFilter();
        refreshWall();
        $portfolio.removeClass("filtered");
migplay commented 9 years ago

Better function

/**
 *  ACTIONS ON FIXED-POSITION BLOCKS IN FREEWALL
 *  BECAUSE FILTERING ACTION DO NOT APPLY TO THOSE GUYS
 */
function updateFixedBlocks(action) {

    switch (action) {
        case 'hide': // hide fixed-pos blocks
            $('.fix-block', $portfolio).each(function( index ) {
                if ( !$(this).attr("data-width-bak") ) { // already saved ?
                    $(this).attr( 'data-width-bak',  $(this).attr('data-width') )
                           .attr( 'data-height-bak', $(this).attr('data-height') );
                }
                $(this).attr('data-width','0').attr('data-height','0'); // remove the blocks
            });
            break;

        case 'reduce': // make the blocks small size1x1 size
            $('.fix-block', $portfolio).each(function( index ) {
                if ( !$(this).attr("data-width-bak") ) { // already saved ?
                    $(this).attr( 'data-width-bak',  $(this).attr('data-width') )
                           .attr( 'data-height-bak', $(this).attr('data-height') );
                }
                $(this).attr('data-width','250').attr('data-height','250') // keep the blocks but small size
                       .addClass('reduced');
            });
            break;

        case 'expand': // retrieve original size of fixed block and expand to original size
            $('.fix-block', $portfolio).each(function( index ) {
                if ( $(this).attr("data-width-bak") ) {
                    $(this).attr('data-width', $(this).attr('data-width-bak') )
                            .attr('data-height', $(this).attr('data-height-bak') );
                }
                $(this).removeClass('reduced');
            });
    }

} // function updateFixedBlocks
kombai commented 9 years ago

Thanks migswd , let me look and provide the solution for this option.