Пользовательский статус изотопа javascript

введите описание изображения здесь

Я построил этот изотопный модуль, но я хочу его улучшить, поэтому он привязывается к основанию и может принимать обновления из запроса 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( '
×
' ); }); } function closeItem( $item ) { $item.removeClass( 'open' ).find( '.close' ).remove(); $container.removeClass( 'item-open' ).isotope( 'reLayout' ); }

введите описание изображения здесь

Эта демонстрация 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); } 

введите описание изображения здесь

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

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

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