diff --git a/types/materialize-css/index.d.ts b/types/materialize-css/index.d.ts index 1cb283e2d7..13b32c985d 100644 --- a/types/materialize-css/index.d.ts +++ b/types/materialize-css/index.d.ts @@ -1,8 +1,9 @@ -// Type definitions for materialize-css v0.100.1 +// Type definitions for materialize-css 0.100 // Project: http://materializecss.com/ // Definitions by: Erik Lieben // Leon Yu // Sukhdeep Singh +// Jean-Francois Cere // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 @@ -10,7 +11,6 @@ /// declare namespace Materialize { - /** * The collapsible options */ @@ -35,8 +35,8 @@ declare namespace Materialize { interface TooltipOptions { /** - * The delay before the tooltip shows (in milliseconds) - */ + * The delay before the tooltip shows (in milliseconds) + */ delay: number; /** * Tooltip text. Can use custom HTML if you set the html option @@ -60,7 +60,6 @@ declare namespace Materialize { * The dropdown options */ interface DropDownOptions { - /** * The duration of the transition enter in milliseconds. * @default `300` @@ -73,7 +72,6 @@ declare namespace Materialize { */ outDuration?: number; - /** * If true, constrainWidth to the size of the dropdown activator. * @default `true` @@ -107,14 +105,13 @@ declare namespace Materialize { * * @default `false` */ - stopPropagation?: boolean + stopPropagation?: boolean; } /** * The slider options */ interface SliderOptions { - /** * Set to false to hide slide indicators. * @default `true` @@ -191,7 +188,6 @@ declare namespace Materialize { * The modal options */ interface ModalOptions { - /** * Modal can be dismissed by clicking outside of the modal. * @default `true` @@ -243,7 +239,6 @@ declare namespace Materialize { * The push pin options */ interface PushpinOptions { - /** * The distance in pixels from the top of the page where the element becomes fixed. * @default `0` @@ -288,31 +283,45 @@ declare namespace Materialize { */ interface SideNavOptions { /** + * The sideNav width. * @default `240` */ menuWidth?: number; /** - * The horizontal origin + * The horizontal origin. * @default `'left'` */ edge?: string; /** - * Closes side-nav on clicks, useful for Angular/Meteor + * Closes sideNav on clicks, useful for Angular/Meteor. * @default `false` */ closeOnClick?: boolean; /** - * Choose whether you can drag to open on touch screens + * Choose whether you can drag to open on touch screens. * @default `true` */ draggable?: boolean; + + /** + * Execute a callback function when sideNav is opened. + * + * The callback provides a parameter which refers to the sideNav being opened. + */ + onOpen?: Function; + + /** + * Execute a callback function when sideNav is closed. + * + * The callback provides a parameter which refers to the sideNav being closed. + */ + onClose?: Function; } interface ScrollFireOptions { - /** * The selector for the element that is being tracked. */ @@ -357,16 +366,16 @@ declare namespace Materialize { } interface ChipDataObject { - tag: string, - image?: string, - id?: number + tag: string; + image?: string; + id?: number; } interface ChipOptions { /** * Set the chip data */ - data?: Materialize.ChipDataObject[]; + data?: ChipDataObject[]; /** * Set first placeholder when there are no tags */ @@ -386,7 +395,7 @@ declare namespace Materialize { /** * Set autocompleteOptions */ - autocompleteOptions?: Materialize.AutoCompleteOptions; + autocompleteOptions?: AutoCompleteOptions; } interface AutoCompleteOptions { @@ -408,7 +417,6 @@ declare namespace Materialize { * @default `1` */ minLength?: number; - } interface Toast { @@ -422,7 +430,6 @@ declare namespace Materialize { * The Materialize object */ interface Materialize { - /** * Displays a toast message on screen * @@ -462,7 +469,7 @@ declare namespace Materialize { /** * Toast functions */ - Toast: Materialize.Toast; + Toast: Toast; } } @@ -472,7 +479,7 @@ declare namespace Materialize { * @see http://www.typescriptlang.org/docs/handbook/declaration-merging.html */ declare namespace Pickadate { - export interface TimeOptions { + interface TimeOptions { /** * Set default time such as : 'now', '1:30AM', '16:30'. * @default `'now'` @@ -523,7 +530,6 @@ declare namespace Pickadate { declare var Materialize: Materialize.Materialize; interface JQuery { - /** * open Fixed Action Button */ @@ -694,4 +700,4 @@ interface JQuery { * @param string action : either `'open'` or `'close'` */ tapTarget(action?: string): JQuery; -} \ No newline at end of file +} diff --git a/types/materialize-css/materialize-css-tests.ts b/types/materialize-css/materialize-css-tests.ts index 1490dbfd3c..50586ab104 100644 --- a/types/materialize-css/materialize-css-tests.ts +++ b/types/materialize-css/materialize-css-tests.ts @@ -1,17 +1,12 @@ - - // 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 @@ -26,10 +21,8 @@ $(".dropdown-button").dropdown({ hover: false }); $(".button-collapse").sideNav(); - - // Collapsible -var collapseHtml = '
    ' + +let collapseHtml = '
      ' + '
    • ' + '
      filter_dramaFirst
      ' + '

      Lorem ipsum dolor sit amet.

      ' + @@ -44,25 +37,25 @@ var collapseHtml = '
        ' + '' + '
      '; -$(collapseHtml).collapsible({ accordion: false, onClose: function () { alert('Closed'); } }); -$(collapseHtml).collapsible({ accordion: true, onOpen: function () { alert('Opened'); } }); +$(collapseHtml).collapsible({ accordion: false, onClose: () => { alert('Closed'); } }); +$(collapseHtml).collapsible({ accordion: true, onOpen: () => { alert('Opened'); } }); // Dialogs - Toasts 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 = $('I am toast content'); +let $toastContent = $('I am toast content'); Materialize.toast($toastContent, 5000); Materialize.Toast.removeAll(); // Dialogs - Tooltip -var tooltipHtml = '      Hover me!'; +let tooltipHtml = 'Hover me!'; $(tooltipHtml).tooltip(); $(tooltipHtml).tooltip({ delay: 100 }); $(tooltipHtml).tooltip('remove'); // DropDown -var dropDownHtml = 'Drop Me!'; +let dropDownHtml = 'Drop Me!'; $(dropDownHtml).dropdown({ inDuration: 300, outDuration: 225, @@ -72,16 +65,15 @@ $(dropDownHtml).dropdown({ belowOrigin: false, // Displays dropdown below the button alignment: 'left', // Displays dropdown with edge aligned to the left of button stopPropagation: false // Stops event propagation - }); $(dropDownHtml).dropdown({}); // Media - materialbox -var materialboxHtml = ''; +let materialboxHtml = ''; $(materialboxHtml).materialbox(); // Media - slider -var sliderHtml = '
      ' + +let sliderHtml = '
      ' + '
        ' + '
      • ' + ' ' + @@ -122,7 +114,6 @@ $(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({ duration: 200, dist: -100, shift: 500, padding: 6000, fullWidth: true, indicators: false, noWrap: false }); @@ -134,9 +125,8 @@ $('.carousel').carousel('next', 3); // Move next n times. $('.carousel').carousel('prev'); $('.carousel').carousel('prev', 4); // Move prev n times. - // Modals -var modalhtml = '