Last Piece Hacktivist Crew

Editing: crp-tiled-layer.js

CRPTiledLayerType = {};
CRPTiledLayerType.Puzzle = 1;
CRPTiledLayerType.Masonry = 2;
CRPTiledLayerType.Square = 3;
CRPTiledLayerType.Justified = 4;

;(function ($) {
    $.crpTiledLayer = function (element, options) {
        if(options.approxTileWidth < options.minTileWidth){
            options.approxTileWidth = options.minTileWidth;
        }

Slot.prototype.resize = function (blocks, onlyWidth) {
            //nw : nh = w : h => nh = nw * h / w
            var new_width = blocks;
            var new_height = (new_width * this.px.height) / this.px.width;
            var bv = this.blocks.v;
            this.blocks.h = blocks;
            if(!onlyWidth && plugin.settings.layoutType != CRPTiledLayerType.Square)
                this.blocks.v = new_height;
        }

var Grid = function (margin, min_tile_width, width) {
            this.slots = [];
            this.cells = [];
            this.margin = margin;
            this.min_tile_width = min_tile_width;
            this.width = width;
            this.hor_size = width;
            this.init();
        }

Grid.prototype.init = function () {
            this.slots.length = 0;
            this.cells.length = 0;
            for (var i = 0; i < this.hor_size * 1000; i++) {
                this.cells[i] = 0;
            }
        }

Grid.prototype.add_slot = function (slot) {
            for (var j = 0; j < slot.blocks.v; j++) {
                for (var i = 0; i < slot.blocks.h; i++) {
                    var row = slot.position.y + j;
                    var column = slot.position.x + i;
                    //if (this.cells.length < row * this.hor_size + column)

this.cells[row * this.hor_size + column] = 1;
                    this.cells.push(0);
                }
            }

this.slots.push(slot);
        }

Grid.prototype.count_free_cells_on_right = function (index) {
            var line = Math.floor(index / this.hor_size);
            var line_end = (line + 1) * this.hor_size;

var length = 0;

for (; index < line_end; index++, length++) {
                if (this.cells[index] == 1) {
                    break;
                }
            }

return length;
        }

Grid.prototype.insert = function (width, height, allowEnlargement) {

/* Hack for square and masonry styles */
            var sW = width;
            var sH = height;
            if(plugin.settings.layoutType == CRPTiledLayerType.Masonry || plugin.settings.layoutType == CRPTiledLayerType.Square){
                var _slotWidth = plugin.settings.approxTileWidth + plugin.settings.margin;
                var _wrapperWidth = $element.width() + plugin.settings.margin;
                if(_slotWidth > _wrapperWidth - plugin.settings.margin){
                    _slotWidth = _wrapperWidth - plugin.settings.margin;
                }

var _itemsPerRow = parseInt( _wrapperWidth / _slotWidth );
                var _delta = _wrapperWidth - _itemsPerRow * _slotWidth;
                var _deltaPerCell = Math.floor(_delta / _itemsPerRow);
                _slotWidth += _deltaPerCell;

sW = _slotWidth;

var _ratio = plugin.settings.approxTileHeight / plugin.settings.approxTileWidth;
                if(plugin.settings.layoutType == CRPTiledLayerType.Masonry){
                    _ratio = height / width;
                }

sH = Math.ceil(sW * _ratio);

} else {
                var _wrapperWidth = $element.width() + plugin.settings.margin;
                var step = parseInt( _wrapperWidth / 4 );

var ratios = [
                    {w: 1, h:1},
                    {w: 2, h:2},
                ];
                var ratio = ratios[(Math.floor(Math.random() * (ratios.length - 0)) + 0)];

sW = ratio.w * step;
                sH = ratio.h * step;
            }

var newsH = sH;
            if (plugin.settings.addBlock1Height != false) {
                newsH += plugin.settings.addBlock1Height;
            }
            if (plugin.settings.addBlock2Height != false) {
                newsH += plugin.settings.addBlock2Height;
            }
            var slot = new Slot(sW, newsH);
            var av_blocks = 0;
            var free_cell = 0;
            var line = 0;

if (this.slots.length == 0) {
                av_blocks = this.hor_size;
                slot.position.x = 0;
                slot.position.y = 0;
            } else {

//find first available cell
                var exit = false;
                for (; free_cell < this.cells.length; free_cell++) {
                    if (this.cells[free_cell] == 0) {

line = Math.floor(free_cell / this.hor_size);
                        var line_end = (line + 1) * this.hor_size;

//available blocks
                        av_blocks = 0;
                        for (var k = 0; k <= line_end - free_cell; k++) {
                            av_blocks = k;
                            if (this.cells[free_cell + k] == 1) {
                                //there's another slot on the right
                                break;
                            }
                        }
                        break;
                    }
                }
            }
            //the slot need to be shrinked
            if (av_blocks < slot.blocks.h) {
                slot.resize(av_blocks);
            } else {
                var free_on_right = this.count_free_cells_on_right(free_cell + slot.blocks.h);
                if (free_on_right - plugin.settings.margin < this.min_tile_width &&
                    free_on_right > 0) {
                    slot.resize(av_blocks, !allowEnlargement);
                    slot.enlarged = true;
                }
                if (free_on_right == 0)
                    slot.edge_right = true;
            }

slot.position.x = free_cell % this.hor_size;
            slot.position.y = Math.floor(free_cell / this.hor_size);

this.add_slot(slot);
            return slot;
        }

var defaults = {
            layoutType: CRPTiledLayerType.Square,
            approxTileWidth: 200,
            approxTileHeight: 200,
            minTileWidth: 200,
            margin: 10,
            addBlock1Height: false,
            addBlock2Height: false,
            allowEnlargement: false,
            onComplete: function () { },
            onUpdate: function () { },
        }

var plugin = this;
        var grid = null;
        var maxHeight = 0;

plugin.settings = {}

var $element = $(element),
            element = element;

var currentWidth = $element.width();

var completed = false;
        var busy = false;

var tilesForFilter = function(ft) {
            $tiles =  $element.find(".tile");
            return $tiles;
        }

var doFiltration = function() {
            busy = true;

var $tiles = tilesForFilter(null);
            maxHeight = 0;
            grid = null;

$tiles.css({visibility: 'invisible'});
            entile($tiles);
            $tiles.css({visibility: 'visible'});

busy = false;
        }

plugin.init = function () {
            plugin.settings = $.extend({}, defaults, options);

$element.find(".ftg-items").css({
                position: "relative",
                minWidth: plugin.settings.minTileWidth,
            });

var $tiles = $element.find(".tile");
            styleTiles($tiles);
            assignImagesSize($tiles);
            var category = window.location.hash;
            if (category != '' && category != '#') {
                var current = jQuery(".ftg-filters a[href='" + category + "']");
                if (current.length != 0) {
                    jQuery("a", current.closest(".ftg-filters")).removeClass('selected');
                    current.addClass('selected');
                }
            }
            doFiltration();

$(window).resize(function () {
                if(busy) return;

if (currentWidth != $element.width())
                {
                    busy = true;
                    currentWidth = $element.width();

resTo = setTimeout(function () {
                        grid = null;
                        maxHeight = 0;

var $filteredTiles = tilesForFilter(null);
                        entile($filteredTiles);

busy = false;
                    }, 700);
                }
            });
        }

var styleTiles = function ($tiles) {
            $tiles.css({
                position: "absolute",
                visibility: 'hidden',
            });

$tiles.find('.tile-inner').css({
                position: "relative",
                display: "block",
                overflow: "hidden",
            });

$tiles.find('.crp-item').css({
                position: "relative",
                display: "block",
                fontSize: 10, //against weird rules in some reset.css
                maxWidth: "9999em",
            });
        }

var assignImagesSize = function ($tiles) {
            $tiles.each(function () {
                var $item = $(this).find(".crp-item");

var size = {
                    width: $item.data("width"),
                    height: $item.data("height")
                };

$item.data("size", size);
            });
        }

var entile = function ($tiles) {
            if (!grid)
                grid = new Grid(plugin.settings.margin, plugin.settings.minTileWidth, Math.floor($element.width() + plugin.settings.margin));

$tiles.each(function () {
                if ($(this).hasClass("ftg-hidden"))
                    return;

var size = $(this).find(".crp-item").data("size");

var slot = grid.insert(
                    size.width + plugin.settings.margin,
                    size.height + plugin.settings.margin,
                    plugin.settings.allowEnlargement);

$(this).data("enlarged", slot.enlarged);

var top = slot.position.y;
                var height = slot.blocks.v;

var tileWidth = slot.blocks.h - plugin.settings.margin;
                var tileHeight = slot.blocks.v - plugin.settings.margin;

if (top + tileHeight > maxHeight)
                    maxHeight = top + height + plugin.settings.margin;

if (plugin.settings.addBlock1Height != false) {
                    tileHeight -= plugin.settings.addBlock1Height;
                }

if (plugin.settings.addBlock2Height != false) {
                    tileHeight -= plugin.settings.addBlock2Height;
                }

$(this).css({
                    top: top,
                    left: slot.position.x,
                    width: slot.blocks.h,
                    height: height
                });
                $(this).find('.tile-inner').css({
                    width: tileWidth,
                    height: tileHeight
                })
                    .data("width", tileWidth)
                    .data("height", tileHeight);

if (plugin.settings.addBlock1Height != false) {
                    $(this).find('.tile-inner').css({
                        top: plugin.settings.addBlock1Height
                    });
                    $(this).find('.crp-additional-block1').css({
                        width: tileWidth,
                        height: plugin.settings.addBlock1Height
                    });
                }
                if (plugin.settings.addBlock2Height != false) {
                    $(this).find('.crp-additional-block2').css({
                        bottom: plugin.settings.margin,
                        width: tileWidth,
                        height: plugin.settings.addBlock2Height
                    });
                }

$element.find(".ftg-items").height(maxHeight);
            });

$tiles.find("img.crp-item").each(function (i, item) {
                var $item = $(item);
                var size = $item.data("size");

var ratioImg = size.width / size.height;
                var ratioTile = $item.parent().data("width") / $item.parent().data("height");

var bugFixDiff = 0;
                if (ratioImg >= ratioTile) {
                    $item.attr("case", "2");

var $h = $item.parent().data("height") + bugFixDiff;
                    var $w = ratioImg * $h;

$item.css({
                        width: $w,
                        height: $h
                    });

var diff = $w - $item.parent().data("width");
                    $item.css({
                        "margin-left": diff / -2,
                        "margin-top": bugFixDiff / -2,
                    });
                } else {
                    $item.attr("case", "4");

var $w = $item.parent().data("width") + bugFixDiff;
                    var $h = $w / ratioImg;

$item.css({
                        width: $w,
                        height: $h
                    });

var diff = $h - $item.parent().data("height");
                    $item.css({
                        "margin-top": diff / -2,
                        "margin-left": bugFixDiff / -2,
                    });
                }
            });

if (!completed) {
                completed = true;
                plugin.settings.onComplete.call(plugin);
            } else {
                plugin.settings.onUpdate.call(plugin);
            }
        }

plugin.init();
    }

$.fn.crpTiledLayer = function (options) {
        return this.each(function () {
            if (undefined == $(this).data('crpTiledLayer')) {
                var plugin = new $.crpTiledLayer(this, options);
                $(this).data('crpTiledLayer', plugin);
            }
        });
    }
})(jQuery);

Cancel