Tag Selector Customizations

page.html

<!-- Example widget with class added to change tag selector to radio-button-behavior -->
<widget type="profiles">
    <arg id="type">Faculty and Staff</arg>
    <arg id="show_tags">true</arg>
    <arg id="class">radio-selector</arg>
</widget>

<!-- Example widget with class added to change the tag selector label to "Departments" -->
<widget type="profiles">
    <arg id="type">Faculty and Staff</arg>
    <arg id="show_tags">true</arg>
    <arg id="class">selector-label-Departments</arg>
</widget>

<!-- Example widget with class added to exclude the tag "Staff" from appearing in the tag selector -->
<widget type="profiles">
    <arg id="type">Faculty and Staff</arg>
    <arg id="show_tags">true</arg>
    <arg id="class">selector-exclude-Staff</arg>
</widget>

<!-- Example widget with class added to create a tag filter -->
<widget type="blurbs">
    <arg id="type">Student Organizations</arg>
    <arg id="format"><div class="lw_blurbs_body">{body}</div><span class="lw_blurbs_tags" style="display:none;">{tags}</span></arg>
    <arg id="show_tags">true</arg>
    <arg id="class">filter-selector</arg>
</widget>

<!-- Classes can be combined for mutiple customizations -->
<!-- Example widget with class added for three options -->
<widget type="profiles">
    <arg id="type">Faculty and Staff</arg>
    <arg id="show_tags">true</arg>
    <arg id="class">radio-selector selector-label-Departments selector-exclude-Staff</arg>
</widget>

scripts.js

function tagSelectors() {
    // Make tag selector function like radio buttons rather than checkboxes (only one selection at a time)
    $('.lw_widget.radio-selector').next('.lw_widget_tags').find('a').click(function(){                              // When a tag selector link is clicked
		$(this).parents('.lw_widget_tags').find('.lw_widget_tag_selected').removeClass('lw_widget_tag_selected');   // remove the selected class from any other tag selector links
    });
    // Change the label on the tag selector to a different string
    $('.lw_widget[class*=selector-label-]').each(function() {                   // For widgets that have a class containing "selector-label-"
        var selectorLabel = '';
        var classes = $(this).attr('class').split(' ');                         // get all of the classes
        for (var i = 0; i < classes.length; i++) {                              // loop through them
            var matches = /^selector\-label\-(.+)/.exec(classes[i]);            // see if the class name contains "selector-label-"
			if (matches != null) {                                              // if so
				selectorLabel = matches[1].replace("_", " ");                   // set selectorLabel to the rest of the class name string (replacing underscores with spaces)
			}
		};
		$(this).next('.lw_widget_tags').each(function(){                        // Then find the following tag selector element
            $(this).find('h3').html(selectorLabel);                             // Replace its H3 with the new label
            $(this).find('.lw_widget_all_tags').html('All ' + selectorLabel);   // Replace its "All tags" link with the new label
        });
    });
    // Exclude certain tags from appearing in the tag selector
	$('.lw_widget[class*=selector-exclude-]').each(function() {                        // For widgets that have a class containing "selector-exclude-"
        var excludeTag = '';
        var classes = $(this).attr('class').split(' ');                                 // get all of the classes
		for (var i = 0; i < classes.length; i++) {                                      // loop through them
			var matches = /^selector\-exclude\-(.+)/.exec(classes[i]);                  // see if the class name contains "selector-exclude-"
			if (matches != null) {                                                      // if so
				excludeTag = matches[1].replace("_", " ").toLowerCase();                // set excludeTag to the rest of the class name string (replacing underscores with spaces)
			}
			$(this).next('.lw_widget_tags').find('.lw_widget_tag a').each(function(){   // Look at each link in the corresponding tag selector
				if ($(this).html().toLowerCase() == excludeTag) {                       // If the link text matches excludeTag
					$(this).parent('.lw_widget_tag').hide();                            // Hide that link
				}
            });
		};
    });
    // Make tag selector into a tag filter. Only items matching all tags will be shown
    $('.filter-selector').prepend('<div class="emptyMessage"></div>');                                                  // create an element to hold a message in case of no matches
    $('.filter-selector').next('.lw_widget_tags').find('.lw_widget_tag a').click(function(e){                          // When tag selector links in widgets with class "filter-selector" are clicked
        e.preventDefault();                                                                                             // prevent their default behavior
        e.stopPropagation();
        $(this).toggleClass('lw_widget_tag_selected');                                                                  // Add or remove the selected class as appropriate
        var selectedTags = [];                                                                                          // create an array to store selected tags
        $('.lw_widget_tag_selected').each(function(){
            selectedTags.push($(this).text());                                                                          // Push the text of each selected tag into the array
        });
        if (selectedTags.length > 0) {                                                                                  // If any tags have been selected
            $('.lw_widget_all_tags').removeClass('lw_widget_all_tags_selected');                                        // remove the selected class from the "all tags" link
        } else {                                                                                                        // otherwise
            $('.lw_widget_all_tags').addClass('lw_widget_all_tags_selected');                                           // add it
        }
        var matches = 0;                                                                                                 // create a matches counter
        $(this).parents('.lw_widget_tags').prev('.lw_widget').find('li[class^="lw_item_"]').each(function(){           // find each item in the accompanying widget
            var tags = [];                                                                                              // create an array to store its tags
            $(this).find('.lw_item_tags a').each(function(){
                tags.push($(this).text());                                                                              // push the text of each item's tags into the array
            });
            var match = true;                                                                                           // Assume the item matches all selected tags
            for (i=0;i<selectedTags.length;i++) {                                                                      // Compare each selected tag
                if ($.inArray(selectedTags[i], tags) == -1) {                                                          // If it is not in the current tags array
                    match = false;                                                                                      // this item does not match
                    break;                                                                                              // so stop looking
                }
            }
            if (match) {                                                                                                // if it does match
                $(this).fadeIn();                                                                                       // show the item
                matches += 1;                                                                                           // and increment the matches counter
            } else {                                                                                                    // otherwise
                $(this).fadeOut();                                                                                      // hide it
            }
        })
        if (matches > 0) {                                                                                              // If there are any matches
            $(this).parents('.lw_widget_tags').prev('.lw_widget').find('.emptyMessage').text('').fadeOut();            // clear the emptyMessage div
        } else {                                                                                                        // otherwise
            $(this).parents('.lw_widget_tags').prev('.lw_widget').find('.emptyMessage').text('No matches.').fadeIn();  // provide a no matches message
        }
    });
    $('.filter-selector').next('.lw_widget_tags').find('.lw_widget_all_tags').click(function(e){                       // When the "all tags" link in widgets with class if "filter-selector" is clicked
        e.preventDefault();                                                                                             // prevent its default behavior
        e.stopPropagation();
        $(this).addClass('lw_widget_all_tags_selected');                                                                // add the selected class
        $(this).parents('.lw_widget_tags').prev('.lw_widget').find('li[class^="lw_item_"]').fadeIn();                  // Show all items in accompanying widget
        $(this).siblings('.lw_widget_tag').find('a').removeClass('lw_widget_tag_selected');                            // remove the selected class from other tag selector links
    });
};

$(document).ready(function() {
    tagSelectors();
});