From a9b8a853e04f000ee3b1c0daed5daaf51890b0ed Mon Sep 17 00:00:00 2001
From: Leon Yu <leon@leonyu.net>
Date: Mon, 15 Feb 2016 19:36:51 -0500
Subject: [PATCH] Update MaterializeCSS to include Component

---
 materialize-css/materialize-css-tests.ts |  73 +++++++++++---
 materialize-css/materialize-css.d.ts     | 117 ++++++++++++++++++++---
 2 files changed, 163 insertions(+), 27 deletions(-)

diff --git a/materialize-css/materialize-css-tests.ts b/materialize-css/materialize-css-tests.ts
index ec406a2fcd..a17e9128ae 100644
--- a/materialize-css/materialize-css-tests.ts
+++ b/materialize-css/materialize-css-tests.ts
@@ -1,5 +1,33 @@
 /// <reference path="materialize-css.d.ts" />
 
+// Buttons
+
+$('.fixed-action-btn').openFAB();
+$('.fixed-action-btn').closeFAB();
+
+// Forms - Select
+
+$('select').material_select();
+$('select').material_select('destroy');
+
+// Forms - Date Picker
+
+$('.datepicker').pickadate({
+  selectMonths: true, // Creates a dropdown to control month
+  selectYears: 15 // Creates a dropdown of 15 years to control year
+});
+
+// Forms - Character Counter
+$('input#input_text, textarea#textarea1').characterCounter();
+
+// Navbar
+$(".dropdown-button").dropdown();
+$(".dropdown-button").dropdown({hover: false});
+
+$(".button-collapse").sideNav();
+
+
+
 // Collapsible
 var collapseHtml = '<ul class="collapsible" data-collapsible="accordion">' +
     '<li>' +
@@ -15,7 +43,7 @@ var collapseHtml = '<ul class="collapsible" data-collapsible="accordion">' +
       '<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>' +
     '</li>' +
   '</ul>';
-  
+
 $(collapseHtml).collapsible({ accordion : false });
 $(collapseHtml).collapsible({ accordion : true });
 
@@ -23,6 +51,8 @@ $(collapseHtml).collapsible({ accordion : true });
 Materialize.toast('I am a toast!', 4000);
 Materialize.toast('I am a toast!', 3000, 'rounded');
 Materialize.toast('I am a toast!', 3000, 'rounded', () => console.log('callback'));
+var $toastContent = $('<span>I am toast content</span>');
+Materialize.toast($toastContent, 5000);
 
 // Dialogs - Tooltip
 var tooltipHtml = '<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>';
@@ -35,11 +65,11 @@ var dropDownHtml = '<a class="dropdown-button btn" data-beloworigin="true" href=
 $(dropDownHtml).dropdown({
       inDuration: 300,
       outDuration: 225,
-      constrain_width: false, 
-      hover: true, 
-      gutter: 0, 
-      belowOrigin: false, 
-      alignment: 'left' 
+      constrain_width: false,
+      hover: true,
+      gutter: 0,
+      belowOrigin: false,
+      alignment: 'left'
 });
 $(dropDownHtml).dropdown({});
 
@@ -87,7 +117,21 @@ var sliderHtml = '<div class="slider">' +
  $(sliderHtml).slider({ indicators: true, height: 5 });
  $(sliderHtml).slider({ indicators: true, height: 5, transition: 4 });
  $(sliderHtml).slider({ indicators: true, height: 5, transition: 4, interval: 5 });
- 
+
+// Carousel
+
+$('.carousel').carousel();
+$('.carousel').carousel({});
+$('.carousel').carousel({ time_constant: 200, dist: -100, shift: 500, padding: 6000, full_width: 6000 });
+
+// Next slide
+$('.carousel').carousel('next');
+$('.carousel').carousel('next', [3]); // Move next n times.
+// Previous slide
+$('.carousel').carousel('prev');
+$('.carousel').carousel('prev', [4]); // Move prev n times.
+
+
 // Modals
 var modalhtml = '<div id="modal1" class="modal bottom-sheet">' +
     '<div class="modal-content">' +
@@ -100,7 +144,7 @@ var modalhtml = '<div id="modal1" class="modal bottom-sheet">' +
   '</div>';
 $(modalhtml).openModal();
 $(modalhtml).closeModal();
-  
+
 var modalTriggerHtml = '<button data-target="modal1" class="btn modal-trigger">Modal</button>';
 $(modalTriggerHtml).leanModal();
 $(modalTriggerHtml).leanModal({});
@@ -116,19 +160,19 @@ var parallaxHtml = '<div class="parallax-container">' +
       '<div class="parallax"><img src="images/parallax1.jpg"></div>' +
     '</div>';
  $(parallaxHtml).parallax();
- 
+
  // PushPin
  $('<div />').pushpin();
  $('<div />').pushpin({ top: 1 });
  $('<div />').pushpin({ top: 1, bottom: 1 });
  $('<div />').pushpin({ top: 1, bottom: 1, offset: 2 });
- 
+
 // ScrollFire
 var options = [
   {selector: '.class', offset: 200, callback: 'console.log(".class")' },
   {selector: '.other-class', offset: 200, callback: 'console.log(".other-class")' },
 ];
-Materialize.scrollFire(options); 
+Materialize.scrollFire(options);
 
 // ScrollSpy
 var scrollSpyHtml = '<div class="row">' +
@@ -188,8 +232,9 @@ var tabsHtml = '<div class="row">' +
     '<div id="test3" class="col s12">Test 3</div>' +
     '<div id="test4" class="col s12">Test 4</div>' +
   '</div>';
-  
+
  $(tabsHtml).tabs();
  $(tabsHtml).tabs('select_tab', 'test1');
- 
-  
+
+// Transitions
+Materialize.showStaggeredList('#staggered-test');
diff --git a/materialize-css/materialize-css.d.ts b/materialize-css/materialize-css.d.ts
index b41d608ced..e4ad793a29 100644
--- a/materialize-css/materialize-css.d.ts
+++ b/materialize-css/materialize-css.d.ts
@@ -1,9 +1,10 @@
-// Type definitions for materialize-css
+// Type definitions for materialize-css v0.97.5
 // Project: http://materializecss.com/
-// Definitions by: Erik Lieben <https://github.com/eriklieben>
+// Definitions by: Erik Lieben <https://github.com/eriklieben>, Leon Yu <https://github.com/leonyu>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
 
 /// <reference path="../jquery/jquery.d.ts" />
+/// <reference path="../pickadate/pickadate.d.ts" />
 
 declare module Materialize {
 
@@ -102,6 +103,41 @@ declare module Materialize {
         interval?: number;
     }
 
+    /**
+     * The carousel options
+     */
+    interface CarouselOptions {
+        /**
+         * Transition time. 
+         * Default: 200
+         */
+        time_constant?: number;
+
+        /**
+         * Perspective zoom. If 0, all items are the same size.
+         * Default: -100
+         */
+        dist?: number;
+
+        /**
+         * Set the duration of the transition animation in ms.
+         * Default: 500
+         */
+        shift?: number;
+
+        /**
+         * Set the duration between transitions in ms.
+         * Default: 6000
+         */
+        padding?: number;
+
+        /**
+         * Set the duration between transitions in ms.
+         * Default: 6000
+         */
+        full_width?: number;
+    }
+
     /**
      * The lean modal options
      */
@@ -261,7 +297,7 @@ declare module Materialize {
         * @name className The className to use to format the message to display
         * @name completeCallback Callback function to call when the messages completes/hides.
         */
-        toast(message:string, displayLength:number, className?:string, completeCallback?:Function): void;
+        toast(message:string|JQuery, displayLength:number, className?:string, completeCallback?:Function): void;
         
         /**
          * Fires an event when the page is scrolled to a certain area
@@ -289,6 +325,34 @@ declare module Materialize {
 declare var Materialize : Materialize.Materialize;
 
 interface JQuery {
+  
+    /**
+     * open Fixed Action Button
+     */
+    openFAB(): void;
+    /**
+     * close Fixed Action Button
+     */
+    closeFAB(): void;
+    
+    /**
+     * Select allows user input through specified options.
+     * Initialization
+     */
+    material_select(): void;
+
+    /**
+     * Select allows user input through specified options.
+     * Updating/Destroying Select
+     *
+     * @name method "destroy" destroy the material select
+     */
+    material_select(method: string): void;
+    
+    /**
+     * Use a character counter in fields where a character restriction is in place.
+     */
+    characterCounter(): JQuery;
     
     /**
      * Collapsibles are accordion elements that expand when clicked on. 
@@ -296,7 +360,7 @@ interface JQuery {
      * 
      * @name options the collapsible options 
      */
-    collapsible(options?: Materialize.CollapsibleOptions): void;
+    collapsible(options?: Materialize.CollapsibleOptions): JQuery;
     
     /**
      * Tooltips are small, interactive, textual hints for mainly graphical elements. 
@@ -304,7 +368,7 @@ interface JQuery {
      * 
      * @name options the tooltip options or the string "remove" to remove the tooltip function
      */
-    tooltip(options?: Materialize.TooltipOptions|string): void; 
+    tooltip(options?: Materialize.TooltipOptions|string): JQuery; 
     
     /**
      * Add a dropdown list to any button. 
@@ -317,23 +381,50 @@ interface JQuery {
     /**
      * Material box is a material design implementation of the Lightbox plugin.
      */
-    materialbox(): void;
+    materialbox(): JQuery;
     
     /**
      * slider is a simple and elegant image carousel. 
      * You can also have captions that will be transitioned on their own depending on their alignment. 
      * You can also have indicators that show up on the bottom of the slider. 
      * 
+     * @name options the slider options
+     */
+    slider(options?: Materialize.SliderOptions): JQuery;
+
+    /**
+     * slider is a simple and elegant image carousel. 
+     * You can also have captions that will be transitioned on their own depending on their alignment. 
+     * You can also have indicators that show up on the bottom of the slider. 
+     * 
+     * @name method the string "start" to start the animation or "pauze" to pauze the animation
+     */
+    slider(method: string): JQuery;
+
+    /**
+     * Our slider is a simple and elegant image carousel.
+     * You can also have captions that will be transitioned on their own depending on their alignment.
+     * You can also have indicators that show up on the bottom of the slider.
+     * 
      * @name options the slider options or the string "start" to start the animation or "pauze" to pauze the animation
      */
-    slider(options?: Materialize.SliderOptions|string): void;
+    carousel(options?: Materialize.CarouselOptions): JQuery;
+
+    /**
+     * Our slider is a simple and elegant image carousel.
+     * You can also have captions that will be transitioned on their own depending on their alignment.
+     * You can also have indicators that show up on the bottom of the slider.
+     * 
+     * @name method the methods to pause, start, move to next and move to previous slide.
+     */
+    carousel(method: string, count: [number]): JQuery;
 
     /**
      *  Modal for dialog boxes, confirmation messages, or other content that can be called up.
      * 
      * @name options the lean modal options 
      */
-    leanModal(options?: Materialize.LeanModalOptions): void;
+    leanModal(options?: Materialize.LeanModalOptions): JQuery;
     
     /**
      * Open a modal programatically
@@ -348,21 +439,21 @@ interface JQuery {
     /**
      * Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.
      */
-    parallax(): void;
+    parallax(): JQuery;
 
     /**
      * Pushpin is a fixed positioning plugin.
      * 
      * @name options the push pin options 
      */
-    pushpin(options?: Materialize.PushpinOptions): void;
+    pushpin(options?: Materialize.PushpinOptions): JQuery;
     
     /**
      * Scrollspy is a jQuery plugin that tracks certain elements and which element the user's screen is currently centered on. 
      * 
      * @name options the scroll spy options
      */
-    scrollSpy(options?: Materialize.ScrollSpyOptions): void;
+    scrollSpy(options?: Materialize.ScrollSpyOptions): JQuery;
     
     /**
      * A slide out menu. You can add a dropdown to your sidebar by using our collapsible component.
@@ -376,5 +467,5 @@ interface JQuery {
      * 
      * @name method, the method to call (always "select_tab") and a param containing the id of the tab to open
      */
-    tabs(method?:string, tab?:string): void;
-}
\ No newline at end of file
+    tabs(method?:string, tab?:string): JQuery;
+}