People Sorting "plugin", before and After

after.js

var toSlug = function(Text) {
        return Text
            .replace(/ /g,'-')
            .replace(/\&/g,'+');
    },
    unSlug = function(Slug) {
        return Slug
            .replace(/\-/g,' ')
            .replace(/\+/g,'&');
    };

(function() {
    'use strict';

    // Add each person to an object, with a key for their name
    var keys = {},
        alpha = {},
        data = $('.person').sort(function(a,b) {
            var upA = $(a).find('.name').text().toUpperCase();
            var upB = $(b).find('.name').text().toUpperCase();
            return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
        });

    data.each(function() {
        var person = $(this),
            name = person.find('.name').text(),
            nameLetter = name[0],
            sortKeys = person.data('sort-key').split('|');

        // Add all sorting-keys and populate arrays
        for(var i=0; i<sortKeys.length; i++) {
            var sortKey = sortKeys[i];

            // If the sortKey isn't created in the keys object,
            // or the letter isn't created in the sortKey object within the key object
            if(!(sortKey in keys)) {
                keys[sortKey] = {};
                keys[sortKey][nameLetter] = [person];
            } else {
                if(!(nameLetter in keys[sortKey])) {
                    keys[sortKey][nameLetter] = [person];
                } else {
                    // otherwise just add it.
                    keys[sortKey][nameLetter].push(person);
                }
            }
        }

        // Add all letters and populate arrays
        if(!(nameLetter in alpha)) {
            alpha[nameLetter] = [person];
        } else {
            alpha[nameLetter].push(person);
        }

    });

    // then tack that onto the keys array.
    keys.all = alpha;

    // Slug the nav hash's
    $('.peopleSort-nav').find('a').each(function() {
        var $this = $(this),
            url = $this.attr('href');

        $this.attr('href',toSlug(url));
    });

    // Attach the click handlers
    $('.peopleSort-nav').on('click','a', function(e) {
        e.preventDefault();
        var a = $(this),
            key = (a.data('sort-all') !== undefined) ? 'all' : unSlug(a.text()),
            container = $('.peopleSort');

        if(key==='all' || key===undefined || key===null) {
            container.peopleSort();
        } else {
            container.peopleSort(key);
        }
    });

    $('.directory-nav').on('click', '.disabled', function(e) {
        e.preventDefault();
    });

    $('.person').on('click', 'a.name', function(e) {
        e.preventDefault();

        var link = $(this),
            person = link.closest('.person');

        if(link.hasClass('open')) {
            person.find('.person-info').slideUp();
            link.removeClass('open');
        } else {
            person.find('.person-info').slideDown();
            link.addClass('open');
        }
    });

    $.fn.peopleSortData = keys;
})();

$.fn.peopleSort = function(sortKey) {
    'use strict';

    var alphaSort = function(obj, sortedBy) {
            var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
                i,
                navBar  = $('.directory-nav'),
                titleText = (sortedBy.toUpperCase() === 'ALL') ? 'BCS Full Directory' : 'BCS ' + sortedBy;

            $('.person').hide().appendTo(sortContainer);
            $('.letter-container').remove();
            navBar.find('a').remove();

            for(var letter in obj[sortedBy]) {
                var current = letterContainer(letter),
                    sortObj = obj[sortedBy],
                    l = '';

                while(letter !== letters[0] && letters.length > 0) {
                    l = letters.shift();
                    navBar.append('<a href="#'+l+'" class="disabled">'+l+'</a> ');
                }

                l = letters.shift();
                navBar.append('<a href="#'+l+'">'+l+'</a> ');

                for(i=0; i<sortObj[letter].length; i++) {
                    sortObj[letter][i].show().appendTo(current);
                }

                current.appendTo(sortContainer);
            }

            for(i=0; i<letters.length; i++) {
                navBar.append('<a href="#'+letters[i]+'" class="disabled">'+letters[i]+'</a> ');
            }

            sortContainer.closest('.peopleSort').find('h1.page-title').text(titleText);
        },

        letterContainer = function(letter) {
            var el = $('<section id="'+letter+'" class="letter-container"></section>');
            el.append('<h2>'+letter+'</h2>');
            return el;
        },

        data = $.fn.peopleSortData, // Get the keys and people
        sortContainer = $(this).find('.peopleSort-container');

    if(sortKey===undefined) {
        // if there's no sort key, sort aphabetically
        alphaSort(data, 'all');
    } else {
        // Otherwise, hide all that aren't of the "sortKey" type
        alphaSort(data, sortKey);
    }

    return $(this);

};

//foundation init
$(document).foundation();

var sortby = (document.location.hash==='') ? undefined : unSlug(document.location.hash.split('#')[1]);

$('.peopleSort').peopleSort(sortby);

before.js

(function() {
    'use strict';

    // Add each person to an object, with a key for their name
    var keys = {},
        alpha = {},
        data = $('.person').sort(function(a,b) {
            var upA = $(a).find('.name').text().toUpperCase();
            var upB = $(b).find('.name').text().toUpperCase();
            return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
        });

    data.each(function() {
        var person = $(this),
            name = person.find('.name').text(),
            nameLetter = name[0],
            sortKeys = person.data('sort-key').split('|');

        // Add all sorting-keys and populate arrays
        for(var i=0; i<sortKeys.length; i++) {
            var sortKey = sortKeys[i];

            // If the sortKey isn't created in the keys object,
            // or the letter isn't created in the sortKey object within the key object
            if(!(sortKey in keys)) {
                keys[sortKey] = {};
                keys[sortKey][nameLetter] = [person];
            } else {
                if(!(nameLetter in keys[sortKey])) {
                    keys[sortKey][nameLetter] = [person];
                } else {
                    // otherwise just add it.
                    keys[sortKey][nameLetter].push(person);
                }
            }
        }

        // Add all letters and populate arrays
        if(!(nameLetter in alpha)) {
            alpha[nameLetter] = [person];
        } else {
            alpha[nameLetter].push(person);
        }

    });

    // then tack that onto the keys array.
    keys.all = alpha;

    // Slug the nav hash's
    $('.peopleSort-nav').find('a').each(function() {
        var $this = $(this),
            url = $this.attr('href');

        $this.attr('href',url);
    });

    // Attach the click handlers
    $('.peopleSort-nav').on('click','a', function(e) {
        e.preventDefault();
        var a = $(this),
            key = (a.data('sort-all') !== undefined) ? 'all' : a.text(),
            container = $('.peopleSort');

        if(key==='all' || key===undefined || key===null) {
            container.peopleSort();
        } else {
            container.peopleSort(key);
        }
    });

    $('.directory-nav').on('click', '.disabled', function(e) {
        e.preventDefault();
    });

    $('.person').on('click', 'a.name', function(e) {
        e.preventDefault();

        var link = $(this),
            person = link.closest('.person');

        if(link.hasClass('open')) {
            person.find('.person-info').slideUp();
            link.removeClass('open');
        } else {
            person.find('.person-info').slideDown();
            link.addClass('open');
        }
    });

    $.fn.peopleSortData = keys;
})();

$.fn.peopleSort = function(sortKey) {
    'use strict';

    var alphaSort = function(obj, sortedBy) {
            var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
                i,
                navBar  = $('.directory-nav'),
                titleText = (sortedBy.toUpperCase() === 'ALL') ? 'BCS Full Directory' : 'BCS ' + sortedBy;

            $('.person').hide().appendTo(sortContainer);
            $('.letter-container').remove();
            navBar.find('a').remove();

            for(var letter in obj[sortedBy]) {
                var current = letterContainer(letter),
                    sortObj = obj[sortedBy],
                    l = '';

                while(letter !== letters[0] && letters.length > 0) {
                    l = letters.shift();
                    navBar.append('<a href="#'+l+'" class="disabled">'+l+'</a> ');
                }

                l = letters.shift();
                navBar.append('<a href="#'+l+'">'+l+'</a> ');

                for(i=0; i<sortObj[letter].length; i++) {
                    sortObj[letter][i].show().appendTo(current);
                }

                current.appendTo(sortContainer);
            }

            for(i=0; i<letters.length; i++) {
                navBar.append('<a href="#'+letters[i]+'" class="disabled">'+letters[i]+'</a> ');
            }

            sortContainer.closest('.peopleSort').find('h1.page-title').text(titleText);
        },

        letterContainer = function(letter) {
            var el = $('<section id="'+letter+'" class="letter-container"></section>');
            el.append('<h2>'+letter+'</h2>');
            return el;
        },

        data = $.fn.peopleSortData, // Get the keys and people
        sortContainer = $(this).find('.peopleSort-container');

    if(sortKey===undefined) {
        // if there's no sort key, sort aphabetically
        alphaSort(data, 'all');
    } else {
        // Otherwise, hide all that aren't of the "sortKey" type
        alphaSort(data, sortKey);
    }

    return $(this);

};

//foundation init
$(document).foundation();

$('.peopleSort').peopleSort();