Isotope User Status javascript

Question

I've built this isotope module - but I want to enhance it - so it snaps to the bottom, and can take updates from a json request. Also if a change occurs - like an online user views a profile - to make the change to a personal reference on the user's page.

http://jsfiddle.net/CXqM2/26/

Here is the current code

var $container = $( '#isotope' ),
    // @see {@link http://fgnass.github.io/spin.js}
    spinJsConfiguration = {
        lines: 5, // The number of lines to draw
        length: 3, // The length of each line
        width: 2, // The line thickness
        radius: 6, // The radius of the inner circle
        color: '#666' // #rgb or #rrggbb or array of colors
    };

// initialize isotope
// prevent "First item breaks Masonry layout" issue
// @see {@link http://isotope.metafizzy.co/docs/help.html#first_item_breaks_masonry_layout}
$container.isotope({
    masonry: {
        columnWidth: 30
    }
});

// handle click events
$container.on( 'click', '.user', function( event ) {
    var $this = $( this );

    event.preventDefault();

    // if not already open, do so
    if ( !$this.hasClass( 'open' ) ){
        var $openItem = $container.find( '.open' );

        // if any, close currently open items
        if ( $openItem.length ) {
            closeItem( $openItem );
        }

        openItem( $this );
    }
});

$container.on( 'click', '.close', function( event ) {
    event.stopPropagation();
    closeItem( $( this ).closest( '.user' ) );
});

function openItem( $item ) {
    var $image = $item.find( '.user-image' );

    $item.addClass( 'loading' ).spin( spinJsConfiguration );

    // @todo we should only replace the image once
    $image.attr( 'src', $image.data( 'src-large' ) );

    // at least for the sake of this demo we can use the "imagesLoaded" plugin contained within
    // Isotope to determine if the large version of the user image has loaded
    // @todo Isotope v1 contains an outdated version of the "imagesLoaded" plugin - please use the current one
    // @see {@link https://github.com/desandro/imagesloaded}
    $item.imagesLoaded( function() {
        $item.spin( false ).removeClass( 'loading' ).addClass( 'open' );
        $container.addClass( 'item-open' ).isotope( 'reLayout' );
        $item.append( '<div class="close">&times;</div>' );
    });
}

function closeItem( $item ) {
    $item.removeClass( 'open' ).find( '.close' ).remove();
    $container.removeClass( 'item-open' ).isotope( 'reLayout' );
}

---

This demo http://jsfiddle.net/CXqM2/85/

Is able to update the isotope with json data. I am able to re-populate the list with new json data updates.

I essentially want items no longer existing to fade off - remove new items to be added on - add/insert

• any priority updates like - user sent you a message to auto open on this for the user. How do I trigger this?

here is the code that repopulates every 10 seconds

getUpdate: function(){
        function getRandomInt (min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }


        var that = this;
        window.setInterval(function(){
            console.log("new data time");
            var rand = getRandomInt (0, 1);
            that.populateIsotope(data[rand].stream);

            //_re_invoke isotope
            $container.isotope('reLayout')

        },10000);   
}

Answer 1

LATEST CODE ******** http://jsfiddle.net/CXqM2/209/ *******

This example will rely on some development on the backend to provide a priority element - using the notification date and the notification id to help identify the priority element in the stream. I've added the date sorting to the isotope code.

 getSortData: {
            date: function ($elem) {
                var dates = $elem.attr('data-user-notification-date');

                dateArray = dates.split('/'),
                    year = dateArray[2].substr(0, 4),
                        month = dateArray[1],
                            day = dateArray[0];

                timeArray = dates.split(':'),
                    hours = timeArray[0].slice(-2),
                        minutes = timeArray[1],
                            seconds = timeArray[2];

                return new Date(year, month, day, hours, minutes, seconds);                
            }
        }