diff --git a/types/micromodal/index.d.ts b/types/micromodal/index.d.ts new file mode 100644 index 0000000000..3796eba976 --- /dev/null +++ b/types/micromodal/index.d.ts @@ -0,0 +1,61 @@ +// Type definitions for micromodal 0.3 +// Project: https://github.com/ghosh/micromodal#readme +// Definitions by: Wayne Carson +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/** + * MicroModal configuration options + */ +export interface MicroModalConfig { + /** This is fired when the modal is opening. */ + onShow?: (modal?: HTMLElement) => void; + + /** This is fired when the modal is closing. */ + onClose?: (modal?: HTMLElement) => void; + + /** Custom data attribute to open modal. Default is data-micromodal-trigger. */ + openTrigger?: string; + + /** Custom data attribute to close modal. Default is data-micromodal-close. */ + closeTrigger?: string; + + /** This disables scrolling on the page while the modal is open. The default value is false. */ + disableScroll?: boolean; + + /** Disable auto focus on first focusable element. Default is false */ + disableFocus?: boolean; + + /** + * Set this to true if using css animations to hide the modal. This allows it to wait for the animation to + * finish before removing it from the DOM. Default is false + */ + awaitCloseAnimation?: boolean; + + /** This option suppresses the console warnings if passed as true. The default value is false. */ + debugMode?: boolean; +} + +/** + * MicroModal controller + */ +declare namespace MicroModal { + /** + * Binds click handlers to all modal triggers + * @param config configuration options + */ + function init(config?: MicroModalConfig): void; + + /** + * Shows a particular modal + * @param targetModal The id of the modal to display + * @param config configuration options + */ + function show(targetModal: string, config?: MicroModalConfig): void; + + /** + * Closes the active modal + */ + function close(): void; +} + +export default MicroModal; diff --git a/types/micromodal/micromodal-tests.ts b/types/micromodal/micromodal-tests.ts new file mode 100644 index 0000000000..e2d2d386bd --- /dev/null +++ b/types/micromodal/micromodal-tests.ts @@ -0,0 +1,18 @@ +import MicroModal, { MicroModalConfig } from 'micromodal'; + +const config: MicroModalConfig = { + onShow: (modal) => { console.log(modal!.id); }, + onClose: (modal) => { console.log(modal!.id); }, + openTrigger: 'data-modal-open', + closeTrigger: 'data-modal-close', + disableScroll: true, + disableFocus: true, + awaitCloseAnimation: true, + debugMode: true +}; + +MicroModal.init(config); + +MicroModal.show('my-modal'); + +MicroModal.close(); diff --git a/types/micromodal/tsconfig.json b/types/micromodal/tsconfig.json new file mode 100644 index 0000000000..58ce896244 --- /dev/null +++ b/types/micromodal/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "micromodal-tests.ts" + ] +} diff --git a/types/micromodal/tslint.json b/types/micromodal/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/micromodal/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }