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

Added sizer for column width and a short readme.

Browse Source
pull/56/head
Glen Cheney 11 years ago
parent 91535600de
commit e0902b49f4
7 changed files with 102 additions and 26 deletions
Show Stats Download Patch File Download Diff File

4
_scss/_main.scss
Unescape Escape View File

@ -70,6 +70,10 @@ nav > a {
margin: 0 0 3px;
}
.filter__search {
}

20
_scss/shuffle-styles.scss
Unescape Escape View File

@ -8,10 +8,19 @@ $pictureGutter: 24px;
margin-top: $pictureGutter;
overflow: hidden;
&.shuffle-item {
margin-left: 0; /* shuffle items shouldn't have a left margin*/
}
&.picture-item--h2 {
height: 420px;
}
img {
width: 100%;
height: auto;
}
.picture-item__details {
}
@ -20,11 +29,8 @@ $pictureGutter: 24px;
}
}
// .item.w2 {
// width: 480px;
// }
.item.w2.h2 img {
width: 100%;
height: auto;
.shuffle--fluid .shuffle__sizer {
position: absolute;
opacity: 0;
visibility: hidden;
}

13
css/shuffle-styles.css
Unescape Escape View File

@ -5,9 +5,16 @@
height: 210px;
margin-top: 24px;
overflow: hidden; }
.picture-item.shuffle-item {
margin-left: 0;
/* shuffle items shouldn't have a left margin*/ }
.picture-item.picture-item--h2 {
height: 420px; }
.picture-item img {
width: 100%;
height: auto; }
.item.w2.h2 img {
width: 100%;
height: auto; }
.shuffle--fluid .shuffle__sizer {
position: absolute;
opacity: 0;
visibility: hidden; }

7
index.html
Unescape Escape View File

@ -48,16 +48,18 @@ extraJS: [ "homepage.js" ]
<button class="btn btn--sort" data-sort="date-created">Date Created</button>
</div>
<input class="search label" type="search" placeholder="Search..." />
<input class="filter__search js-shuffle-search" type="search" placeholder="Search..." />
</div>
</div>
<div id="grid" class="container-fluid">
<div class="container-fluid">
<div id="grid" class="row-fluid shuffle--fluid">
{% for item in site.items %}
{% assign item = item %}
{% include picture-item.html %}
{% endfor %}
<div class="span3 shuffle__sizer"></div>
<!-- <div class="item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball">
<img src="img/baseball.png" alt="" height="145" width="230" />
@ -154,6 +156,7 @@ extraJS: [ "homepage.js" ]
<a href="#">3D Render, Wallpaper</a>
</div>
</div> -->
</div>
</div>
</section>

26
js/demos/homepage.js
Unescape Escape View File

@ -10,17 +10,20 @@ var DEMO = (function($, window) {
setupSearching();
// instantiate the plugin
$('#grid').shuffle();
$grid.shuffle({
itemSelector: '.picture-item',
columnWidth: $grid.find('.shuffle__sizer')
});
// Destroy it! o_O
// $('#grid').shuffle('destroy');
// $grid.shuffle('destroy');
// You can subscribe to custom events: shrink, shrunk, filter, filtered, and sorted
$('#grid').on('shrink.shuffle shrunk.shuffle filter.shuffle filtered.shuffle sorted.shuffle layout.shuffle', function(evt, shuffle) {
if ( window.console ) {
console.log(evt.type, shuffle, this);
}
});
// $grid.on('shrink.shuffle shrunk.shuffle filter.shuffle filtered.shuffle sorted.shuffle layout.shuffle', function(evt, shuffle) {
// if ( window.console ) {
// console.log(evt.type, shuffle, this);
// }
// });
},
// Set up button clicks
@ -78,16 +81,17 @@ var DEMO = (function($, window) {
setupSearching = function() {
// Advanced filtering
$('.filter .search').on('keyup change', function() {
$('.js-shuffle-search').on('keyup change', function() {
var val = this.value.toLowerCase();
$grid.shuffle(function($el, shuffle) {
// Only search elements in the current group
if (shuffle.group !== 'all' && $.inArray(shuffle.group, $el.data('groups')) === -1) {
return false;
}
// if (shuffle.group !== 'all' && $.inArray(shuffle.group, $el.data('groups')) === -1) {
// return false;
// }
var text = $.trim($el.text()).toLowerCase();
console.log(text);
return text.indexOf(val) != -1;
});
});

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

@ -124,6 +124,7 @@
constructor: Shuffle,
// Needs refactoring!
_init : function() {
var self = this,
containerCSS,
@ -140,6 +141,23 @@
self.transform = self.getPrefixed('transform');
self.isFluid = self.columnWidth && typeof self.columnWidth === 'function';
if ( typeof self.columnWidth === 'string' ) {
self.$sizer = self.$container.find( self.columnWidth );
// Check for an element
} else if ( self.columnWidth && self.columnWidth.nodeType && self.columnWidth.nodeType === 1 ) {
// Wrap it in jQuery
self.$sizer = $( self.columnWidth );
// Check for jQuery object
} else if ( self.columnWidth && self.columnWidth.jquery ) {
self.$sizer = self.columnWidth;
}
if ( self.$sizer && self.$sizer.length ) {
self.useSizer = true;
self.sizer = self.$sizer[0];
}
// Get transitionend event name
transEndEventNames = {
@ -378,15 +396,32 @@
return this.$container.children( this.itemSelector );
},
getPreciseDimension : function( element, style ) {
var dimension;
if ( window.getComputedStyle ) {
dimension = window.getComputedStyle( element, null )[ style ];
} else {
dimension = $( element ).css( dimension );
}
return parseFloat( dimension );
},
// calculates number of columns
// i.e. this.colWidth = 200
_setColumns : function( theContainerWidth ) {
var self = this,
containerWidth = theContainerWidth || self.$container.width(),
gutter = typeof self.gutterWidth === 'function' ? self.gutterWidth( containerWidth ) : self.gutterWidth;
gutter = typeof self.gutterWidth === 'function' ?
self.gutterWidth( containerWidth ) :
self.useSizer ?
self.getPreciseDimension( self.sizer, 'marginLeft' ) :
self.gutterWidth,
calculatedColumns;
// use fluid columnWidth function if there
self.colWidth = self.isFluid ? self.columnWidth( containerWidth ) :
// columnWidth option isn't a function, are they using a sizing element?
self.useSizer ? self.getPreciseDimension( self.sizer, 'width' ) :
// if not, how about the explicitly set option?
self.columnWidth ||
// or use the size of the first item
@ -400,7 +435,13 @@
self.colWidth += gutter;
// Was flooring 4.999999999999999 to 4 :(
self.cols = Math.floor( ( containerWidth + gutter + 0.000000000001 ) / self.colWidth );
calculatedColumns = (containerWidth + gutter) / self.colWidth;
// Widths given from getComputedStyle are not precise enough...
if ( Math.ceil(calculatedColumns) - calculatedColumns < 0.01 ) {
// e.g. calculatedColumns = 11.998876
calculatedColumns = Math.ceil( calculatedColumns );
}
self.cols = Math.floor( calculatedColumns );
self.cols = Math.max( self.cols, 1 );
// This can happen when .shuffle is called on something hidden (e.g. display:none for tabs)
@ -1033,7 +1074,7 @@
// If passed a string, lets decide what to do with it. Or they've provided a function to filter by
if ( $.isFunction(opts) ) {
shuffle.shuffle.apply( shuffle, args );
shuffle.shuffle.apply( shuffle, [opts] );
// Key should be an object with propreties reversed and by.
} else if (typeof opts === 'string') {
@ -1077,6 +1118,9 @@
// Not overrideable
$.fn.shuffle.settings = {
sizer: null,
$sizer: null,
useSizer: false,
itemCss : { // default CSS for each item
position: 'absolute',
top: 0,

8
readme.md
Unescape Escape View File

@ -0,0 +1,8 @@
# Shuffle 2.0
This is a large improvement to shuffle. Most notably, the ability for [masonry](http://masonry.desandro.com) layouts. Other additions include adding/removing items, enabling/disabling, multiple instances on a page, and more!
## Todos
* Refactor `init()` function
* Remove _beforeResize and _after Resize (possibly expose events instead?)
* Make demos
Write Preview
Loading…
Cancel
Save