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

Added advanced filtering option

Browse Source
pull/56/head
Glen Cheeny 12 years ago
parent 0ab1524211
commit c335c8eccd
3 changed files with 107 additions and 21 deletions
Show Stats Download Patch File Download Diff File

64
css/style.css
Unescape Escape View File

@ -186,12 +186,10 @@ header p {margin-top: 0;}
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#242424');
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
@ -230,6 +228,28 @@ header p {margin-top: 0;}
background-color: rgba(10, 170, 200, .15);
}
.filter .search {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
font-size: 16px;
margin-top: 0;
padding: 4px 0;
border-radius: 20px;
border: 1px solid gray;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.filter .search:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
/*=============================================*\
$Grid items
@ -240,10 +260,28 @@ header p {margin-top: 0;}
}
#grid .item-details {
text-align: right;
padding: 14px 20px;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
padding: 14px;
}
#grid .item-details a {
margin-top: 2px;
font-size: 12px;
float: right;
}
#grid .item-details a:before {
content: '[';
}
#grid .item-details a:after {
content: ']';
}
#grid .item:before {
content: 'Date: ' attr(data-date-created);
position: absolute;
@ -316,6 +354,11 @@ header p {margin-top: 0;}
.control-group li:last-child {
border-radius: 0 0 5px 5px;
}
.filter .search {
display: block;
width: 100%;
}
}
/* 2 widths + 1 margin - 1px + padding-left + padding-right */
@ -331,9 +374,8 @@ header p {margin-top: 0;}
}
#grid .item:before {
bottom: 14px;
top: auto;
right: 20px;
top: 14px;
right: 14px;
content: attr(data-date-created);
}

29
index.html
Unescape Escape View File

@ -43,78 +43,92 @@
<li data-sort="title">Title</li>
<li data-sort="date-created">Date Created</li>
</ul>
<input class="search label" type="search" placeholder="Search..." />
</div>
<div id="grid" class="clearfix">
<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" />
<div class="item-details">
<span class="title">Baseball</span>
<a href="img/originals/baseball.jpg">Photography</a>
</div>
</div>
<div class="item" data-groups='["wallpaper", "3d"]' data-date-created="2011-08-14" data-title="Tennis">
<img src="img/tennis-ball.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Tennis</span>
<a href="#">3D Render, Wallpaper</a>
</div>
</div>
<div class="item" data-groups='["3d", "wallpaper"]' data-date-created="2009-05-27" data-title="iMac">
<img src="img/imac.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">iMac</span>
<a href="#">3D Render, Wallpaper</a>
</div>
</div>
<div class="item" data-groups='["graphics"]' data-date-created="2012-05-14" data-title="Master Chief">
<img src="img/master-chief.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Master Chief</span>
<a href="#">Graphic Design</a>
</div>
</div>
<div class="item" data-groups='["3d", "wallpaper"]' data-date-created="2012-09-14" data-title="Eightfold">
<img src="img/es-blue.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Eightfold</span>
<a href="#">3D Render, Wallpaper</a>
</div>
</div>
<div class="item" data-groups='["photography"]' data-date-created="2012-03-14" data-title="Pumpkin">
<img src="img/pumpkin.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Pumpkin</span>
<a href="#">Photography</a>
</div>
</div>
<div class="item" data-groups='["3d", "wallpaper"]' data-date-created="2012-09-14" data-title="Vestride">
<img src="img/vestride-red.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Vestride</span>
<a href="#">3D Render, Wallpaper</a>
</div>
</div>
<div class="item" data-groups='["graphics"]' data-date-created="2012-01-12" data-title="Newegg">
<img src="img/newegg.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Newegg</span>
<a href="#">Motion Graphics</a>
</div>
</div>
<div class="item" data-groups='["wallpaper"]' data-date-created="2012-01-14" data-title="Arc">
<img src="img/eightfoldarc.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Arc</span>
<a href="#">Wallpaper</a>
</div>
</div>
<div class="item" data-groups='["photography"]' data-date-created="2011-01-14" data-title="Ground">
<img src="img/ground.png" alt="" height="145" width="230"/>
<div class="item-details">
<span class="title">Ground</span>
<a href="img/originals/baseball.jpg">Photography</a>
</div>
</div>
<div class="item" data-groups='["wallpaper"]' data-date-created="2011-12-14" data-title="Grass">
<img src="img/grassy-hills.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Grass</span>
<a href="#">Wallpaper</a>
</div>
</div>
<div class="item" data-groups='["3d", "wallpaper"]' data-date-created="2012-04-14" data-title="Vestride">
<img src="img/vestride-classy.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Vestride</span>
<a href="#">3D Render, Wallpaper</a>
</div>
</div>
@ -387,6 +401,21 @@ $('.sort-options li').on('click', function() {
// Filter elements
$grid.shuffle('sort', opts);
});
// Advanced filtering
$('.filter .search').on('keyup change', function() {
var val = this.value.toLowerCase();
$('#grid').shuffle(function($el, shuffle) {
// Only search elements in the current group
if ($.inArray(shuffle.currentGroup, $el.data('groups')) === -1) {
return false;
}
var text = $.trim($el.text()).toLowerCase();
return text.indexOf(val) != -1;
});
});
// instantiate the plugin
$('#grid').shuffle({

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

@ -16,7 +16,7 @@
* @date 9/17/12
*/
;(function($, Modernizr) {
"use strict";
'use strict';
$.fn.sorted = function(options) {
@ -81,7 +81,7 @@
// Set up css for transitions
self.$container.css('position', 'relative').get(0).style[self.transitionName] = 'height ' + self.speed + 'ms ' + self.easing;
self.$items.each(function(index) {
self.$items.each(function() {
$(this).css(self.itemCss);
// Set CSS transition for transforms and opacity
@ -114,15 +114,30 @@
if (!category) category = 'all';
// Hide/show appropriate items
if (category === 'all') {
self.$items.removeClass('concealed');
} else {
self.$items.removeClass('concealed filtered').each(function() {
// Default is to show all items
self.$items.removeClass('concealed filtered');
// Loop through each item and use provided function to determine
// whether to hide it or not.
if ($.isFunction(category)) {
self.$items.each(function() {
var $item = $(this),
keep = category($item, self);
$item.addClass(keep ? 'filtered' : 'concealed');
});
}
// Otherwise we've been passed a category to filter by
else if (category !== 'all') {
self.currentGroup = category;
self.$items.each(function() {
var keys = $(this).data('groups');
if ($.inArray(category, keys) === -1) {
$(this).addClass('concealed');
return;
} else {
$(this).addClass('filtered');
}
});
}
@ -176,7 +191,7 @@
*/
shrink : function() {
var self = this,
$concealed = self.$container.find('.concealed');
$concealed = self.$items.filter('.concealed');
// Abort if no items
if ($concealed.length === 0) {
@ -406,8 +421,8 @@
$this.data('shuffle', shuffle);
}
// If passed a string, lets decide what to do with it
if (typeof opts === 'string' && opts !== 'sort') {
// If passed a string, lets decide what to do with it. Or they've provided a function to filter by
if ($.isFunction(opts) || (typeof opts === 'string' && opts !== 'sort')) {
shuffle.shuffle(opts);
// Key should be an object with propreties reversed and by.

Write Preview
Loading…
Cancel
Save