Mirrors
/
Vestride_Shuffle
mirror of https://github.com/Vestride/Shuffle.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Removed jQuery animate fallback's width/height properties

Browse Source 
Because the width and height isn't the same for every item, we can't
set that explicitly. Saving and retrieving it almost works, but masonry
gets the width/height before the element is done transitioning,
resulting in misplaced items.
pull/56/head
Glen Cheney 12 years ago
parent 8e03097e1a
commit 276d69e114
2 changed files with 68 additions and 75 deletions
Show Stats Download Patch File Download Diff File

20
index.html
Unescape Escape View File

@ -180,10 +180,13 @@
<p>Settings you can change (these are the defaults)</p>
<pre rel="JavaScript">
<code class="language-javascript">
var options = {
group : 'all' // Which category to show
speed : 600, // Speed of the transition (in milliseconds). 800 = .8 seconds
easing : 'ease-out' // css easing function to use
// Overrideable options
$.fn.shuffle.options = {
group : 'all', // Which category to show
speed : 600, // Speed of the transition (in milliseconds). 600 = .6 seconds
easing : 'ease-out', // css easing function to use
gutterWidth : 0, // space between columns. Can be a function or number
columnWidth : 0 // can be a function or number or calculated by plugin
};
</code>
</pre>
@ -195,7 +198,8 @@ var options = {
<h2>Usage</h2>
<div>
<p>The html structure. The only real important thing here is the <code class="language-markup token attr-name">data-groups</code> attribute. It has to be a <a href="http://jsonlint.com/">valid JSON</a> array of strings.</p>
<h3>The HTML Structure</h3>
<p>The only real important thing here is the <code class="language-markup token attr-name">data-groups</code> attribute. It has to be a <a href="http://jsonlint.com/">valid JSON</a> array of strings.</p>
<pre rel="HTML">
<code class="language-markup">
&lt;div id="grid"&gt;
@ -227,9 +231,10 @@ var options = {
</code>
</pre>
<p>The <code>columnWidth</code> option is used to calculate the column width. This option <strong style="text-decoration:underline;">can be a function</strong> for responsive layouts. If it's not a function, it uses jQuery's <code class="language-javascript">outerWidth(true)</code> to calculate the column width (this includes margins). If the <code>columnWidth</code> option isn't specified, the width will be the width of the first item.</p>
<h3>How column widths work</h3>
<p>The <code>columnWidth</code> option is used to calculate the column width. This option <strong>can be a function</strong> for responsive layouts. If it's not a function, it uses jQuery's <code class="language-javascript">outerWidth(true)</code> to calculate the column width (this includes margins). If the <code>columnWidth</code> option isn't specified, the width will be the width of the first item.</p>
<h3>A basic setup example</h3>
<p>Sets up the button clicks and runs shuffle</p>
<pre rel="jQuery">
<code class="language-javascript">
@ -254,6 +259,7 @@ $(document).ready(function(){
</code>
</pre>
<h3>Events</h3>
<p>These events will be triggered at their respective times: <code>'shrink.shuffle'</code>, <code>'shrunk.shuffle'</code>, <code>'filter.shuffle'</code>, <code>'filtered.shuffle'</code>, and <code>'sorted.shuffle'</code>.</p>
</div>
</section>

123
js/jquery.shuffle.js
Unescape Escape View File

@ -45,13 +45,13 @@
by: null
};
var Shuffle = function($container, options) {
var Shuffle = function( $container, options ) {
var self = this;
$.extend(self, $.fn.shuffle.options, options, $.fn.shuffle.settings);
self.$container = $container;
self.$items = self.$container.children();
self.$items = self._getItems();
self.transitionName = self.prefixed('transition'),
self.transform = self.getPrefixed('transform');
@ -81,7 +81,7 @@
};
// Set up css for transitions
self.$container.css('position', 'relative').get(0).style[self.transitionName] = 'height ' + self.speed + 'ms ' + self.easing;
self.$container.css('position', 'relative')[0].style[ self.transitionName ] = 'height ' + self.speed + 'ms ' + self.easing;
self.$items.each(function() {
$(this).css(self.itemCss);
@ -105,7 +105,7 @@
}
});
self._getColumns();
self._setColumns();
self._resetCols();
self.shuffle( self.group );
};
@ -172,16 +172,16 @@
self.filter();
},
_getItems : function() {
return this.$container.children( this.itemSelector );
},
// calculates number of columns
// i.e. this.colWidth = 200
_getColumns : function() {
_setColumns : function() {
var self = this,
containerWidth = self.$container.width(),
gutter = typeof self.gutterWidth === 'function' ? self.gutterWidth( containerWidth ) :
// Option explicitly set?
self.gutterWidth || 0;
// console.log();
gutter = typeof self.gutterWidth === 'function' ? self.gutterWidth( containerWidth ) : self.gutterWidth;
// use fluid columnWidth function if there
self.colWidth = self.isFluid ? self.columnWidth( containerWidth ) :
@ -192,10 +192,8 @@
// if there's no items, use size of container
containerWidth;
// console.log(self.colWidth, gutter, self.colWidth + gutter);
self.colWidth += gutter;
self.cols = Math.floor( ( containerWidth + gutter ) / self.colWidth );
self.cols = Math.max( self.cols, 1 );
},
@ -215,43 +213,6 @@
fire : function( name ) {
this.$container.trigger(name + '.shuffle', [this]);
},
/**
* Hides the elements that don't match our filter
*/
shrink : function() {
var self = this,
$concealed = self.$items.filter('.concealed');
// Abort if no items
if ($concealed.length === 0) {
return;
}
self.shrinkTransitionEnded = false;
$concealed.each(function() {
var $this = $(this),
x = parseInt($this.data('x'), 10),
y = parseInt($this.data('y'), 10);
if (!x) x = 0;
if (!y) y = 0;
self.transition({
from: 'shrink',
$this: $this,
x: x,
y: y,
left: (x + ($this.outerWidth(true) / 2)) + 'px',
top: (y + ($this.outerHeight(true) / 2)) + 'px',
scale : 0.001,
opacity: 0,
height: 0,
width: 0,
callback: self.shrinkEnd
});
});
},
/**
@ -265,7 +226,7 @@
var self = this;
// Abort if no items
if (items.length === 0) {
if ( items.length === 0 ) {
return;
}
@ -276,8 +237,6 @@
colSpan = Math.ceil( $this.outerWidth(true) / self.colWidth );
colSpan = Math.min( colSpan, self.cols );
// console.log('colSpan: ', colSpan);
if ( colSpan === 1 ) {
// if brick spans only one column, just like singleMode
self._placeItem( $this, self.colYs, fn );
@ -336,8 +295,6 @@
}
}
// console.log('shortCol: ', shortCol, 'minimumY: ', minimumY);
// Position the item
var x = self.colWidth * shortCol,
y = minimumY;
@ -348,7 +305,7 @@
$item.data( {x: x, y: y} );
// Apply setHeight to necessary columns
var setHeight = minimumY + $item.outerHeight(true),
var setHeight = minimumY + ( $item.outerHeight(true) || $item.data('height') ),
setSpan = self.cols + 1 - len;
for ( i = 0; i < setSpan; i++ ) {
self.colYs[ shortCol + i ] = setHeight;
@ -359,16 +316,46 @@
$this: $item,
x: x,
y: y,
left: x + 'px',
top: y + 'px',
scale : 1,
opacity: 1,
height: $item.outerHeight(true) + 'px',
width: $item.outerWidth(true) + 'px',
callback: callback
});
},
/**
* Hides the elements that don't match our filter
*/
shrink : function() {
var self = this,
$concealed = self.$items.filter('.concealed');
// Abort if no items
if ($concealed.length === 0) {
return;
}
self.shrinkTransitionEnded = false;
$concealed.each(function() {
var $this = $(this),
data = $this.data(),
x = parseInt( data.x, 10 ),
y = parseInt( data.y, 10 );
if (!x) x = 0;
if (!y) y = 0;
self.transition({
from: 'shrink',
$this: $this,
x: x,
y: y,
scale : 0.001,
opacity: 0,
callback: self.shrinkEnd
});
});
},
/**
* Grabs the .filtered elements and passes them to layout
@ -470,11 +457,9 @@
} else {
// Use jQuery to animate left/top
opts.$this.stop().animate({
left: opts.left,
top: opts.top,
opacity: opts.opacity,
height: opts.height,
width: opts.width
left: opts.x,
top: opts.y,
opacity: opts.opacity
}, self.speed, 'swing', complete);
}
},
@ -484,7 +469,7 @@
*/
resized: function() {
// get updated colCount
this._getColumns();
this._setColumns();
this._reLayout();
},
@ -510,8 +495,7 @@
update: function() {
var self = this;
self.$items = self.$container.children();
self.$items = self._getItems();
self.resized();
}
@ -554,7 +538,10 @@
group : 'all',
speed : 600,
easing : 'ease-out',
keepSorted: true
itemSelector: '',
gutterWidth : 0,
columnWidth : 0,
keepSorted : true
};
// Not overrideable

Write Preview
Loading…
Cancel
Save