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").
red
orange
yellow
green
blue
purple
<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"
});
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 defined when 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.
<div id="container">
<div class="box red" style="background-color: red;" data-aspect-ratio="1.333" data-reverse="6"></div>
<div class="box red yellow" style="background-color: orange;" data-aspect-ratio="1" data-reverse="5"></div>
<div class="box yellow" style="background-color: yellow;" data-aspect-ratio="1.6" data-reverse="4"></div>
<div class="box yellow blue" style="background-color: green;" data-aspect-ratio="1.33" data-reverse="3"></div>
<div class="box blue" style="background-color: blue;" data-aspect-ratio=".75" data-reverse="2"></div>
<div class="box red blue" style="background-color: purple;" data-aspect-ratio="1.333" data-reverse="1"></div>
</div>
var tessarray = new Tessarray("#container", ".box", {
filters: ["red", "yellow", "blue"],
sorters: ["reverse"],
flickr: {targetRowHeight: 200}
});
var filters = ["red", "", "yellow", "blue"];
var sorters = ["reverse", ""];
var changeFilter = function() {
tessarray.filterAndSort(filters[0], sorters[0]);
filters.unshift(filters.pop());
sorters.unshift(sorters.pop());
}
window.setInterval(changeFilter, 3000);
Custom Sorting and Filtering
Tessarray makes it easy to create your own sorting and filtering functionality. Filter and sort a copy of the tessarray.boxObjects
array and save it as tessarray.filteredAndSortedBoxes
. Call tessarray.render
to see the results.
<div id="container-3">
<div class="box" style="background-color: red;" data-aspect-ratio="1.333"></div>
<div class="box" style="background-color: orange;" data-aspect-ratio="1"></div>
<div class="box" style="background-color: yellow;" data-aspect-ratio="1.6"></div>
<div class="box" style="background-color: green;" data-aspect-ratio="1.33"></div>
<div class="box" style="background-color: blue;" data-aspect-ratio=".75"></div>
<div class="box" style="background-color: purple;" data-aspect-ratio="1.333"></div>
</div>
var tessarray = new Tessarray("#container-3", ".box");
document.getElementsByClassName("original-order")[0].addEventListener("click", function() {
tessarray.filteredAndSortedBoxes = tessarray.boxObjects;
tessarray.render();
});
document.getElementsByClassName("random-order")[0].addEventListener("click", function() {
var boxObjectsCopy = tessarray.boxObjects.slice();
// Using Fisher-Yates shuffle
var shuffledBoxObjects = shuffle(boxObjectsCopy);
tessarray.filteredAndSortedBoxes = shuffledBoxObjects;
tessarray.render();
});