Difference between revisions of "TimelineTest"
From ThornsWiki
Thornswiki (talk | contribs) |
Thornswiki (talk | contribs) |
||
(36 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<style> | <style> | ||
− | . | + | |
− | + | .filter-navigation { | |
− | + | width: 100%; | |
− | + | background: #242422; | |
− | + | position: relative; | |
− | + | border-bottom: 4px solid #deb975; | |
− | + | padding: 15px 0; | |
− | + | color: #fffcf2; | |
− | + | } | |
+ | |||
+ | .filter-navigation .filters {padding:10px 45px 0 45px;} | ||
+ | .filter-navigation ul {padding:0;} | ||
+ | |||
+ | .filter-navigation li { | ||
+ | list-style-type: none; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .filter-navigation li a { | ||
+ | color: #deb975; | ||
+ | margin: 2px 1px; | ||
+ | display: inline-block; | ||
+ | background: #454545; | ||
+ | padding: 2px 5px; | ||
+ | text-decoration: none; | ||
+ | font-size:.8em; | ||
+ | letter-spacing:0.05em; | ||
+ | font-family:'Open Sans', sans-serif; | ||
+ | text-transform:uppercase; | ||
+ | |||
+ | } | ||
+ | |||
+ | .filter-navigation li a.selected { | ||
+ | color: #242422; | ||
+ | background: #deb975; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .filter-navigation ul b { | ||
+ | margin: 0 5px; | ||
+ | } | ||
table tr th.infobox-label { | table tr th.infobox-label { | ||
Line 14: | Line 46: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
font-weight: bold; | font-weight: bold; | ||
− | font-size: . | + | font-size: .75rem; |
line-height: 1.25em; | line-height: 1.25em; | ||
color: #deb975; | color: #deb975; | ||
background-color: #474440; | background-color: #474440; | ||
vertical-align: middle; | vertical-align: middle; | ||
− | + | letter-spacing: 0.035rem; | |
+ | } | ||
+ | |||
+ | td.Exposition { | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | background: #d7390c; | ||
+ | color: #FFF; | ||
+ | letter-spacing: 0.15em; | ||
+ | text-transform: uppercase; | ||
+ | height: 30px; | ||
+ | padding: 10px 0px 0px; | ||
+ | |||
+ | } | ||
+ | td.Moderated { | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | background: #c65a28; | ||
+ | color: #FFF; | ||
+ | letter-spacing: 0.15em; | ||
+ | text-transform: uppercase; | ||
+ | height: 30px; | ||
+ | padding: 10px 0px 0px; | ||
+ | } | ||
+ | td.Open { | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | background: #b7cc87; | ||
+ | color: #FFF; | ||
+ | letter-spacing: 0.15em; | ||
+ | text-transform: uppercase; | ||
+ | height: 30px; | ||
+ | padding: 10px 0px 0px; | ||
+ | } | ||
+ | td.Other { | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | background: #ccc5b9; | ||
+ | color: #FFF; | ||
+ | letter-spacing: 0.15em; | ||
+ | text-transform: uppercase; | ||
+ | height: 30px; | ||
+ | padding: 10px 0px 0px; | ||
+ | } | ||
+ | td.Event { | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | background: #ccc5b9; | ||
+ | color: #FFF; | ||
+ | letter-spacing: 0.15em; | ||
+ | text-transform: uppercase; | ||
+ | height: 30px; | ||
+ | padding: 10px 0px 0px; | ||
+ | } | ||
+ | td.Holiday { | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | background: #ccc5b9; | ||
+ | color: #FFF; | ||
+ | letter-spacing: 0.15em; | ||
+ | text-transform: uppercase; | ||
+ | height: 30px; | ||
+ | padding: 10px 0px 0px; | ||
+ | } | ||
+ | td.MainChapter { | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | background: #798fa8; | ||
+ | color: #FFF; | ||
+ | letter-spacing: 0.15em; | ||
+ | text-transform: uppercase; | ||
+ | height: 30px; | ||
+ | padding: 10px 0px 0px; | ||
} | } | ||
− | . | + | .grid { |
− | + | max-width: 100%; | |
− | + | display: flex; | |
+ | flex-flow: row wrap; | ||
+ | justify-content: space-evenly; | ||
+ | align-content: center; | ||
+ | /*margin: 0px auto;*/ | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .grid .item { | |
− | + | width: 30%; | |
− | + | margin: 1%; | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* On screens that are 992px wide or less, go from four columns to two columns */ @media screen and (max-width: 992px) { | |
− | |||
− | |||
− | + | .grid .item { | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | min-width:350px; | |
− | + | max-width:100%; | |
− | |||
} | } | ||
− | /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ | + | /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { |
− | @media screen and (max-width: 600px) { | + | |
− | + | .grid .item { | |
− | + | ||
− | + | min-width:350px; | |
− | + | max-width:100%; | |
− | + | } | |
− | |||
− | |||
} | } | ||
</style> | </style> | ||
+ | |||
<script | <script | ||
src="https://code.jquery.com/jquery-3.4.0.min.js" | src="https://code.jquery.com/jquery-3.4.0.min.js" | ||
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" | integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" | ||
crossorigin="anonymous"></script> | crossorigin="anonymous"></script> | ||
+ | |||
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> | <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> | ||
+ | |||
+ | <script> | ||
+ | $(document).ready(function() { | ||
+ | var $container = $(".grid"); // the container with all the elements to filter inside | ||
+ | var filters = {}; //should be outside the scope of the filtering function | ||
+ | /* --- read the documentation on isotope.metafizzy.co for more options --- */ | ||
+ | var $grid = $container.isotope({ | ||
+ | itemSelector: ".item", // the elements to filter | ||
+ | percentPosition: true, // true if you use percentage widths | ||
+ | getSortData: { | ||
+ | date: '.datesort', | ||
+ | /*number: '.number parseInt'*/ | ||
+ | }, | ||
+ | // sort by color then number | ||
+ | sortBy: ['date'] | ||
+ | }); | ||
− | + | // save some classes for later usage | |
− | + | /* --- | |
− | + | activeClass: adds this class to filters that are selected (active) | |
− | + | comboClass: the class that indicates that the filter group is a chain filter, i.e. if you select two filters, only items with BOTH filters will be shown | |
− | + | exclClass: the class that indicates that the filter group is an exclusion filter, i.e. you can only select one filter from that group at a time | |
− | + | resetClass: the class for the overall reset button | |
+ | --- */ | ||
+ | var activeClass = "selected", | ||
+ | comboClass = "combine", | ||
+ | exclClass = "exclusive", | ||
+ | resetClass = "reset"; | ||
− | + | var $defaults = $("a." + activeClass + '[data-filter-value=""]'); | |
− | + | $(".option-set a").click(function(e) { | |
+ | // insert your link selector where it says '.option-set a' | ||
+ | var $this = $(this); // cache the clicked link | ||
+ | var comboFilter, | ||
+ | filterAttr = "data-filter-value"; | ||
+ | if (resetClass && !$this.hasClass(resetClass)) { | ||
+ | // defining variables | ||
+ | var filterValue = $this.attr(filterAttr); // cache the filter | ||
+ | var $optionSet = $this.parents(".option-set"); // cache the parent element | ||
+ | var group = $optionSet.attr("data-filter-group"); // cache the parent filter group | ||
+ | var filterGroup = filters[group]; // make new variable for the property being filtered | ||
+ | if (!filterGroup) { | ||
+ | // if the property doesn't exist | ||
+ | filterGroup = filters[group] = []; // make a new empty array | ||
+ | } | ||
+ | var $selectAll = $optionSet.find("a[" + filterAttr + '=""]'); // cache the 'select all' button in the current group | ||
+ | $("." + resetClass).removeClass(activeClass); | ||
+ | comboFiltering( | ||
+ | $this, | ||
+ | filters, | ||
+ | filterAttr, | ||
+ | filterValue, | ||
+ | $optionSet, | ||
+ | group, | ||
+ | $selectAll, | ||
+ | activeClass, | ||
+ | comboClass, | ||
+ | exclClass | ||
+ | ); | ||
+ | comboFilter = getComboFilter(filters); // join all the filters | ||
+ | if (!comboFilter.length) $("a." + resetClass).addClass(activeClass); | ||
+ | $this.toggleClass(activeClass); | ||
+ | } else { | ||
+ | filters = {}; | ||
+ | comboFilter = ""; | ||
+ | $(".option-set a").removeClass(activeClass); | ||
+ | $(this).addClass(activeClass); | ||
+ | $defaults.addClass(activeClass); | ||
+ | } | ||
+ | $grid.isotope({ | ||
+ | filter: comboFilter | ||
+ | }); | ||
+ | e.preventDefault(); | ||
+ | }); | ||
+ | }); | ||
+ | function comboFiltering( | ||
+ | $this, | ||
+ | filters, | ||
+ | filterAttr, | ||
+ | filterValue, | ||
+ | $optionSet, | ||
+ | group, | ||
+ | $selectAll, | ||
+ | activeClass, | ||
+ | comboClass, | ||
+ | exclClass | ||
+ | ) { | ||
+ | // for non-exclusive groups of filters | ||
+ | if (!$optionSet.hasClass(exclClass)) { | ||
+ | // replace 'exclusive' with the class of your exclusive filter groups | ||
+ | // if link is a filter that isn't selected | ||
+ | if (!$this.hasClass(activeClass) && filterValue.length) { | ||
+ | filters[group].push(filterValue); // add filter to array | ||
+ | $selectAll.removeClass(activeClass); // remove the selected class from the 'select all' button | ||
+ | } else if (filterValue.length) { | ||
+ | // if link is a selected filter | ||
+ | // remove filter from array | ||
+ | // check if the filter group we're concerned with is a combination filter (.one.two instead of .one,.two) | ||
+ | if ($optionSet.hasClass(comboClass)) { | ||
+ | filters[group][0] = filters[group][0].replace(filterValue, ""); // delete the filter from the combined string | ||
+ | if (!filters[group][0].length) | ||
+ | // check if there is anything left in the string after deletion | ||
+ | filters[group].splice(0, 1); // if no, remove the empty string | ||
+ | } else { | ||
+ | // if filter group is not a combo filter | ||
+ | var curIndex = filters[group].indexOf(filterValue); // get index of filter string in array | ||
+ | if (curIndex > -1) filters[group].splice(curIndex, 1); // remove the filter | ||
+ | } | ||
+ | if (!$optionSet.find("a." + activeClass).not($this).length) | ||
+ | // if there are no remaining filters | ||
+ | $selectAll.addClass(activeClass); // add the active class to the 'select all' button | ||
+ | } else { | ||
+ | // if link is the show all button for that group | ||
+ | $optionSet.find("a." + activeClass).removeClass(activeClass); // remove the active class from all other buttons | ||
+ | filters[group] = []; // clear the array of all filters | ||
+ | } | ||
+ | // join everything to a single string for the combined filtering groups | ||
+ | if ($optionSet.hasClass(comboClass) && filters[group].length) | ||
+ | filters[group] = [filters[group].join("")]; | ||
+ | } else { | ||
+ | // for exclusive groups | ||
+ | // if link is a filter that isn't selected | ||
+ | if (!$this.hasClass(activeClass) && filterValue.length) { | ||
+ | // run a loop for all active filters | ||
+ | $optionSet.find("a." + activeClass).each(function(k, filterLink) { | ||
+ | // remove all active filters in the same group from the array | ||
+ | var removeFilter = $(filterLink).attr(filterAttr); | ||
+ | var removeIndex = filters[group].indexOf(removeFilter); | ||
+ | filters[group].splice(removeIndex, 1); | ||
+ | }); | ||
+ | filters[group].push(filterValue); // add selected filter to array | ||
+ | $optionSet.find("a." + activeClass).removeClass(activeClass); // remove the active class from all other links in the group | ||
+ | } else if (filterValue.length) { | ||
+ | // if link is a selected filter | ||
+ | // remove filter from array | ||
+ | var curIndex = filters[group].indexOf(filterValue); | ||
+ | if (curIndex > -1) filters[group].splice(curIndex, 1); | ||
+ | if (!$optionSet.find("a." + activeClass).not($this).length) | ||
+ | // if there are no remaining filters | ||
+ | $selectAll.addClass(activeClass); // add active class to 'select all' button | ||
+ | } else { | ||
+ | // if link is the show all button for that group | ||
+ | $optionSet.find("a." + activeClass).removeClass(activeClass); // remove active class from all other buttons | ||
+ | filters[group] = []; // reset all filters for this group | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | /* --- concat filters --- */ | ||
+ | function getComboFilter(filters) { | ||
+ | // pass the entire array of filters to the function | ||
+ | var i = 0; // set counter variable as zero | ||
+ | var comboFilters = []; // make a new array to save the string of filters | ||
+ | |||
+ | for (var prop in filters) { | ||
+ | // loop through all the properties in the filter array passed to the function | ||
+ | var filterGroup = filters[prop]; // define variable | ||
+ | // skip to next filter group if it doesn't have any values | ||
+ | if (!filterGroup.length) { | ||
+ | continue; // exit loop and move on with next iteration | ||
+ | } | ||
+ | if (i === 0) { | ||
+ | // copy to new array | ||
+ | comboFilters = filterGroup.slice(0); | ||
+ | } else { | ||
+ | var filterSelectors = []; | ||
+ | // copy to fresh array | ||
+ | var groupCombo = comboFilters.slice(0); | ||
+ | // merge filter Groups | ||
+ | for (var k = 0, len3 = filterGroup.length; k < len3; k++) { | ||
+ | for (var j = 0, len2 = groupCombo.length; j < len2; j++) { | ||
+ | filterSelectors.push(groupCombo[j] + filterGroup[k]); | ||
+ | } | ||
+ | } | ||
+ | // apply filter selectors to combo filters for next group | ||
+ | comboFilters = filterSelectors; | ||
+ | } | ||
+ | i++; // increment | ||
+ | } | ||
+ | |||
+ | var comboFilter = comboFilters.join(", "); | ||
+ | return comboFilter; | ||
+ | } | ||
+ | </script> | ||
+ | |||
+ | <div class="filter-navigation"> | ||
+ | <div class="filters"> | ||
+ | |||
+ | |||
+ | <li class="option-set">See Everything</li> | ||
+ | <!--li class="option-set">Newest</li--> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <ul class="filter option-set exclusive" data-filter-group="upcoming"> | |
− | + | <li style="font-family:'Metamorphous',serif;text-transform:uppercase;font-size:.9rem;letter-spacing:0.025rem; width:125px;"><b>Upcoming</b></li> | |
− | + | <li>-value="" class="selected">All</li> | |
− | + | <li>Upcoming Events Only</li> | |
− | + | </ul> | |
− | |||
− | |||
− | |||
− | + | <ul class="filter option-set exclusive" data-filter-group="year"> | |
+ | <li style="font-family:'Metamorphous',serif;text-transform:uppercase;font-size:.9rem;letter-spacing:0.025rem; width:125px;"><b>Year</b></li> | ||
+ | <li>All</li> | ||
+ | <li>2718</li> | ||
+ | <li>2719</li> | ||
+ | </ul> | ||
+ | |||
+ | <ul class="filter option-set" data-filter-group="plotgenre"> | ||
+ | <li style="font-family:'Metamorphous',serif;text-transform:uppercase;font-size:.9rem;letter-spacing:0.025rem; width:125px;"><b>Plot Genre</b></li> | ||
+ | <li>Any</li> | ||
+ | <li>Crime</li> | ||
+ | <li>Magic</li> | ||
+ | <li>Miscellaneous</li> | ||
+ | <li>Politics</li> | ||
+ | <li>Resistance</li> | ||
+ | </ul> | ||
− | // | + | <ul class="filter option-set combine" data-filter-group="plottype"> |
− | + | <li style="font-family:'Metamorphous',serif;text-transform:uppercase;font-size:.9rem;letter-spacing:0.025rem; width:125px;"><b>Plot Type</b></li> | |
− | + | <li>All</li> | |
− | + | <li>Event</li> | |
− | + | <li>Holiday</a></li> | |
− | + | <li>Main Chapter</li> | |
− | + | <li>value=".Other">Other</li> | |
− | + | </ul> | |
− | </ | + | |
+ | <ul class="filter option-set combine" data-filter-group="location"> | ||
+ | <li style="font-family:'Metamorphous',serif;text-transform:uppercase;font-size:.9rem;letter-spacing:0.025rem; width:125px;"><b>Location</b></li> | ||
+ | <li>All</li> | ||
+ | <li>Anaxas</li> | ||
+ | <li>Bastia</li> | ||
+ | <li>Gior</li> | ||
+ | <li>Hesse</li> | ||
+ | <li>value=".Hox">Hox</li> | ||
+ | <li>Mugroba</li> | ||
+ | <li>value=".Elsewhere">Elsewhere</li> | ||
+ | <li>Global</li> | ||
+ | </ul> | ||
− | < | + | </div> |
− | <div class=" | + | <div class="log"></div> |
− | <div | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> |
Latest revision as of 18:20, 19 June 2020
<style>
.filter-navigation {
width: 100%; background: #242422; position: relative; border-bottom: 4px solid #deb975; padding: 15px 0; color: #fffcf2;
}
.filter-navigation .filters {padding:10px 45px 0 45px;} .filter-navigation ul {padding:0;}
.filter-navigation li {
list-style-type: none; display: inline-block;
}
.filter-navigation li a {
color: #deb975; margin: 2px 1px; display: inline-block; background: #454545; padding: 2px 5px; text-decoration: none;
font-size:.8em; letter-spacing:0.05em; font-family:'Open Sans', sans-serif; text-transform:uppercase;
}
.filter-navigation li a.selected { color: #242422;
background: #deb975; font-weight: bold;
}
.filter-navigation ul b {
margin: 0 5px;
}
table tr th.infobox-label {
text-align: left; text-transform: uppercase; font-weight: bold; font-size: .75rem; line-height: 1.25em; color: #deb975; background-color: #474440; vertical-align: middle; letter-spacing: 0.035rem;
}
td.Exposition { text-align: center; vertical-align: middle; background: #d7390c; color: #FFF; letter-spacing: 0.15em; text-transform: uppercase; height: 30px; padding: 10px 0px 0px;
} td.Moderated { text-align: center; vertical-align: middle; background: #c65a28; color: #FFF; letter-spacing: 0.15em; text-transform: uppercase; height: 30px; padding: 10px 0px 0px; } td.Open { text-align: center; vertical-align: middle; background: #b7cc87; color: #FFF; letter-spacing: 0.15em; text-transform: uppercase; height: 30px; padding: 10px 0px 0px; } td.Other { text-align: center; vertical-align: middle; background: #ccc5b9; color: #FFF; letter-spacing: 0.15em; text-transform: uppercase; height: 30px; padding: 10px 0px 0px; } td.Event { text-align: center; vertical-align: middle; background: #ccc5b9; color: #FFF; letter-spacing: 0.15em; text-transform: uppercase; height: 30px; padding: 10px 0px 0px; } td.Holiday { text-align: center; vertical-align: middle; background: #ccc5b9; color: #FFF; letter-spacing: 0.15em; text-transform: uppercase; height: 30px; padding: 10px 0px 0px; } td.MainChapter { text-align: center; vertical-align: middle; background: #798fa8; color: #FFF; letter-spacing: 0.15em; text-transform: uppercase; height: 30px; padding: 10px 0px 0px; }
.grid { max-width: 100%;
display: flex; flex-flow: row wrap; justify-content: space-evenly; align-content: center; /*margin: 0px auto;*/
}
.grid .item {
width: 30%; margin: 1%;
}
/* On screens that are 992px wide or less, go from four columns to two columns */ @media screen and (max-width: 992px) {
.grid .item {
min-width:350px; max-width:100%;
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) {
.grid .item {
min-width:350px; max-width:100%; }
}
</style>
<script
src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script> $(document).ready(function() {
var $container = $(".grid"); // the container with all the elements to filter inside var filters = {}; //should be outside the scope of the filtering function
/* --- read the documentation on isotope.metafizzy.co for more options --- */ var $grid = $container.isotope({ itemSelector: ".item", // the elements to filter percentPosition: true, // true if you use percentage widths
getSortData: {
date: '.datesort', /*number: '.number parseInt'*/ }, // sort by color then number
sortBy: ['date']
});
// save some classes for later usage /* --- activeClass: adds this class to filters that are selected (active) comboClass: the class that indicates that the filter group is a chain filter, i.e. if you select two filters, only items with BOTH filters will be shown exclClass: the class that indicates that the filter group is an exclusion filter, i.e. you can only select one filter from that group at a time resetClass: the class for the overall reset button --- */ var activeClass = "selected", comboClass = "combine", exclClass = "exclusive", resetClass = "reset";
var $defaults = $("a." + activeClass + '[data-filter-value=""]'); $(".option-set a").click(function(e) { // insert your link selector where it says '.option-set a' var $this = $(this); // cache the clicked link var comboFilter, filterAttr = "data-filter-value"; if (resetClass && !$this.hasClass(resetClass)) { // defining variables var filterValue = $this.attr(filterAttr); // cache the filter var $optionSet = $this.parents(".option-set"); // cache the parent element var group = $optionSet.attr("data-filter-group"); // cache the parent filter group var filterGroup = filters[group]; // make new variable for the property being filtered if (!filterGroup) { // if the property doesn't exist filterGroup = filters[group] = []; // make a new empty array } var $selectAll = $optionSet.find("a[" + filterAttr + '=""]'); // cache the 'select all' button in the current group $("." + resetClass).removeClass(activeClass); comboFiltering( $this, filters, filterAttr, filterValue, $optionSet, group, $selectAll, activeClass, comboClass, exclClass ); comboFilter = getComboFilter(filters); // join all the filters if (!comboFilter.length) $("a." + resetClass).addClass(activeClass); $this.toggleClass(activeClass); } else { filters = {}; comboFilter = ""; $(".option-set a").removeClass(activeClass); $(this).addClass(activeClass); $defaults.addClass(activeClass); } $grid.isotope({ filter: comboFilter }); e.preventDefault(); });
}); function comboFiltering(
$this, filters, filterAttr, filterValue, $optionSet, group, $selectAll, activeClass, comboClass, exclClass
) {
// for non-exclusive groups of filters if (!$optionSet.hasClass(exclClass)) { // replace 'exclusive' with the class of your exclusive filter groups // if link is a filter that isn't selected if (!$this.hasClass(activeClass) && filterValue.length) { filters[group].push(filterValue); // add filter to array $selectAll.removeClass(activeClass); // remove the selected class from the 'select all' button } else if (filterValue.length) { // if link is a selected filter // remove filter from array // check if the filter group we're concerned with is a combination filter (.one.two instead of .one,.two) if ($optionSet.hasClass(comboClass)) { filters[group][0] = filters[group][0].replace(filterValue, ""); // delete the filter from the combined string if (!filters[group][0].length) // check if there is anything left in the string after deletion filters[group].splice(0, 1); // if no, remove the empty string } else { // if filter group is not a combo filter var curIndex = filters[group].indexOf(filterValue); // get index of filter string in array if (curIndex > -1) filters[group].splice(curIndex, 1); // remove the filter } if (!$optionSet.find("a." + activeClass).not($this).length) // if there are no remaining filters $selectAll.addClass(activeClass); // add the active class to the 'select all' button } else { // if link is the show all button for that group $optionSet.find("a." + activeClass).removeClass(activeClass); // remove the active class from all other buttons filters[group] = []; // clear the array of all filters } // join everything to a single string for the combined filtering groups if ($optionSet.hasClass(comboClass) && filters[group].length) filters[group] = [filters[group].join("")]; } else { // for exclusive groups // if link is a filter that isn't selected if (!$this.hasClass(activeClass) && filterValue.length) { // run a loop for all active filters $optionSet.find("a." + activeClass).each(function(k, filterLink) { // remove all active filters in the same group from the array var removeFilter = $(filterLink).attr(filterAttr); var removeIndex = filters[group].indexOf(removeFilter); filters[group].splice(removeIndex, 1); }); filters[group].push(filterValue); // add selected filter to array $optionSet.find("a." + activeClass).removeClass(activeClass); // remove the active class from all other links in the group } else if (filterValue.length) { // if link is a selected filter // remove filter from array var curIndex = filters[group].indexOf(filterValue); if (curIndex > -1) filters[group].splice(curIndex, 1); if (!$optionSet.find("a." + activeClass).not($this).length) // if there are no remaining filters $selectAll.addClass(activeClass); // add active class to 'select all' button } else { // if link is the show all button for that group $optionSet.find("a." + activeClass).removeClass(activeClass); // remove active class from all other buttons filters[group] = []; // reset all filters for this group } }
} /* --- concat filters --- */ function getComboFilter(filters) {
// pass the entire array of filters to the function var i = 0; // set counter variable as zero var comboFilters = []; // make a new array to save the string of filters
for (var prop in filters) { // loop through all the properties in the filter array passed to the function var filterGroup = filters[prop]; // define variable // skip to next filter group if it doesn't have any values if (!filterGroup.length) { continue; // exit loop and move on with next iteration } if (i === 0) { // copy to new array comboFilters = filterGroup.slice(0); } else { var filterSelectors = []; // copy to fresh array var groupCombo = comboFilters.slice(0); // merge filter Groups for (var k = 0, len3 = filterGroup.length; k < len3; k++) { for (var j = 0, len2 = groupCombo.length; j < len2; j++) { filterSelectors.push(groupCombo[j] + filterGroup[k]); } } // apply filter selectors to combo filters for next group comboFilters = filterSelectors; } i++; // increment }
var comboFilter = comboFilters.join(", "); return comboFilter;
} </script>