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

Specs, refactoring, JSDoc.

Browse Source
pull/56/head
Glen Cheney 10 years ago
parent c829b3f54a
commit a40cc67a90
6 changed files with 430 additions and 102 deletions
Show Stats Download Patch File Download Diff File

111
dist/jquery.shuffle.js vendored
Unescape Escape View File

@ -274,7 +274,13 @@ Shuffle._skipTransition = function( element, callback, context ) {
*/
Shuffle.prototype._init = function() {
this._setVars();
this.$items = this._getItems();
this.sizer = this._getElementOption( this.sizer );
if ( this.sizer ) {
this.useSizer = true;
}
// Add classes and invalidate styles
this.$el.addClass( Shuffle.ClassName.BASE );
@ -330,36 +336,29 @@ Shuffle.prototype._getResizeFunction = function() {
resizeFunction;
};
Shuffle.prototype._setVars = function() {
var columnWidth = this.columnWidth;
this.$items = this._getItems();
// Column width is the default setting and sizer is not (meaning passed in)
// Assume they meant column width to be the sizer
if ( columnWidth === 0 && this.sizer !== null ) {
columnWidth = this.sizer;
}
/**
* Retrieve an element from an option.
* @param {string|jQuery|Element} option The option to check.
* @return {?Element} The plain element or null.
* @private
*/
Shuffle.prototype._getElementOption = function( option ) {
// If column width is a string, treat is as a selector and search for the
// sizer element within the outermost container
if ( typeof columnWidth === 'string' ) {
this.$sizer = this.$el.find( columnWidth );
if ( typeof option === 'string' ) {
return this.$el.find( option )[0] || null;
// Check for an element
} else if ( columnWidth && columnWidth.nodeType && columnWidth.nodeType === 1 ) {
// Wrap it in jQuery
this.$sizer = $( columnWidth );
} else if ( option && option.nodeType && option.nodeType === 1 ) {
return option;
// Check for jQuery object
} else if ( columnWidth && columnWidth.jquery ) {
this.$sizer = columnWidth;
} else if ( option && option.jquery ) {
return option[0];
}
if ( this.$sizer && this.$sizer.length ) {
this.useSizer = true;
this.sizer = this.$sizer[0];
}
return null;
};
@ -478,15 +477,31 @@ Shuffle.prototype._initItems = function( $items ) {
$items.css( this.itemCss ).data('position', {x: 0, y: 0});
};
/**
* Updates the filtered item count.
* @private
*/
Shuffle.prototype._updateItemCount = function() {
this.visibleItems = this._getFilteredItems().length;
};
/**
* Sets css transform transition on a an element.
* @param {Element} element Element to set transition on.
* @private
*/
Shuffle.prototype._setTransition = function( element ) {
element.style[ TRANSITION ] = CSS_TRANSFORM + ' ' + this.speed + 'ms ' +
this.easing + ', opacity ' + this.speed + 'ms ' + this.easing;
};
/**
* Sets css transform transition on a group of elements.
* @param {ArrayLike.<Element>} $items Elements to set transitions on.
* @private
*/
Shuffle.prototype._setTransitions = function( $items ) {
$items = $items || this.$items;
each($items, function( el ) {
@ -494,6 +509,7 @@ Shuffle.prototype._setTransitions = function( $items ) {
}, this);
};
/**
* Sets a transition delay on a collection of elements, making each delay
* greater than the last.
@ -511,19 +527,29 @@ Shuffle.prototype._setSequentialDelay = function( $collection ) {
}, this);
};
Shuffle.prototype._getItems = function() {
return this.$el.children( this.itemSelector );
};
Shuffle.prototype._getFilteredItems = function() {
return this.$items.filter('.' + Shuffle.ClassName.FILTERED);
};
Shuffle.prototype._getConcealedItems = function() {
return this.$items.filter('.' + Shuffle.ClassName.CONCEALED);
};
/**
* Returns the column size, based on column width and sizer options.
* @param {number} gutterSize Size of the gutters.
* @param {number} containerWidth Size of the parent container.
* @return {number}
* @private
*/
Shuffle.prototype._getColumnSize = function( gutterSize, containerWidth ) {
var size;
@ -557,6 +583,12 @@ Shuffle.prototype._getColumnSize = function( gutterSize, containerWidth ) {
};
/**
* Returns the gutter size, based on gutter width and sizer options.
* @param {number} containerWidth Size of the parent container.
* @return {number}
* @private
*/
Shuffle.prototype._getGutterSize = function( containerWidth ) {
var size;
if ( $.isFunction( this.gutterWidth ) ) {
@ -796,6 +828,10 @@ Shuffle.prototype._shrink = function( $collection ) {
}, this);
};
/**
* Resize handler.
* @private
*/
Shuffle.prototype._onResize = function() {
// If shuffle is disabled, destroyed, don't do anything
if ( !this.enabled || this.destroyed ) {
@ -814,6 +850,12 @@ Shuffle.prototype._onResize = function() {
};
/**
* Returns styles for either jQuery animate or transition.
* @param {Object} opts Transition options.
* @return {!Object} Transforms for transitions, left/top for animate.
* @private
*/
Shuffle.prototype._getStylesForTransition = function( opts ) {
var styles = {
opacity: opts.opacity
@ -840,7 +882,8 @@ Shuffle.prototype._getStylesForTransition = function( opts ) {
* @param {number} opts.y Translate's y.
* @param {number} opts.scale Amount to scale the item.
* @param {number} opts.opacity Opacity of the item.
* @param {Function} opts.callback complete function for the animation.
* @param {Function} opts.callback Complete function for the animation.
* @param {Function} opts.callfront Function to call before transitioning.
* @private
*/
Shuffle.prototype._transition = function( opts ) {
@ -1163,12 +1206,17 @@ Shuffle.prototype.destroy = function() {
// Reset individual item styles
this.$items
.removeAttr('style')
.removeClass('concealed filtered shuffle-item');
.removeData('position')
.removeData('scale')
.removeClass([
Shuffle.ClassName.CONCEALED,
Shuffle.ClassName.FILTERED,
Shuffle.ClassName.SHUFFLE_ITEM
].join(' '));
// Null DOM references
this.$items = null;
this.$el = null;
this.$sizer = null;
this.sizer = null;
this.element = null;
@ -1180,11 +1228,11 @@ Shuffle.prototype.destroy = function() {
// Overrideable options
Shuffle.options = {
group: ALL_ITEMS, // Filter group
group: ALL_ITEMS, // Initial filter group.
speed: 250, // Transition/animation speed (milliseconds)
easing: 'ease-out', // css easing function to use
itemSelector: '', // e.g. '.picture-item'
sizer: null, // sizer element. Can be anything columnWidth is
sizer: null, // sizer element. Use an element to determine the size of columns and gutters.
gutterWidth: 0, // a static number or function that tells the plugin how wide the gutters between columns are (in pixels)
columnWidth: 0, // a static number or function that returns a number which tells the plugin how wide the columns are (in pixels)
delimeter: null, // if your group is not json, and is comma delimeted, you could set delimeter to ','
@ -1199,7 +1247,6 @@ Shuffle.options = {
// Not overrideable
Shuffle.settings = {
$sizer: null,
useSizer: false,
itemCss : { // default CSS for each item
position: 'absolute',
@ -1221,16 +1268,14 @@ Shuffle.settings = {
$.fn.shuffle = function( opts ) {
var args = Array.prototype.slice.call( arguments, 1 );
return this.each(function() {
var $this = $( this ),
shuffle = $this.data( SHUFFLE );
var $this = $( this );
var shuffle = $this.data( SHUFFLE );
// If we don't have a stored shuffle, make a new one and save it
if ( !shuffle ) {
shuffle = new Shuffle( this, opts );
$this.data( SHUFFLE, shuffle );
}
if ( typeof opts === 'string' && shuffle[ opts ] ) {
} else if ( typeof opts === 'string' && shuffle[ opts ] ) {
shuffle[ opts ].apply( shuffle, args );
}
});

2
dist/jquery.shuffle.min.js vendored
View File

File diff suppressed because one or more lines are too long

111
dist/jquery.shuffle.modernizr.js vendored
Unescape Escape View File

@ -280,7 +280,13 @@ Shuffle._skipTransition = function( element, callback, context ) {
*/
Shuffle.prototype._init = function() {
this._setVars();
this.$items = this._getItems();
this.sizer = this._getElementOption( this.sizer );
if ( this.sizer ) {
this.useSizer = true;
}
// Add classes and invalidate styles
this.$el.addClass( Shuffle.ClassName.BASE );
@ -336,36 +342,29 @@ Shuffle.prototype._getResizeFunction = function() {
resizeFunction;
};
Shuffle.prototype._setVars = function() {
var columnWidth = this.columnWidth;
this.$items = this._getItems();
// Column width is the default setting and sizer is not (meaning passed in)
// Assume they meant column width to be the sizer
if ( columnWidth === 0 && this.sizer !== null ) {
columnWidth = this.sizer;
}
/**
* Retrieve an element from an option.
* @param {string|jQuery|Element} option The option to check.
* @return {?Element} The plain element or null.
* @private
*/
Shuffle.prototype._getElementOption = function( option ) {
// If column width is a string, treat is as a selector and search for the
// sizer element within the outermost container
if ( typeof columnWidth === 'string' ) {
this.$sizer = this.$el.find( columnWidth );
if ( typeof option === 'string' ) {
return this.$el.find( option )[0] || null;
// Check for an element
} else if ( columnWidth && columnWidth.nodeType && columnWidth.nodeType === 1 ) {
// Wrap it in jQuery
this.$sizer = $( columnWidth );
} else if ( option && option.nodeType && option.nodeType === 1 ) {
return option;
// Check for jQuery object
} else if ( columnWidth && columnWidth.jquery ) {
this.$sizer = columnWidth;
} else if ( option && option.jquery ) {
return option[0];
}
if ( this.$sizer && this.$sizer.length ) {
this.useSizer = true;
this.sizer = this.$sizer[0];
}
return null;
};
@ -484,15 +483,31 @@ Shuffle.prototype._initItems = function( $items ) {
$items.css( this.itemCss ).data('position', {x: 0, y: 0});
};
/**
* Updates the filtered item count.
* @private
*/
Shuffle.prototype._updateItemCount = function() {
this.visibleItems = this._getFilteredItems().length;
};
/**
* Sets css transform transition on a an element.
* @param {Element} element Element to set transition on.
* @private
*/
Shuffle.prototype._setTransition = function( element ) {
element.style[ TRANSITION ] = CSS_TRANSFORM + ' ' + this.speed + 'ms ' +
this.easing + ', opacity ' + this.speed + 'ms ' + this.easing;
};
/**
* Sets css transform transition on a group of elements.
* @param {ArrayLike.<Element>} $items Elements to set transitions on.
* @private
*/
Shuffle.prototype._setTransitions = function( $items ) {
$items = $items || this.$items;
each($items, function( el ) {
@ -500,6 +515,7 @@ Shuffle.prototype._setTransitions = function( $items ) {
}, this);
};
/**
* Sets a transition delay on a collection of elements, making each delay
* greater than the last.
@ -517,19 +533,29 @@ Shuffle.prototype._setSequentialDelay = function( $collection ) {
}, this);
};
Shuffle.prototype._getItems = function() {
return this.$el.children( this.itemSelector );
};
Shuffle.prototype._getFilteredItems = function() {
return this.$items.filter('.' + Shuffle.ClassName.FILTERED);
};
Shuffle.prototype._getConcealedItems = function() {
return this.$items.filter('.' + Shuffle.ClassName.CONCEALED);
};
/**
* Returns the column size, based on column width and sizer options.
* @param {number} gutterSize Size of the gutters.
* @param {number} containerWidth Size of the parent container.
* @return {number}
* @private
*/
Shuffle.prototype._getColumnSize = function( gutterSize, containerWidth ) {
var size;
@ -563,6 +589,12 @@ Shuffle.prototype._getColumnSize = function( gutterSize, containerWidth ) {
};
/**
* Returns the gutter size, based on gutter width and sizer options.
* @param {number} containerWidth Size of the parent container.
* @return {number}
* @private
*/
Shuffle.prototype._getGutterSize = function( containerWidth ) {
var size;
if ( $.isFunction( this.gutterWidth ) ) {
@ -802,6 +834,10 @@ Shuffle.prototype._shrink = function( $collection ) {
}, this);
};
/**
* Resize handler.
* @private
*/
Shuffle.prototype._onResize = function() {
// If shuffle is disabled, destroyed, don't do anything
if ( !this.enabled || this.destroyed ) {
@ -820,6 +856,12 @@ Shuffle.prototype._onResize = function() {
};
/**
* Returns styles for either jQuery animate or transition.
* @param {Object} opts Transition options.
* @return {!Object} Transforms for transitions, left/top for animate.
* @private
*/
Shuffle.prototype._getStylesForTransition = function( opts ) {
var styles = {
opacity: opts.opacity
@ -846,7 +888,8 @@ Shuffle.prototype._getStylesForTransition = function( opts ) {
* @param {number} opts.y Translate's y.
* @param {number} opts.scale Amount to scale the item.
* @param {number} opts.opacity Opacity of the item.
* @param {Function} opts.callback complete function for the animation.
* @param {Function} opts.callback Complete function for the animation.
* @param {Function} opts.callfront Function to call before transitioning.
* @private
*/
Shuffle.prototype._transition = function( opts ) {
@ -1169,12 +1212,17 @@ Shuffle.prototype.destroy = function() {
// Reset individual item styles
this.$items
.removeAttr('style')
.removeClass('concealed filtered shuffle-item');
.removeData('position')
.removeData('scale')
.removeClass([
Shuffle.ClassName.CONCEALED,
Shuffle.ClassName.FILTERED,
Shuffle.ClassName.SHUFFLE_ITEM
].join(' '));
// Null DOM references
this.$items = null;
this.$el = null;
this.$sizer = null;
this.sizer = null;
this.element = null;
@ -1186,11 +1234,11 @@ Shuffle.prototype.destroy = function() {
// Overrideable options
Shuffle.options = {
group: ALL_ITEMS, // Filter group
group: ALL_ITEMS, // Initial filter group.
speed: 250, // Transition/animation speed (milliseconds)
easing: 'ease-out', // css easing function to use
itemSelector: '', // e.g. '.picture-item'
sizer: null, // sizer element. Can be anything columnWidth is
sizer: null, // sizer element. Use an element to determine the size of columns and gutters.
gutterWidth: 0, // a static number or function that tells the plugin how wide the gutters between columns are (in pixels)
columnWidth: 0, // a static number or function that returns a number which tells the plugin how wide the columns are (in pixels)
delimeter: null, // if your group is not json, and is comma delimeted, you could set delimeter to ','
@ -1205,7 +1253,6 @@ Shuffle.options = {
// Not overrideable
Shuffle.settings = {
$sizer: null,
useSizer: false,
itemCss : { // default CSS for each item
position: 'absolute',
@ -1227,16 +1274,14 @@ Shuffle.settings = {
$.fn.shuffle = function( opts ) {
var args = Array.prototype.slice.call( arguments, 1 );
return this.each(function() {
var $this = $( this ),
shuffle = $this.data( SHUFFLE );
var $this = $( this );
var shuffle = $this.data( SHUFFLE );
// If we don't have a stored shuffle, make a new one and save it
if ( !shuffle ) {
shuffle = new Shuffle( this, opts );
$this.data( SHUFFLE, shuffle );
}
if ( typeof opts === 'string' && shuffle[ opts ] ) {
} else if ( typeof opts === 'string' && shuffle[ opts ] ) {
shuffle[ opts ].apply( shuffle, args );
}
});

2
dist/jquery.shuffle.modernizr.min.js vendored
View File

File diff suppressed because one or more lines are too long

111
src/shuffle.js
Unescape Escape View File

@ -257,7 +257,13 @@ Shuffle._skipTransition = function( element, callback, context ) {
*/
Shuffle.prototype._init = function() {
this._setVars();
this.$items = this._getItems();
this.sizer = this._getElementOption( this.sizer );
if ( this.sizer ) {
this.useSizer = true;
}
// Add classes and invalidate styles
this.$el.addClass( Shuffle.ClassName.BASE );
@ -313,36 +319,29 @@ Shuffle.prototype._getResizeFunction = function() {
resizeFunction;
};
Shuffle.prototype._setVars = function() {
var columnWidth = this.columnWidth;
this.$items = this._getItems();
// Column width is the default setting and sizer is not (meaning passed in)
// Assume they meant column width to be the sizer
if ( columnWidth === 0 && this.sizer !== null ) {
columnWidth = this.sizer;
}
/**
* Retrieve an element from an option.
* @param {string|jQuery|Element} option The option to check.
* @return {?Element} The plain element or null.
* @private
*/
Shuffle.prototype._getElementOption = function( option ) {
// If column width is a string, treat is as a selector and search for the
// sizer element within the outermost container
if ( typeof columnWidth === 'string' ) {
this.$sizer = this.$el.find( columnWidth );
if ( typeof option === 'string' ) {
return this.$el.find( option )[0] || null;
// Check for an element
} else if ( columnWidth && columnWidth.nodeType && columnWidth.nodeType === 1 ) {
// Wrap it in jQuery
this.$sizer = $( columnWidth );
} else if ( option && option.nodeType && option.nodeType === 1 ) {
return option;
// Check for jQuery object
} else if ( columnWidth && columnWidth.jquery ) {
this.$sizer = columnWidth;
} else if ( option && option.jquery ) {
return option[0];
}
if ( this.$sizer && this.$sizer.length ) {
this.useSizer = true;
this.sizer = this.$sizer[0];
}
return null;
};
@ -461,15 +460,31 @@ Shuffle.prototype._initItems = function( $items ) {
$items.css( this.itemCss ).data('position', {x: 0, y: 0});
};
/**
* Updates the filtered item count.
* @private
*/
Shuffle.prototype._updateItemCount = function() {
this.visibleItems = this._getFilteredItems().length;
};
/**
* Sets css transform transition on a an element.
* @param {Element} element Element to set transition on.
* @private
*/
Shuffle.prototype._setTransition = function( element ) {
element.style[ TRANSITION ] = CSS_TRANSFORM + ' ' + this.speed + 'ms ' +
this.easing + ', opacity ' + this.speed + 'ms ' + this.easing;
};
/**
* Sets css transform transition on a group of elements.
* @param {ArrayLike.<Element>} $items Elements to set transitions on.
* @private
*/
Shuffle.prototype._setTransitions = function( $items ) {
$items = $items || this.$items;
each($items, function( el ) {
@ -477,6 +492,7 @@ Shuffle.prototype._setTransitions = function( $items ) {
}, this);
};
/**
* Sets a transition delay on a collection of elements, making each delay
* greater than the last.
@ -494,19 +510,29 @@ Shuffle.prototype._setSequentialDelay = function( $collection ) {
}, this);
};
Shuffle.prototype._getItems = function() {
return this.$el.children( this.itemSelector );
};
Shuffle.prototype._getFilteredItems = function() {
return this.$items.filter('.' + Shuffle.ClassName.FILTERED);
};
Shuffle.prototype._getConcealedItems = function() {
return this.$items.filter('.' + Shuffle.ClassName.CONCEALED);
};
/**
* Returns the column size, based on column width and sizer options.
* @param {number} gutterSize Size of the gutters.
* @param {number} containerWidth Size of the parent container.
* @return {number}
* @private
*/
Shuffle.prototype._getColumnSize = function( gutterSize, containerWidth ) {
var size;
@ -540,6 +566,12 @@ Shuffle.prototype._getColumnSize = function( gutterSize, containerWidth ) {
};
/**
* Returns the gutter size, based on gutter width and sizer options.
* @param {number} containerWidth Size of the parent container.
* @return {number}
* @private
*/
Shuffle.prototype._getGutterSize = function( containerWidth ) {
var size;
if ( $.isFunction( this.gutterWidth ) ) {
@ -779,6 +811,10 @@ Shuffle.prototype._shrink = function( $collection ) {
}, this);
};
/**
* Resize handler.
* @private
*/
Shuffle.prototype._onResize = function() {
// If shuffle is disabled, destroyed, don't do anything
if ( !this.enabled || this.destroyed ) {
@ -797,6 +833,12 @@ Shuffle.prototype._onResize = function() {
};
/**
* Returns styles for either jQuery animate or transition.
* @param {Object} opts Transition options.
* @return {!Object} Transforms for transitions, left/top for animate.
* @private
*/
Shuffle.prototype._getStylesForTransition = function( opts ) {
var styles = {
opacity: opts.opacity
@ -823,7 +865,8 @@ Shuffle.prototype._getStylesForTransition = function( opts ) {
* @param {number} opts.y Translate's y.
* @param {number} opts.scale Amount to scale the item.
* @param {number} opts.opacity Opacity of the item.
* @param {Function} opts.callback complete function for the animation.
* @param {Function} opts.callback Complete function for the animation.
* @param {Function} opts.callfront Function to call before transitioning.
* @private
*/
Shuffle.prototype._transition = function( opts ) {
@ -1146,12 +1189,17 @@ Shuffle.prototype.destroy = function() {
// Reset individual item styles
this.$items
.removeAttr('style')
.removeClass('concealed filtered shuffle-item');
.removeData('position')
.removeData('scale')
.removeClass([
Shuffle.ClassName.CONCEALED,
Shuffle.ClassName.FILTERED,
Shuffle.ClassName.SHUFFLE_ITEM
].join(' '));
// Null DOM references
this.$items = null;
this.$el = null;
this.$sizer = null;
this.sizer = null;
this.element = null;
@ -1163,11 +1211,11 @@ Shuffle.prototype.destroy = function() {
// Overrideable options
Shuffle.options = {
group: ALL_ITEMS, // Filter group
group: ALL_ITEMS, // Initial filter group.
speed: 250, // Transition/animation speed (milliseconds)
easing: 'ease-out', // css easing function to use
itemSelector: '', // e.g. '.picture-item'
sizer: null, // sizer element. Can be anything columnWidth is
sizer: null, // sizer element. Use an element to determine the size of columns and gutters.
gutterWidth: 0, // a static number or function that tells the plugin how wide the gutters between columns are (in pixels)
columnWidth: 0, // a static number or function that returns a number which tells the plugin how wide the columns are (in pixels)
delimeter: null, // if your group is not json, and is comma delimeted, you could set delimeter to ','
@ -1182,7 +1230,6 @@ Shuffle.options = {
// Not overrideable
Shuffle.settings = {
$sizer: null,
useSizer: false,
itemCss : { // default CSS for each item
position: 'absolute',
@ -1204,16 +1251,14 @@ Shuffle.settings = {
$.fn.shuffle = function( opts ) {
var args = Array.prototype.slice.call( arguments, 1 );
return this.each(function() {
var $this = $( this ),
shuffle = $this.data( SHUFFLE );
var $this = $( this );
var shuffle = $this.data( SHUFFLE );
// If we don't have a stored shuffle, make a new one and save it
if ( !shuffle ) {
shuffle = new Shuffle( this, opts );
$this.data( SHUFFLE, shuffle );
}
if ( typeof opts === 'string' && shuffle[ opts ] ) {
} else if ( typeof opts === 'string' && shuffle[ opts ] ) {
shuffle[ opts ].apply( shuffle, args );
}
});

195
test/specs.js
Unescape Escape View File

@ -13,6 +13,10 @@ describe('Shuffle.js', function() {
afterEach(function(done) {
var shuffle = $('#regular-shuffle').data('shuffle');
if (!shuffle) {
return done();
}
function finish() {
shuffle.destroy();
done();
@ -21,7 +25,7 @@ describe('Shuffle.js', function() {
if (shuffle.initialized) {
setTimeout(finish, 0);
} else {
shuffle.$el.on('done.shuffle', finish);
shuffle.$el.one('done.shuffle', finish);
}
});
@ -269,6 +273,195 @@ describe('Shuffle.js', function() {
});
it('can remove items', function(done) {
var $shuffle = $('#regular-shuffle');
var shuffle = $shuffle.shuffle({
speed: 100
}).data('shuffle');
function first() {
var $itemsToRemove = $shuffle.children().slice(0, 2);
shuffle.remove($itemsToRemove);
$shuffle.one('removed.shuffle', second);
$shuffle.one('layout.shuffle', third);
}
function second(evt, $items, instance) {
expect(instance.visibleItems).toBe(8);
expect($items[0].id).toBe('item1');
expect($items[1].id).toBe('item2');
expect($shuffle.children().length).toBe(8);
}
function third() {
done();
}
$shuffle.one('done.shuffle', first);
});
it('can get an element option', function() {
var $shuffle = $('#regular-shuffle');
var shuffle = $shuffle.shuffle({
speed: 100
}).data('shuffle');
var $first = $shuffle.children().first();
expect(shuffle._getElementOption($first)).toEqual($first[0]);
expect(shuffle._getElementOption($first[0])).toEqual($first[0]);
expect(shuffle._getElementOption('#item1')).toEqual($first[0]);
expect(shuffle._getElementOption('#hello-world')).toEqual(null);
expect(shuffle._getElementOption(null)).toEqual(null);
expect(shuffle._getElementOption(undefined)).toEqual(null);
expect(shuffle._getElementOption(function() {
return $first;
})).toEqual(null);
});
it('can test elements against filters', function() {
var $shuffle = $('#regular-shuffle');
var shuffle = $shuffle.shuffle({
speed: 100
}).data('shuffle');
var $first = $shuffle.children().first();
expect(shuffle._doesPassFilter('design', $first)).toBe(true);
expect(shuffle._doesPassFilter('black', $first)).toBe(false);
expect(shuffle._doesPassFilter(function($el) {
expect($el).toExist();
return $el.attr('data-age') === '21';
}, $first)).toBe(true);
expect(shuffle._doesPassFilter(function($el) {
return $el.attr('data-age') === '22';
}, $first)).toBe(false);
});
it('can initialize a collection of items', function() {
var $shuffle = $('#regular-shuffle');
var shuffle = $shuffle.shuffle({
speed: 100
}).data('shuffle');
var $eleven = $('<div>', {
'class': 'item',
'data-age': 36,
'data-groups': '["ux", "black"]',
id: 'item11',
text: 'Person 11'
});
var $twelve = $('<div>', {
'class': 'item',
'data-age': 37,
'data-groups': '["strategy", "blue"]',
id: 'item12',
text: 'Person 12'
});
var $collection = $eleven.add($twelve);
expect($collection).not.toHaveClass('shuffle-item');
expect($collection).not.toHaveClass('filtered');
expect($collection).not.toHaveData('position');
shuffle._initItems($collection);
expect($collection).toHaveClass('shuffle-item');
expect($collection).toHaveClass('filtered');
expect($collection).toHaveData('position');
});
it('should reset columns', function() {
var $shuffle = $('#regular-shuffle');
var shuffle = $shuffle.shuffle({
speed: 100
}).data('shuffle');
expect(shuffle.cols).toBeGreaterThan(0);
shuffle._resetCols();
var colYs = new Array(shuffle.cols);
for (var i = 0; i < shuffle.cols; i++) {
colYs[i] = 0;
}
expect(shuffle.colYs).toEqual(colYs);
});
it('should destroy properly', function(done) {
var $shuffle = $('#regular-shuffle');
var shuffle = $shuffle.shuffle({
speed: 100
}).data('shuffle');
var $items = shuffle.$items;
function first() {
shuffle.destroy();
expect(shuffle.element).toBe(null);
expect(shuffle.$items).toBe(null);
expect(shuffle.sizer).toBe(null);
expect(shuffle.$el).toBe(null);
expect($shuffle).not.toHaveData('shuffle');
expect($shuffle).not.toHaveClass('shuffle');
expect($items).not.toHaveClass('shuffle-item');
expect($items).not.toHaveClass('filtered');
expect($items).not.toHaveClass('concealed');
expect($items).not.toHaveData('position');
expect($items).not.toHaveData('scale');
done();
}
$shuffle.one('done.shuffle', first);
});
it('should not update or shuffle when disabled or destroyed', function(done) {
var $shuffle = $('#regular-shuffle');
var shuffle = $shuffle.shuffle({
speed: 100
}).data('shuffle');
function first() {
spyOn(shuffle, 'update');
spyOn(shuffle, '_filter');
shuffle.disable();
shuffle.shuffle('design');
expect(shuffle._filter).not.toHaveBeenCalled();
expect(shuffle.update).not.toHaveBeenCalled();
shuffle.enable(false);
shuffle.destroy();
shuffle._onResize();
expect(shuffle.update).not.toHaveBeenCalled();
done();
}
$shuffle.one('done.shuffle', first);
});
it('should not update when the container is the same size', function(done) {
var $shuffle = $('#regular-shuffle');
var shuffle = $shuffle.shuffle({
speed: 100
}).data('shuffle');
function first() {
spyOn(shuffle, 'update');
shuffle._onResize();
expect(shuffle.update).not.toHaveBeenCalled();
done();
}
$shuffle.one('done.shuffle', first);
});
});

Write Preview
Loading…
Cancel
Save