Made public Modal API cleaner and reduced file size further

KittyGiraudel · Feb 16, 2016 · b16c67c · b16c67c
1 parent f3e8c9b
commit b16c67c
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 120 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ You can try the [live demo](http://edenspiekermann.github.io/accessible-modal-di
 - Addition of `[tabindex]:not([value="-1"])` to focusable elements;
 - No more `display` manipulation in JS, the hiding mechanism is entirely up to the CSS layer (using `[aria-hidden]` selectors);
 - Full test coverage with [CasperJS](http://casperjs.org) and [CodeShip](https://codeship.com);
-- Cleaner code resulting in only 700 bytes (0.7Kb!) once gzipped.
+- Cleaner code resulting in only 650 bytes (0.65Kb!) once gzipped.
 
 *Note: the script should run seamlessly in Internet Explorer 9 and above.*
 

diff --git a/accessible-modal-dialog.js b/accessible-modal-dialog.js
@@ -30,40 +30,6 @@
     }
   }
 
-  // Helper function to bind listeners for a Modal instance
-  function bindListeners (instance) {
-    instance.$openers.forEach(function ($opener) {
-      $opener.addEventListener('click', function () {
-        instance.show();
-      });
-    });
-
-    instance.$closers.forEach(function ($closer) {
-      $closer.addEventListener('click', function () {
-        instance.hide();
-      });
-    });
-
-    document.addEventListener('keydown', function (event) {
-      if (instance.shown === false) return;
-
-      if (event.which === 27) {
-        event.preventDefault();
-        instance.hide();
-      }
-
-      if (event.which === 9) {
-        trapTabKey(instance.$node, event);
-      }
-    });
-
-    document.body.addEventListener('focus', function (event) {
-      if (instance.shown && !instance.$node.contains(event.target)) {
-        setFocusToFirstItem(instance.$node);
-      }
-    }, true);
-  }
-
   // Helper function to focus first focusable item in node
   function setFocusToFirstItem (node) {
     var focusableChildren = getFocusableChildren(node);
@@ -78,39 +44,52 @@
    * @param {Node} main - Main element of the page
    */
   var Modal = function (node, main) {
-    this.$main = main || document.querySelector('#main');
-    this.$node = node;
-    this.$openers = $$('[data-modal-show="' + this.$node.id + '"]');
-    this.$closers = $$('[data-modal-hide]', this.$node)
-      .concat($$('[data-modal-hide="' + this.$node.id + '"]'));
+    var that = this;
+    main = main || document.querySelector('#main');
     this.shown = false;
 
-    bindListeners(this);
-  };
+    $$('[data-modal-show="' + node.id + '"]').forEach(function (opener) {
+      opener.addEventListener('click', show);
+    });
 
-  /**
-   * Method to display the modal
-   */
-  Modal.prototype.show = function () {
-    this.shown = true;
+    $$('[data-modal-hide]', node).concat($$('[data-modal-hide="' + node.id + '"]')).forEach(function (closer) {
+      closer.addEventListener('click', hide);
+    });
 
-    this.$node.setAttribute('aria-hidden', 'false');
-    this.$main.setAttribute('aria-hidden', 'true');
+    document.addEventListener('keydown', function (event) {
+      if (that.shown && event.which === 27) {
+        event.preventDefault();
+        hide();
+      }
 
-    focusedElementBeforeModal = document.activeElement;
-    setFocusToFirstItem(this.$node);
-  };
+      if (that.shown && event.which === 9) {
+        trapTabKey(node, event);
+      }
+    });
 
-  /**
-   * Method to hide the modal
-   */
-  Modal.prototype.hide = function () {
-    this.shown = false;
+    document.body.addEventListener('focus', function (event) {
+      if (that.shown && !node.contains(event.target)) {
+        setFocusToFirstItem(node);
+      }
+    }, true);
+
+    this.show = show;
+    this.hide = hide;
 
-    this.$node.setAttribute('aria-hidden', 'true');
-    this.$main.setAttribute('aria-hidden', 'false');
+    function show () {
+      that.shown = true;
+      node.setAttribute('aria-hidden', 'false');
+      main.setAttribute('aria-hidden', 'true');
+      focusedElementBeforeModal = document.activeElement;
+      setFocusToFirstItem(node);
+    }
 
-    focusedElementBeforeModal.focus();
+    function hide () {
+      that.shown = false;
+      node.setAttribute('aria-hidden', 'true');
+      main.setAttribute('aria-hidden', 'false');
+      focusedElementBeforeModal.focus();
+    }
   };
 
   global.Modal = Modal;

diff --git a/accessible-modal-dialog.min.js b/accessible-modal-dialog.min.js
diff --git a/example/accessible-modal-dialog.js b/example/accessible-modal-dialog.js
@@ -30,40 +30,6 @@
     }
   }
 
-  // Helper function to bind listeners for a Modal instance
-  function bindListeners (instance) {
-    instance.$openers.forEach(function ($opener) {
-      $opener.addEventListener('click', function () {
-        instance.show();
-      });
-    });
-
-    instance.$closers.forEach(function ($closer) {
-      $closer.addEventListener('click', function () {
-        instance.hide();
-      });
-    });
-
-    document.addEventListener('keydown', function (event) {
-      if (instance.shown === false) return;
-
-      if (event.which === 27) {
-        event.preventDefault();
-        instance.hide();
-      }
-
-      if (event.which === 9) {
-        trapTabKey(instance.$node, event);
-      }
-    });
-
-    document.body.addEventListener('focus', function (event) {
-      if (instance.shown && !instance.$node.contains(event.target)) {
-        setFocusToFirstItem(instance.$node);
-      }
-    }, true);
-  }
-
   // Helper function to focus first focusable item in node
   function setFocusToFirstItem (node) {
     var focusableChildren = getFocusableChildren(node);
@@ -78,39 +44,52 @@
    * @param {Node} main - Main element of the page
    */
   var Modal = function (node, main) {
-    this.$main = main || document.querySelector('#main');
-    this.$node = node;
-    this.$openers = $$('[data-modal-show="' + this.$node.id + '"]');
-    this.$closers = $$('[data-modal-hide]', this.$node)
-      .concat($$('[data-modal-hide="' + this.$node.id + '"]'));
+    var that = this;
+    main = main || document.querySelector('#main');
     this.shown = false;
 
-    bindListeners(this);
-  };
+    $$('[data-modal-show="' + node.id + '"]').forEach(function (opener) {
+      opener.addEventListener('click', show);
+    });
 
-  /**
-   * Method to display the modal
-   */
-  Modal.prototype.show = function () {
-    this.shown = true;
+    $$('[data-modal-hide]', node).concat($$('[data-modal-hide="' + node.id + '"]')).forEach(function (closer) {
+      closer.addEventListener('click', hide);
+    });
 
-    this.$node.setAttribute('aria-hidden', 'false');
-    this.$main.setAttribute('aria-hidden', 'true');
+    document.addEventListener('keydown', function (event) {
+      if (that.shown && event.which === 27) {
+        event.preventDefault();
+        hide();
+      }
 
-    focusedElementBeforeModal = document.activeElement;
-    setFocusToFirstItem(this.$node);
-  };
+      if (that.shown && event.which === 9) {
+        trapTabKey(node, event);
+      }
+    });
 
-  /**
-   * Method to hide the modal
-   */
-  Modal.prototype.hide = function () {
-    this.shown = false;
+    document.body.addEventListener('focus', function (event) {
+      if (that.shown && !node.contains(event.target)) {
+        setFocusToFirstItem(node);
+      }
+    }, true);
+
+    this.show = show;
+    this.hide = hide;
 
-    this.$node.setAttribute('aria-hidden', 'true');
-    this.$main.setAttribute('aria-hidden', 'false');
+    function show () {
+      that.shown = true;
+      node.setAttribute('aria-hidden', 'false');
+      main.setAttribute('aria-hidden', 'true');
+      focusedElementBeforeModal = document.activeElement;
+      setFocusToFirstItem(node);
+    }
 
-    focusedElementBeforeModal.focus();
+    function hide () {
+      that.shown = false;
+      node.setAttribute('aria-hidden', 'true');
+      main.setAttribute('aria-hidden', 'false');
+      focusedElementBeforeModal.focus();
+    }
   };
 
   global.Modal = Modal;