No Description
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 8.3KB

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