modal refactor and some style fixes

chinchang · chinchang · commit 1c82dcaafddd · 2017-05-08T02:53:13.000+05:30
diff --git a/src/index.html b/src/index.html
@@ -23,7 +23,7 @@
 						</svg>Run
 					</a>
 
-					<a id="js-add-library-btn" class="fleex-v-center hint--rounded hint--bottom-left" aria-label="Add a JS/CSS library">
+					<a id="js-add-library-btn" class="flex-v-center hint--rounded hint--bottom-left" aria-label="Add a JS/CSS library">
 						Add library <span id="js-external-lib-count" style="display:none;" class="count-label"></span>
 					</a>
 
diff --git a/src/script.js b/src/script.js
@@ -985,7 +985,7 @@ runBtn, searchInput, consoleEl, consoleLogEl
 	});
 
 	function openSettings() {
-		settingsModal.classList.toggle('is-modal-visible');
+		scope.toggleModal(settingsModal);
 
 		/* if (chrome.runtime.openOptionsPage) {
 			// New way to open options pages, if supported (Chrome 42+).
@@ -1289,6 +1289,14 @@ runBtn, searchInput, consoleEl, consoleLogEl
 		trackEvent('ui', 'saveBtnClick', currentItem.id ? 'saved' : 'new');
 		saveItem();
 	};
+	/**
+	 * Toggles a modal and logs an event.
+	 * @param  {Node} modal     modal to be toggled
+	 */
+	scope.toggleModal = function (modal) {
+		modal.classList.toggle('is-modal-visible');
+		document.body.classList[modal.classList.contains('is-modal-visible') ? 'add' : 'remove']('overlay-visible');
+	};
 	scope.onSearchInputChange = function (e) {
 		const text = e.target.value;
 		let el;
@@ -1363,19 +1371,17 @@ runBtn, searchInput, consoleEl, consoleLogEl
 		layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4));
 
 		utils.onButtonClick(helpBtn, function () {
-			helpModal.classList.toggle('is-modal-visible');
-			document.body.classList[helpModal.classList.contains('is-modal-visible') ? 'add' : 'remove']('overlay-visible');
+			scope.toggleModal(helpModal);
 			trackEvent('ui', 'helpButtonClick');
 		});
 		utils.onButtonClick(addLibraryBtn, function () {
-			addLibraryModal.classList.toggle('is-modal-visible');
-			document.body.classList[addLibraryModal.classList.contains('is-modal-visible') ? 'add' : 'remove']('overlay-visible');
+			scope.toggleModal(addLibraryModal);
 			trackEvent('ui', 'addLibraryButtonClick');
 		});
 
 		notificationsBtn.addEventListener('click', function () {
-			notificationsModal.classList.toggle('is-modal-visible');
-			document.body.classList[notificationsModal.classList.contains('is-modal-visible') ? 'add' : 'remove']('overlay-visible');
+			scope.toggleModal(notificationsModal);
+
 			if (notificationsModal.classList.contains('is-modal-visible') && !hasSeenNotifications) {
 				hasSeenNotifications = true;
 				notificationsBtn.classList.remove('has-new');
