Isotope Feed

by khrome

HTML

<script src="https://rawgit.com/khrome/6646ab65dd353af01937/raw/5843b6886d09c07770a77aada5bfc07a86fa953e/isotope.js"></script>
<div id="root"></div>

CSS

img{
    height: 128px;
    width: 128px;
}

JavaScript

function Feed(layout){
    this.layout = layout;
    this.items = [];
}

Feed.prototype.add = function(item){
    if(typeof item == 'array'){
        var ob = this;
        item.forEach(function(child){
            ob.add(child);
        });
        return true;
    }
    this.items.push(item);
    if(this.built){
        this.layout.append(this.layout.buildItem(item));
    }
};

Feed.prototype.build = function(container){
    var feedElement = this.layout.build(container);
    var layout = this.layout;
    this.items.forEach(function(item){
        layout.append(layout.buildItem(item));
    })
    return feedElement;
}

Feed.Mortaring = function(){
    //todo: support pause and resume for efficient animation
}

Feed.Mortaring.prototype.build = function(container){
    container = $(container);
    this.container = $('<div id="collection_items"></div>').trigger('create');
    container.append(this.container);
    this.isotope = this.container.isotope({
        itemSelector : '.collection_item',
        //filter: '*',
        masonry: {
            columnWidth: (container.width()/3),
            gutterWidth: 5
        }
    });
    var ob = this;
}

Feed.Mortaring.prototype.append = function(itemElement){
    this.container.isotope('insert', itemElement);
}

Feed.Mortaring.prototype.buildItem = function(item){
    var el = $(
        '<div id="collection_item_'+item.id+'" class="collection_item">'+
            '<img src="'+item.image+'" />'+
            '<div class="item_info">'+
                '<p>'+item.name+'</p>'+
                '<span>Drag to edit</span>'+
                '<div class="item_action go">Go!!!</div>'+
            '</div>'+
        '</div>'
    ).trigger('create');
    var ob = this;
    $('.go', el).on('click', function(){
        Feed.Mortaring.toggle(item, el, ob);
    });
    return el;
};

Feed.Mortaring.toggle = function(item, element, mortar){
    console.log('opened: '+item.id);
};

var layout = new Feed.Mortaring();
var feed = new...