265 lines
8.9 KiB
JavaScript
265 lines
8.9 KiB
JavaScript
/**
|
|
* 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');
|
|
$.fn.flowr = function(options) {
|
|
|
|
$this = this;
|
|
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.width()-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 && $this.data('lastSettings') ) {
|
|
lastSettings = $this.data('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 = $this.data('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 ];
|
|
}
|
|
}
|
|
|
|
// A standalone utility to calculate the item widths for a particular row
|
|
// Returns rowWidth: width occupied & data : the items in the new row
|
|
var utils = {
|
|
getNextRow : function( 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 );
|
|
|
|
var newLineWidth = lineWidth + minWidth + requiredPadding(1);
|
|
|
|
if (minWidth > settings.maxWidth) {
|
|
// very short+wide images like panoramas
|
|
// show them even if ugly, as wide as possible
|
|
minWidth = settings.maxWidth-1;
|
|
minHeight = settings.height * minHeight / 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()
|
|
};
|
|
}, //getNextRow
|
|
reorderContent : function(){
|
|
/*
|
|
TODO: optimize for faster resizing by reusing dom objects instead of killing the dom
|
|
*/
|
|
var _initialWidth = $this.data('width');
|
|
var _newWidth = $this.width();
|
|
var _change = _initialWidth - _newWidth;
|
|
|
|
if(_initialWidth!=_newWidth) {
|
|
$this.html('');
|
|
var _settings = $this.data( 'lastSettings' );
|
|
_settings.data = $this.data( 'data' );
|
|
_settings.maxWidth = $this.width() - 1;
|
|
$this.flowr( _settings );
|
|
}
|
|
}
|
|
} //utils
|
|
|
|
// If the resposive 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 && !$this.data('__responsive') ) {
|
|
$(window).resize(function(){
|
|
initialWidth = $this.data('width');
|
|
newWidth = $this.width();
|
|
|
|
//initiate resize
|
|
if( initialWidth != newWidth ) {
|
|
var task_id = $this.data('task_id');
|
|
if( task_id ) {
|
|
task_id = clearTimeout( task_id );
|
|
task_id = null;
|
|
}
|
|
task_id = setTimeout( utils.reorderContent, 80 );
|
|
$this.data('task_id', task_id );
|
|
}
|
|
});
|
|
$this.data('__responsive',true);
|
|
}
|
|
|
|
|
|
return this.each(function(){
|
|
|
|
// 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 = $this.data( 'data' ) || [];
|
|
for(i=0;i<data.length;i++) {
|
|
allData.push( data[i] );
|
|
}
|
|
$this.data( 'data', allData );
|
|
|
|
// While we have a new row
|
|
while( ( rowData = utils.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 = $('<div>').addClass(settings.rowClassName);
|
|
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 );
|
|
displayObject = $(displayObject);
|
|
// Set some basic stuff
|
|
displayObject
|
|
.css( 'width', displayData.width )
|
|
.css( 'height', displayData.height )
|
|
.css( 'margin-left', i==0 ? '0' : settings.padding + "px" ); //TODO:Refactor
|
|
$row.append( displayObject );
|
|
|
|
currentItem++;
|
|
}
|
|
$this.append( $row );
|
|
// console.log ( "I> rowData.data.length="+rowData.data.length +" rowData.width="+rowData.width );
|
|
|
|
currentRow++;
|
|
$this.data('lastRow', rowData );
|
|
}
|
|
// store the current state of settings and the items in last row
|
|
// we'll need this info when we append more items
|
|
$this.data('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 );
|
|
}
|
|
});
|
|
};
|
|
|
|
})(jQuery);
|