mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-06-28 22:30:01 +00:00
Add typings for notify
http://notifyjs.com/ - Notify.js is a jQuery plugin to provide simple yet fully customisable notifications. Not to be confused with "notifyjs" at https://github.com/alexgibson/notify.js
This commit is contained in:
committed by
Adi Dahiya
parent
570b760130
commit
6b892eacd8
60
notify/notify-tests.ts
Normal file
60
notify/notify-tests.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
/// <reference path="notify.d.ts" />
|
||||
|
||||
$.notify.addStyle("bootstrap", {
|
||||
html: "<div>\n<span data-notify-text></span>\n</div>",
|
||||
classes: {
|
||||
base: {
|
||||
"font-weight": "bold",
|
||||
"padding": "8px 15px 8px 14px",
|
||||
},
|
||||
error: {
|
||||
"color": "#B94A48",
|
||||
},
|
||||
info: {
|
||||
"color": "#3A87AD",
|
||||
"background-color": "#D9EDF7",
|
||||
"border-color": "#BCE8F1",
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$.notify.addStyle('foo', {
|
||||
html:
|
||||
"<div>" +
|
||||
"<div class='clearfix'>" +
|
||||
"<div class='title' data-notify-html='title'/>" +
|
||||
"<div class='buttons'>" +
|
||||
"<button class='no'>Cancel</button>" +
|
||||
"<button class='yes' data-notify-text='button'></button>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>"
|
||||
});
|
||||
|
||||
$.notify.defaults({
|
||||
style: "bootstrap",
|
||||
className: "info"
|
||||
});
|
||||
|
||||
$.notify("Hello world!");
|
||||
|
||||
$.notify("Error text", "error");
|
||||
|
||||
$(".my-element").notify("Hello Box", {
|
||||
arrowSize: 25,
|
||||
autoHide: false,
|
||||
elementPosition: "top center",
|
||||
showAnimation: "slideDown",
|
||||
showDuration: 100,
|
||||
hideAnimation: "slideUp",
|
||||
hideDuration: 5000,
|
||||
gap: 20
|
||||
});
|
||||
|
||||
$.notify({
|
||||
title: 'Would you like some Foo ?',
|
||||
button: 'Confirm'
|
||||
}, {
|
||||
style: 'foo',
|
||||
clickToHide: false
|
||||
});
|
||||
171
notify/notify.d.ts
vendored
Normal file
171
notify/notify.d.ts
vendored
Normal file
@@ -0,0 +1,171 @@
|
||||
// Type definitions for Notify.js
|
||||
// Project: https://github.com/jpillora/notifyjs
|
||||
// Definitions by: Xiaohan Zhang <https://github.com/hellochar>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped/
|
||||
|
||||
/// <reference path="../jquery/jquery.d.ts" />
|
||||
|
||||
declare module Notify {
|
||||
interface Options {
|
||||
/**
|
||||
* Whether to hide the notification on click. Default is true.
|
||||
*/
|
||||
clickToHide?: boolean;
|
||||
|
||||
/**
|
||||
* Whether to auto-hide the notification (after autoHideDelay milliseconds). Default is true.
|
||||
*/
|
||||
autoHide?: boolean;
|
||||
|
||||
/**
|
||||
* If autoHide, hide after milliseconds. Default is 5000.
|
||||
*/
|
||||
autoHideDelay?: number;
|
||||
|
||||
/**
|
||||
* Show the arrow pointing at the element. Default is true.
|
||||
*/
|
||||
arrowShow?: boolean;
|
||||
|
||||
/**
|
||||
* Arrow size in pixels. Default is 5.
|
||||
*/
|
||||
arrowSize?: number;
|
||||
|
||||
/**
|
||||
* Position of the notification when created relative to an element. Default is 'bottom left'.
|
||||
*/
|
||||
elementPosition?: string;
|
||||
|
||||
/**
|
||||
* Position of the notification when created globally. Default is 'top right'.
|
||||
*/
|
||||
globalPosition?: string;
|
||||
|
||||
/**
|
||||
* Style of the notification. Default is 'bootstrap'.
|
||||
*
|
||||
* For more information on styles, refer to Notify.StyleDefinition.
|
||||
*/
|
||||
style?: string;
|
||||
|
||||
/**
|
||||
* Class of the notification (string or [string]). Default is 'error'.
|
||||
*
|
||||
* Notify looks through the classes defined in the given style and will apply the CSS
|
||||
* attributes of that style. Additionally, a CSS class of "notifyjs-<style name>-<class name>"
|
||||
* will be applied.
|
||||
*/
|
||||
className?: string;
|
||||
|
||||
/**
|
||||
* Animation when notification is shown. Default is 'slideDown'.
|
||||
*/
|
||||
showAnimation?: string;
|
||||
|
||||
/**
|
||||
* Duration show animation, in milliseconds. Default is 400.
|
||||
*/
|
||||
showDuration?: number;
|
||||
|
||||
/**
|
||||
* Animation when notification is hidden. Default is 'slideUp'.
|
||||
*/
|
||||
hideAnimation?: string;
|
||||
|
||||
/**
|
||||
* Duration for hide animation, in milliseconds. Default is 200.
|
||||
*/
|
||||
hideDuration?: number;
|
||||
|
||||
/**
|
||||
* Padding in px between element and notification. Deafult is 2.
|
||||
*/
|
||||
gap?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Notifications created with a specified class will have CSS properties applied to that
|
||||
* notification. This interface defines what properties and their values to apply for a given class.
|
||||
* Keys should be CSS property names, and values their values.
|
||||
*/
|
||||
interface ClassCSS {
|
||||
[propertyName: string]: string;
|
||||
}
|
||||
|
||||
interface StyleDefinition {
|
||||
|
||||
/**
|
||||
* Defines the HTML wrapping the notification.
|
||||
*
|
||||
* If you only have HTML element that you need to modify per notification then you should give
|
||||
* this element an attribute of data-notify-text or data-notify-html. Use data-notify-html if
|
||||
* you wish to display arbitrary HTML inside the notification, otherwise, use data-notify-text
|
||||
* as it is more secure.
|
||||
* For more complex notifications, you may give a value to the data-notify-text/data-notify-html
|
||||
* attribute on an element, such as <div data-notify-html="propertyName"></div>. You may then
|
||||
* pass a javasript Object with a "propertyName" key to the notify method, whose value will be
|
||||
* the text/html that the element is populated with.
|
||||
*/
|
||||
html: string;
|
||||
|
||||
/**
|
||||
* Defines the available classes in this style. The "base" property will be applied to every
|
||||
* notification with this style.
|
||||
*/
|
||||
classes?: {
|
||||
[className: string]: ClassCSS;
|
||||
base?: ClassCSS;
|
||||
};
|
||||
|
||||
/**
|
||||
* All notifications will have this CSS applied to it.
|
||||
*/
|
||||
css?: string;
|
||||
}
|
||||
|
||||
interface JQueryStatic {
|
||||
/**
|
||||
* Create a global notification.
|
||||
*/
|
||||
(text: string, className?: string): void;
|
||||
(text: string, options?: Options): void;
|
||||
(data: any, className?: string): void;
|
||||
(data: any, options?: Options): void;
|
||||
|
||||
/**
|
||||
* Create a notification positioned relative to the given element.
|
||||
*/
|
||||
(element: JQuery, text: string, className?: string): void;
|
||||
(element: JQuery, text: string, options?: Options): void;
|
||||
(element: JQuery, data: any, className?: string): void;
|
||||
(element: JQuery, data: any, options?: Options): void;
|
||||
|
||||
/**
|
||||
* Define a style for Notify to use.
|
||||
*/
|
||||
addStyle(styleName: string, styleDefinition: StyleDefinition): void;
|
||||
|
||||
/**
|
||||
* Specify the default options for all notifications.
|
||||
*/
|
||||
defaults(options: Options): void;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
interface JQueryStatic {
|
||||
notify: Notify.JQueryStatic;
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
/**
|
||||
* Create a notification positioned relative to the currently selected element.
|
||||
*/
|
||||
notify(text: string, className?: string): void;
|
||||
notify(text: string, options?: Notify.Options): void;
|
||||
notify(data: any, className?: string): void;
|
||||
notify(data: any, options?: Notify.Options): void;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user