Abstract binding to their own interface

Clean up types and abstract types into their own interface

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
 };

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;
     }
 }