Merge pull request DefinitelyTyped#1112 from flurg/master

New definition file and tests for mCustomScrollbar
mattmccray · Oct 6, 2013 · 52952e9 · 52952e9
2 parents 4afd742 + 0e80e00
commit 52952e9
Show file tree

Hide file tree

Showing 3 changed files with 303 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -154,6 +154,7 @@ List of Definitions
 * [Livestamp.js](https://github.com/mattbradley/livestampjs) (by [Vincent Bortone](https://github.com/vbortone))
 * [Logg](https://github.com/dpup/node-logg) (by [Bret Little](https://github.com/blittle))
 * [Marked](https://github.com/chjj/marked) (by [William Orr](https://github.com/worr))
+* [mCustomScrollbar](https://github.com/malihu/malihu-custom-scrollbar-plugin) (by [Sarah Williams] (https://github.com/flurg))
 * [Meteor](https://www.meteor.com) (by [Dave Allen](https://github.com/fullflavedave))
 * [Modernizr](http://modernizr.com/) (by [Boris Yankov](https://github.com/borisyankov) and [Theodore Brown](https://github.com/theodorejb/))
 * [Moment.js](https://github.com/timrwood/moment) (by [Michael Lakerveld](https://github.com/Lakerfield))

diff --git a/mCustomScrollbar/mCustomScrollbar-tests.ts b/mCustomScrollbar/mCustomScrollbar-tests.ts
@@ -0,0 +1,150 @@
+/// <reference path="../jquery/jquery.d.ts" />
+/// <reference path="mCustomScrollbar.d.ts" />
+
+class SimpleTest {
+    element: JQuery;
+
+    constructor() {
+        this.element = $(".content");
+
+        this.element.mCustomScrollbar({
+            scrollButtons: {
+                enable: true
+            }
+        });
+    }
+}
+
+class SimpleTestAllParams {
+    element: JQuery;
+
+    constructor() {
+        this.element = $(".content");
+
+        this.element.mCustomScrollbar({
+            set_width: false,
+            set_height: false,
+            horizontalScroll: false,
+            scrollInertia: 950,
+            mouseWheel: true,
+            mouseWheelPixels: "auto",
+            autoDraggerLength: true,
+            autoHideScrollbar: false,
+            scrollButtons: {
+                enable: false,
+                scrollType: "continuous",
+                scrollSpeed: "auto",
+                scrollAmount: 40
+            },
+            advanced: {
+                updateOnBrowserResize: true,
+                updateOnContentResize: false,
+                autoExpandHorizontalScroll: false,
+                autoScrollOnFocus: true,
+                normalizeMouseWheelDelta: false
+            },
+            contentTouchScroll: true,
+            callbacks: {
+                onScrollStart: () => { },
+                onScroll: () => { },
+                onTotalScroll: () => { },
+                onTotalScrollBack: () => { },
+                onTotalScrollOffset: 0,
+                onTotalScrollBackOffset: 0,
+                whileScrolling: () => { }
+            },
+            theme: "light"
+        });
+    }
+}
+
+class CallbacksTest {
+    element: JQuery;
+
+    constructor() {
+        this.element = $(".content");
+
+        this.element.mCustomScrollbar({
+            scrollButtons: {
+                enable: true
+            },
+            callbacks: {
+                onScrollStart: () => {
+                    this.OnScrollStart();
+                },
+                onScroll: () => {
+                    this.OnScroll();
+                },
+                onTotalScroll: () => {
+                    this.OnTotalScroll();
+                },
+                onTotalScrollBack: () => {
+                    this.OnTotalScrollBack();
+                },
+                onTotalScrollOffset: 40,
+                onTotalScrollBackOffset: 20,
+                whileScrolling: () => {
+                    this.WhileScrolling();
+                }
+            }
+        });
+    }
+
+    OnScrollStart() {
+        $(".output .onScrollStart").stop(true, true).css("display", "inline-block").delay(500).fadeOut(500);
+    }
+
+    OnScroll() {
+        $(".output .onScroll").stop(true, true).css("display", "inline-block").delay(500).fadeOut(500);
+    }
+
+    OnTotalScroll() {
+        $(".output .onTotalScroll").stop(true, true).css("display", "inline-block").delay(500).fadeOut(500);
+    }
+
+    OnTotalScrollBack() {
+        $(".output .onTotalScrollBack").stop(true, true).css("display", "inline-block").delay(500).fadeOut(500);
+    }
+
+    WhileScrolling() {
+        $(".output .whileScrolling").stop(true, true).css("display", "inline-block").fadeOut(500);
+    }
+}
+
+class DisableDestroyTest {
+    element: JQuery;
+
+    constructor() {
+        this.element = $(".content");
+
+        this.element.mCustomScrollbar({
+            scrollButtons: {
+                enable: true
+            }
+        });
+
+        $("#disable-scrollbar").click((e) => {
+            e.preventDefault();
+            this.element.mCustomScrollbar("disable", true);
+        });
+        $("#disable-scrollbar-no-reset").click((e) => {
+            e.preventDefault();
+            this.element.mCustomScrollbar("disable");
+        });
+        $("#enable-scrollbar").click((e) => {
+            e.preventDefault();
+            this.element.mCustomScrollbar("update");
+        });
+        $("#destroy-scrollbar").click((e) => {
+            e.preventDefault();
+            this.element.mCustomScrollbar("destroy");
+        });
+        $("#rebuild-scrollbar").click((e) => {
+            this.element.mCustomScrollbar({
+                scrollButtons: {
+                    enable: true
+                }
+            });
+        });
+    }
+}
diff --git a/mCustomScrollbar/mCustomScrollbar.d.ts b/mCustomScrollbar/mCustomScrollbar.d.ts
@@ -0,0 +1,152 @@
+// Type definitions for mCustomScrollbar 2.8.2
+// Project: https://github.com/malihu/malihu-custom-scrollbar-plugin
+// Definitions by: Sarah Williams <https://github.com/flurg>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+/// <reference path="../jquery/jquery.d.ts" />
+
+declare module MCustomScrollbar {
+    interface CustomScrollbarOptions {
+        /**
+        * Set the width of your content (overwrites CSS width), value in pixels (integer) or percentage (string)
+        */
+        set_width?: any;
+        /**
+        * Set the height of your content (overwirtes CSS height), value in pixels (integer) or percentage (string)
+        */
+        set_height?: any;
+        /**
+        * Add horizontal scrollbar (default is vertical), value: true, false
+        */
+        horizontalScroll?: boolean;
+        /**
+        * Scrolling inertia (easing), value in milliseconds (0 for no scrolling inertia)
+        */
+        scrollInertia?: number;
+        /**
+        * Mouse wheel support, value: true, false
+        */
+        mouseWheel?: boolean;
+        /**
+        * Mouse wheel scrolling pixels amount, value in pixels (integer) or "auto" (script calculates and sets pixels amount according to content length)
+        */
+        mouseWheelPixels?: any;
+        /**
+        * Auto-adjust scrollbar height/width according to content, values: true, false
+        */
+        autoDraggerLength?: boolean;
+        /**
+        * Automatically hide the scrollbar when idle or mouse is not over the content
+        */
+        autoHideScrollbar?: boolean;
+        scrollButtons?: {
+            /**
+            * Scroll buttons scroll type, values: "continuous" (scroll continuously while pressing the button), "pixels" (scrolls by a fixed number of pixels on each click")
+            */
+            scrollType?: string;
+            /**
+            * Scroll buttons continuous scrolling speed, integer value or "auto" (script calculates and sets the speed according to content length)
+            */
+            scrollSpeed?: any;
+            /**
+            * Scroll buttons pixels scrolling amount, value in pixels
+            */
+            scrollAmount?: number;
+        }
+    advanced?: {
+            /**
+            * Update scrollbars on browser resize (for fluid content blocks and layouts based on percentages), values: true, false. Set to false only when you content has fixed dimensions
+            */
+            updateOnBrowserResize?: boolean;
+            /**
+            * Auto-update scrollbars on content resize (useful when adding/changing content progrmatically), value: true, false. Setting this to true makes the script check for content 
+            * length changes (every few milliseconds) and automatically call plugin's update method to adjust the scrollbar accordingly
+            */
+            updateOnContentResize?: boolean;
+            /**
+            * Auto-expanding content's width on horizontal scrollbars, values: true, false. Set to true if you have horizontal scrollbr on content that change on-the-fly. Demo contains
+            * blocks with images and horizontal scrollbars that use this option parameter
+            */
+            autoExpandHorizontalScroll?: boolean;
+            /**
+            * Auto-scrolling on elements that have focus (e.g. scrollbar automatically scrolls to form text fields when the TAB key is pressed), values: true, false
+            */
+            autoScrollOnFocus?: boolean;
+            /**
+            * Normalize mouse wheel delta (-1/1), values: true, false
+            */
+            normalizeMouseWheelDelta?: boolean;
+        }
+    /**
+    * Additional scrolling method by touch-swipe content (for touch enabled devices), value: true, false
+    */
+    contentTouchScroll?: boolean;
+        /**
+        * All of the following callbacks option have examples in the callback demo - http://manos.malihu.gr/tuts/custom-scrollbar-plugin/callbacks_example.html
+        */
+        callbacks?: {
+            /**
+            * User defined callback function, triggered on scroll start event. You can call your own function(s) each time a scroll event begins 
+            */
+            onScrollStart?: () => void;
+            /**
+            * User defined callback function, triggered on scroll event. Call your own function(s) each time a scroll event completes
+            */
+            onScroll?: () => void;
+            /**
+            * User defined callback function, triggered when scroll end-limit is reached
+            */
+            onTotalScrollBack?: () => void;
+            /**
+            * Scroll end-limit offset, value in pixels
+            */
+            onTotalScrollOffset?: number;
+            /**
+            * User defined callback function, triggered while scrolling
+            */
+            whileScrolling?: () => void;
+        }
+    /**
+    * Set a scrollbar ready-to-use theme. See themes demo for all themes - http://manos.malihu.gr/tuts/custom-scrollbar-plugin/scrollbar_themes_demo.html
+    */
+    theme?: string;
+    }
+
+    interface ScrollToParameterOptions {
+        /**
+        * Scroll-to animation speed, value in milliseconds
+        */
+        scrollInertia?: number;
+        /**
+        * Scroll scrollbar dragger (instead of content) to a number of pixels, values: true, false
+        */
+        moveDragger?: boolean;
+        /**
+        * Trigger user defined callback after scroll-to completes, value: true, false
+        */
+        callbacks?: boolean;
+    }
+}
+
+interface JQuery {
+    /**
+    * Creates a new mCustomScrollbar with the specified or default options
+    *
+    * @param options Override default options
+    */
+    mCustomScrollbar(options?: MCustomScrollbar.CustomScrollbarOptions): JQuery;
+    /**
+    * Calls specified methods on the scrollbar "update", "stop", "disable", "destroy"
+    *
+    * @param method Method name to call on scrollbar e.g. "update", "stop"
+    */
+    mCustomScrollbar(method: string): JQuery;
+    /**
+    * Calls the scrollTo method on the scrollbar
+    *
+    * @param scrollTo Method name as a string "scrollTo"
+    * @param parameter String or pixel integer value to specify where to scroll to e.g. "bottom", "top" or 20
+    * @param options Override default options
+    */
+    mCustomScrollbar(scrollTo: string, parameter: any, options?: MCustomScrollbar.ScrollToParameterOptions): JQuery;
+}