Vestride_Shuffle/index.d.ts

// Type definitions for Shuffle 5.0
// Project: https://github.com/Vestride/Shuffle
// Definitions by: Glen Cheney <https://github.com/Vestride>

export as namespace Shuffle;
export default Shuffle;

interface FilterMode {
  ALL: string;
  ANY: string;
}

declare class ShuffleItem {
  constructor(element: Element);
  addClasses(classes: string[]): void;
  applyCss(obj: object): void;
  dispose(): void;
  hide(): void;
  init(): void;
  removeClasses(classes: string[]): void;
  show(): void;
  id: number;
  element: Element;
  isVisible: boolean;
}

declare namespace ShuffleItem {
  const Css: {
    HIDDEN: {
      after: object;
      before: object;
    };
    INITIAL: object;
    VISIBLE: {
      after: object;
      before: object;
    };
  };
  const Scale: {
    HIDDEN: number;
    VISIBLE: number;
  };
}

declare class Shuffle {
  constructor(element: Element, options?: Shuffle.ShuffleOptions);

  /**
   * New items have been appended to shuffle. Mix them in with the current filter or sort status.
   * @param {Element[]} newItems Collection of new items.
   */
  add(newItems: Element[]): void;

  /**
   * Destroys shuffle, removes events, styles, and classes
   */
  destroy(): void;

  /**
   * Disables shuffle from updating dimensions and layout on resize
   */
  disable(): void;

  /**
   * Enables shuffle again.
   * @param {boolean} [isUpdateLayout=true] if undefined, shuffle will update columns and gutters
   */
  enable(isUpdateLayout?: true): void;

  /**
   * Filter items.
   * @param {string|string[]|Function} [category] Category to filter by.
   *     Can be a function, string, or array of strings.
   * @param {Object} [sortObj] A sort object which can sort the visible set
   */
  filter(category?: string|string[]|Function, sortObj?: object): void;

  /**
   * Retrieve a shuffle item by its element.
   * @param {Element} element Element to look for.
   */
  getItemByElement(element: Element): ShuffleItem|null;

  /**
   * Use this instead of `update()` if you don't need the columns and gutters updated
   * Maybe an image inside `shuffle` loaded (and now has a height), which means calculations
   * could be off.
   */
  layout(): void;

  /**
   * Remove 1 or more shuffle items.
   * @param {Element[]} elements An array containing one or more
   *     elements in shuffle
   */
  remove(elements: Element[]): Shuffle;

  /**
   * Dump the elements currently stored and reinitialize all child elements which
   * match the `itemSelector`.
   */
  resetItems(): void;

  /**
   * Gets the visible elements, sorts them, and passes them to layout.
   * @param {Object} [sortOptions] The options object to pass to `sorter`.
   */
  sort(sortOptions?: {reverse?: boolean, by?: Function, randomize?: boolean }): void;

  /**
   * Reposition everything.
   * @param {boolean} [isOnlyLayout=false] If true, column and gutter widths won't be recalculated.
   */
  update(isOnlyLayout?: false): void;

  /**
   * Returns styles which will be applied to the an item for a transition.
   * @param {object} obj Transition options.
   */
  protected getStylesForTransition(obj: { item: ShuffleItem, styles: object }): object;

  /**
   * Mutate positions before they're applied.
   * @param {Shuffle.Rect[]} itemRects Item data objects.
   * @param {number} containerWidth Width of the containing element.
   */
  protected getTransformedPositions(itemRects: Shuffle.Rect[], containerWidth: number): Shuffle.Point[];

  /**
   * Sets css transform transition on a group of elements. This is not executed
   * at the same time as `item.init` so that transitions don't occur upon
   * initialization of Shuffle.
   * @param {ShuffleItem[]} items Shuffle items to set transitions on.
   */
  protected setItemTransitions(items: ShuffleItem[]): void;

  /** Width of one column */
  colWidth: number;

  /** Total number of columns */
  cols: number;

  /** Width of `element` */
  containerWidth: number;

  /** Main element */
  element: Element;

  /** Current filter group */
  group: string;

  /** Unique identifier for this instance */
  id: string;

  /** Whether this instance has been destroyed */
  isDestroyed: boolean;

  /** Whether this instance is enabled */
  isEnabled: boolean;

  /** Whether this instance has been initialized */
  isInitialized: boolean;

  /** Whether items are currently transitioning */
  isTransitioning: boolean;

  /** ShuffleItems being kept track of */
  items: ShuffleItem[];
  lastFilter: any;
  lastSort: any;

  /** Current (merged) options */
  options: Shuffle.ShuffleOptions;

  /** Item positions */
  positions: number[];

  /** Number of currently visible items */
  visibleItems: number;
}

declare namespace Shuffle {
  /** Filter string for all items */
  let ALL_ITEMS: 'all';

  /** Data attribute key to use. */
  let FILTER_ATTRIBUTE_KEY: 'groups';

  /** Class name strings */
  const Classes: {
    BASE: string;
    HIDDEN: string;
    SHUFFLE_ITEM: string;
    VISIBLE: string;
  };

  /** Event types emitted by the instance */
  const EventType: {
    LAYOUT: string;
    REMOVED: string;
  };

  /** Available filter modes. */
  const FilterMode: FilterMode;

  /** ShuffleItem class */
  const ShuffleItem: ShuffleItem;

  /**
   * Returns the outer width of an element, optionally including its margins.
   * @param {Element} element The element.
   * @param {boolean} [includeMargins=false] Whether to include margins.
   */
  function getSize(element: Element, includeMargins?: false): {width: number, height: number};

  class Rect {
    constructor(x: number, y: number, w: number, h: number, id?: number);
    id: number;
    left: number;
    top: number;
    width: number;
    height: number;
  }

  namespace Rect {
    function intersects(a: Rect, b: Rect): boolean;
  }

  class Point {
    constructor(x?: number, y?: number);
    x: number;
    y: number;
  }

  namespace Point {
    function equals(a: Point, b: Point): boolean;
  }

  /** Default options that can be overridden. */
  interface ShuffleOptions {

    /**
     * Useful for percentage based heights when they might not always be exactly
     * the same (in pixels).
     */
    buffer?: number;

    /**
     * Reading the width of elements isn't precise enough and can cause columns to
     * jump between values.
     */
    columnThreshold?: number;

    /**
     * A static number or function that returns a number which tells the plugin
     * how wide the columns are (in pixels).
     */
    columnWidth?: number;

    /**
     * If your group is not json, and is comma delimeted, you could set delimiter to ','.
     */
    delimiter?: string;
    delimeter?: string;

    /**
     * CSS easing function to use.
     */
    easing?: string;

    /**
     * Affects using an array with filter. e.g. `filter(['one', 'two'])`. With "any",
     * the element passes the test if any of its groups are in the array. With "all",
     * the element only passes if all groups are in the array.
     */
    filterMode?: FilterMode;

    /**
     * Initial filter group.
     */
    group?: string;

    /**
     * A static number or function that tells the plugin how wide the gutters
     * between columns are (in pixels).
     */
    gutterWidth?: number;

    /**
     * Shuffle can be isInitialized with a sort object. It is the same object
     * given to the sort method.
     */
    initialSort?: object;

    /**
     * Whether to center grid items in the row with the leftover space.
     */
    isCentered?: boolean;

    /**
     * e.g. '.picture-item'.
     */
    itemSelector?: string;

    /**
     * Whether to round pixel values used in translate(x, y). This usually avoids blurriness.
     */
    roundTransforms?: boolean,

    /**
     * Element or selector string. Use an element to determine the size of columns and gutters.
     */
    sizer?: Element|string;

    /**
     * Transition/animation speed (milliseconds).
     */
    speed?: number;

    /**
     * Transition delay offset for each item in milliseconds.
     */
    staggerAmount?: number;

    /**
     * Maximum stagger delay in milliseconds.
     */
    staggerAmountMax?: number;

    /**
     * How often shuffle can be called on resize (in milliseconds).
     */
    throttleTime?: number;

    /**
     * Whether to use transforms or absolute positioning.
     */
    useTransforms?: boolean;

    /**
     * By default, shuffle will throttle resize events. This can be changed or removed.
     */
    throttle?(func: Function, wait: number): Function;
  }
}