99 lines
3.3 KiB
TypeScript
Executable file
99 lines
3.3 KiB
TypeScript
Executable file
import { Dictionary } from './types/interfaces/Dictionary';
|
|
import FilterizrOptions from './FilterizrOptions/FilterizrOptions';
|
|
export interface Position {
|
|
left: number;
|
|
top: number;
|
|
}
|
|
/**
|
|
* Resembles an item in the grid of Filterizr.
|
|
*/
|
|
export default class FilterItem {
|
|
node: Element;
|
|
options: FilterizrOptions;
|
|
dimensions: {
|
|
width: number;
|
|
height: number;
|
|
};
|
|
private data;
|
|
private sortData;
|
|
private index;
|
|
private filteredOut;
|
|
private lastPosition;
|
|
private onTransitionEndHandler;
|
|
constructor(node: Element, index: number, options: FilterizrOptions);
|
|
/**
|
|
* Destroys the FilterItem instance
|
|
*/
|
|
destroy(): void;
|
|
/**
|
|
* Filters in a specific FilterItem out of the grid.
|
|
* @param targetPosition the position towards which the element should animate
|
|
* @param cssOptions for the animation
|
|
*/
|
|
filterIn(targetPosition: Position, cssOptions: Dictionary): void;
|
|
/**
|
|
* Filters out a specific FilterItem out of the grid.
|
|
* @param cssOptions for the animation
|
|
*/
|
|
filterOut(cssOptions: Dictionary): void;
|
|
/**
|
|
* Helper method to calculate the animation delay for a given grid item
|
|
* @param delay in ms
|
|
* @param delayMode can be 'alternate' or 'progressive'
|
|
*/
|
|
getTransitionDelay(delay: number, delayMode: 'progressive' | 'alternate'): number;
|
|
/**
|
|
* Returns true if the text contents of the FilterItem match the search term
|
|
* @param searchTerm to look up
|
|
* @return if the innerText matches the term
|
|
*/
|
|
contentsMatchSearch(searchTerm: string): boolean;
|
|
/**
|
|
* Recalculates the dimensions of the element and updates them in the state
|
|
*/
|
|
updateDimensions(): void;
|
|
/**
|
|
* Returns all categories of the grid items data-category attribute
|
|
* with a regexp regarding all whitespace.
|
|
* @return {String[]} an array of the categories the item belongs to
|
|
*/
|
|
getCategories(): string[];
|
|
/**
|
|
* Returns the value of the sort attribute
|
|
* @param sortAttribute "index", "sortData" or custom user data-attribute by which to sort
|
|
*/
|
|
getSortAttribute(sortAttribute: string): string | number;
|
|
/**
|
|
* Helper method for the search method of Filterizr
|
|
* @return {String} innerText of the FilterItem in lowercase
|
|
*/
|
|
private getContentsLowercase;
|
|
/**
|
|
* Sets up the events related to the FilterItem instance
|
|
*/
|
|
private bindEvents;
|
|
/**
|
|
* Removes all events related to the FilterItem instance
|
|
*/
|
|
private unbindEvents;
|
|
/**
|
|
* Calculates and returns the transition css property based on options.
|
|
*/
|
|
private getTransitionStyle;
|
|
/**
|
|
* Sets the transition css property as an inline style on the FilterItem.
|
|
*
|
|
* The idea here is that during the very first render items should assume
|
|
* their positions directly.
|
|
*
|
|
* Following renders should actually trigger the transitions, which is why
|
|
* we need to delay setting the transition property.
|
|
*
|
|
* Unfortunately, JavaScript code executes on the same thread as the
|
|
* browser's rendering. Everything that needs to be drawn waits for
|
|
* JavaScript execution to complete. Thus, we need to use a setTimeout
|
|
* here to defer setting the transition style at the first rendering cycle.
|
|
*/
|
|
private setTransitionStyle;
|
|
}
|