FilterItem.d.ts 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import { Dictionary } from './types/interfaces/Dictionary';
  2. import FilterizrOptions from './FilterizrOptions/FilterizrOptions';
  3. export interface Position {
  4. left: number;
  5. top: number;
  6. }
  7. /**
  8. * Resembles an item in the grid of Filterizr.
  9. */
  10. export default class FilterItem {
  11. node: Element;
  12. options: FilterizrOptions;
  13. dimensions: {
  14. width: number;
  15. height: number;
  16. };
  17. private data;
  18. private sortData;
  19. private index;
  20. private filteredOut;
  21. private lastPosition;
  22. private onTransitionEndHandler;
  23. constructor(node: Element, index: number, options: FilterizrOptions);
  24. /**
  25. * Destroys the FilterItem instance
  26. */
  27. destroy(): void;
  28. /**
  29. * Filters in a specific FilterItem out of the grid.
  30. * @param targetPosition the position towards which the element should animate
  31. * @param cssOptions for the animation
  32. */
  33. filterIn(targetPosition: Position, cssOptions: Dictionary): void;
  34. /**
  35. * Filters out a specific FilterItem out of the grid.
  36. * @param cssOptions for the animation
  37. */
  38. filterOut(cssOptions: Dictionary): void;
  39. /**
  40. * Helper method to calculate the animation delay for a given grid item
  41. * @param delay in ms
  42. * @param delayMode can be 'alternate' or 'progressive'
  43. */
  44. getTransitionDelay(delay: number, delayMode: 'progressive' | 'alternate'): number;
  45. /**
  46. * Returns true if the text contents of the FilterItem match the search term
  47. * @param searchTerm to look up
  48. * @return if the innerText matches the term
  49. */
  50. contentsMatchSearch(searchTerm: string): boolean;
  51. /**
  52. * Recalculates the dimensions of the element and updates them in the state
  53. */
  54. updateDimensions(): void;
  55. /**
  56. * Returns all categories of the grid items data-category attribute
  57. * with a regexp regarding all whitespace.
  58. * @return {String[]} an array of the categories the item belongs to
  59. */
  60. getCategories(): string[];
  61. /**
  62. * Returns the value of the sort attribute
  63. * @param sortAttribute "index", "sortData" or custom user data-attribute by which to sort
  64. */
  65. getSortAttribute(sortAttribute: string): string | number;
  66. /**
  67. * Helper method for the search method of Filterizr
  68. * @return {String} innerText of the FilterItem in lowercase
  69. */
  70. private getContentsLowercase;
  71. /**
  72. * Sets up the events related to the FilterItem instance
  73. */
  74. private bindEvents;
  75. /**
  76. * Removes all events related to the FilterItem instance
  77. */
  78. private unbindEvents;
  79. /**
  80. * Calculates and returns the transition css property based on options.
  81. */
  82. private getTransitionStyle;
  83. /**
  84. * Sets the transition css property as an inline style on the FilterItem.
  85. *
  86. * The idea here is that during the very first render items should assume
  87. * their positions directly.
  88. *
  89. * Following renders should actually trigger the transitions, which is why
  90. * we need to delay setting the transition property.
  91. *
  92. * Unfortunately, JavaScript code executes on the same thread as the
  93. * browser's rendering. Everything that needs to be drawn waits for
  94. * JavaScript execution to complete. Thus, we need to use a setTimeout
  95. * here to defer setting the transition style at the first rendering cycle.
  96. */
  97. private setTransitionStyle;
  98. }