Made "basic" and "adding/removing" demos
Now all calls to the jQuery plugin must include the function as the
first parameter: $grid.shuffle('shuffle', 'green');
pull/56/head
Glen Cheney
11 years ago
parent
410762f8e8
commit
3aa94d53f9
@ -1,108 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
title: Shuffle Minimal Demo
|
||||
bodyClass: null
|
||||
extraJS: [ "minimal.js" ]
|
||||
---
|
||||
<style>
|
||||
#grid {
|
||||
outline: 1px solid rgb(255, 255, 255);
|
||||
outline: 1px solid rgba(255, 255, 255, .7);
|
||||
}
|
||||
|
||||
.simple-item {
|
||||
width: 33.33333%; /* 3 per row */
|
||||
}
|
||||
|
||||
.simple-item img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Spacing Exmaple */
|
||||
.spacing #grid {
|
||||
padding: 10px;
|
||||
}
|
||||
.spacing .simple-item {
|
||||
width: 306px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/* add some space to the bottom of the document */
|
||||
.spacer {
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
</style>
|
||||
<div class="container container-main">
|
||||
|
||||
<section>
|
||||
<h2>Minimal</h2>
|
||||
|
||||
<button class="js-spacing">Add some space</button>
|
||||
|
||||
<div class="filter clearfix">
|
||||
<p class="lfloat label">Filter:</p>
|
||||
<ul class="filter-options control-group lfloat">
|
||||
<li data-group="all" class="active">Most Recent</li>
|
||||
<li data-group="wallpaper">Wallpapers</li>
|
||||
<li data-group="graphics">Graphic Design</li>
|
||||
<li data-group="photography">Photography</li>
|
||||
<li data-group="3d">3D Renders</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="grid">
|
||||
<div class="simple-item" data-groups='["photography"]'>
|
||||
<img src="img/baseball.png" alt="" />
|
||||
<div><a href="img/originals/baseball.jpg">Photography</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["wallpaper", "3d"]'>
|
||||
<img src="img/tennis-ball.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
|
||||
<img src="img/imac.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["graphics"]'>
|
||||
<img src="img/master-chief.png" alt="" />
|
||||
<div><a href="#">Graphic Design</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
|
||||
<img src="img/es-blue.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["photography"]'>
|
||||
<img src="img/pumpkin.png" alt="" />
|
||||
<div><a href="#">Photography</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
|
||||
<img src="img/vestride-red.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["graphics"]'>
|
||||
<img src="img/newegg.png" alt="" />
|
||||
<div><a href="#">Motion Graphics</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["wallpaper"]'>
|
||||
<img src="img/eightfoldarc.png" alt="" />
|
||||
<div><a href="#">Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["photography"]'>
|
||||
<img src="img/ground.png" alt=""/>
|
||||
<div><a href="img/originals/baseball.jpg">Photography</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["wallpaper"]'>
|
||||
<img src="img/grassy-hills.png" alt="" />
|
||||
<div><a href="#">Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
|
||||
<img src="img/vestride-classy.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
layout: default
|
||||
title: Shuffle Adding and Removing Elements Demo
|
||||
bodyClass: null
|
||||
extraJS: [ "adding-removing.js" ]
|
||||
---
|
||||
<style>
|
||||
|
||||
/* Styles for shuffle */
|
||||
.container {
|
||||
counter-reset: boxes;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
width: 18%;
|
||||
margin-left: 2.5%;
|
||||
height: 100px;
|
||||
margin-top: 20px;
|
||||
float: left;
|
||||
background: #E74C3C;
|
||||
counter-increment: boxes;
|
||||
}
|
||||
|
||||
.box::before {
|
||||
content: counter(boxes);
|
||||
position: absolute;
|
||||
color: white;
|
||||
top: .5em;
|
||||
left: .5em;
|
||||
}
|
||||
|
||||
.box.shuffle-item,
|
||||
.box:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.w2 {
|
||||
width: 38.5%;
|
||||
}
|
||||
|
||||
.w3 {
|
||||
width: 59%;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
height: 220px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="container">
|
||||
<div class="row">
|
||||
<h1 class="span12">Adding and Removing Items</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<button id="randomize">Randomize</button>
|
||||
<button id="add">Add 5 Boxes</button>
|
||||
<button id="remove">Remove Some Boxes</button>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<div id="my-shuffle" class="items">
|
||||
<div class="box"></div>
|
||||
<div class="box h2 w2"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box w2"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<div class="row">
|
||||
<h2>Another Section</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,137 @@
|
||||
window.Manipulator = (function($) {
|
||||
'use strict';
|
||||
|
||||
var Manipulator = function( element ) {
|
||||
var self = this;
|
||||
|
||||
self.$el = $( element );
|
||||
self.init();
|
||||
};
|
||||
|
||||
Manipulator.prototype.init = function() {
|
||||
var self = this;
|
||||
|
||||
self.initShuffle();
|
||||
self.setupEvents();
|
||||
};
|
||||
|
||||
// Column width and gutter width options can be functions
|
||||
Manipulator.prototype.initShuffle = function() {
|
||||
this.$el.shuffle({
|
||||
itemSelector: '.box',
|
||||
speed: 250,
|
||||
easing: 'ease',
|
||||
columnWidth: function( containerWidth ) {
|
||||
// .box's have a width of 18%
|
||||
return 0.18 * containerWidth;
|
||||
},
|
||||
gutterWidth: function( containerWidth ) {
|
||||
// .box's have a margin-left of 2.5%
|
||||
return 0.025 * containerWidth;
|
||||
}
|
||||
});
|
||||
|
||||
// Shuffle is stored in the elements data with jQuery.
|
||||
// You can access the class instance here
|
||||
this.shuffle = this.$el.data('shuffle');
|
||||
};
|
||||
|
||||
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 ));
|
||||
};
|
||||
|
||||
Manipulator.prototype.onAddClick = function() {
|
||||
|
||||
// Creating random elements. You could use an
|
||||
// ajax request or clone elements instead
|
||||
var self = this,
|
||||
itemsToCreate = 5,
|
||||
frag = document.createDocumentFragment(),
|
||||
grid = self.$el[0],
|
||||
items = [],
|
||||
$items,
|
||||
classes = ['w2', 'h2', 'w3'],
|
||||
box, i, random, randomClass;
|
||||
|
||||
for (i = 0; i < itemsToCreate; i++) {
|
||||
random = Math.random();
|
||||
box = document.createElement('div');
|
||||
box.className = 'box';
|
||||
|
||||
// Randomly add a class
|
||||
if ( random > 0.8 ) {
|
||||
randomClass = Math.floor( Math.random() * 3 );
|
||||
box.className = box.className + ' ' + classes[ randomClass ];
|
||||
}
|
||||
items.push( box );
|
||||
frag.appendChild( box );
|
||||
}
|
||||
|
||||
grid.appendChild( frag );
|
||||
$items = $(items);
|
||||
|
||||
|
||||
// Tell shuffle items have been appended.
|
||||
// It expects a jQuery object as the parameter.
|
||||
self.shuffle.appended( $items );
|
||||
// or
|
||||
// self.$el.shuffle('appended', $items );
|
||||
};
|
||||
|
||||
Manipulator.prototype.getRandomInt = function(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
};
|
||||
|
||||
// Randomly choose some elements to remove
|
||||
Manipulator.prototype.onRemoveClick = function() {
|
||||
var self = this,
|
||||
total = self.shuffle.visibleItems,
|
||||
numberToRemove = Math.min( 3, total ),
|
||||
indexesToRemove = [],
|
||||
i = 0,
|
||||
$collection = $();
|
||||
|
||||
// None left
|
||||
if ( !total ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 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 ) );
|
||||
}
|
||||
|
||||
// Make a jQuery collection out of the index selections
|
||||
$.each(indexesToRemove, function(i, index) {
|
||||
$collection = $collection.add( self.shuffle.$items.eq( index ) );
|
||||
});
|
||||
|
||||
// Tell shuffle to remove them
|
||||
self.shuffle.remove( $collection );
|
||||
// or
|
||||
// self.$el.shuffle('remove', $collection);
|
||||
};
|
||||
|
||||
Manipulator.prototype.onRandomize = function() {
|
||||
var self = this,
|
||||
sortObj = {
|
||||
randomize: true
|
||||
};
|
||||
|
||||
self.shuffle.sort( sortObj );
|
||||
// or
|
||||
// self.$el.shuffle('sort', sortObj);
|
||||
};
|
||||
|
||||
return Manipulator;
|
||||
|
||||
}(jQuery));
|
||||
|
||||
$(document).ready(function() {
|
||||
new window.Manipulator( document.getElementById('my-shuffle') );
|
||||
});
|
||||
@ -1,41 +0,0 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
// Set up button clicks
|
||||
$('.filter-options li').on('click', function() {
|
||||
var $this = $(this),
|
||||
$grid = $('#grid');
|
||||
|
||||
// Hide current label, show current label in title
|
||||
$('.filter-options .active').removeClass('active');
|
||||
$this.addClass('active');
|
||||
|
||||
// Filter elements
|
||||
$grid.shuffle($this.data('group'));
|
||||
});
|
||||
|
||||
// instantiate the plugin
|
||||
$('#grid').shuffle();
|
||||
|
||||
|
||||
// Add space button
|
||||
$('.js-spacing').on('click', function() {
|
||||
var $body = $(document.body);
|
||||
$body.toggleClass('spacing');
|
||||
if ( $body.hasClass('spacing') ) {
|
||||
$(this).text('Remove the spacing');
|
||||
$('#grid')
|
||||
.shuffle('destroy')
|
||||
// you can hide the initial transition if you want
|
||||
.shuffle({
|
||||
showInitialTransition: false
|
||||
});
|
||||
|
||||
} else {
|
||||
$(this).text('Add some space');
|
||||
$('#grid')
|
||||
.shuffle('destroy')
|
||||
.shuffle();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue