Filtering and Sorting

To use the built in filtering and sorting, you have to specify a selectorClass in the options. Create clickable input (or input that responds to your specified selectorEventListener]) and give it the class of selectorClass. To filter and/or sort, you will need to add data-filter and/or data-sort attributes to the selector input.

If you want your selectors to respond to an event other than "click", assign a selectorEventListener.

To revert to the boxes' original state, filter, sort, and order on the value ""

data-filter="" will show all of the boxes, data-sort="" will return the boxes to their original order, and data-sort-order="" will render the boxes in ascending order.

Note: I should remove one of these? I'm not sure.

Filtering

Add the data-filter attribute to the selector element and assign it a value. Give a class of that value to every box you want rendered in that filtration.

<button class="selector" data-filter="">all</button>
<button class="selector" data-filter="letter-r">Has the letter "R"</button>
<button class="selector" data-filter="letter-l">Has the letter "L"</button>
<button class="selector" data-filter="letter-n">Has the letter "N"</button>

<div id="container">
  <div class="box letter-r" style="background-color: red;" data-aspect-ratio="1.333"></div>
  <div class="box letter-r letter-n" style="background-color: orange;" data-aspect-ratio="1"></div>
  <div class="box letter-l" style="background-color: yellow;" data-aspect-ratio="1.6"></div>
  <div class="box letter-r letter-n" style="background-color: green;" data-aspect-ratio="1.33"></div>
  <div class="box letter-l" style="background-color: blue;" data-aspect-ratio=".75"></div>
  <div class="box letter-r letter-l" style="background-color: purple;" data-aspect-ratio="1.333"></div>
</div>
var tessarray = new Tessarray("#container", ".box", {
  selectorClass: "selector"
});

Sorting

Add the data-sort attribute to the selector element and assign it a value. Tessarray will search within each box for an element that has a class equal to that value, and then sort on the innerHTML on of that element.

If the data you want to sort on is not in the boxes' HTML, you can sort on the value of data attributes on the boxes themselves. Make data attributes with the name equal to the value of the data-filter attribute and assign values to be sorted on. Then prepend the value of data-filter with data- to indicate to Tessarray to sort on data-attributes rather than innerHTML.

By default, Tessarray will sort values alphabetically. If every value is able to be evaulated as a number (eg. 100, 1,000, .50) Tessarray will sort by the values numerically.

Tessarray sorts by value in ascending order. If you want to sort in descending order, add the data-sort-order attribute to the selector and give it a value of "desc" or "descending".

If a box does not have a value to sort on (and is not filtered out), it will be appended to the sorted elements.

When using a category that is not described with one word (eg. "has red"), space the words with hyphens (eg. "has-red").

<button class="selector" data-sort="">Rainbow</button>
<button class="selector" data-sort="alphabetical">Alphabetical</button>
<button class="selector" data-sort="data-reverse-alphabetical">Reverse Alphabetical</button>

<div id="container">
  <div class="box" style="background-color: red;" data-reverse-alphabetical="2" data-aspect-ratio="1.333">
    <p class="alphabetical">red</p>
  </div>
  <div class="box" style="background-color: orange;" data-reverse-alphabetical="4" data-aspect-ratio="1">
    <p class="alphabetical">orange</p>
  </div>
  <div class="box" style="background-color: yellow;" data-reverse-alphabetical="1" data-aspect-ratio="1.6">
    <p class="alphabetical">yellow</p>
  </div>
  <div class="box" style="background-color: green;" data-reverse-alphabetical="5" data-aspect-ratio="1.33">
    <p class="alphabetical">green</p>
  </div>
  <div class="box" style="background-color: blue;" data-reverse-alphabetical="6" data-aspect-ratio=".75">
    <p class="alphabetical">blue</p>
  </div>
  <div class="box" style="background-color: purple;" data-reverse-alphabetical="3" data-aspect-ratio="1.333">
    <p class="alphabetical">purple</p>
  </div>
</div>
var tessarray = new Tessarray("#container", ".box", {
  selectorClass: "selector"
});

red

orange

yellow

green

blue

purple

filterAndSort

If you want to filter and/or sort separately of the selectors, you can do so by calling tessarray.filterAndSort(filterString, sortString, order). If you only want to filter or sort, you can call either tessarray.filter(filterString) or tessarray.sort(sortString, order).

By default, you cannot sort or filter on values that you have not created a selector for. The reason for this is that all of the filters and sortData are applied to the boxObjects upon instantiation, and these filters and sorters are found by iterating over the selectors.

If you want to sort or filter on a value not specified in a selector, add the value to the filters option or to the sorters option.

<input type="text" id="input" placeholder='eg. "red", "alphabetical"...'/>
<div id="container">
  <div class="box alphabetical has-red" style="background-color: red;" data-alphabetical="5" data-aspect-ratio="1.333"></div>
  <div class="box alphabetical has-red has-yellow" style="background-color: orange;" data-alphabetical="3" data-has-red="1" data-aspect-ratio="1"></div>
  <div class="box alphabetical has-yellow" style="background-color: yellow;" data-alphabetical="6" data-aspect-ratio="1.6"></div>
  <div class="box alphabetical has-yellow has-blue" style="background-color: green;" data-alphabetical="2"  data-aspect-ratio="1.33"></div>
  <div class="box alphabetical has-blue" style="background-color: blue;" data-alphabetical="1" data-aspect-ratio=".75"></div>
  <div class="box alphabetical has-red has-blue" style="background-color: purple;" data-alphabetical="4" data-has-red="3" data-aspect-ratio="1.333"></div>
</div>
var tessarray = new Tessarray("#container", ".box", {
  filters: ["has-red", "has-yellow", "has-blue"],
  sorters: ["alphabetical"]
});
var input = document.getElementById('input');
input.addEventListener('input', function(event) {
  if (event.target.value === "alphabetical") {
    tessarray.sort("alphabetical");
  } else if (event.target.value === "reverse alphabetical") {
    tessarray.sort("alphabetical", "desc")
  } else if (event.target.value === "red") {
    tessarray.filter("has-red");
  } else if (event.target.value === "yellow") {
    tessarray.filter("has-yellow");
  } else if (event.target.value === "blue") {
    tessarray.filter("has-blue");
  } else {
    if (tessarray.sortedBy !== "") {
      tessarray.filterAndSort("", "", "");
    }
  }
});
red
orange
yellow
green
blue
purple

Custom Sorting and Filtering

Tessarray makes it easy to create your own sorting and filtering functionality. Filter and sort the original tessarray.boxObjects array (without altering the boxObjects attribute itself) and save it as tessarray.selectedBoxes. Call tessarray.render() to see the results.

Note: will construct this example once we have sample images.

< >