Actions

Widget

Difference between revisions of "TimelineTest"

From ThornsWiki
 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<style>
 
<style>
−
.sidebar {
+
 
−
        max-width:100%;
+
.filter-navigation {
−
margin:0px auto;
+
  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 9: Line 46:
 
     text-transform: uppercase;
 
     text-transform: uppercase;
 
     font-weight: bold;
 
     font-weight: bold;
−
     font-size: .9em;
+
     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;
−
     width: 50%;
+
     letter-spacing: 0.035rem;
 
}
 
}
  
−
.filters {
+
td.Exposition {
−
            display: flex;
+
text-align: center;
−
            flex-wrap: wrap;
+
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>
 
 
−
     h3.sort-title {
+
<script>
−
         font-size: 1.15rem !important;
+
$(document).ready(function() {
−
         border-bottom: 2px solid #474440 !important;
+
  var $container = $(".grid"); // the container with all the elements to filter inside
−
         margin-top: 0px !important;
+
  var filters = {}; //should be outside the scope of the filtering function
−
color:#ccc5b9;
+
 
 +
  /* --- 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
  
−
    .grid {
+
  for (var prop in filters) {
−
        max-width: 100%;
+
    // loop through all the properties in the filter array passed to the function
−
        display: flex;
+
    var filterGroup = filters[prop]; // define variable
−
        flex-direction: row;
+
    // skip to next filter group if it doesn't have any values
−
        align-content: space-between;
+
    if (!filterGroup.length) {
−
        flex-wrap: wrap;
+
      continue; // exit loop and move on with next iteration
−
        margin: 0px auto;
 
 
     }
 
     }
−
      
+
     if (i === 0) {
−
     .grid-item {
+
      // copy to new array
−
         width:30%;
+
      comboFilters = filterGroup.slice(0);
−
margin:10px;
+
     } 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
−
/* On screens that are 992px wide or less, go from four columns to two columns */
 
−
@media screen and (max-width: 992px) {
 
−
  .button-group {
 
−
    flex: 1;
 
 
   }
 
   }
  
−
.grid-item {
+
  var comboFilter = comboFilters.join(", ");
−
        min-width:350px;
+
  return comboFilter;
−
        max-width:90%;
+
}
−
}
+
</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>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>
  
−
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
+
    <ul class="filter option-set" data-filter-group="plotgenre">
−
@media screen and (max-width: 600px) {
+
      <li style="font-family:'Metamorphous',serif;text-transform:uppercase;font-size:.9rem;letter-spacing:0.025rem; width:125px;"><b>Plot Genre</b></li>
−
.button-group {
+
      <li>Any</li>
−
    flex: 100%;
+
      <li>.Crime">Crime</li>
−
  }
+
      <li>-value=".Magic">Magic</li>
−
.grid-item {
+
      <li>Miscellaneous</li>
−
        min-width:350px;
+
      <li>-value=".Politics">Politics</li>
−
        max-width:90%;
+
−
     }
+
     </ul>
−
}
 
−
</style>
 
  
−
<!-- jPList CSS -->
+
    <ul class="filter option-set combine" data-filter-group="plottype">
−
<link rel="stylesheet" href="https://anaxasdiaries.com/jplist/jplist.styles.css" />
+
      <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</li>
 +
      <li><a href="#" data-filter-value=".MainChapter">Main Chapter</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>.Bastia">Bastia</li>
 +
      <li>Gior</li>
 +
      <li>.Hesse">Hesse</li>
 +
      <li>Hox</li>
 +
      <li>Mugroba</li>
 +
      <li>Elsewhere</li>
 +
      <li>Global</li>
 +
    </ul>
  
−
<!-- IE 10+ / Edge support via babel-polyfill: https://babeljs.io/docs/en/babel-polyfill/ -->
+
  </div>
−
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
 
  
−
<!-- jPList Library -->
+
  <div class="log"></div>
−
<script src="https://anaxasdiaries.com/jplist/jplist.min.js"></script>
 
−
<script>
 
−
jplist.init();
 
−
</script>
 
  
−
<!-- hidden sort control -->
 
−
<div
 
−
style="display:none;"
 
−
data-jplist-control="hidden-sort"
 
−
data-group="TimelineEntry"
 
−
 
−
data-path=".datesort"
 
−
data-order="desc"
 
−
data-type="text">
 
 
</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>


  • See Everything


    • Retrieved from "http://wiki.anaxasdiaries.com/index.php?title=Widget:TimelineTest&oldid=12626"