Изотопный статус пользователя javascript

0

Изображение 174551

Я построил этот изотопный модуль, но я хочу его улучшить, поэтому он привязывается к основанию и может принимать обновления из запроса json. Также, если происходит изменение - например, пользователь онлайн просматривает профиль - чтобы внести изменения в личную ссылку на странице пользователя.

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

Изображение 174551

Эта демонстрация http://jsfiddle.net/CXqM2/85/

Могу обновить изотоп данными json. Я могу повторно заполнить список новыми обновлениями данных json.

Я по существу хочу, чтобы элементы больше не существовали, чтобы исчезнуть - удалить новые элементы, которые нужно добавить - добавить/вставить

  • любые приоритетные обновления, такие как - пользователь отправил вам сообщение для автоматического открытия для этого для пользователя. Как я могу это вызвать?

вот код, который повторяется каждые 10 секунд

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);   
}
  • 0
    Я привязал его к основанию - но как мне обеспечить, чтобы уменьшенные миниатюры оставались у основания? jsfiddle.net/CXqM2/29
  • 0
    Я попытался добавить поток json к коду - таким образом, изотоп питается данными json. Однако элементы не добавляются должным образом - я вижу только один элемент. Что здесь не так? jsfiddle.net/CXqM2/51
Показать ещё 1 комментарий
Теги:
jquery-isotope

1 ответ

0
Лучший ответ

Изображение 174551

ПОСЛЕДНИЙ КОД ******** http://jsfiddle.net/CXqM2/209/ *******

Этот пример будет опираться на некоторую разработку на бэкэнд для предоставления элемента приоритета - с использованием даты уведомления и идентификатора уведомления, чтобы помочь идентифицировать элемент приоритета в потоке. Я добавил сортировку даты к изотопному коду.

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню