1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- 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;
- }
|