ERS quicksand sandbox

Testing the multi-filter capability of quicksand required by the course dashboard in ERS

by alexpop

HTML

<script src="http://razorjack.net/quicksand/scripts/assets/jquery-1.4.1-and-plugins.min.js"></script>
<script src="http://andygroff.com/jquery-debugger-debugging-plugin/andy.jqdebugger.js"></script>
Specialty: <select id='specialtyFilter'>
<option>Specialty</option>
<option value='1'>Specialty 1</option>
<option value='2'>Specialty 2</option>
<option value='3'>Specialty 3</option>
</select>
 
Credits: <select id='creditFilter'>
<option>Credits</option>
<option value='7'>CME</option>
<option value='8'>ERS</option>
<option value='9'>CNE</option> 
</select>
<hr />
<ul id='courseList'>
    <li data-id='course-1' data-specialties='1 3' data-credits='7'>
        <div class='course-title'>Radiology Course [1, 3] (CME)</div>
        <img src="http://razorjack.net/quicksand/content/images/activity-monitor.png" width="128" height="128"/>
    </li>
    <li data-id='course-2' data-specialties='1' data-credits=''>
        <div class='course-title'>Course 2 [1] ()</div>
        <img src="http://razorjack.net/quicksand/content/images/address-book.png" width="128" height="128" />
    </li>
    <li data-id='course-3' data-specialties='2 3' data-credits='7 8'>
        <div class='course-title'>Course 3 [2,3] (ERS, CME)</div >
        <img src="http://razorjack.net/quicksand/content/images/front-row.png" width="128" height="128" />
    </li>
    <li data-id='course-4' data-specialties='' data-credits='9'>
        <div class='course-title'>Course 4 [] (CNE)</div >
        <img src="http://razorjack.net/quicksand/content/images/google-pokemon.png" width="128" height="128" />
    </li>
    <li data-id='course-5' data-specialties='2' data-credits='7 8 9'>
        <div class='course-title'>Course 5 [2] (CME, ERS, CNE)</div>
        <img src="http://razorjack.net/quicksand/content/images/textedit.png" width="128" height="128" />
    </li>
</ul>

CSS

.course-title {
    padding-top: 10px;
    padding-left: 10px;
}

JavaScript

// DOMContentLoaded
$(document).ready(function() {

    var specialtyFilter = $('#specialtyFilter');
    var creditFilter = $('#creditFilter');

    var originalCollection = $('#courseList');
    var data = originalCollection.clone();
    var filteredData = null;

    // call quicksand on every change to the drop down
    specialtyFilter.add(creditFilter).change(function(e) {
        filteredData = data.find('li');

        if (specialtyFilter.val() !== 'Specialty') {
            filteredData = filteredData.filter('li[data-specialties~=' + specialtyFilter.val() + ']');
        }

        if (creditFilter.val() !== 'Credits') {
            filteredData = filteredData.filter('li[data-credits~=' + creditFilter.val() + ']');
        }

        // finally, call quicksand
        originalCollection.quicksand(filteredData, {
            duration: 600,
            easing: 'easeInOutExpo'
        });
    });
});