/**
* Flowr.js - Simple jQuery plugin to emulate Flickr's justified view
* For usage information refer to http://github.com/kalyan02/flowr-js
*
*
* @author: Kalyan Chakravarthy (http://KalyanChakravarthy.net)
* @version: v0.1
*/
(function() {
//$("#container2").css( 'border', '1px solid #ccc');
flowr = function(elem, options) {
$this = elem;
var extend = function(out) {
out = out || {};
for (var i = 1; i < arguments.length; i++) {
if (!arguments[i])
continue;
for (var key in arguments[i]) {
if (arguments[i].hasOwnProperty(key))
out[key] = arguments[i][key];
}
}
return out;
};
var data = (function() {
var lastId = 0,
store = {};
return {
set: function(element, info) {
var id;
if (element.myCustomDataTag === undefined) {
id = lastId++;
element.myCustomDataTag = id;
} else { id = element.myCustomDataTag; }
store[id] = extend(store[id], info);
},
get: function(element) {
return store[element.myCustomDataTag] || {};
}
};
}());
function reorderContent() {
var _initialWidth = data.get($this).width;
var _newWidth = $this.offsetWidth;
var _change = _initialWidth - _newWidth;
if (_initialWidth != _newWidth) {
$this.innerHTML = "";
var _settings = data.get($this).lastSettings || {};
_settings.data = data.get($this).data || {};
_settings.maxWidth = $this.offsetWidth - 1;
flowr($this, _settings);
}
}
var ROW_CLASS_NAME = 'flowr-row'; // Class name for the row of flowy
var MAX_LAST_ROW_GAP = 25; // If the width of last row is lesser than max-width, recalculation is needed
var NO_COPY_FIELDS = ['complete', 'data', 'responsive']; // these attributes will not be carried forward for append related calls
var DEFAULTS = {
'data': [],
'padding': 5, // whats the padding between flowy items
'height': 240, // Minimum height an image row should take
'render': null, // callback function to get the tag
'append': false, // TODO
'widthAttr': 'width', // a custom data structure can specify which attribute refers to height/width
'heightAttr': 'height',
'maxScale': 1.5, // In case there is only 1 elment in last row
'maxWidth': $this.offsetWidth - 1, // 1px is just for offset
'itemWidth': null, // callback function for width
'itemHeight': null, // callback function for height
'complete': null, // complete callback
'rowClassName': ROW_CLASS_NAME,
'rows': -1, // Maximum number of rows to render. -1 for no limit.
'responsive': true // make content responsive
};
var settings = extend(DEFAULTS, options);
// If data is being appended, we already have settings
// If we already have settings, retrieve them
if (settings.append && data.get($this).lastSettings) {
lastSettings = data.get($this).lastSettings;
// Copy over the settings from previous init
for (attr in DEFAULTS) {
if (NO_COPY_FIELDS.indexOf(attr) < 0 && settings[attr] == DEFAULTS[attr]) {
settings[attr] = lastSettings[attr];
}
}
// Check if we have an incomplete last row
lastRow = data.get($this).lastRow;
if (lastRow.data.length > 0 && settings.maxWidth - lastRow.width > MAX_LAST_ROW_GAP) {
// Prepend the incomplete row to newly loaded data and redraw
lastRowData = lastSettings.data.slice(lastSettings.data.length - lastRow.data.length - 1);
settings.data = lastRowData.concat(settings.data);
// Remove the incomplete row
// TODO: Don't reload this stuff later. Reattach to new row.
$('.' + settings.rowClassName + ':last', $this).detach();
} else {
// console.log( lastRow.data.length );
// console.log( lastRow.width );
}
}
// only on the first initial call
if (!settings.responsive && !settings.append)
$this.width($this.width());
// Basic sanity checks
if (!(settings.data instanceof Array))
return;
if (typeof(settings.padding) != 'number')
settings.padding = parseInt(settings.padding);
if (typeof(settings.itemWidth) != 'function') {
settings.itemWidth = function(data) {
return data[settings.widthAttr];
}
}
if (typeof(settings.itemHeight) != 'function') {
settings.itemHeight = function(data) {
return data[settings.heightAttr];
}
}
function getNextRow(data, settings) {
var itemIndex = 0;
var itemsLength = data.length;
var lineItems = [];
var lineWidth = 0;
var maxWidth = settings.maxWidth;
var paddingSize = settings.padding;
// console.log( 'maxItems=' + data.length );
requiredPadding = function() {
var extraPads = arguments.length == 1 ? arguments[0] : 0;
return (lineItems.length - 1 + extraPads) * settings.padding;
}
while (lineWidth + requiredPadding() < settings.maxWidth && (itemIndex < itemsLength)) {
var itemData = data[itemIndex];
var itemWidth = settings.itemWidth.call($this, itemData);
var itemHeight = settings.itemHeight.call($this, itemData);
var minHeight = settings.height;
var minWidth = Math.floor(itemWidth * settings.height / itemHeight);
if (minWidth > settings.maxWidth) {
// very short+wide images like panoramas
// show them even if ugly, as wide as possible
minWidth = settings.maxWidth - 1 - requiredPadding(1);
minHeight = settings.height * minHeight / minWidth;
}
var newLineWidth = lineWidth + minWidth;
// console.log( 'lineWidth = ' + lineWidth );
// console.log( 'newLineWidth = ' + newLineWidth );
if (newLineWidth < settings.maxWidth) {
lineItems.push({
'height': minHeight,
'width': minWidth,
'itemData': itemData
});
lineWidth += minWidth;
itemIndex++;
} else {
// We'd have exceeded width. So break off to scale.
// console.log( 'breaking off = ' + itemIndex );
// console.log( 'leave off size = ' + lineItems.length );
break;
}
} //while
// Scale the size to max width
testWidth = 0;
if (lineWidth < settings.maxWidth) {
var fullScaleWidth = settings.maxWidth - requiredPadding() - 10;
var currScaleWidth = lineWidth;
var scaleFactor = fullScaleWidth / currScaleWidth;
if (scaleFactor > settings.maxScale)
scaleFactor = 1;
var newHeight = Math.round(settings.height * scaleFactor);
for (i = 0; i < lineItems.length; i++) {
var lineItem = lineItems[i];
lineItem.width = Math.floor(lineItem.width * scaleFactor);
lineItem.height = newHeight;
testWidth += lineItem.width;
}
}
return {
data: lineItems,
width: testWidth + requiredPadding()
};
}
// If the responsive var is set to true then listen for resize method
// and prevent resizing from happening twice if responsive is set again during append phase!
if (settings.responsive && !data.get($this).__responsive) {
window.addEventListener('resize', function() {
initialWidth = data.get($this).width;
newWidth = $this.offsetWidth;
//initiate resize
if (initialWidth != newWidth) {
var task_id = data.get($this).task_id;
if (task_id) {
task_id = clearTimeout(task_id);
task_id = null;
}
task_id = setTimeout(function() {reorderContent(data);}, 80);
data.set($this, {task_id: task_id});
}
});
data.set($this, {__responsive: true});
}
// Get a copy of original data. 1 level deep copy is sufficient.
var _data = settings.data.slice(0);
var rowData = null;
var currentRow = 0;
var currentItem = 0;
// Store all the data
var allData = [];
for (i = 0; i < _data.length; i++) {
allData.push(_data[i]);
}
data.set($this, {data: allData});
// While we have a new row
while ((rowData = getNextRow(_data, settings)) != null && rowData.data.length > 0) {
if (settings.rows > 0 && currentRow >= settings.rows)
break;
// remove the number of elements in the new row from the top of data stack
_data.splice(0, rowData.data.length);
// Create a new row div, add class, append the htmls and insert the flowy items
var $row = document.createElement('DIV');
if ($row.classList)
$row.classList.add(settings.rowClassName);
else
$row.className += ' ' + settings.rowClassName;
var slack = $this.clientWidth - rowData.width - 2 * settings.padding
for (i = 0; i < rowData.data.length; i++) {
var displayData = rowData.data[i];
// Get the HTML object from custom render function passed as argument
var displayObject = settings.render.call($this, displayData);
extraw = Math.floor(slack/rowData.data.length)
if (i == 0) {
extraw += slack % rowData.data.length
}
// Set some basic stuff
displayObject.style.width = displayData.width + extraw;
displayObject.style.height = displayData.height;
displayObject.style.marginBottom = settings.padding + "px";
displayObject.style.marginLeft = i == 0 ? '0' : settings.padding + "px";
$row.append(displayObject);
currentItem++;
}
$this.append($row);
// console.log ( "I> rowData.data.length="+rowData.data.length +" rowData.width="+rowData.width );
currentRow++;
data.set($this, {lastRow: rowData});
}
// store the current state of settings and the items in last row
// we'll need this info when we append more items
data.set($this, {lastSettings: settings});
// onComplete callback
// pass back info about list of rows and items rendered
if (typeof(settings.complete) == 'function') {
var completeData = {
renderedRows: currentRow,
renderedItems: currentItem
}
settings.complete.call($this, completeData);
}
};
})();
