add jQuery support

add Tabs

types/materialize-css/index.d.ts

@@ -4,16 +4,13 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.4
 
+/// <reference types="jquery" />
+
 export = M;
 
 declare global {
     namespace M {
-         class Sidenav {
-            /**
-             * Construct Sidenav instance and set up overlay
-             */
-            constructor(elem: Element, options?: Partial<SidenavOptions>);
-
+        class Sidenav extends Component<SidenavOptions> {
             /**
              * Get Instance
              */
@@ -29,21 +26,6 @@ declare global {
              */
             close(): void;
 
-            /**
-             * Destroy plugin instance and teardown
-             */
-            destroy(): void;
-
-            /**
-             * The DOM element the plugin was initialized with
-             */
-            el: Element;
-
-            /**
-             * The options the instance was initialized with
-             */
-            options: SidenavOptions;
-
             /**
              * Describes open/close state of Sidenav
              */
@@ -91,22 +73,100 @@ declare global {
             /**
              * Function called when sidenav starts entering
              */
-            onOpenStart: (instance: Sidenav, elem: Element) => void;
+            onOpenStart: (this: Sidenav, elem: Element) => void;
 
             /**
              * Function called when sidenav finishes entering
              */
-            onOpenEnd: (instance: Sidenav, elem: Element) => void;
+            onOpenEnd: (this: Sidenav, elem: Element) => void;
 
             /**
              * Function called when sidenav starts exiting
              */
-            onCloseStart: (instance: Sidenav, elem: Element) => void;
+            onCloseStart: (this: Sidenav, elem: Element) => void;
 
             /**
              * Function called when sidenav finishes exiting
              */
-            onCloseEnd: (instance: Sidenav, elem: Element) => void;
+            onCloseEnd: (this: Sidenav, elem: Element) => void;
+        }
+
+        class Tabs extends Component<TabsOptions> {
+            /**
+             * Get Instance
+             */
+            static getInstance(elem: Element): Tabs;
+
+            /**
+             * Show tab content that corresponds to the tab with the id
+             * @param tabId The id of the tab that you want to switch to
+             */
+            select(tabId: string): void;
+
+            /**
+             * The index of tab that is currently shown
+             */
+            index: number;
+        }
+
+        /**
+         * Options for the Tabs
+         */
+        interface TabsOptions {
+            /**
+             * Transition duration in milliseconds.
+             * @default 300
+             */
+            duration: number;
+
+            /**
+             * Callback for when a new tab content is shown
+             */
+            onShow: (this: Tabs, newContent: Element) => void;
+
+            /**
+             * Set to true to enable swipeable tabs. This also uses the responsiveThreshold option
+             * @default false
+             */
+            swipeable: boolean;
+
+            /**
+             * The maximum width of the screen, in pixels, where the swipeable functionality initializes.
+             * @default infinity
+             */
+            responsiveThreshold: number;
+        }
+
+        abstract class Component<TOptions> {
+            /**
+             * Construct component instance and set everything up
+             */
+            constructor(elem: Element, options?: Partial<TOptions>);
+
+            /**
+             * Destroy plugin instance and teardown
+             */
+            destroy(): void;
+
+            /**
+             * The DOM element the plugin was initialized with
+             */
+            el: Element;
+
+            /**
+             * The options the instance was initialized with
+             */
+            options: TOptions;
         }
     }
+
+    interface JQuery {
+        // Pick<T,K> to check methods exist.
+        sidenav(method: keyof Pick<M.Sidenav, "open" | "close" | "destroy">): JQuery;
+        sidenav(options?: Partial<M.SidenavOptions>): JQuery;
+
+        tabs(method: keyof Pick<M.Tabs, "destroy">): JQuery;
+        tabs(method: keyof Pick<M.Tabs, "select">, tabId: string): JQuery;
+        tabs(options?: Partial<M.TabsOptions>): JQuery;
+    }
 }

types/materialize-css/test/materialize-css-global.test.ts

@@ -1,3 +1,6 @@
-const elem = document.querySelector('.sidenav')!;
+const elem = document.querySelector('.whatever')!;
 // $ExpectType Sidenav
 const sidenav = new M.Sidenav(elem);
+
+// $ExpectType Tabs
+const tabs = new M.Tabs(elem);

types/materialize-css/test/materialize-css-jquery.test.ts

@@ -0,0 +1,9 @@
+$(".whatever").sidenav();
+$(".whatever").sidenav({inDuration: 200});
+$(".whatever").sidenav("open");
+$(".whatever").sidenav("destroy");
+
+$(".whatever").tabs();
+$(".whatever").tabs({ duration: 200 });
+$(".whatever").tabs("destroy");
+$(".whatever").tabs("select", "id");

types/materialize-css/test/materialize-css-module.test.ts

@@ -1,21 +1,48 @@
 import * as materialize from "materialize-css";
 
+const elem = document.querySelector('.whatever')!;
+
 // Sidenav
-const elem = document.querySelector('.sidenav')!;
+// $ExpectType Sidenav
+new materialize.Sidenav(elem);
 // $ExpectType Sidenav
 const sidenav = new materialize.Sidenav(elem, {
     edge: "left",
     inDuration: 300,
-    onCloseStart: () => console.log("closing")
+    onCloseStart(el) {
+        // $ExpectType Sidenav
+        this;
+        // $ExpectType Element
+        el;
+    }
 });
 // $ExpectType void
 sidenav.open();
 // $ExpectType void
 sidenav.destroy();
-
 // $ExpectType SidenavOptions
 sidenav.options;
 // $ExpectType Element
 sidenav.el;
 // $ExpectType boolean
 sidenav.isOpen;
+
+// Tabs
+// $ExpectType Tabs
+const tabs = new materialize.Tabs(elem, {
+    duration: 200,
+    onShow(content) {
+        // $ExpectType Tabs
+        this;
+        // $ExpectType Element
+        content;
+    }
+});
+// $ExpectType void
+tabs.destroy();
+// $ExpectType void
+tabs.select("id");
+// $ExpectType TabsOptions
+tabs.options;
+// $ExpectType number
+tabs.index;

types/materialize-css/tsconfig.json

@@ -20,6 +20,7 @@
     "files": [
         "index.d.ts",
         "test/materialize-css-global.test.ts",
-        "test/materialize-css-module.test.ts"
+        "test/materialize-css-module.test.ts",
+        "test/materialize-css-jquery.test.ts"
     ]
 }