DefinitelyTyped/types/flickity/flickity-tests.ts

/// <reference types="jquery"/>

// jQuery tests

let $flickity = $("#flickity-selector").flickity({
        initialIndex: 0,
        accessibility: true,
        asNavFor: "#nav-bar",
        autoPlay: true,
        cellAlign: "left",
        cellSelector: ".gallery-cell",
        contain: true,
        draggable: true,
        freeScroll: false,
        freeScrollFriction: 0.5,
        friction: 0.8,
        imagesLoaded: false,
        lazyLoad: false,
        pageDots: false,
        arrowShape: "arrow.svg",
        percentPosition: false,
        prevNextButtons: false,
        selectedAttraction: 0.050,
        setGallerySize: true,
        watchCSS: true,
        wrapAround: true,
        resize: true,
        rightToLeft: false
    });

$flickity.flickity("next")
    .flickity("select", 4);

// Vanilla jQuery tests
let flikty: Flickity = new Flickity("#flickity-gallery");

let flikty2: Flickity =
    new Flickity("#flickity-gallery",
        {
            initialIndex: 0,
            accessibility: true,
            asNavFor: "#nav-bar",
            autoPlay: true,
            cellAlign: "left",
            cellSelector: ".gallery-cell",
            contain: true,
            draggable: true,
            freeScroll: false,
            freeScrollFriction: 0.5,
            friction: 0.8,
            imagesLoaded: false,
            lazyLoad: false,
            pageDots: false,
            arrowShape: "arrow.svg",
            percentPosition: false,
            prevNextButtons: false,
            selectedAttraction: 0.050,
            setGallerySize: true,
            watchCSS: true,
            wrapAround: true,
            resize: true,
            rightToLeft: false
        });

// ES6 element selector for tests
let element = document.querySelector("#gallery");
let nodeList = document.querySelectorAll("#gallery");
let cellElements: Element[] = flikty2.getCellElements();

flikty2.select(1, true);
flikty2.select(1);

flikty2.previous();
flikty2.previous(true);

flikty2.next();
flikty2.next(true);

flikty2.resize();
flikty2.reposition();

flikty2.prepend(element);

flikty2.append(element);
flikty2.append(nodeList);

flikty2.insert(element, 0);
flikty2.insert(nodeList, 0);
flikty2.insert(new Array<Element>(), 0);

flikty2.remove(element);
flikty2.remove(nodeList);
flikty2.remove(new Array<Element>());

flikty2.destroy();

flikty2.reloadCells();

// event handlers
flikty2.on("cellSelect", (evt, ele) => {
    // do something
});

flikty2.off("cellSelect", (evt, ele, pntr, vctr) => {
    // do something
});

flikty2.once("cellSelect", (evt, ele, pntr) => {
    // do something
});

flikty2.listener("myCustomEvent", (evt: Event) => {
    // do something
});

function handleSettle(index: number): void {
    // do something
}

flikty2.on("settle", handleSettle);
flikty2.off("settle", handleSettle);

function handleIsFullScreen(isFullscreen: boolean): void {
    // do something
}

flikty2.on("fullscreenChange", handleIsFullScreen);
flikty2.off("fullscreenChange", handleIsFullScreen);

// static get data methods

let jQdata = jQuery.fn.data("flickity")();
jQdata = $.fn.data("flickity")();

let jsData = Flickity.data("#gallery");
jsData = Flickity.data("#gallery");

// property tests
let selectedIndex: number = flikty2.selectedIndex;

let selectedElement: Element = flikty2.selectedElement;
let cells: Element[] = flikty2.cells;
let slider: HTMLElement = flikty2.slider;

// arrow shape tests
let flikty3: Flickity = new Flickity("#flickity-gallery", {
    arrowShape: "M 0,50 L 60,00 L 50,30 L 80,30 L 80,70 L 50,70 L 60,100 Z"
});

let flikty4: Flickity = new Flickity(new HTMLElement(), {
    arrowShape: {
        x0: 10,
        x1: 60, y1: 50,
        x2: 70, y2: 40,
        x3: 30
    }
});

let flikty5: Flickity = new Flickity(new HTMLElement(), {
    on: {
        ready: () => {},
        change: (index) => {},
        select: (index) => {},
        settle: (index)  => {},
        scroll: (progress)  => {},
        dragStart: (event, pointer)  => {},
        dragMove: (event, pointer, moveVector)  => {},
        dragEnd: (event, pointer)  => {},
        pointerDown: (event, pointer)  => {},
        pointerMove: (event, pointer, moveVector)  => {},
        pointerUp: (event, pointer)  => {},
        staticClick: (event, pointer, cellElement, cellIndex)  => {},
        lazyLoad: (event, cellElement)  => {},
        bgLazyLoad: (event, element)  => {},
        fullscreenChange: (isFullscreen)  => {}
    }
});

let fliktyBindings: Flickity.EventBindings = {
    ready: () => {},
    change: (index) => {},
    select: (index) => {},
    settle: (index)  => {},
    scroll: (progress)  => {},
    dragStart: (event, pointer)  => {},
    dragMove: (event, pointer, moveVector)  => {},
    dragEnd: (event, pointer)  => {},
    pointerDown: (event, pointer)  => {},
    pointerMove: (event, pointer, moveVector)  => {},
    pointerUp: (event, pointer)  => {},
    staticClick: (event, pointer, cellElement, cellIndex)  => {},
    lazyLoad: (event, cellElement)  => {},
    bgLazyLoad: (event, element)  => {},
    fullscreenChange: (isFullscreen)  => {}
};

let fliktyOpts1: Flickity.Options = {
    initialIndex: 0,
    accessibility: true,
    asNavFor: "#nav-bar",
    autoPlay: true,
    cellAlign: "left",
    cellSelector: ".gallery-cell",
    contain: true,
    draggable: true,
    freeScroll: false,
    freeScrollFriction: 0.5,
    friction: 0.8,
    imagesLoaded: false,
    lazyLoad: false,
    pageDots: false,
    arrowShape: "arrow.svg",
    percentPosition: false,
    prevNextButtons: false,
    selectedAttraction: 0.050,
    setGallerySize: true,
    watchCSS: true,
    wrapAround: true,
    resize: true,
    rightToLeft: false,
    on: fliktyBindings
};