Use window.Mzp in Modal and Notification components

CHANGELOG.md

@@ -1,3 +1,7 @@
+# HEAD
+
+* **js:** Use window.Mzp in Modal and Notification components (#488)
+
 ## 9.0.0
 
 * **assets:** (breaking) Update @mozilla-protocol/assets to 3.0.0 (#479)

src/assets/js/protocol/protocol-modal.js

@@ -7,12 +7,13 @@ if (typeof Mzp === 'undefined') { // eslint-disable-line block-scoped-var
     var Mzp = {};
 }
 
-Mzp.Modal = (function(w) { // eslint-disable-line block-scoped-var
+(function() {
     'use strict';
 
+    var Modal = {};
     var open = false;
-    var body = w.document.body;
-    var html = w.document.documentElement;
+    var body = document.body;
+    var html = document.documentElement;
     var options = {};
     var pageContentParent;
     var pageContent;
@@ -29,14 +30,14 @@ Mzp.Modal = (function(w) { // eslint-disable-line block-scoped-var
         allowScroll: boolean - allow/restrict page scrolling when modal is open.
         closeText: string to use for close button a11y.
     */
-    var _createModal = function(origin, content, opts) {
+    Modal.createModal = function(origin, content, opts) {
         options = opts;
 
         var isSmallViewport = window.innerWidth < 760;
 
         // Make sure modal is closed (if one exists)
         if (open) {
-            _closeModal();
+            Modal.closeModal();
         }
 
         // Create new modal
@@ -77,13 +78,13 @@ Mzp.Modal = (function(w) { // eslint-disable-line block-scoped-var
 
         // close modal on clicking close button or background.
         var closeButton = document.querySelector('.mzp-c-modal-button-close');
-        closeButton.addEventListener('click', _closeModal, false);
+        closeButton.addEventListener('click', Modal.closeModal, false);
         closeButton.setAttribute('title', closeText);
 
         // close modal on clicking the background (but not bubbled event).
         document.querySelector('.mzp-c-modal .mzp-c-modal-window').addEventListener('click', function (e) {
             if (e.target === this) {
-                _closeModal();
+                Modal.closeModal();
             }
         }, false);
 
@@ -108,7 +109,7 @@ Mzp.Modal = (function(w) { // eslint-disable-line block-scoped-var
 
     var _onDocumentKeyUp = function(e) {
         if (e.keyCode === 27 && open) {
-            _closeModal();
+            Modal.closeModal();
         }
     };
 
@@ -120,7 +121,7 @@ Mzp.Modal = (function(w) { // eslint-disable-line block-scoped-var
         }
     };
 
-    var _closeModal = function(e) {
+    Modal.closeModal = function(e) {
         if (e) {
             e.preventDefault();
         }
@@ -153,12 +154,6 @@ Mzp.Modal = (function(w) { // eslint-disable-line block-scoped-var
         options = {};
     };
 
-    return {
-        createModal: function(origin, content, opts) {
-            _createModal(origin, content, opts);
-        },
-        closeModal: function() {
-            _closeModal();
-        }
-    };
-})(window);
+    window.Mzp.Modal = Modal;
+
+})();

src/assets/js/protocol/protocol-notification-bar.js

@@ -7,9 +7,10 @@ if (typeof Mzp === 'undefined') { // eslint-disable-line block-scoped-var
     var Mzp = {};
 }
 
-Mzp.Notification = (function() { // eslint-disable-line block-scoped-var
+(function() {
     'use strict';
 
+    var Notification = {};
     var options = {};
 
     /*
@@ -24,7 +25,7 @@ Mzp.Notification = (function() { // eslint-disable-line block-scoped-var
         onNotificationClose: function to fire after notification has been closed.
     */
 
-    var _init = function(origin, opts) {
+    Notification.init = function(origin, opts) {
 
         if (typeof opts === 'object') {
             for (var i in opts) {
@@ -103,9 +104,6 @@ Mzp.Notification = (function() { // eslint-disable-line block-scoped-var
         origin.classList.remove('mzp-c-notification-origin');
     };
 
-    return {
-        init: function(origin, opts) {
-            _init(origin, opts);
-        }
-    };
+    window.Mzp.Notification = Notification;
+
 })(window);