API

Attributes

container

tessarray.container

The container HTML element. Tessarray finds this container upon instantiation using the containerSelector parameter.

boxNodes

tessarray.boxNodes

tessarray.boxNodes is an array that contains the HTML nodes of tessarray's boxes. Tessarray finds the box nodes by searching within the container using the boxSelector.

boxObjects

tessarray.boxObjects

tessarray.boxObjects is an array of javascript objects that store data about the boxNode they represent. There is one boxObject for each boxNode and they share the same index in their respective arrays.

Each boxObject has the following attributes:

boxObject.tessarray: The Tessarray instance the boxObject belongs to

boxObject.index: Index of the boxObject in the tessarray.boxObjects array as well as the tessarray.boxNodes array

boxObject.boxNode: The correlated HTML element

boxObject.image: The image found within the boxNode, if any

boxObject.aspectRatio: The aspect ratio (given or calculated) for correlated boxNode

boxObject.filters: An array of filters that will render the boxNode

boxObject.sortData: An object with sorters as keys and the sorter's value for this box as the value

filteredAndSortedBoxes

tessarray.filteredAndSortedBoxes

This array of boxObjects determines the selection and order of boxObjects to be rendered. To use custom sorting/filtering, change this attribute directly and then call tessarray.render to apply the results.

Go to to the custom sorting and filtering in Filter for examples of filteredAndSortedBoxes in use.

layoutGeometry

tessarray.layoutGeometry

This is the data returned from Flickr's Justified Layout library that determines the location and dimensions of each box. layoutGeometry is created every time tessarray.render is called.

filters

tessarray.filters

An array of filters that Tessarray is aware of. Upon initialization, Tessarray iterates over the filters and stores the filtration data on the boxObjects.

sortData

tessarray.sortData

An array of sorters that Tessarray is aware of. Upon initialization, Tessarray iterates over the sorters and stores the sort data on the boxObjects.

activeFilter, activeSort, and activeOrder

tessarray.activeFilter; tessarray.activeSort; tessarray.activeOrder

tessarray.activeFilter, tessarray.activeSort, and tessarray.activeOrder show the current state of how tessarray is filtered, sorted, and ordered. tessarray.activeFilter and tessarray.activeSort will point to the string they are sorted on, while tessarray.activeOrder will be null or "desc", representing an ascending or descending sort respectively.

options

tessarray.options

An object containing all of the specified options for Tessarray. Go to the Options page for more info.

Methods

render

tessarray.render()

Renders the boxes in tessarray.filteredAndSortedBoxes. By default, Tessarray calls render on tessarray.filter, tessarray.sort, tessarray.filterAndSort, and when the container size changes due to window resizing.

Call tessarray.render to apply any changes made to tessarray.

filter

tessarray.filter(filterString)

filterString specifies the value used to filter the boxes. This method will filter out all boxNodes that don't have a class of filterString. If nothing is passed in, there will be no changes to the current filtration. If an empty string is passed in, any previous filtration will be undone and every box will be shown.

For examples of filtering, go to the Filter page.

sort

tessarray.sort(sortString, order)

sortstring is a string that Tessarray will use to sort boxes. If the string begins with "data-" it will sort the boxes on the value of their data-attributes. Else, sort will use the string passed in and search for an element inside of the box with that class, and then sort by using that element's innerHTML as the value. Tessarray will detect if the values are numeric or not and sort accordingly.

order is a string that determines how to order the boxes. If the value is "desc" or "descending" the order will be descending. If the value is false, the current order will be preserved. If the value is anything other value or is not specified, the order will be ascending.

For examples or sorting, go to the #sort section of the Filter page.

filterAndSort

tessarray.filterAndSort(filterString, sortString, order)

filterString is a string that Tessarray will use to filter boxes.

sortString is a string that Tessarraly will use to sort boxes.

order is a string that determines how to order the boxes.

This method filters the boxes, sorts the boxes, and then calls render. For details on the parameters, check the filter and sort methods above.

debounce

tessarray.debounce(func, wait[, immediate])

func the function that you want to debounce (or prevent for firing)

wait integer, the amount of milliseconds the function should wait before allowing subsequent call.

immediate optional parameter, that if passed as a truthy value will cause the function to fire on the leading edge rather than trailing.

This debounce function that prevents a function from being fired more than once every x miliseconds. This is needed for Tessarray when binding functions to the window's resize event to prevent calling functions such as render gratuitiously.

<input type="range" id="range-resize" value="75" min="0" max="75">
    <div id="container">
  <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>

#range-resize {
  width: 75%;
  margin-left: calc(25% - 10px);
}

var tessarray = new Tessarray('#container', '.box');

var resizeWithRange = function() {
  var newWidth = parseInt(document.getElementById('range-resize').value) + 25;
  document.getElementById('container').style.width = newWidth.toString() + "%";
  tessarray.render();
};

document.getElementById('range-resize').addEventListener('input', tessarray.debounce(resizeWithRange, 100));

destroy

tessarray.destroy()Destroys the Tessarray object. Leaves all elements on the page in the state that Tessarray last left them, and removes all tessarray functionality.

Destroy Recreate Rainbow Order Reverse Rainbow Aspect Ratio

<button id="destroy-button">Destroy</button>
<button id="recreate-button">Recreate</button>
<button class="selector" data-sort="data-rainbow">Rainbow Order</button>
<button class="selector" data-sort="data-reverse-rainbow">Reverse Rainbow</button>
<div id="container">
  <div class="box rainbow reverse-rainbow" data-rainbow="1" data-reverse-rainbow="6" style="background-color: red;" data-aspect-ratio="1.333"></div>
  <div class="box rainbow reverse-rainbow" data-rainbow="2" data-reverse-rainbow="5" style="background-color: orange;" data-aspect-ratio="1"></div>
  <div class="box rainbow reverse-rainbow" data-rainbow="3" data-reverse-rainbow="4" style="background-color: yellow;" data-aspect-ratio="1.6"></div>
  <div class="box rainbow reverse-rainbow" data-rainbow="4" data-reverse-rainbow="3" style="background-color: green;" data-aspect-ratio="1.33"></div>
  <div class="box rainbow reverse-rainbow" data-rainbow="5" data-reverse-rainbow="2" style="background-color: blue;" data-aspect-ratio=".75"></div>
  <div class="box rainbow reverse-rainbow" data-rainbow="6" data-reverse-rainbow="1" style="background-color: purple;" data-aspect-ratio="1.333"></div>
</div>

var tessarray = new Tessarray("#container", ".box", {
  selectorClass: "selector"
});
document.getElementById("recreate-button").disabled = true;
document.getElementById("destroy-button").addEventListener("click", function() {
  if (tessarray) {
    tessarray.destroy();
    this.disabled = true;
    document.getElementById("recreate-button").disabled = false;
  }
});
document.getElementById("recreate-button").addEventListener("click", function() {
  tessarray = new Tessarray("#container", ".box", {
    selectorClass: "selector"
  }); 
  this.disabled = true;
  document.getElementById("destroy-button").disabled = false;
});