Я построил этот изотопный модуль, но я хочу его улучшить, поэтому он привязывается к основанию и может принимать обновления из запроса json. Также, если происходит изменение - например, пользователь онлайн просматривает профиль - чтобы внести изменения в личную ссылку на странице пользователя.
Вот текущий код
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">×</div>' );
});
}
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/ *******
Этот пример будет опираться на некоторую разработку на бэкэнд для предоставления элемента приоритета - с использованием даты уведомления и идентификатора уведомления, чтобы помочь идентифицировать элемент приоритета в потоке. Я добавил сортировку даты к изотопному коду.
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);
}
}