同位素用户状态javascript [英] Isotope User Status javascript

问题描述

我已经构建了这个同位素模块-但我想对其进行增强-因此它可以捕捉到最底层，并且可以从json请求中进行更新.另外，如果发生更改(例如在线用户查看个人资料)，以更改用户页面上的个人参考.

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/

这是当前代码

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' );
}

---

---

此演示 http://jsfiddle.net/CXqM2/85/

能够使用json数据更新同位素.我能够用新的json数据更新重新填充列表.

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

• 任何优先级更新，例如-用户向您发送了一条消息，要求用户为此自动打开.我该如何触发?

这是每10秒重新填充一次的代码

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);   
}

推荐答案

最新代码******** http://jsfiddle.net/CXqM2/209/ *******

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

此示例将依靠后端的某些开发来提供优先级元素-使用通知日期和通知ID来帮助标识流中的优先级元素.我已经将日期排序添加到了同位素代码中.

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);                
            }
        }

这篇关于同位素用户状态javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！