Migrate to TypeScript

.editorconfig

@@ -5,7 +5,7 @@ charset = utf-8
 end_of_line = lf
 
 indent_style = space
-indent_size = 4
+indent_size = 2
 
 trim_trailing_whitespace = true
-insert_final_newline = false
+insert_final_newline = true

.eslintignore

@@ -0,0 +1,3 @@
+/rollup.config.js
+/karma.conf.js
+*.js

.eslintrc

@@ -1,10 +1,18 @@
 {
-    "extends": "eslint:recommended",
-    "env": {
-        "browser": true
-    },
-    "parserOptions": {
-        "ecmaVersion": 6,
-        "sourceType": "module"
-    }
+  "root": true,
+  "extends": [
+    "plugin:import/typescript",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "settings": {
+    "import/extensions": [".ts"]
+  },
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off"
+  }
 }

.gitignore

@@ -1,8 +1,8 @@
-dist
-index.js
-index.js.map
-index.es.js
-index.es.js.map
-node_modules
-coverage
+/dist
+/index.js
+/index.js.map
+/index.es.js
+/index.es.js.map
+/node_modules
+/coverage
 .DS_Store

README.md

@@ -11,7 +11,7 @@
 
 - A simple and fast modal dialog
 - Plain JavaScript only - no dependencies
-- All browsers supported (IE9+)
+- All browsers supported (IE10+)
 - Less than 1.2 KB when gzipped and minified
 - Bootstrap and Animate.css friendly
 - Supports ES modules, CommonJS, AMD or globals

index.d.ts

@@ -1,30 +1,34 @@
-declare namespace RModal {
-    export interface RModalOptions {
-        afterClose?(): void;
-        afterOpen?(): void;
-        beforeClose?(callback: Function): void;
-        beforeOpen?(callback: Function): void;
-        bodyClass?: string;
-        closeTimeout?: number;
-        content?: string;
-        dialogClass?: string;
-        dialogOpenClass?: string;
-        dialogCloseClass?: string;
-        escapeClose?: boolean;
-        focus?: boolean;
-        focusElements?: string[];
-    }
+interface RModalOptions {
+    afterClose?(): void;
+    afterOpen?(): void;
+    beforeClose?(callback: () => any): void;
+    beforeOpen?(callback: () => any): void;
+    bodyClass?: string;
+    closeTimeout?: number;
+    content?: string;
+    dialogClass?: string;
+    dialogOpenClass?: string;
+    dialogCloseClass?: string;
+    escapeClose?: boolean;
+    focus?: boolean;
+    focusElements?: string[];
 }
-
 declare class RModal {
-    constructor(el: HTMLElement, opts?: RModal.RModalOptions);
+    static version: string;
     version: string;
+    overlay: HTMLElement;
+    dialog: HTMLElement;
+    focusOutElement: HTMLElement | null;
+    opened: boolean;
+    opts: RModalOptions;
+    constructor(el: HTMLElement, opts?: RModalOptions);
+    open(content: string): void;
+    _doOpen(): void;
     close(): void;
-    content(content?: string): string | void;
-    elements(selector: string | string[], fallback?: boolean): Array<HTMLElement>;
-    focus(el?: HTMLElement): void;
+    _doClose(): void;
+    content(html?: string): string | void;
+    elements(selector: string | string[], fallback?: boolean): HTMLElement[];
+    focus(el?: HTMLElement | null): void;
     keydown(ev: KeyboardEvent): void;
-    open(content?: string): void;
 }
-
-export = RModal;
+export { RModal as default, RModalOptions };

karma.conf.js

@@ -1,54 +1,54 @@
 module.exports = (config) => {
-    const opts = {
-        basePath: '',
-        frameworks: [
-            'mocha',
-            'chai',
-            'sinon',
-            'commonjs'
-        ],
-        files: [
-            'test/*.test.js',
-            './index.js'
-        ],
-        exclude: [],
-        preprocessors: {
-            'test/*.test.js': [ 'commonjs' ],
-            './index.js': [
-                'coverage',
-                'commonjs'
-            ]
-        },
-        reporters: [
-            'coverage',
-            'progress'
-        ],
-        coverageReporter: {
-            type: 'html',
-            dir: 'coverage/'
-        },
-        browsers: [ 'PhantomJS' ],
-        phantomjsLauncher: {
-            exitOnResourceError: true
-        },
-        captureTimeout: 60000,
-        port: 9876,
-        autoWatch: true,
-        singleRun: false,
-        colors: true,
-        logLevel: config.LOG_INFO,
-        client: {
-            captureConsole: true,
-            mocha: {
-                bail: true
-            }
-        }
-    };
-
-    if (process.env.CI) {
-        opts.coverageReporter.type = 'lcov';
-        opts.reporters.push('coveralls');
+  const opts = {
+    basePath: '',
+    frameworks: [
+      'mocha',
+      'chai',
+      'sinon',
+      'commonjs'
+    ],
+    files: [
+      'test/*.test.js',
+      './index.js'
+    ],
+    exclude: [],
+    preprocessors: {
+      'test/*.test.js': [ 'commonjs' ],
+      './index.js': [
+        'coverage',
+        'commonjs'
+      ]
+    },
+    reporters: [
+      'mocha',
+      'coverage'
+    ],
+    coverageReporter: {
+      type: 'html',
+      dir: 'coverage/'
+    },
+    browsers: [ 'PhantomJS' ],
+    phantomjsLauncher: {
+      exitOnResourceError: true
+    },
+    captureTimeout: 60000,
+    port: 9876,
+    autoWatch: true,
+    singleRun: false,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    client: {
+      captureConsole: true,
+      mocha: {
+        bail: false
+      }
     }
+  };
+
+  if (process.env.CI) {
+    opts.coverageReporter.type = 'lcov';
+    opts.reporters.push('coveralls');
+  }
 
-    config.set(opts);
+  config.set(opts);
 };