From b61c3407454aa7cedc55309fc4d6e77645e5b0e5 Mon Sep 17 00:00:00 2001 From: Heber Date: Tue, 5 Mar 2019 14:14:10 -0700 Subject: [PATCH 1/7] Update Flickity Types Add types for "on" event binding --- types/flickity/index.d.ts | 88 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) diff --git a/types/flickity/index.d.ts b/types/flickity/index.d.ts index 4d9a8a4c25..880b53943a 100644 --- a/types/flickity/index.d.ts +++ b/types/flickity/index.d.ts @@ -2,6 +2,7 @@ // Project: https://flickity.metafizzy.co // Definitions by: Chris McGrath // Michael Wagner +// Anthony Heber // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 @@ -506,4 +507,91 @@ interface FlickityOptions { * javascript dictionary of points or path to SVG file */ arrowShape?: string | { x0: number, x1: number, y1: number, x2: number, y2: number, x3: number }; + + /** + * Bind events within Flickity's options by setting on to an Object. The object's keys should match the event names. on is useful for capturing events as Flickity is initialized, like ready + */ + on?: { + + /** + * Triggered after Flickity has been activated. + */ + ready?: () => void; + + /** + * Triggered when the selected slide is changed. + */ + change?: (index?: Number) => void; + + /** + * Triggered when a slide is selected. + * + * select is triggered any time a slide is selected, even on the same slide. change is triggered only when a different slide is selected. + * + * This event was previously cellSelect in Flickity v1. cellSelect will continue to work in Flickity v2. + */ + select?: (index?: Number) => void; + + /** + * Triggered when the slider is settled at its end position. + */ + settle?: (index?: Number) => void; + + /** + * Triggered when the slider moves. + */ + scroll?: (progress?: Number) => void; + + /** + * Triggered when dragging starts and the slider starts moving. + */ + dragStart?: (event?: Event, pointer?: Element | Touch) => void; + + /** + * Triggered when dragging moves and the slider moves. + */ + dragMove?: (event?: Event, pointer?: Element | Touch, moveVector?: { x: number, y: number }) => void; + + /** + * Triggered when dragging ends. + */ + dragEnd?: (event: Event, pointer?: Element | Touch) => void; + + /** + * Triggered when the user's pointer (mouse, touch, pointer) presses down. + */ + pointerDown?: (event: Event, pointer?: Element | Touch) => void; + + /** + * Triggered when the user's pointer moves. + */ + pointerMove?: (event?: Event, pointer?: Element | Touch, moveVector?: { x: number, y: number }) => void; + + /** + * Triggered when the user's pointer unpresses. + */ + pointerUp?: (event?: Event, pointer?: Element | Touch) => void; + + /** + * Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging. + * + * click events are hard to detect with draggable UI, as they are triggered whenever a user drags. Flickity's staticClick event resolves this, as it is triggered when the user has not dragged. + */ + staticClick?: (event?: Event, pointer?: Element | Touch, cellElement?: Element, cellIndex?: Number) => void; + + /** + * Triggered after an image has been loaded with lazyLoad. + */ + lazyLoad?: (event?: Event, cellElement?: Element) => void; + + /** + * Triggered after a background image has been loaded with bgLazyLoad. + */ + bgLazyLoad?: (event?: Event, element?: Element) => void; + + /** + * Triggered after entering or exiting fullscreen view. + */ + fullscreenChange?: (isFullscreen?: Boolean) => void; + } } From 52b5a630abe0329c02208051dd211d5799bf92a3 Mon Sep 17 00:00:00 2001 From: Anthony Heber Date: Tue, 5 Mar 2019 15:39:05 -0700 Subject: [PATCH 2/7] Add tests for new "on" bindings --- types/flickity/flickity-tests.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/types/flickity/flickity-tests.ts b/types/flickity/flickity-tests.ts index 63943119b4..8686d2f587 100644 --- a/types/flickity/flickity-tests.ts +++ b/types/flickity/flickity-tests.ts @@ -140,3 +140,23 @@ let flikty4: Flickity = new Flickity(new HTMLElement(), { 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) => {} + } +}); From b6265bae6fc5a9a751eb62b288bdb7b75195bfa4 Mon Sep 17 00:00:00 2001 From: Anthony Heber Date: Tue, 5 Mar 2019 15:43:58 -0700 Subject: [PATCH 3/7] Clean up linting --- types/flickity/index.d.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/types/flickity/index.d.ts b/types/flickity/index.d.ts index 880b53943a..5d9f3fa510 100644 --- a/types/flickity/index.d.ts +++ b/types/flickity/index.d.ts @@ -512,7 +512,6 @@ interface FlickityOptions { * Bind events within Flickity's options by setting on to an Object. The object's keys should match the event names. on is useful for capturing events as Flickity is initialized, like ready */ on?: { - /** * Triggered after Flickity has been activated. */ @@ -525,9 +524,7 @@ interface FlickityOptions { /** * Triggered when a slide is selected. - * * select is triggered any time a slide is selected, even on the same slide. change is triggered only when a different slide is selected. - * * This event was previously cellSelect in Flickity v1. cellSelect will continue to work in Flickity v2. */ select?: (index?: Number) => void; @@ -574,7 +571,6 @@ interface FlickityOptions { /** * Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging. - * * click events are hard to detect with draggable UI, as they are triggered whenever a user drags. Flickity's staticClick event resolves this, as it is triggered when the user has not dragged. */ staticClick?: (event?: Event, pointer?: Element | Touch, cellElement?: Element, cellIndex?: Number) => void; @@ -593,5 +589,5 @@ interface FlickityOptions { * Triggered after entering or exiting fullscreen view. */ fullscreenChange?: (isFullscreen?: Boolean) => void; - } + }; } From ca73f3043114ae55ee3a018311ab031b424e34dd Mon Sep 17 00:00:00 2001 From: Anthony Heber Date: Wed, 6 Mar 2019 07:56:20 -0700 Subject: [PATCH 4/7] Expose Options interface Expose the Options interface directly so it can be constructed before it is passed to the constructor. --- types/flickity/flickity-tests.ts | 46 +++ types/flickity/index.d.ts | 571 ++++++++++++++++--------------- 2 files changed, 333 insertions(+), 284 deletions(-) diff --git a/types/flickity/flickity-tests.ts b/types/flickity/flickity-tests.ts index 8686d2f587..6e24f16b3e 100644 --- a/types/flickity/flickity-tests.ts +++ b/types/flickity/flickity-tests.ts @@ -160,3 +160,49 @@ let flikty5: Flickity = new Flickity(new HTMLElement(), { 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 +}; + +let fliktyOpts2: Flickity.Options = { + 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) => {} + } +}; diff --git a/types/flickity/index.d.ts b/types/flickity/index.d.ts index 5d9f3fa510..44812373d9 100644 --- a/types/flickity/index.d.ts +++ b/types/flickity/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for Flickity 2.0 +// Type definitions for Flickity 2.2 // Project: https://flickity.metafizzy.co // Definitions by: Chris McGrath // Michael Wagner @@ -11,7 +11,7 @@ export = Flickity; declare global { interface JQuery { - flickity(options?: FlickityOptions): this; + flickity(options?: Flickity.Options): this; flickity(command: string, ...params: any[]): this; } } @@ -67,6 +67,288 @@ declare namespace Flickity { * Triggered after a background image has been loaded with bgLazyLoad. */ "bgLazyLoad"; + + + + interface Options { + /** + * Specify selector for cell elements. cellSelector is useful if you have other elements in your gallery elements that are not cells. + * + * default: '.gallery-cell' + */ + cellSelector?: string; + + /** + * Zero-based index of the initial selected cell. + */ + initialIndex?: number; + + /** + * Enable keyboard navigation. Users can tab to a Flickity gallery, and pressing left & right keys to change cells. + * + * default: true + */ + accessibility?: boolean; + + /** + * Sets the height of the gallery to the height of the tallest cell. Set to false if you prefer to size the gallery with CSS, rather than using the size of cells. + * + * default: true + */ + setGallerySize?: boolean; + + /** + * Adjusts sizes and positions when window is resized. + * + * default: true + */ + resize?: boolean; + + /** + * Align cells within the gallery element. + * opttions: 'left', 'center', 'right' + * + * default: 'center' + */ + cellAlign?: string; + + /** + * Contains cells to gallery element to prevent excess scroll at beginning or end. Has no effect if wrapAround is enabled + * + * default: true + */ + contain?: boolean; + + /** + * Unloaded images have no size, which can throw off cell positions. To fix this, the imagesLoaded option re-positions cells once their images have loaded. + * + * default: true + */ + imagesLoaded?: boolean; + + /** + * Sets positioning in percent values, rather than pixel values. If your cells do not have percent widths, we recommended percentPosition: false. + * + * default: false + */ + percentPosition?: boolean; + + /** + * Enables right-to-left layout. + * + * default: false + */ + rightToLeft?: boolean; + + /** + * Enables dragging and flicking + * + * default: true + */ + draggable?: boolean; + + /** + * Enables content to be freely scrolled and flicked without aligning cells to an end position. + * Enable freeScroll and wrapAround and you can flick forever, man. + * + * default: false + */ + freeScroll?: boolean; + + /** + * At the end of cells, wrap-around to the other end for infinite scrolling. + * + * default: false + */ + wrapAround?: boolean; + + /** + * Groups cells together in slides. Flicking, page dots, and previous/next buttons are mapped to group slides, not individual cells. + * `is-selected` class is added to the multiple cells in the selected slide. + * If set to true, group cells that fit in carousel viewport. + * If set to a number, group cells by that number. + * If set to a percent string, group cells that fit in the percent of the width of the carousel viewport. + */ + groupCells?: boolean | number | string; + + /** + * Loads cell images when a cell is selected. + * Set the image's URL to load with the `data-flickity-lazyload` attribute. + * If set to `true`, lazyloads image in selected slide + * If set to a number n, load images in selected slide and next n slides and previous n slides. + * + * default: false + */ + lazyLoad?: boolean | number; + + /** + * Loads cell background image when a cell is selected. + * Set the background image's URL to load with the `data-flickity-bg-lazyload` attribute. + * If set to `true`, lazyloads background image in selected slide + * If set to a number n, load background images in selected slide and next n slides and previous n slides. + * bgLazyLoad requires the flickity-bg-lazyload package. This package is not included and must be installed separately. + */ + bgLazyLoad?: boolean | number; + + /** + * Automatically advances to the next cell. + * + * default: false + */ + autoPlay?: boolean | number; + + /** + * Changes height of carousel to fit height of selected slide. + */ + adaptiveHeight?: boolean; + + /** + * You can enable and disable Flickity with CSS. watchCSS option watches the content of :after of the gallery element. Flickity is enabled if :after content is 'flickity'. + * note: IE8 and Android 2.3 do not support watching :after. Flickity will be disabled when watchCSS: true. Set watchCSS: 'fallbackOn' to enable Flickity for these browsers. + * + * default: false + */ + watchCSS?: boolean | string; + + /** + * Use one Flickity gallery as navigation for another. + * + * default: disabled + */ + asNavFor?: string | HTMLElement; + + /** + * The number of pixels a mouse or touch has to move before dragging begins. Increase dragThreshold to allow for more wiggle room for vertical page scrolling on touch devices. + * + * default: 3 + */ + dragThreshold?: number; + + /** + * selectedAttraction attracts the position of the slider to the selected cell. Higher attraction makes the slider move faster. Lower makes it move slower. + * + * default: 0.025 + */ + selectedAttraction?: number; + + /** + * Friction slows the movement of slider. Higher friction makes the slider feel stickier and less bouncy. Lower friction makes the slider feel looser and more wobbly. + * + * default: 0.28 + */ + friction?: number; + + /** + * Slows movement of slider when freeScroll: true. Higher friction makes the slider feel stickier. Lower friction makes the slider feel looser. + * + * default: 0.075 + */ + freeScrollFriction?: number; + + /** + * Creates and enables previous & next buttons. + * + * default: true + */ + prevNextButtons?: boolean; + + /** + * Creates and enables paging dots. + * + * default: true + */ + pageDots?: boolean; + + /** + * Draws the shape of the arrows in the previous & next buttons. + * javascript dictionary of points or path to SVG file + */ + arrowShape?: string | { x0: number, x1: number, y1: number, x2: number, y2: number, x3: number }; + + /** + * Bind events within Flickity's options by setting on to an Object. The object's keys should match the event names. on is useful for capturing events as Flickity is initialized, like ready + */ + on?: { + /** + * Triggered after Flickity has been activated. + */ + ready?: () => void; + + /** + * Triggered when the selected slide is changed. + */ + change?: (index?: Number) => void; + + /** + * Triggered when a slide is selected. + * select is triggered any time a slide is selected, even on the same slide. change is triggered only when a different slide is selected. + * This event was previously cellSelect in Flickity v1. cellSelect will continue to work in Flickity v2. + */ + select?: (index?: Number) => void; + cellSelect?: (index?: Number) => void; + /** + * Triggered when the slider is settled at its end position. + */ + settle?: (index?: Number) => void; + + /** + * Triggered when the slider moves. + */ + scroll?: (progress?: Number) => void; + + /** + * Triggered when dragging starts and the slider starts moving. + */ + dragStart?: (event?: Event, pointer?: Element | Touch) => void; + + /** + * Triggered when dragging moves and the slider moves. + */ + dragMove?: (event?: Event, pointer?: Element | Touch, moveVector?: { x: number, y: number }) => void; + + /** + * Triggered when dragging ends. + */ + dragEnd?: (event: Event, pointer?: Element | Touch) => void; + + /** + * Triggered when the user's pointer (mouse, touch, pointer) presses down. + */ + pointerDown?: (event: Event, pointer?: Element | Touch) => void; + + /** + * Triggered when the user's pointer moves. + */ + pointerMove?: (event?: Event, pointer?: Element | Touch, moveVector?: { x: number, y: number }) => void; + + /** + * Triggered when the user's pointer unpresses. + */ + pointerUp?: (event?: Event, pointer?: Element | Touch) => void; + + /** + * Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging. + * click events are hard to detect with draggable UI, as they are triggered whenever a user drags. Flickity's staticClick event resolves this, as it is triggered when the user has not dragged. + */ + staticClick?: (event?: Event, pointer?: Element | Touch, cellElement?: Element, cellIndex?: Number) => void; + + /** + * Triggered after an image has been loaded with lazyLoad. + */ + lazyLoad?: (event?: Event, cellElement?: Element) => void; + + /** + * Triggered after a background image has been loaded with bgLazyLoad. + */ + bgLazyLoad?: (event?: Event, element?: Element) => void; + + /** + * Triggered after entering or exiting fullscreen view. + */ + fullscreenChange?: (isFullscreen?: Boolean) => void; + }; + } + } declare class Flickity { @@ -74,9 +356,9 @@ declare class Flickity { * Initializes an new instance of Flickity . * * @param element Element selector string or container Element to initialize Flickity on - * @param options (IFlickityOptions) Flickity options + * @param options (IOptions) Flickity options */ - constructor(selector: string | Element, options?: FlickityOptions); + constructor(selector: string | Element, options?: Flickity.Options); // properties @@ -292,7 +574,7 @@ declare class Flickity { once(eventname: string, callback: (event?: Event, pointer?: Element | Touch, cellElement?: Element, cellIndex?: number) => any): void; /** - * one time event handler + * one time event handl`er * @param eventName name of event (@see Flickity.FlickityEvents class for filckity supported events) * @param callback callback funtion to execute when event fires */ @@ -312,282 +594,3 @@ declare class Flickity { */ once(eventname: string, callback: (event?: Event, pointer?: Element | Touch) => any): void; } - -interface FlickityOptions { - /** - * Specify selector for cell elements. cellSelector is useful if you have other elements in your gallery elements that are not cells. - * - * default: '.gallery-cell' - */ - cellSelector?: string; - - /** - * Zero-based index of the initial selected cell. - */ - initialIndex?: number; - - /** - * Enable keyboard navigation. Users can tab to a Flickity gallery, and pressing left & right keys to change cells. - * - * default: true - */ - accessibility?: boolean; - - /** - * Sets the height of the gallery to the height of the tallest cell. Set to false if you prefer to size the gallery with CSS, rather than using the size of cells. - * - * default: true - */ - setGallerySize?: boolean; - - /** - * Adjusts sizes and positions when window is resized. - * - * default: true - */ - resize?: boolean; - - /** - * Align cells within the gallery element. - * opttions: 'left', 'center', 'right' - * - * default: 'center' - */ - cellAlign?: string; - - /** - * Contains cells to gallery element to prevent excess scroll at beginning or end. Has no effect if wrapAround is enabled - * - * default: true - */ - contain?: boolean; - - /** - * Unloaded images have no size, which can throw off cell positions. To fix this, the imagesLoaded option re-positions cells once their images have loaded. - * - * default: true - */ - imagesLoaded?: boolean; - - /** - * Sets positioning in percent values, rather than pixel values. If your cells do not have percent widths, we recommended percentPosition: false. - * - * default: false - */ - percentPosition?: boolean; - - /** - * Enables right-to-left layout. - * - * default: false - */ - rightToLeft?: boolean; - - /** - * Enables dragging and flicking - * - * default: true - */ - draggable?: boolean; - - /** - * Enables content to be freely scrolled and flicked without aligning cells to an end position. - * Enable freeScroll and wrapAround and you can flick forever, man. - * - * default: false - */ - freeScroll?: boolean; - - /** - * At the end of cells, wrap-around to the other end for infinite scrolling. - * - * default: false - */ - wrapAround?: boolean; - - /** - * Groups cells together in slides. Flicking, page dots, and previous/next buttons are mapped to group slides, not individual cells. - * `is-selected` class is added to the multiple cells in the selected slide. - * If set to true, group cells that fit in carousel viewport. - * If set to a number, group cells by that number. - * If set to a percent string, group cells that fit in the percent of the width of the carousel viewport. - */ - groupCells?: boolean | number | string; - - /** - * Loads cell images when a cell is selected. - * Set the image's URL to load with the `data-flickity-lazyload` attribute. - * If set to `true`, lazyloads image in selected slide - * If set to a number n, load images in selected slide and next n slides and previous n slides. - * - * default: false - */ - lazyLoad?: boolean | number; - - /** - * Loads cell background image when a cell is selected. - * Set the background image's URL to load with the `data-flickity-bg-lazyload` attribute. - * If set to `true`, lazyloads background image in selected slide - * If set to a number n, load background images in selected slide and next n slides and previous n slides. - * bgLazyLoad requires the flickity-bg-lazyload package. This package is not included and must be installed separately. - */ - bgLazyLoad?: boolean | number; - - /** - * Automatically advances to the next cell. - * - * default: false - */ - autoPlay?: boolean | number; - - /** - * Changes height of carousel to fit height of selected slide. - */ - adaptiveHeight?: boolean; - - /** - * You can enable and disable Flickity with CSS. watchCSS option watches the content of :after of the gallery element. Flickity is enabled if :after content is 'flickity'. - * note: IE8 and Android 2.3 do not support watching :after. Flickity will be disabled when watchCSS: true. Set watchCSS: 'fallbackOn' to enable Flickity for these browsers. - * - * default: false - */ - watchCSS?: boolean | string; - - /** - * Use one Flickity gallery as navigation for another. - * - * default: disabled - */ - asNavFor?: string | HTMLElement; - - /** - * The number of pixels a mouse or touch has to move before dragging begins. Increase dragThreshold to allow for more wiggle room for vertical page scrolling on touch devices. - * - * default: 3 - */ - dragThreshold?: number; - - /** - * selectedAttraction attracts the position of the slider to the selected cell. Higher attraction makes the slider move faster. Lower makes it move slower. - * - * default: 0.025 - */ - selectedAttraction?: number; - - /** - * Friction slows the movement of slider. Higher friction makes the slider feel stickier and less bouncy. Lower friction makes the slider feel looser and more wobbly. - * - * default: 0.28 - */ - friction?: number; - - /** - * Slows movement of slider when freeScroll: true. Higher friction makes the slider feel stickier. Lower friction makes the slider feel looser. - * - * default: 0.075 - */ - freeScrollFriction?: number; - - /** - * Creates and enables previous & next buttons. - * - * default: true - */ - prevNextButtons?: boolean; - - /** - * Creates and enables paging dots. - * - * default: true - */ - pageDots?: boolean; - - /** - * Draws the shape of the arrows in the previous & next buttons. - * javascript dictionary of points or path to SVG file - */ - arrowShape?: string | { x0: number, x1: number, y1: number, x2: number, y2: number, x3: number }; - - /** - * Bind events within Flickity's options by setting on to an Object. The object's keys should match the event names. on is useful for capturing events as Flickity is initialized, like ready - */ - on?: { - /** - * Triggered after Flickity has been activated. - */ - ready?: () => void; - - /** - * Triggered when the selected slide is changed. - */ - change?: (index?: Number) => void; - - /** - * Triggered when a slide is selected. - * select is triggered any time a slide is selected, even on the same slide. change is triggered only when a different slide is selected. - * This event was previously cellSelect in Flickity v1. cellSelect will continue to work in Flickity v2. - */ - select?: (index?: Number) => void; - - /** - * Triggered when the slider is settled at its end position. - */ - settle?: (index?: Number) => void; - - /** - * Triggered when the slider moves. - */ - scroll?: (progress?: Number) => void; - - /** - * Triggered when dragging starts and the slider starts moving. - */ - dragStart?: (event?: Event, pointer?: Element | Touch) => void; - - /** - * Triggered when dragging moves and the slider moves. - */ - dragMove?: (event?: Event, pointer?: Element | Touch, moveVector?: { x: number, y: number }) => void; - - /** - * Triggered when dragging ends. - */ - dragEnd?: (event: Event, pointer?: Element | Touch) => void; - - /** - * Triggered when the user's pointer (mouse, touch, pointer) presses down. - */ - pointerDown?: (event: Event, pointer?: Element | Touch) => void; - - /** - * Triggered when the user's pointer moves. - */ - pointerMove?: (event?: Event, pointer?: Element | Touch, moveVector?: { x: number, y: number }) => void; - - /** - * Triggered when the user's pointer unpresses. - */ - pointerUp?: (event?: Event, pointer?: Element | Touch) => void; - - /** - * Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging. - * click events are hard to detect with draggable UI, as they are triggered whenever a user drags. Flickity's staticClick event resolves this, as it is triggered when the user has not dragged. - */ - staticClick?: (event?: Event, pointer?: Element | Touch, cellElement?: Element, cellIndex?: Number) => void; - - /** - * Triggered after an image has been loaded with lazyLoad. - */ - lazyLoad?: (event?: Event, cellElement?: Element) => void; - - /** - * Triggered after a background image has been loaded with bgLazyLoad. - */ - bgLazyLoad?: (event?: Event, element?: Element) => void; - - /** - * Triggered after entering or exiting fullscreen view. - */ - fullscreenChange?: (isFullscreen?: Boolean) => void; - }; -} From f775dda6dca2d1f728c74d4058f6a7e5d758627e Mon Sep 17 00:00:00 2001 From: Anthony Heber Date: Wed, 6 Mar 2019 08:03:30 -0700 Subject: [PATCH 5/7] Clean up linting --- types/flickity/index.d.ts | 44 +++++++++++++++++++++++++++------------ 1 file changed, 31 insertions(+), 13 deletions(-) diff --git a/types/flickity/index.d.ts b/types/flickity/index.d.ts index 44812373d9..c2c475d6af 100644 --- a/types/flickity/index.d.ts +++ b/types/flickity/index.d.ts @@ -67,9 +67,6 @@ declare namespace Flickity { * Triggered after a background image has been loaded with bgLazyLoad. */ "bgLazyLoad"; - - - interface Options { /** * Specify selector for cell elements. cellSelector is useful if you have other elements in your gallery elements that are not cells. @@ -299,48 +296,70 @@ declare namespace Flickity { /** * Triggered when dragging starts and the slider starts moving. */ - dragStart?: (event?: Event, pointer?: Element | Touch) => void; + dragStart?: ( + event?: Event, + pointer?: Element | Touch) => void; /** * Triggered when dragging moves and the slider moves. */ - dragMove?: (event?: Event, pointer?: Element | Touch, moveVector?: { x: number, y: number }) => void; + dragMove?: ( + event?: Event, + pointer?: Element | Touch, + moveVector?: { x: number, y: number }) => void; /** * Triggered when dragging ends. */ - dragEnd?: (event: Event, pointer?: Element | Touch) => void; + dragEnd?: ( + event: Event, + pointer?: Element | Touch) => void; /** * Triggered when the user's pointer (mouse, touch, pointer) presses down. */ - pointerDown?: (event: Event, pointer?: Element | Touch) => void; + pointerDown?: ( + event: Event, + pointer?: Element | Touch) => void; /** * Triggered when the user's pointer moves. */ - pointerMove?: (event?: Event, pointer?: Element | Touch, moveVector?: { x: number, y: number }) => void; + pointerMove?: ( + event?: Event, + pointer?: Element | Touch, + moveVector?: { x: number, y: number }) => void; /** * Triggered when the user's pointer unpresses. */ - pointerUp?: (event?: Event, pointer?: Element | Touch) => void; + pointerUp?: ( + event?: Event, + pointer?: Element | Touch) => void; /** * Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging. * click events are hard to detect with draggable UI, as they are triggered whenever a user drags. Flickity's staticClick event resolves this, as it is triggered when the user has not dragged. */ - staticClick?: (event?: Event, pointer?: Element | Touch, cellElement?: Element, cellIndex?: Number) => void; + staticClick?: ( + event?: Event, + pointer?: Element | Touch, + cellElement?: Element, + cellIndex?: Number) => void; /** * Triggered after an image has been loaded with lazyLoad. */ - lazyLoad?: (event?: Event, cellElement?: Element) => void; + lazyLoad?: ( + event?: Event, + cellElement?: Element) => void; /** * Triggered after a background image has been loaded with bgLazyLoad. */ - bgLazyLoad?: (event?: Event, element?: Element) => void; + bgLazyLoad?: ( + event?: Event, + element?: Element) => void; /** * Triggered after entering or exiting fullscreen view. @@ -348,7 +367,6 @@ declare namespace Flickity { fullscreenChange?: (isFullscreen?: Boolean) => void; }; } - } declare class Flickity { From e46cb9d61a0960cd707d41fb9452468578257705 Mon Sep 17 00:00:00 2001 From: Anthony Heber Date: Wed, 6 Mar 2019 08:09:14 -0700 Subject: [PATCH 6/7] More lint fixing --- types/flickity/index.d.ts | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/types/flickity/index.d.ts b/types/flickity/index.d.ts index c2c475d6af..8b5b7b2ffe 100644 --- a/types/flickity/index.d.ts +++ b/types/flickity/index.d.ts @@ -297,68 +297,69 @@ declare namespace Flickity { * Triggered when dragging starts and the slider starts moving. */ dragStart?: ( - event?: Event, + event?: Event, pointer?: Element | Touch) => void; /** * Triggered when dragging moves and the slider moves. */ dragMove?: ( - event?: Event, - pointer?: Element | Touch, + event?: Event, + pointer?: Element | Touch, moveVector?: { x: number, y: number }) => void; /** * Triggered when dragging ends. */ dragEnd?: ( - event: Event, + event: Event, pointer?: Element | Touch) => void; /** * Triggered when the user's pointer (mouse, touch, pointer) presses down. */ pointerDown?: ( - event: Event, + event: Event, pointer?: Element | Touch) => void; /** * Triggered when the user's pointer moves. */ pointerMove?: ( - event?: Event, - pointer?: Element | Touch, + event?: Event, + pointer?: Element | Touch, moveVector?: { x: number, y: number }) => void; /** * Triggered when the user's pointer unpresses. */ pointerUp?: ( - event?: Event, + event?: Event, pointer?: Element | Touch) => void; /** * Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging. - * click events are hard to detect with draggable UI, as they are triggered whenever a user drags. Flickity's staticClick event resolves this, as it is triggered when the user has not dragged. + * click events are hard to detect with draggable UI, as they are triggered whenever a user drags. + * Flickity's staticClick event resolves this, as it is triggered when the user has not dragged. */ staticClick?: ( - event?: Event, - pointer?: Element | Touch, - cellElement?: Element, + event?: Event, + pointer?: Element | Touch, + cellElement?: Element, cellIndex?: Number) => void; /** * Triggered after an image has been loaded with lazyLoad. */ lazyLoad?: ( - event?: Event, + event?: Event, cellElement?: Element) => void; /** * Triggered after a background image has been loaded with bgLazyLoad. */ bgLazyLoad?: ( - event?: Event, + event?: Event, element?: Element) => void; /** From ad7bc3d6e41fa0008dc9fbf1ba27b45e744f8030 Mon Sep 17 00:00:00 2001 From: Anthony Heber Date: Wed, 6 Mar 2019 08:18:31 -0700 Subject: [PATCH 7/7] Abstract binding to their own interface Clean up types and abstract types into their own interface --- types/flickity/flickity-tests.ts | 41 ++++--- types/flickity/index.d.ts | 180 ++++++++++++++++--------------- 2 files changed, 111 insertions(+), 110 deletions(-) diff --git a/types/flickity/flickity-tests.ts b/types/flickity/flickity-tests.ts index 6e24f16b3e..7fa5dc78eb 100644 --- a/types/flickity/flickity-tests.ts +++ b/types/flickity/flickity-tests.ts @@ -161,6 +161,24 @@ let flikty5: Flickity = new Flickity(new HTMLElement(), { } }); +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, @@ -184,25 +202,6 @@ let fliktyOpts1: Flickity.Options = { watchCSS: true, wrapAround: true, resize: true, - rightToLeft: false -}; - -let fliktyOpts2: Flickity.Options = { - 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) => {} - } + rightToLeft: false, + on: fliktyBindings }; diff --git a/types/flickity/index.d.ts b/types/flickity/index.d.ts index 8b5b7b2ffe..69d4dbda10 100644 --- a/types/flickity/index.d.ts +++ b/types/flickity/index.d.ts @@ -265,108 +265,110 @@ declare namespace Flickity { /** * Bind events within Flickity's options by setting on to an Object. The object's keys should match the event names. on is useful for capturing events as Flickity is initialized, like ready */ - on?: { - /** - * Triggered after Flickity has been activated. - */ - ready?: () => void; + on?: EventBindings; + } - /** - * Triggered when the selected slide is changed. - */ - change?: (index?: Number) => void; + interface EventBindings { + /** + * Triggered after Flickity has been activated. + */ + ready?: () => void; - /** - * Triggered when a slide is selected. - * select is triggered any time a slide is selected, even on the same slide. change is triggered only when a different slide is selected. - * This event was previously cellSelect in Flickity v1. cellSelect will continue to work in Flickity v2. - */ - select?: (index?: Number) => void; - cellSelect?: (index?: Number) => void; - /** - * Triggered when the slider is settled at its end position. - */ - settle?: (index?: Number) => void; + /** + * Triggered when the selected slide is changed. + */ + change?: (index?: number) => void; - /** - * Triggered when the slider moves. - */ - scroll?: (progress?: Number) => void; + /** + * Triggered when a slide is selected. + * select is triggered any time a slide is selected, even on the same slide. change is triggered only when a different slide is selected. + * This event was previously cellSelect in Flickity v1. cellSelect will continue to work in Flickity v2. + */ + select?: (index?: number) => void; + cellSelect?: (index?: number) => void; + /** + * Triggered when the slider is settled at its end position. + */ + settle?: (index?: number) => void; - /** - * Triggered when dragging starts and the slider starts moving. - */ - dragStart?: ( - event?: Event, - pointer?: Element | Touch) => void; + /** + * Triggered when the slider moves. + */ + scroll?: (progress?: number) => void; - /** - * Triggered when dragging moves and the slider moves. - */ - dragMove?: ( - event?: Event, - pointer?: Element | Touch, - moveVector?: { x: number, y: number }) => void; + /** + * Triggered when dragging starts and the slider starts moving. + */ + dragStart?: ( + event?: Event, + pointer?: Element | Touch) => void; - /** - * Triggered when dragging ends. - */ - dragEnd?: ( - event: Event, - pointer?: Element | Touch) => void; + /** + * Triggered when dragging moves and the slider moves. + */ + dragMove?: ( + event?: Event, + pointer?: Element | Touch, + moveVector?: { x: number, y: number }) => void; - /** - * Triggered when the user's pointer (mouse, touch, pointer) presses down. - */ - pointerDown?: ( - event: Event, - pointer?: Element | Touch) => void; + /** + * Triggered when dragging ends. + */ + dragEnd?: ( + event: Event, + pointer?: Element | Touch) => void; - /** - * Triggered when the user's pointer moves. - */ - pointerMove?: ( - event?: Event, - pointer?: Element | Touch, - moveVector?: { x: number, y: number }) => void; + /** + * Triggered when the user's pointer (mouse, touch, pointer) presses down. + */ + pointerDown?: ( + event: Event, + pointer?: Element | Touch) => void; - /** - * Triggered when the user's pointer unpresses. - */ - pointerUp?: ( - event?: Event, - pointer?: Element | Touch) => void; + /** + * Triggered when the user's pointer moves. + */ + pointerMove?: ( + event?: Event, + pointer?: Element | Touch, + moveVector?: { x: number, y: number }) => void; - /** - * Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging. - * click events are hard to detect with draggable UI, as they are triggered whenever a user drags. - * Flickity's staticClick event resolves this, as it is triggered when the user has not dragged. - */ - staticClick?: ( - event?: Event, - pointer?: Element | Touch, - cellElement?: Element, - cellIndex?: Number) => void; + /** + * Triggered when the user's pointer unpresses. + */ + pointerUp?: ( + event?: Event, + pointer?: Element | Touch) => void; - /** - * Triggered after an image has been loaded with lazyLoad. - */ - lazyLoad?: ( - event?: Event, - cellElement?: Element) => void; + /** + * Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging. + * click events are hard to detect with draggable UI, as they are triggered whenever a user drags. + * Flickity's staticClick event resolves this, as it is triggered when the user has not dragged. + */ + staticClick?: ( + event?: Event, + pointer?: Element | Touch, + cellElement?: Element, + cellIndex?: number) => void; - /** - * Triggered after a background image has been loaded with bgLazyLoad. - */ - bgLazyLoad?: ( - event?: Event, - element?: Element) => void; + /** + * Triggered after an image has been loaded with lazyLoad. + */ + lazyLoad?: ( + event?: Event, + cellElement?: Element) => void; - /** - * Triggered after entering or exiting fullscreen view. - */ - fullscreenChange?: (isFullscreen?: Boolean) => void; - }; + /** + * Triggered after a background image has been loaded with bgLazyLoad. + */ + bgLazyLoad?: ( + event?: Event, + element?: Element) => void; + + /** + * Triggered after entering or exiting fullscreen view. + */ + fullscreenChange?: (isFullscreen?: boolean) => void; } }