Skip to content

Instantly share code, notes, and snippets.

@kolber

kolber/Gruntfile.js

Created August 9, 2013 00:35
Show Gist options
  • Save kolber/6190182 to your computer and use it in GitHub Desktop.
Save kolber/6190182 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
filter.coffee
$ ->
filter_results = ->
categories = ( $(c).data 'network' for c in $ '.account-filters input:checked' )
search = $('.search-input input').val().toLowerCase()
visible = $('.profiles .profile').addClass('hidden').filter( ->
!categories.length or categories.some (c) => ~$(@).data('networks').indexOf(c)
).filter( ->
/^\s*$/.test(search) or ~$(@).text().toLowerCase().indexOf(search)
).removeClass('hidden')
$('.result-count span').html visible.length
$('.search-input input').on('keyup search', filter_results).keyup()
$('.account-filters label input').on('change', filter_results).change()
Raw
filter.js
(function() {
$(function() {
var filter_results;
filter_results = function() {
var c, categories, search, visible;
categories = (function() {
var _i, _len, _ref, _results;
_ref = $('.account-filters input:checked');
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
c = _ref[_i];
_results.push($(c).data('network'));
}
return _results;
})();
search = $('.search-input input').val().toLowerCase();
visible = $('.profiles .profile').addClass('hidden').filter(function() {
var _this = this;
return !categories.length || categories.some(function(c) {
return ~$(_this).data('networks').indexOf(c);
});
}).filter(function() {
return /^\s*$/.test(search) || ~$(this).text().toLowerCase().indexOf(search);
}).removeClass('hidden');
return $('.result-count span').html(visible.length);
};
$('.search-input input').on('keyup search', filter_results).keyup();
return $('.account-filters label input').on('change', filter_results).change();
});
}).call(this);
Raw
Gruntfile.js
/* global module:false */
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
watch: {
coffee: {
files: ['*.coffee'],
tasks: 'coffee'
}
},
coffee: {
compile: {
files: {
'filter.js': ['*.coffee'] // 1:1 compile
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-coffee');
// Default task.
grunt.registerTask('default', 'coffee');
};
Raw
index.html
<!DOCTYPE HTML>
<head>
<title>Filtering example</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="filter.js"></script>
<style> html { overflow-y: scroll; } body { max-width: 50em; margin: 0 auto; font-family: sans-serif; line-height: 1.5; } form { margin: 0; } fieldset { border: 0; padding: 0; } input[type=search] { font-size: 1.5em; margin-bottom: 0.5em; } label { padding: 0 0.5em 0 0; } p { font-weight: bold; margin: 0; } ul { margin: 0; padding: 0; } ul li { display: inline; margin-right: 0.5em; } .profiles { padding-top: 1em; } .profile { margin: 1em 0 0; padding-bottom: 1em; border-bottom: 1px solid #ccc; } .result-count { font-weight: normal; padding-bottom: 1em; border-bottom: 1px solid #ccc; } .hidden { display: none; } </style>
</head>
<body>
<h2>Filtering</h2>
<form>
<fieldset class="search-input">
<input type="search" results="5">
</fieldset>
<fieldset class="account-filters">
<label><input type="checkbox" data-network="twitter"> Twitter</label>
<label><input type="checkbox" data-network="facebook"> Facebook</label>
<label><input type="checkbox" data-network="youtube"> Youtube</label>
<label><input type="checkbox" data-network="instagram"> Instagram</label>
<label><input type="checkbox" data-network="delicious"> Delicious</label>
</fieldset>
</form>
<div class="profiles">
<p class="result-count"><span>100</span> &mdash;</p>
<div class="profile" data-networks="twitter instagram youtube">
<p>Reed Feil V</p>
<ul><li>Twitter</li><li>Instagram</li><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="youtube instagram twitter">
<p>Llewellyn Conn</p>
<ul><li>Youtube</li><li>Instagram</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="delicious">
<p>Quinn Schulist</p>
<ul><li>Delicious</li></ul>
</div>
<div class="profile" data-networks="instagram delicious">
<p>Santos Renner</p>
<ul><li>Instagram</li><li>Delicious</li></ul>
</div>
<div class="profile" data-networks="youtube facebook instagram twitter">
<p>Jimmie Ziemann</p>
<ul><li>Youtube</li><li>Facebook</li><li>Instagram</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="twitter youtube instagram facebook delicious">
<p>Dr. Moriah White</p>
<ul><li>Twitter</li><li>Youtube</li><li>Instagram</li><li>Facebook</li><li>Delicious</li></ul>
</div>
<div class="profile" data-networks="twitter instagram facebook">
<p>Jedidiah Frami</p>
<ul><li>Twitter</li><li>Instagram</li><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="twitter instagram">
<p>Margaretta Conroy</p>
<ul><li>Twitter</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="youtube facebook">
<p>Keaton Koch</p>
<ul><li>Youtube</li><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="youtube twitter instagram">
<p>Jeremie Wisozk</p>
<ul><li>Youtube</li><li>Twitter</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="facebook youtube instagram twitter">
<p>Dannie Koss Jr.</p>
<ul><li>Facebook</li><li>Youtube</li><li>Instagram</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="instagram">
<p>Drew Rice I</p>
<ul><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="twitter youtube facebook instagram">
<p>Coralie Zemlak</p>
<ul><li>Twitter</li><li>Youtube</li><li>Facebook</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="twitter instagram">
<p>Dr. Loyal Harris</p>
<ul><li>Twitter</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="twitter facebook youtube delicious">
<p>Sibyl Kulas</p>
<ul><li>Twitter</li><li>Facebook</li><li>Youtube</li><li>Delicious</li></ul>
</div>
<div class="profile" data-networks="youtube facebook twitter instagram">
<p>Julien Lowe</p>
<ul><li>Youtube</li><li>Facebook</li><li>Twitter</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="instagram facebook">
<p>Elinore Stiedemann</p>
<ul><li>Instagram</li><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="youtube instagram">
<p>Constance Connelly</p>
<ul><li>Youtube</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="instagram twitter youtube facebook">
<p>Tod Huels</p>
<ul><li>Instagram</li><li>Twitter</li><li>Youtube</li><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="youtube instagram facebook">
<p>Pansy Douglas</p>
<ul><li>Youtube</li><li>Instagram</li><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="youtube facebook delicious twitter">
<p>Jabari McGlynn III</p>
<ul><li>Youtube</li><li>Facebook</li><li>Delicious</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="youtube">
<p>Austyn Mertz DVM</p>
<ul><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="instagram youtube facebook twitter">
<p>Sabrina Kemmer</p>
<ul><li>Instagram</li><li>Youtube</li><li>Facebook</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="facebook">
<p>Berneice DuBuque</p>
<ul><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="youtube facebook instagram twitter">
<p>Celestino Orn V</p>
<ul><li>Youtube</li><li>Facebook</li><li>Instagram</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="twitter youtube instagram">
<p>Joshuah Ebert</p>
<ul><li>Twitter</li><li>Youtube</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="facebook">
<p>Miss Maybell Hickle</p>
<ul><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="youtube twitter instagram facebook">
<p>Annabelle Lehner</p>
<ul><li>Youtube</li><li>Twitter</li><li>Instagram</li><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="instagram youtube twitter">
<p>Clark Kub DVM</p>
<ul><li>Instagram</li><li>Youtube</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="twitter facebook youtube">
<p>Alvena Cruickshank</p>
<ul><li>Twitter</li><li>Facebook</li><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="facebook instagram">
<p>Clementine Hayes</p>
<ul><li>Facebook</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="instagram">
<p>Delores Torphy</p>
<ul><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="youtube">
<p>Kameron Hermann</p>
<ul><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="delicious twitter instagram facebook youtube">
<p>Reva Botsford Sr.</p>
<ul><li>Delicious</li><li>Twitter</li><li>Instagram</li><li>Facebook</li><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="twitter youtube instagram">
<p>Jedediah Fahey</p>
<ul><li>Twitter</li><li>Youtube</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="instagram twitter youtube facebook">
<p>Kaycee Cummerata</p>
<ul><li>Instagram</li><li>Twitter</li><li>Youtube</li><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="facebook twitter">
<p>Dr. Greta Rohan</p>
<ul><li>Facebook</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="youtube twitter">
<p>Devyn Rau PhD</p>
<ul><li>Youtube</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="instagram twitter">
<p>Pearlie Padberg</p>
<ul><li>Instagram</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="facebook twitter">
<p>Jerrell Mueller</p>
<ul><li>Facebook</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="instagram facebook">
<p>Claudie Gusikowski</p>
<ul><li>Instagram</li><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="twitter facebook instagram youtube">
<p>Mr. Gabriel Heathcote</p>
<ul><li>Twitter</li><li>Facebook</li><li>Instagram</li><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="facebook instagram">
<p>Miss Elfrieda Schinner</p>
<ul><li>Facebook</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="facebook twitter delicious instagram youtube">
<p>Dr. Trinity Murphy</p>
<ul><li>Facebook</li><li>Twitter</li><li>Delicious</li><li>Instagram</li><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="instagram twitter facebook youtube">
<p>Mr. Ardella Goodwin</p>
<ul><li>Instagram</li><li>Twitter</li><li>Facebook</li><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="instagram facebook twitter">
<p>Miss Doug Lemke</p>
<ul><li>Instagram</li><li>Facebook</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="youtube">
<p>Rosie Tillman</p>
<ul><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="youtube twitter">
<p>Mrs. Jacky Davis</p>
<ul><li>Youtube</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="youtube delicious">
<p>Zion Ankunding</p>
<ul><li>Youtube</li><li>Delicious</li></ul>
</div>
<div class="profile" data-networks="facebook twitter instagram">
<p>Bernard Marks V</p>
<ul><li>Facebook</li><li>Twitter</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="youtube">
<p>Brisa Lockman</p>
<ul><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="youtube instagram facebook twitter">
<p>Amya McKenzie</p>
<ul><li>Youtube</li><li>Instagram</li><li>Facebook</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="twitter">
<p>Pat Koepp</p>
<ul><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="twitter youtube instagram">
<p>Fritz Littel</p>
<ul><li>Twitter</li><li>Youtube</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="twitter youtube facebook instagram">
<p>Eliane Ziemann</p>
<ul><li>Twitter</li><li>Youtube</li><li>Facebook</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="youtube twitter">
<p>Abigayle Herzog</p>
<ul><li>Youtube</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="facebook">
<p>Brennon O'Kon</p>
<ul><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="youtube delicious facebook twitter">
<p>Ralph Weber</p>
<ul><li>Youtube</li><li>Delicious</li><li>Facebook</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="youtube twitter">
<p>Mr. Stephen Harber</p>
<ul><li>Youtube</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="facebook twitter instagram">
<p>Luther Sporer</p>
<ul><li>Facebook</li><li>Twitter</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="youtube twitter facebook instagram">
<p>Layne Schowalter</p>
<ul><li>Youtube</li><li>Twitter</li><li>Facebook</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="twitter facebook instagram youtube">
<p>Otha McGlynn</p>
<ul><li>Twitter</li><li>Facebook</li><li>Instagram</li><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="facebook twitter">
<p>Riley Kassulke DDS</p>
<ul><li>Facebook</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="twitter instagram">
<p>Dayna Rosenbaum IV</p>
<ul><li>Twitter</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="twitter youtube">
<p>Euna Larson</p>
<ul><li>Twitter</li><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="youtube facebook">
<p>Jalen Walsh</p>
<ul><li>Youtube</li><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="facebook instagram youtube twitter">
<p>Noel Turcotte</p>
<ul><li>Facebook</li><li>Instagram</li><li>Youtube</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="instagram">
<p>Dorcas Lakin IV</p>
<ul><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="facebook">
<p>Joy Leffler</p>
<ul><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="instagram twitter youtube">
<p>Ms. Roderick Crooks</p>
<ul><li>Instagram</li><li>Twitter</li><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="facebook youtube instagram">
<p>Baylee Sauer</p>
<ul><li>Facebook</li><li>Youtube</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="twitter">
<p>Angeline Legros</p>
<ul><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="delicious facebook instagram">
<p>Estel Senger</p>
<ul><li>Delicious</li><li>Facebook</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="delicious">
<p>Ms. Aaron Swift</p>
<ul><li>Delicious</li></ul>
</div>
<div class="profile" data-networks="twitter youtube facebook instagram">
<p>Dr. Christa Muller</p>
<ul><li>Twitter</li><li>Youtube</li><li>Facebook</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="youtube twitter facebook">
<p>Itzel Veum</p>
<ul><li>Youtube</li><li>Twitter</li><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="facebook instagram youtube twitter">
<p>Mrs. Leilani Kunde</p>
<ul><li>Facebook</li><li>Instagram</li><li>Youtube</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="youtube">
<p>Lew Beier</p>
<ul><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="twitter youtube">
<p>Mia Erdman</p>
<ul><li>Twitter</li><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="youtube">
<p>Jayme Ondricka</p>
<ul><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="instagram facebook twitter">
<p>Ms. Kailee Ruecker</p>
<ul><li>Instagram</li><li>Facebook</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="youtube delicious facebook twitter">
<p>Eda Herzog</p>
<ul><li>Youtube</li><li>Delicious</li><li>Facebook</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="youtube">
<p>Zoey Schuster</p>
<ul><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="facebook youtube instagram twitter">
<p>Ervin Effertz</p>
<ul><li>Facebook</li><li>Youtube</li><li>Instagram</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="instagram twitter youtube facebook">
<p>Joanny Bruen</p>
<ul><li>Instagram</li><li>Twitter</li><li>Youtube</li><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="twitter">
<p>Sally Blick</p>
<ul><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="instagram facebook delicious youtube twitter">
<p>Graham Mertz</p>
<ul><li>Instagram</li><li>Facebook</li><li>Delicious</li><li>Youtube</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="facebook instagram">
<p>Antonietta Maggio</p>
<ul><li>Facebook</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="facebook twitter youtube">
<p>Rosina Hickle</p>
<ul><li>Facebook</li><li>Twitter</li><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="youtube twitter instagram facebook">
<p>Margarette Emmerich DVM</p>
<ul><li>Youtube</li><li>Twitter</li><li>Instagram</li><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="instagram">
<p>Mrs. Quinton Ullrich</p>
<ul><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="twitter instagram facebook youtube">
<p>Mr. Ismael Brakus</p>
<ul><li>Twitter</li><li>Instagram</li><li>Facebook</li><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="twitter youtube instagram">
<p>Jairo Tillman</p>
<ul><li>Twitter</li><li>Youtube</li><li>Instagram</li></ul>
</div>
<div class="profile" data-networks="youtube instagram twitter facebook">
<p>Darion O'Keefe</p>
<ul><li>Youtube</li><li>Instagram</li><li>Twitter</li><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="facebook youtube">
<p>Etha Zemlak</p>
<ul><li>Facebook</li><li>Youtube</li></ul>
</div>
<div class="profile" data-networks="instagram facebook youtube twitter delicious">
<p>Wilfred Metz</p>
<ul><li>Instagram</li><li>Facebook</li><li>Youtube</li><li>Twitter</li><li>Delicious</li></ul>
</div>
<div class="profile" data-networks="facebook youtube instagram twitter">
<p>Emmie Osinski</p>
<ul><li>Facebook</li><li>Youtube</li><li>Instagram</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="youtube instagram facebook twitter">
<p>Jeanie Heidenreich</p>
<ul><li>Youtube</li><li>Instagram</li><li>Facebook</li><li>Twitter</li></ul>
</div>
<div class="profile" data-networks="facebook">
<p>Clementine Kling</p>
<ul><li>Facebook</li></ul>
</div>
<div class="profile" data-networks="facebook youtube">
<p>Tevin Gerhold IV</p>
<ul><li>Facebook</li><li>Youtube</li></ul>
</div>
</div>
</body>
Raw
package.json
{
"name": "thing",
"version": "0.0.0-ignored",
"engines": {
"node": "*"
},
"devDependencies": {
"grunt": "*",
"grunt-contrib-watch": "*",
"grunt-contrib-coffee": "*"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment