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

Fixing up `revealAppended`

Browse Source 
Also removed usage of `self` from adding-removing.js
pull/56/head
Glen Cheney 10 years ago
parent 36fad3200a
commit 3cec446b93
6 changed files with 72 additions and 106 deletions
Show Stats Download Patch File Download Diff File

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

@ -503,15 +503,6 @@ Shuffle.prototype = {
$.each($collection, function(i, el) {
// This works because the transition-property: transform, opacity;
el.style[ TRANSITION_DELAY ] = '0ms,' + ((i + 1) * self.sequentialFadeDelay) + 'ms';
// Set the delay back to zero after one transition
$(el).on(TRANSITIONEND + '.' + self.unique, function(evt) {
var target = evt.currentTarget;
if ( target === evt.target ) {
target.style[ TRANSITION_DELAY ] = '0ms';
$(target).off(TRANSITIONEND + '.' + self.unique);
}
});
});
},
@ -901,7 +892,7 @@ Shuffle.prototype = {
});
if ( $transitions.length > 0 ) {
if ( this.initialized ) {
if ( this.initialized && this.supported ) {
// TODO: Transitioning flag.
this._whenCollectionDone( $transitions, TRANSITIONEND, this._layoutEnd );
} else {
@ -956,7 +947,7 @@ Shuffle.prototype = {
// How many filtered elements?
this._updateItemCount();
this._layout( passed, null, true );
this._layout( passed, true );
if ( isSequential && this.supported ) {
this._setSequentialDelay( passed );
@ -970,17 +961,21 @@ Shuffle.prototype = {
* @param {ArrayLike.<Element>} $newFilteredItems Collection of elements.
* @private
*/
_revealAppended : function( $newFilteredItems ) {
_revealAppended : function( newFilteredItems ) {
var self = this;
setTimeout(function() {
$.each($newFilteredItems, function(i, el) {
$.each(newFilteredItems, function(i, el) {
self._transition({
$item: $(el),
opacity: 1,
scale: DEFAULT_SCALE
});
});
self._whenCollectionDone($(newFilteredItems), TRANSITIONEND, function() {
$(newFilteredItems).css( TRANSITION_DELAY, '0ms' );
});
}, self.revealAppendedDelay);
},
@ -1128,27 +1123,23 @@ Shuffle.prototype = {
return;
}
// Hide collection first.
this._shrink( $collection );
this._whenCollectionDone( $collection, TRANSITIONEND, function() {
var self = this;
// Remove the collection in the callback
$collection.remove();
// Update the items, layout, count and fire off `removed` event
setTimeout(function() {
self.$items = self._getItems();
self.layout();
self._updateItemCount();
self._fire( Shuffle.EventType.REMOVED, [ $collection, self ] );
this.$items = this._getItems();
this.layout();
this._updateItemCount();
this._fire( Shuffle.EventType.REMOVED, [ $collection, this ] );
// Let it get garbage collected
$collection = null;
}, 0);
// Let it get garbage collected
$collection = null;
});
// Hide collection first.
this._shrink( $collection );
// Process changes
this._processStyleQueue();
},

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

File diff suppressed because one or more lines are too long

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

@ -509,15 +509,6 @@ Shuffle.prototype = {
$.each($collection, function(i, el) {
// This works because the transition-property: transform, opacity;
el.style[ TRANSITION_DELAY ] = '0ms,' + ((i + 1) * self.sequentialFadeDelay) + 'ms';
// Set the delay back to zero after one transition
$(el).on(TRANSITIONEND + '.' + self.unique, function(evt) {
var target = evt.currentTarget;
if ( target === evt.target ) {
target.style[ TRANSITION_DELAY ] = '0ms';
$(target).off(TRANSITIONEND + '.' + self.unique);
}
});
});
},
@ -907,7 +898,7 @@ Shuffle.prototype = {
});
if ( $transitions.length > 0 ) {
if ( this.initialized ) {
if ( this.initialized && this.supported ) {
// TODO: Transitioning flag.
this._whenCollectionDone( $transitions, TRANSITIONEND, this._layoutEnd );
} else {
@ -962,7 +953,7 @@ Shuffle.prototype = {
// How many filtered elements?
this._updateItemCount();
this._layout( passed, null, true );
this._layout( passed, true );
if ( isSequential && this.supported ) {
this._setSequentialDelay( passed );
@ -976,17 +967,21 @@ Shuffle.prototype = {
* @param {ArrayLike.<Element>} $newFilteredItems Collection of elements.
* @private
*/
_revealAppended : function( $newFilteredItems ) {
_revealAppended : function( newFilteredItems ) {
var self = this;
setTimeout(function() {
$.each($newFilteredItems, function(i, el) {
$.each(newFilteredItems, function(i, el) {
self._transition({
$item: $(el),
opacity: 1,
scale: DEFAULT_SCALE
});
});
self._whenCollectionDone($(newFilteredItems), TRANSITIONEND, function() {
$(newFilteredItems).css( TRANSITION_DELAY, '0ms' );
});
}, self.revealAppendedDelay);
},
@ -1134,27 +1129,23 @@ Shuffle.prototype = {
return;
}
// Hide collection first.
this._shrink( $collection );
this._whenCollectionDone( $collection, TRANSITIONEND, function() {
var self = this;
// Remove the collection in the callback
$collection.remove();
// Update the items, layout, count and fire off `removed` event
setTimeout(function() {
self.$items = self._getItems();
self.layout();
self._updateItemCount();
self._fire( Shuffle.EventType.REMOVED, [ $collection, self ] );
this.$items = this._getItems();
this.layout();
this._updateItemCount();
this._fire( Shuffle.EventType.REMOVED, [ $collection, this ] );
// Let it get garbage collected
$collection = null;
}, 0);
// Let it get garbage collected
$collection = null;
});
// Hide collection first.
this._shrink( $collection );
// Process changes
this._processStyleQueue();
},

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

File diff suppressed because one or more lines are too long

45
js/demos/adding-removing.js
Unescape Escape View File

@ -4,20 +4,16 @@ window.Manipulator = (function($) {
var hasConsole = window.console && typeof window.console.log === 'function';
var Manipulator = function( element ) {
var self = this;
self.$el = $( element );
self.init();
this.$el = $( element );
this.init();
this.addToEnd = true;
this.sequentialDelay = true;
};
Manipulator.prototype.init = function() {
var self = this;
self.initShuffle();
self.setupEvents();
this.initShuffle();
this.setupEvents();
};
// Column width and gutter width options can be functions
@ -42,16 +38,14 @@ window.Manipulator = (function($) {
};
Manipulator.prototype.setupEvents = function() {
var self = this;
$('#add').on('click', $.proxy( self.onAddClick, self ));
$('#randomize').on('click', $.proxy( self.onRandomize, self ));
$('#remove').on('click', $.proxy( self.onRemoveClick, self ));
$('#sorter').on('change', $.proxy( self.onSortChange, self ));
$('#mode').on('change', $.proxy( self.onModeChange, self ));
$('#add').on('click', $.proxy( this.onAddClick, this ));
$('#randomize').on('click', $.proxy( this.onRandomize, this ));
$('#remove').on('click', $.proxy( this.onRemoveClick, this ));
$('#sorter').on('change', $.proxy( this.onSortChange, this ));
$('#mode').on('change', $.proxy( this.onModeChange, this ));
// Show off some shuffle events
self.$el.on('removed.shuffle', function( evt, $collection, shuffle ) {
this.$el.on('removed.shuffle', function( evt, $collection, shuffle ) {
// Make sure logs work
if ( !hasConsole ) {
@ -66,10 +60,9 @@ window.Manipulator = (function($) {
// Creating random elements. You could use an
// ajax request or clone elements instead
var self = this,
itemsToCreate = 5,
var itemsToCreate = 5,
frag = document.createDocumentFragment(),
grid = self.$el[0],
grid = this.$el[0],
items = [],
$items,
classes = ['w2', 'h2', 'w3'],
@ -96,9 +89,9 @@ window.Manipulator = (function($) {
// Tell shuffle items have been appended.
// It expects a jQuery object as the parameter.
self.shuffle.appended( $items, this.addToEnd, this.sequentialDelay );
this.shuffle.appended( $items, this.addToEnd, this.sequentialDelay );
// or
// self.$el.shuffle('appended', $items );
// this.$el.shuffle('appended', $items );
};
Manipulator.prototype.getRandomInt = function(min, max) {
@ -107,8 +100,7 @@ window.Manipulator = (function($) {
// Randomly choose some elements to remove
Manipulator.prototype.onRemoveClick = function() {
var self = this,
total = self.shuffle.visibleItems,
var total = this.shuffle.visibleItems,
numberToRemove = Math.min( 3, total ),
indexesToRemove = [],
i = 0,
@ -122,18 +114,19 @@ window.Manipulator = (function($) {
// This has the possibility to choose the same index for more than
// one in the array, meaning sometimes less than 3 will be removed
for ( ; i < numberToRemove; i++ ) {
indexesToRemove.push( self.getRandomInt( 0, total - 1 ) );
indexesToRemove.push( this.getRandomInt( 0, total - 1 ) );
}
// Make a jQuery collection out of the index selections
var self = this;
$.each(indexesToRemove, function(i, index) {
$collection = $collection.add( self.shuffle.$items.eq( index ) );
});
// Tell shuffle to remove them
self.shuffle.remove( $collection );
this.shuffle.remove( $collection );
// or
// self.$el.shuffle('remove', $collection);
// this.$el.shuffle('remove', $collection);
};
Manipulator.prototype.onRandomize = function() {

43
src/shuffle.js
Unescape Escape View File

@ -486,15 +486,6 @@ Shuffle.prototype = {
$.each($collection, function(i, el) {
// This works because the transition-property: transform, opacity;
el.style[ TRANSITION_DELAY ] = '0ms,' + ((i + 1) * self.sequentialFadeDelay) + 'ms';
// Set the delay back to zero after one transition
$(el).on(TRANSITIONEND + '.' + self.unique, function(evt) {
var target = evt.currentTarget;
if ( target === evt.target ) {
target.style[ TRANSITION_DELAY ] = '0ms';
$(target).off(TRANSITIONEND + '.' + self.unique);
}
});
});
},
@ -884,7 +875,7 @@ Shuffle.prototype = {
});
if ( $transitions.length > 0 ) {
if ( this.initialized ) {
if ( this.initialized && this.supported ) {
// TODO: Transitioning flag.
this._whenCollectionDone( $transitions, TRANSITIONEND, this._layoutEnd );
} else {
@ -939,7 +930,7 @@ Shuffle.prototype = {
// How many filtered elements?
this._updateItemCount();
this._layout( passed, null, true );
this._layout( passed, true );
if ( isSequential && this.supported ) {
this._setSequentialDelay( passed );
@ -953,17 +944,21 @@ Shuffle.prototype = {
* @param {ArrayLike.<Element>} $newFilteredItems Collection of elements.
* @private
*/
_revealAppended : function( $newFilteredItems ) {
_revealAppended : function( newFilteredItems ) {
var self = this;
setTimeout(function() {
$.each($newFilteredItems, function(i, el) {
$.each(newFilteredItems, function(i, el) {
self._transition({
$item: $(el),
opacity: 1,
scale: DEFAULT_SCALE
});
});
self._whenCollectionDone($(newFilteredItems), TRANSITIONEND, function() {
$(newFilteredItems).css( TRANSITION_DELAY, '0ms' );
});
}, self.revealAppendedDelay);
},
@ -1111,27 +1106,23 @@ Shuffle.prototype = {
return;
}
// Hide collection first.
this._shrink( $collection );
this._whenCollectionDone( $collection, TRANSITIONEND, function() {
var self = this;
// Remove the collection in the callback
$collection.remove();
// Update the items, layout, count and fire off `removed` event
setTimeout(function() {
self.$items = self._getItems();
self.layout();
self._updateItemCount();
self._fire( Shuffle.EventType.REMOVED, [ $collection, self ] );
this.$items = this._getItems();
this.layout();
this._updateItemCount();
this._fire( Shuffle.EventType.REMOVED, [ $collection, this ] );
// Let it get garbage collected
$collection = null;
}, 0);
// Let it get garbage collected
$collection = null;
});
// Hide collection first.
this._shrink( $collection );
// Process changes
this._processStyleQueue();
},

Write Preview
Loading…
Cancel
Save