diff --git a/types/jquery-toast-plugin/index.d.ts b/types/jquery-toast-plugin/index.d.ts index 48bff9ff44..db95a9961c 100644 --- a/types/jquery-toast-plugin/index.d.ts +++ b/types/jquery-toast-plugin/index.d.ts @@ -1,6 +1,7 @@ // Type definitions for jquery-toast-plugin 1.3 // Project: https://github.com/kamranahmedse/jquery-toast-plugin // Definitions by: Viqas Hussain +// Andrew Stegmaier // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 @@ -13,19 +14,26 @@ interface JQueryStatic { interface toastOptions { text: string; heading?: string; - showHideTransition?: string; + showHideTransition?: 'fade' | 'slide' | 'plain'; allowToastClose?: boolean; - hideAfter?: number; + hideAfter?: number | false; loader?: boolean; loaderBg?: string; - stack?: number; - position?: string; - bgColor?: boolean; - textColor?: boolean; - textAlign?: string; - icon?: boolean; + stack?: number | false; + position?: 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-right' | 'top-left' | 'top-center' | 'mid-center' | CustomPosition; + bgColor?: string; + textColor?: string; + textAlign?: 'left' | 'right' | 'center'; + icon?: 'info' | 'warning' | 'error' | 'success'; beforeShow?: () => any; afterShown?: () => any; beforeHide?: () => any; afterHidden?: () => any; } + +interface CustomPosition { + left: number | 'auto'; + right: number | 'auto'; + top: number | 'auto'; + bottom: number | 'auto'; +} diff --git a/types/jquery-toast-plugin/jquery-toast-plugin-tests.ts b/types/jquery-toast-plugin/jquery-toast-plugin-tests.ts index d9a2889c9b..d8f21dd200 100644 --- a/types/jquery-toast-plugin/jquery-toast-plugin-tests.ts +++ b/types/jquery-toast-plugin/jquery-toast-plugin-tests.ts @@ -1 +1,52 @@ $.toast({ text: "test" }); + +$.toast({ text: "test", heading: "Test Heading" }); + +$.toast({ text: "test", showHideTransition: "fade" }); +$.toast({ text: "test", showHideTransition: "slide" }); +$.toast({ text: "test", showHideTransition: "plain" }); + +$.toast({ text: "test", allowToastClose: false }); +$.toast({ text: "test", allowToastClose: true }); + +$.toast({ text: "test", hideAfter: 5}); +$.toast({ text: "test", hideAfter: false}); + +$.toast({ text: "test", loader: true }); +$.toast({ text: "test", loader: false }); + +$.toast({ text: "test", loaderBg: "#9EC600" }); + +$.toast({ text: "test", stack: 5}); +$.toast({ text: "test", stack: false}); + +$.toast({ text: "test", position: "bottom-left" }); +$.toast({ text: "test", position: "bottom-right" }); +$.toast({ text: "test", position: "bottom-center" }); +$.toast({ text: "test", position: "top-right" }); +$.toast({ text: "test", position: "top-left" }); +$.toast({ text: "test", position: "top-center" }); +$.toast({ text: "test", position: "mid-center" }); +$.toast({ text: "test", position: { left : "auto", right : 20, top : 20, bottom : "auto" } }); +$.toast({ text: "test", position: { left : 20, right : "auto", top : "auto", bottom : 20 } }); + +$.toast({ text: "test", bgColor: "#9EC600" }); + +$.toast({ text: "test", textColor: "#9EC600" }); + +$.toast({ text: "test", textAlign: "left" }); +$.toast({ text: "test", textAlign: "right" }); +$.toast({ text: "test", textAlign: "center" }); + +$.toast({ text: "test", icon: "info" }); +$.toast({ text: "test", icon: "warning" }); +$.toast({ text: "test", icon: "error" }); +$.toast({ text: "test", icon: "success" }); + +$.toast({ + text: 'Triggers the events', + beforeShow: () => {}, + afterShown: () => {}, + beforeHide: () => {}, + afterHidden: () => {} +});