Create a gist now

Instantly share code, notes, and snippets.

@jonwilcox /page.html
Last active Dec 18, 2015

Embed
What would you like to do?
Tag Selector Customizations
<!-- 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>
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();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment