Generalized Popups

js/AddShapeDialog.js

@@ -1,4 +1,5 @@
 var shapeResolution=3;
+var shapePopup;
 
 function initShapeDialog() {
   $("#btnShapeOk").on("onButtonClick",onShapeOk);
@@ -6,18 +7,19 @@ function initShapeDialog() {
   $("#btnShapePlus").on("onButtonHold",onShapePlus);
   $("#btnShapeMin").on("onButtonHold",onShapeMin);
   updateShapePreview();
+  shapePopup = new Popup($("#popupShape"), $("#popupMask"));
 }
 
 function showShapeDialog() {
-  showPopup(popupShape);
+	shapePopup.open();
 }
 
 function onShapeCancel() {
-  hidePopup(popupShape);
+  shapePopup.close();
 }
 
 function onShapeOk() {
-  hidePopup(popupShape);
+	shapePopup.close();
 
   var res = shapeResolution;
 

js/Popup.js

@@ -1,11 +1,20 @@
-function showPopup(popup) {
+function Popup(element,mask) {
-	popupMask.fadeIn(POPUP_SHOW_DURATION);
+	
-  popup.fadeIn(POPUP_SHOW_DURATION);
+	var self = this;
-  keyboardShortcutsEnabled=false;
+	
-}
+	this.open = function(complete,disableMaskClick) {
+		mask.fadeIn(POPUP_SHOW_DURATION);
+		element.fadeIn(POPUP_SHOW_DURATION, complete);
+		keyboardShortcutsEnabled=false;
+		document.body.removeEventListener('touchmove',prevent,false);
+		mask.bind("onButtonClick", function() { self.close() });
+	}
+	this.close = function(complete) {
+		mask.fadeOut(POPUP_SHOW_DURATION);
+		element.fadeOut(POPUP_SHOW_DURATION,complete);
 		
-function hidePopup(popup) {
-	popupMask.fadeOut(POPUP_SHOW_DURATION);
-  popup.fadeOut(POPUP_SHOW_DURATION);
 		keyboardShortcutsEnabled=true;	
+		document.body.addEventListener('touchmove',prevent,false);
+		mask.unbind("onButtonClick");
+	}
 }

js/SettingsWindow.js

@@ -1,9 +1,11 @@
 //these settings are defined in the firmware (conf_defaults.lua) and will be initialized in loadSettings()
 var settings = { }
-
+var settingsPopup;
 //wrapper to prevent scoping issues in showSettings()
 function openSettingsWindow() {
-	settingsWindow.showSettings();
+	settingsWindow.loadSettings(function() { // reload settings
+		settingsPopup.open();
+	});
 }
 
 function SettingsWindow() {
@@ -73,10 +75,12 @@ function SettingsWindow() {
 		this.wifiboxURL = wifiboxURL;
 		this.wifiboxCGIBinURL = wifiboxCGIBinURL;
 
-		this.window = $("#settings");
+		this.window = $("#popupSettings");
 		this.btnOK = this.window.find(".btnOK");
 		enableButton(this.btnOK,this.submitwindow);
 		
+		settingsPopup = new Popup($("#popupSettings"), $("#popupMask"));
+
 		this.window.find("#settingsContainer").load("settings.html", function() {
 			console.log("Settings:finished loading settings.html, now loading settings...");
 
@@ -130,6 +134,14 @@ function SettingsWindow() {
 		}); //this.window.find
 
 	} //this.init
+	this.openSettings = function() {
+		self.loadSettings(function() { // reload settings
+			settingsPopup.open();
+		});
+	}
+	this.closeSettings = function(complete) {
+		settingsPopup.close(complete);
+	}
 	
 	this.submitwindow = function(e) {
 		disableButton(self.btnOK,self.submitwindow);
@@ -137,7 +149,7 @@ function SettingsWindow() {
 	  e.stopPropagation();
 	  self.saveSettings(self.readForm(),function(success){
 	  	if(success) {
-				self.hideSettings(function() {
+				self.closeSettings(function() {
 					enableButton(self.btnOK,self.submitwindow);
 				});
 				self.signin();
@@ -149,23 +161,6 @@ function SettingsWindow() {
 	  clearTimeout(self.retryRetrieveNetworkStatusDelay);
 	}
 
-	this.showSettings = function() {
-		keyboardShortcutsEnabled = false;
-	  this.loadSettings(function() { // reload settings
-	  	$("#contentOverlay").fadeIn(175, function() {
-				document.body.removeEventListener('touchmove',prevent,false);
-			});
-	  });
-	}
-	this.hideSettings = function(complete) {
-		keyboardShortcutsEnabled = true;
-		$("#contentOverlay").fadeOut(175, function() {
-      document.body.addEventListener('touchmove',prevent,false);
-//      self.window.css("display","none");
-      complete();
-    });
-	}
-
 	this.loadSettings = function(complete) {
 		if (!communicateWithWifibox) {
 			console.log("     communicateWithWifibox is false: settings aren't being loaded from wifibox...")

js/WordArt.js

@@ -1,26 +1,26 @@
+var wordArtPopup;
+
 function initWordArt() {
 	$("body").append('<div id="svgfont" style="display:none"></div>');
 	$("#svgfont").load("img/font.svg?");
   $("#btnWordArtOk").on("onButtonClick",onWordArtOk);
   $("#btnWordArtCancel").on("onButtonClick",onWordArtCancel);
+  wordArtPopup = new Popup($("#popupWordArt"),$("#popupMask"));
 }
 
 function showWordArtDialog() {
   buttonGroupAdd.hide();
-  showPopup(popupWordArt);
+  wordArtPopup.open();
-  popupMask.bind("onButtonClick", onWordArtCancel);
   $("#txtWordArt").focus();
   $("#txtWordArt").val(""); //clear textbox
 }
 
 function onWordArtCancel() {
-	popupMask.unbind("onButtonClick");
+	wordArtPopup.close();
-  hidePopup(popupWordArt);
 }
 
 function onWordArtOk() {
-  hidePopup(popupWordArt);
+	wordArtPopup.close();
-
   var s = $("#txtWordArt").val();
   drawTextOnCanvas(s);
 }

less/mobile_settingspopup.less

@@ -3,10 +3,7 @@
   SETTINGS POPUP - MOBILE
 
 */
-#contentOverlay {
+#popupSettings {
-  z-index: 200;
-
-  #settings {
   width: 87%;
   height: 82%;
   margin: 6% 4%;
@@ -14,5 +11,4 @@
   > .right {
     width: 14%;
   }
-  }
 }

less/settingsPopup.less

@@ -3,20 +3,7 @@
   SETTINGS POPUP
 
 */
-#contentOverlay {
+#popupSettings {
-  background-color: rgba(255, 255, 255, 0.65);
-  z-index: 20;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  display:none;
-  user-select: text;
-
-  #settings {
   background-color: #fff;
   position: absolute;
   top: 0;
@@ -89,5 +76,4 @@
       }
     }
   }
-  }
 }

www/index.html

@@ -140,8 +140,7 @@
     </div>
   </div>
 
-  <div id="contentOverlay">
+  <div id="popupSettings" class="popup">
-    <div id="settings">
     <div class="toppanel">
       <div id="settingsLabelContainer">
         <img id="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
@@ -156,7 +155,6 @@
       </div>
     </div>
   </div>
-  </div>
 </div>
 
 <div id="portrait">