Code
YUI().use('io-base', 'node', 'gallery-yuisand', function(Y) {
// Load the first set
Y.io( 'io/example6_all.html' );
current = 'all';
Y.on('io:complete', function( id, data ) {
// Add the loaded html to our page
Y.one('#sink').append( data.responseText );
// Hide the loader icon
Y.one('#loader').setStyle('display','none');
if ( id == 0 ) {
Y.one('.all').setStyle('display','block');
Y.one('#sink h2').setContent( current );
// Sorting isn't initiated until first set is loaded
sortby();
} else {
var pups = new Y.YUISand({
source : '.' + current,
destination : '.' + which,
attribute : 'data-id',
duration : 1250,
easing : Y.Easing.bounceOut
});
pups.on( 'complete', function() {
Y.one('#sink h2').setContent( which );
// Replace the class
Y.one('#sink-contain').replaceClass( current + '-col', which + '-col' );
// Set new current
current = which;
})
}
});
function sortby() {
Y.one('#sortby').on( 'change', function(e) {
// Show the loader icon
Y.one('#loader').setStyle('display','block');
which = e.currentTarget.get('value').toLowerCase();
// Grab the html corresponding to what was selected
Y.io( 'io/example6_' + which + '.html' );
})
}
})
