You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.d.ts 9.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. // Type definitions for Shuffle 5.2.2
  2. // Project: https://github.com/Vestride/Shuffle
  3. // Definitions by: Glen Cheney <https://github.com/Vestride>
  4. export as namespace Shuffle;
  5. export default Shuffle;
  6. /** Default options that can be overridden. */
  7. export interface ShuffleOptions {
  8. /**
  9. * Useful for percentage based heights when they might not always be exactly
  10. * the same (in pixels).
  11. */
  12. buffer?: number;
  13. /**
  14. * Reading the width of elements isn't precise enough and can cause columns to
  15. * jump between values.
  16. */
  17. columnThreshold?: number;
  18. /**
  19. * A static number or function that returns a number which tells the plugin
  20. * how wide the columns are (in pixels).
  21. */
  22. columnWidth?: number;
  23. /**
  24. * If your group is not json, and is comma delimeted, you could set delimiter to ','.
  25. */
  26. delimiter?: string;
  27. /** @deprecated Misspelling that will be removed in v6 */
  28. delimeter?: string;
  29. /**
  30. * CSS easing function to use.
  31. */
  32. easing?: string;
  33. /**
  34. * Affects using an array with filter. e.g. `filter(['one', 'two'])`. With "any",
  35. * the element passes the test if any of its groups are in the array. With "all",
  36. * the element only passes if all groups are in the array.
  37. */
  38. filterMode?: Shuffle.FilterMode;
  39. /**
  40. * Initial filter group.
  41. */
  42. group?: string;
  43. /**
  44. * A static number or function that tells the plugin how wide the gutters
  45. * between columns are (in pixels).
  46. */
  47. gutterWidth?: number;
  48. /**
  49. * Shuffle can be isInitialized with a sort object. It is the same object
  50. * given to the sort method.
  51. */
  52. initialSort?: SortOptions;
  53. /**
  54. * Whether to center grid items in the row with the leftover space.
  55. */
  56. isCentered?: boolean;
  57. /**
  58. * e.g. '.picture-item'.
  59. */
  60. itemSelector?: string;
  61. /**
  62. * Whether to round pixel values used in translate(x, y). This usually avoids blurriness.
  63. */
  64. roundTransforms?: boolean,
  65. /**
  66. * Element or selector string. Use an element to determine the size of columns and gutters.
  67. */
  68. sizer?: HTMLElement | string;
  69. /**
  70. * Transition/animation speed (milliseconds).
  71. */
  72. speed?: number;
  73. /**
  74. * Transition delay offset for each item in milliseconds.
  75. */
  76. staggerAmount?: number;
  77. /**
  78. * Maximum stagger delay in milliseconds.
  79. */
  80. staggerAmountMax?: number;
  81. /**
  82. * How often shuffle can be called on resize (in milliseconds).
  83. */
  84. throttleTime?: number;
  85. /**
  86. * Whether to use transforms or absolute positioning.
  87. */
  88. useTransforms?: boolean;
  89. /**
  90. * By default, shuffle will throttle resize events. This can be changed or removed.
  91. */
  92. throttle?(func: Function, wait: number): Function;
  93. }
  94. export interface SortOptions {
  95. // Use array.reverse() to reverse the results of your sort.
  96. reverse?: boolean;
  97. // Sorting function which gives you the element each shuffle item is using by default.
  98. by?: (a: Shuffle.ShuffleItem['element'], b: Shuffle.ShuffleItem['element']) => any;
  99. // Custom sort function.
  100. compare?: (a: Shuffle.ShuffleItem, b: Shuffle.ShuffleItem) => number;
  101. // If true, this will skip the sorting and return a randomized order in the array.
  102. randomize?: boolean;
  103. // Determines which property of each item in the array is passed to the
  104. // sorting method. Only used if you use the `by` function.
  105. key?: keyof Shuffle.ShuffleItem;
  106. }
  107. export interface InlineCssStyles {
  108. [property: string]: string | number;
  109. }
  110. export interface ShuffleItemCss {
  111. INITIAL: InlineCssStyles;
  112. VISIBLE: {
  113. before: InlineCssStyles;
  114. after: InlineCssStyles;
  115. };
  116. HIDDEN: {
  117. before: InlineCssStyles;
  118. after: InlineCssStyles;
  119. };
  120. }
  121. export type FilterFunction = (this: HTMLElement, element: HTMLElement, shuffle: Shuffle) => boolean;
  122. export type FilterArg = string | string[] | FilterFunction;
  123. declare class Shuffle {
  124. constructor(element: HTMLElement, options?: ShuffleOptions);
  125. /**
  126. * New items have been appended to shuffle. Mix them in with the current filter or sort status.
  127. * @param {HTMLElement[]} newItems Collection of new items.
  128. */
  129. add(newItems: HTMLElement[]): void;
  130. /**
  131. * Destroys shuffle, removes events, styles, and classes
  132. */
  133. destroy(): void;
  134. /**
  135. * Disables shuffle from updating dimensions and layout on resize
  136. */
  137. disable(): void;
  138. /**
  139. * Enables shuffle again.
  140. * @param {boolean} [isUpdateLayout=true] if undefined, shuffle will update columns and gutters
  141. */
  142. enable(isUpdateLayout?: boolean): void;
  143. /**
  144. * Filter items.
  145. * @param {FilterArg} [category] Category to filter by.
  146. * Can be a function, string, or array of strings.
  147. * @param {SortOptions} [sortOptions] A sort object which can sort the visible set
  148. */
  149. filter(category?: FilterArg, sortOptions?: SortOptions): void;
  150. /**
  151. * Retrieve a shuffle item by its element.
  152. * @param {HTMLElement} element Element to look for.
  153. */
  154. getItemByElement(element: HTMLElement): Shuffle.ShuffleItem | null;
  155. /**
  156. * Use this instead of `update()` if you don't need the columns and gutters updated
  157. * Maybe an image inside `shuffle` loaded (and now has a height), which means calculations
  158. * could be off.
  159. */
  160. layout(): void;
  161. /**
  162. * Remove 1 or more shuffle items.
  163. * @param {HTMLElement[]} elements An array containing one or more
  164. * elements in shuffle
  165. */
  166. remove(elements: HTMLElement[]): Shuffle;
  167. /**
  168. * Dump the elements currently stored and reinitialize all child elements which
  169. * match the `itemSelector`.
  170. */
  171. resetItems(): void;
  172. /**
  173. * Gets the visible elements, sorts them, and passes them to layout.
  174. * @param {SortOptions} [sortOptions] The options object to pass to `sorter`.
  175. */
  176. sort(sortOptions?: SortOptions): void;
  177. /**
  178. * Reposition everything.
  179. * @param {boolean} [isOnlyLayout=false] If true, column and gutter widths won't be recalculated.
  180. */
  181. update(isOnlyLayout?: boolean): void;
  182. /**
  183. * Returns styles which will be applied to the an item for a transition.
  184. * @param {object} obj Transition options.
  185. */
  186. protected getStylesForTransition(obj: { item: Shuffle.ShuffleItem, styles: InlineCssStyles }): InlineCssStyles;
  187. /**
  188. * Mutate positions before they're applied.
  189. * @param {Shuffle.Rect[]} itemRects Item data objects.
  190. * @param {number} containerWidth Width of the containing element.
  191. */
  192. protected getTransformedPositions(itemRects: Shuffle.Rect[], containerWidth: number): Shuffle.Point[];
  193. /**
  194. * Sets css transform transition on a group of elements. This is not executed
  195. * at the same time as `item.init` so that transitions don't occur upon
  196. * initialization of Shuffle.
  197. * @param {ShuffleItem[]} items Shuffle items to set transitions on.
  198. */
  199. protected setItemTransitions(items: Shuffle.ShuffleItem[]): void;
  200. /** Width of one column */
  201. colWidth: number;
  202. /** Total number of columns */
  203. cols: number;
  204. /** Width of `element` */
  205. containerWidth: number;
  206. /** Main element */
  207. element: HTMLElement;
  208. /** Current filter group */
  209. group: string;
  210. /** Unique identifier for this instance */
  211. id: string;
  212. /** Whether this instance has been destroyed */
  213. isDestroyed: boolean;
  214. /** Whether this instance is enabled */
  215. isEnabled: boolean;
  216. /** Whether this instance has been initialized */
  217. isInitialized: boolean;
  218. /** Whether items are currently transitioning */
  219. isTransitioning: boolean;
  220. /** ShuffleItems being kept track of */
  221. items: Shuffle.ShuffleItem[];
  222. lastFilter: FilterArg;
  223. lastSort: SortOptions;
  224. /** Current (merged) options */
  225. options: ShuffleOptions;
  226. /** Item positions */
  227. positions: number[];
  228. /** Number of currently visible items */
  229. visibleItems: number;
  230. /**
  231. * Returns the outer width of an element, optionally including its margins.
  232. * @param {HTMLElement} element The element.
  233. * @param {boolean} [includeMargins=false] Whether to include margins.
  234. */
  235. static getSize(element: HTMLElement, includeMargins?: boolean): {width: number, height: number};
  236. }
  237. declare namespace Shuffle {
  238. /** Filter string for all items */
  239. let ALL_ITEMS: string;
  240. /** Data attribute key to use. */
  241. let FILTER_ATTRIBUTE_KEY: string;
  242. /** Class name strings */
  243. enum Classes {
  244. BASE = 'shuffle',
  245. SHUFFLE_ITEM = 'shuffle-item',
  246. VISIBLE = 'shuffle-item--visible',
  247. HIDDEN = 'shuffle-item--hidden',
  248. }
  249. /** Event types emitted by the instance */
  250. enum EventType {
  251. LAYOUT = 'shuffle:layout',
  252. REMOVED = 'shuffle:removed',
  253. }
  254. /** Available filter modes. */
  255. enum FilterMode {
  256. ALL = 'all',
  257. ANY = 'any',
  258. }
  259. /** ShuffleItem class */
  260. class ShuffleItem {
  261. constructor(element: HTMLElement);
  262. addClasses(classes: string[]): void;
  263. applyCss(obj: InlineCssStyles): void;
  264. dispose(): void;
  265. hide(): void;
  266. init(): void;
  267. removeClasses(classes: string[]): void;
  268. show(): void;
  269. id: number;
  270. element: HTMLElement;
  271. isVisible: boolean;
  272. static Css: ShuffleItemCss;
  273. static Scale: {
  274. HIDDEN: number;
  275. VISIBLE: number;
  276. };
  277. }
  278. class Rect {
  279. constructor(x: number, y: number, w: number, h: number, id?: number);
  280. id: number;
  281. left: number;
  282. top: number;
  283. width: number;
  284. height: number;
  285. static intersects(a: Rect, b: Rect): boolean;
  286. }
  287. class Point {
  288. constructor(x?: number, y?: number);
  289. x: number;
  290. y: number;
  291. static equals(a: Point, b: Point): boolean;
  292. }
  293. }