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

Add the filtered class initially to avoid a style recalculation in `filter` on load.

Browse Source 
Removed commented out code, saved the transition duration name to a
variable instead of looking it up each time for each element.
pull/56/head
Glen Cheney 11 years ago
parent 4f82153c83
commit f6a3395fb5
1 changed files with 35 additions and 27 deletions
Show Stats Download Patch File Download Diff File

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

@ -12,8 +12,8 @@
* Inspired by Isotope http://isotope.metafizzy.co/
* Use it for whatever you want! Requires jQuery 1.9+
* @author Glen Cheney (http://glencheney.com)
* @version 1.6.3
* @date 03/13/13
* @version 1.6.4
* @date 04/01/13
*/
(function($, Modernizr, undefined) {
'use strict';
@ -101,7 +101,6 @@
var Shuffle = function( $container, options ) {
var self = this;
$.extend(self, $.fn.shuffle.options, options, $.fn.shuffle.settings);
self.$container = $container.addClass('shuffle');
@ -126,9 +125,10 @@
beforeResizeFunc,
debouncedBeforeResize;
self.$items = self._getItems().addClass('shuffle-item');
self.$items = self._getItems().addClass('shuffle-item filtered');
self.transitionName = self.prefixed('transition'),
self.transitionDelayName = self.prefixed('transitionDelay');
self.transitionDuration = self.prefixed('transitionDuration');
self.transform = self.getPrefixed('transform');
self.isFluid = self.columnWidth && typeof self.columnWidth === 'function';
@ -177,9 +177,10 @@
self._setColumns( parseInt( containerCSS.width, 10 ) );
self.shuffle( self.group );
if ( !self.showInitialTransition ) {
// If we've hidden the initial layout, we need to now add the transition to the elements
if ( !self.showInitialTransition && self.supported && self.useTransition ) {
setTimeout(function() {
self._initItems( true );
self._setTransitions();
}, 0);
}
},
@ -194,19 +195,15 @@
self.fire('filter');
// Default is to show all items
// $items.removeClass('concealed filtered');
// Loop through each item and use provided function to determine
// whether to hide it or not.
if ( $.isFunction(category) ) {
$items.each(function() {
var $item = $(this),
passes = category.call($item[0], $item, self);
// $item.addClass(passes ? 'filtered' : 'concealed');
if ( passes ) {
$filtered = $filtered.add($item);
$filtered = $filtered.add( $item );
}
});
}
@ -220,12 +217,9 @@
groups = $this.data('groups'),
keys = self.delimeter && !$.isArray( groups ) ? groups.split( self.delimeter ) : groups,
passes = $.inArray(category, keys) > -1;
// theClass = passes ? 'concealed' : 'filtered';
// $this.addClass( theClass );
if ( passes ) {
$filtered = $filtered.add($this);
$filtered = $filtered.add( $this );
}
});
}
@ -233,31 +227,32 @@
// category === 'all', add filtered class to everything
else {
$filtered = $items;
// $filtered = $items.addClass('filtered');
}
}
// Individually add/remove concealed/filtered classes
var concealed = 'concealed',
filtered = 'filtered';
$items.filter( $filtered ).each(function() {
var $filteredItem = $(this);
// Remove concealed if it's there
if ( $filteredItem.hasClass('concealed') ) {
$filteredItem.removeClass('concealed');
if ( $filteredItem.hasClass( concealed ) ) {
$filteredItem.removeClass( concealed );
}
// Add filtered class if it's not there
if ( !$filteredItem.hasClass('filtered') ) {
$filteredItem.addClass('filtered');
if ( !$filteredItem.hasClass( filtered ) ) {
$filteredItem.addClass( filtered );
}
});
$items.not( $filtered ).each(function() {
var $filteredItem = $(this);
// Add concealed if it's not there
if ( !$filteredItem.hasClass('concealed') ) {
$filteredItem.addClass('concealed');
if ( !$filteredItem.hasClass( concealed ) ) {
$filteredItem.addClass( concealed );
}
// Remove filtered class if it's there
if ( $filteredItem.hasClass('filtered') ) {
$filteredItem.removeClass('filtered');
if ( $filteredItem.hasClass( filtered ) ) {
$filteredItem.removeClass( filtered );
}
});
@ -289,6 +284,13 @@
element.style[self.transitionName] = self.transform + ' ' + self.speed + 'ms ' + self.easing + ', opacity ' + self.speed + 'ms ' + self.easing;
},
_setTransitions : function() {
var self = this;
self.$items.each(function() {
self._setTransition( this );
});
},
_setSequentialDelay : function( $collection ) {
var self = this;
@ -775,10 +777,16 @@
this.fire('sorted');
},
_skipTransition : function(element, property, value) {
/**
* Change a property or execute a function which will not have a transition
* @param {Element} element DOM element that won't be transitioned
* @param {string|function} property the new style property which will be set or a function which will be called
* @param {string} [value] the value that `property` should be.
*/
_skipTransition : function( element, property, value ) {
var self = this,
reflow,
durationName = self.getPrefixed('transitionDuration'),
durationName = self.transitionDuration,
duration = element.style[ durationName ];
// Set the duration to zero so it happens immediately
@ -859,7 +867,7 @@
return;
}
if (!category) {
if ( !category ) {
category = 'all';
}

Write Preview
Loading…
Cancel
Save