Skip to content

Commit

Permalink
Handle gutter array (metafizzy#2)
Browse files Browse the repository at this point in the history
  • Loading branch information
Mikhail Khazov committed Aug 9, 2016
1 parent dc15e40 commit 9a0b046
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 35 deletions.
74 changes: 48 additions & 26 deletions dist/packery.pkgd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,19 @@

/**
* Bridget makes jQuery widgets
* v2.0.0
* v2.0.1
* MIT license
*/

/* jshint browser: true, strict: true, undef: true, unused: true */

( function( window, factory ) {
'use strict';
/* globals define: false, module: false, require: false */

// universal module definition
/*jshint strict: false */ /* globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'jquery-bridget/jquery-bridget',[ 'jquery' ], function( jQuery ) {
factory( window, jQuery );
return factory( window, jQuery );
});
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
Expand Down Expand Up @@ -365,7 +364,7 @@ return getSize;
});

/**
* EvEmitter v1.0.2
* EvEmitter v1.0.3
* Lil' event emitter
* MIT License
*/
Expand All @@ -374,7 +373,7 @@ return getSize;

( function( global, factory ) {
// universal module definition
/* jshint strict: false */ /* globals define, module */
/* jshint strict: false */ /* globals define, module, window */
if ( typeof define == 'function' && define.amd ) {
// AMD - RequireJS
define( 'ev-emitter/ev-emitter',factory );
Expand All @@ -386,7 +385,7 @@ return getSize;
global.EvEmitter = factory();
}

}( this, function() {
}( typeof window != 'undefined' ? window : this, function() {



Expand Down Expand Up @@ -529,7 +528,7 @@ return EvEmitter;
}));

/**
* Fizzy UI utils v2.0.1
* Fizzy UI utils v2.0.2
* MIT license
*/

Expand Down Expand Up @@ -700,7 +699,8 @@ utils.debounceMethod = function( _class, methodName, threshold ) {
// ----- docReady ----- //

utils.docReady = function( callback ) {
if ( document.readyState == 'complete' ) {
var readyState = document.readyState;
if ( readyState == 'complete' || readyState == 'interactive' ) {
callback();
} else {
document.addEventListener( 'DOMContentLoaded', callback );
Expand Down Expand Up @@ -2806,6 +2806,24 @@ proto._create = function() {
// call super
Outlayer.prototype._create.call( this );

// handle gutter
var gutter = this.options.gutter;
if ( Array.isArray(gutter) ) {
if ( typeof gutter[0] !== undefined ) {
this.options.gutterWidth = gutter[0];

if ( typeof gutter[1] !== 'undefined' ) {
this.options.gutterHeight = gutter[1];
} else {
this.options.gutterHeight = this.options.gutterWidth;
}
} else {
this.options.gutterWidth = this.options.gutterHeight = 0;
}
} else {
this.options.gutterWidth = this.options.gutterHeight = gutter;
}

// initial properties
this.packer = new Packer();
// packer for drop targets
Expand Down Expand Up @@ -2868,10 +2886,10 @@ proto._resetLayout = function() {
// packer settings, if horizontal or vertical
if ( this._getOption('horizontal') ) {
width = Infinity;
height = this.size.innerHeight + this.gutter;
height = this.size.innerHeight + this.gutterHeight;
sortDirection = 'rightwardTopToBottom';
} else {
width = this.size.innerWidth + this.gutter;
width = this.size.innerWidth + this.gutterWidth;
height = Infinity;
sortDirection = 'downwardLeftToRight';
}
Expand All @@ -2894,7 +2912,8 @@ proto._resetLayout = function() {
proto._getMeasurements = function() {
this._getMeasurement( 'columnWidth', 'width' );
this._getMeasurement( 'rowHeight', 'height' );
this._getMeasurement( 'gutter', 'width' );
this._getMeasurement( 'gutterWidth', 'width' );
this._getMeasurement( 'gutterHeight', 'height' );
};

proto._getItemLayoutPosition = function( item ) {
Expand Down Expand Up @@ -2943,8 +2962,8 @@ proto._setRectSize = function( elem, rect ) {
// size for columnWidth and rowHeight, if available
// only check if size is non-zero, #177
if ( w || h ) {
w = this._applyGridGutter( w, this.columnWidth );
h = this._applyGridGutter( h, this.rowHeight );
w = this._applyGridGutter( w, this.columnWidth, true );
h = this._applyGridGutter( h, this.rowHeight, false );
}
// rect must fit in packer
rect.width = Math.min( w, this.packer.width );
Expand All @@ -2957,12 +2976,13 @@ proto._setRectSize = function( elem, rect ) {
* @param {Number} gridSize - columnWidth or rowHeight
* @returns measurement
*/
proto._applyGridGutter = function( measurement, gridSize ) {
proto._applyGridGutter = function( measurement, gridSize, isWidth ) {
// just add gutter if no gridSize
var gutter = isWidth ? this.gutterWidth : this.gutterHeight;
if ( !gridSize ) {
return measurement + this.gutter;
return measurement + gutter;
}
gridSize += this.gutter;
gridSize += gutter;
// fit item to columnWidth/rowHeight
var remainder = measurement % gridSize;
var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
Expand All @@ -2973,11 +2993,11 @@ proto._applyGridGutter = function( measurement, gridSize ) {
proto._getContainerSize = function() {
if ( this._getOption('horizontal') ) {
return {
width: this.maxX - this.gutter
width: this.maxX - this.gutterWidth
};
} else {
return {
height: this.maxY - this.gutter
height: this.maxY - this.gutterHeight
};
}
};
Expand Down Expand Up @@ -3115,20 +3135,21 @@ proto.resizeShiftPercentLayout = function() {
var measure = isHorizontal ? 'height' : 'width';
var segmentName = isHorizontal ? 'rowHeight' : 'columnWidth';
var innerSize = isHorizontal ? 'innerHeight' : 'innerWidth';
var gutter = isHorizontal ? this.gutterHeight : this.gutterWidth;

// proportional re-align items
var previousSegment = this[ segmentName ];
previousSegment = previousSegment && previousSegment + this.gutter;
previousSegment = previousSegment && previousSegment + gutter;

if ( previousSegment ) {
this._getMeasurements();
var currentSegment = this[ segmentName ] + this.gutter;
var currentSegment = this[ segmentName ] + gutter;
items.forEach( function( item ) {
var seg = Math.round( item.rect[ coord ] / previousSegment );
item.rect[ coord ] = seg * currentSegment;
});
} else {
var currentSize = getSize( this.element )[ innerSize ] + this.gutter;
var currentSize = getSize( this.element )[ innerSize ] + gutter;
var previousSize = this.packer[ measure ];
items.forEach( function( item ) {
item.rect[ coord ] = ( item.rect[ coord ] / previousSize ) * currentSize;
Expand Down Expand Up @@ -3188,16 +3209,17 @@ proto.updateShiftTargets = function( dropItem ) {
var isHorizontal = this._getOption('horizontal');
var segmentName = isHorizontal ? 'rowHeight' : 'columnWidth';
var measure = isHorizontal ? 'height' : 'width';
var gutter = isHorizontal ? this.gutterHeight : this.gutterWidth;

this.shiftTargetKeys = [];
this.shiftTargets = [];
var boundsSize;
var segment = this[ segmentName ];
segment = segment && segment + this.gutter;
segment = segment && segment + gutter;

if ( segment ) {
var segmentSpan = Math.ceil( dropItem.rect[ measure ] / segment );
var segs = Math.floor( ( this.shiftPacker[ measure ] + this.gutter ) / segment );
var segs = Math.floor( ( this.shiftPacker[ measure ] + gutter ) / segment );
boundsSize = ( segs - segmentSpan ) * segment;
// add targets on top
for ( var i=0; i < segs; i++ ) {
Expand All @@ -3206,7 +3228,7 @@ proto.updateShiftTargets = function( dropItem ) {
this._addShiftTarget( initialX, initialY, boundsSize );
}
} else {
boundsSize = ( this.shiftPacker[ measure ] + this.gutter ) - dropItem.rect[ measure ];
boundsSize = ( this.shiftPacker[ measure ] + gutter ) - dropItem.rect[ measure ];
this._addShiftTarget( 0, 0, boundsSize );
}

Expand Down
4 changes: 2 additions & 2 deletions dist/packery.pkgd.min.js
View file

Large diffs are not rendered by default.

22 changes: 18 additions & 4 deletions js/packery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,25 @@ var proto = Packery.prototype;
proto._create = function() {
// call super
Outlayer.prototype._create.call( this );
//handle gutter
if(this.gutter) {
this.gutterWidth = this.gutter;
this.gutterHeight = this.gutter;

// handle gutter
var gutter = this.options.gutter;
if ( Array.isArray(gutter) ) {
if ( typeof gutter[0] !== undefined ) {
this.options.gutterWidth = gutter[0];

if ( typeof gutter[1] !== 'undefined' ) {
this.options.gutterHeight = gutter[1];
} else {
this.options.gutterHeight = this.options.gutterWidth;
}
} else {
this.options.gutterWidth = this.options.gutterHeight = 0;
}
} else {
this.options.gutterWidth = this.options.gutterHeight = gutter;
}

// initial properties
this.packer = new Packer();
// packer for drop targets
Expand Down
5 changes: 2 additions & 3 deletions sandbox/gutter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<title>fluid</title>

<style>
* { box-sizing: border-box; }
* { box-sizing: border-box; }

body { font-family: sans-serif; }

Expand Down Expand Up @@ -79,8 +79,7 @@ <h1>Packery - resize: false</h1>
itemSelector: '.grid-item',
resize: false,
percentPosition: true,
gutterWidth: '.gutter',
gutterHeight: 10
gutter: ['.gutter', 10]
});
</script>

Expand Down

0 comments on commit 9a0b046

Please sign in to comment.