Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GutterWidth and GutterHeight options #384

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

GutterWidth and GutterHeight options #384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 25 additions & 17 deletions js/packery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,11 @@ var proto = Packery.prototype;
proto._create = function() {
// call super
Outlayer.prototype._create.call( this );

//handle gutter
if(this.gutter) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's not available here, need to use this.options.gutter

this.gutterWidth = this.gutter;
this.gutterHeight = this.gutter;
}
// initial properties
this.packer = new Packer();
// packer for drop targets
Expand Down Expand Up @@ -126,10 +130,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 @@ -152,7 +156,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 @@ -201,8 +206,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 @@ -215,12 +220,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 @@ -231,11 +237,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 @@ -373,20 +379,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 @@ -446,23 +453,24 @@ 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++ ) {
this._addShiftTarget( i * segment, 0, 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
88 changes: 88 additions & 0 deletions sandbox/gutter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />

<title>fluid</title>

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

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
background: #DDD;
}

/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
float: left;
width: 32.666666666666%;
height: 100px;
background: #C09;
}

.gutter {
width: 1%;
}

.grid-item--width2 { width: 66.333333333334%; }
.grid-item--height2 { height: 210px; }

</style>

</head>
<body>

<h1>Packery - resize: false</h1>

<div class="container">
<div class="grid">
<div class="gutter"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
</div>
</div>


<script src="../dist/packery.pkgd.js"></script>

<script>
var pckry = new Packery( '.grid', {
itemSelector: '.grid-item',
resize: false,
percentPosition: true,
gutterWidth: '.gutter',
gutterHeight: 10
});
</script>

</body>
</html>