Generalized Popups

2014-01-16 21:30:57 +01:00 · 2014-01-16 21:30:57 +01:00 · bbed35d877
parent 548ea2732a
commit bbed35d877
8 changed files with 119 additions and 133 deletions
--- a/js/AddShapeDialog.js
+++ b/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;

--- a/js/Popup.js
+++ b/js/Popup.js
@ -1,11 +1,20 @@
-function showPopup(popup) {
-	popupMask.fadeIn(POPUP_SHOW_DURATION);
-  popup.fadeIn(POPUP_SHOW_DURATION);
-  keyboardShortcutsEnabled=false;
-}
-
-function hidePopup(popup) {
-	popupMask.fadeOut(POPUP_SHOW_DURATION);
-  popup.fadeOut(POPUP_SHOW_DURATION);
-  keyboardShortcutsEnabled=true;	
+function Popup(element,mask) {
+	
+	var self = this;
+	
+	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);
+		
+		keyboardShortcutsEnabled=true;	
+		document.body.addEventListener('touchmove',prevent,false);
+		mask.unbind("onButtonClick");
+	}
 }
--- a/js/SettingsWindow.js
+++ b/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,9 +75,11 @@ 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...")
--- a/js/WordArt.js
+++ b/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);
-  popupMask.bind("onButtonClick", onWordArtCancel);
+  wordArtPopup.open();
  $("#txtWordArt").focus();
  $("#txtWordArt").val(""); //clear textbox
 }

 function onWordArtCancel() {
-	popupMask.unbind("onButtonClick");
-  hidePopup(popupWordArt);
+	wordArtPopup.close();
 }

 function onWordArtOk() {
-  hidePopup(popupWordArt);
-
+	wordArtPopup.close();
  var s = $("#txtWordArt").val();
  drawTextOnCanvas(s);
 }
--- a/js/main.js
+++ b/js/main.js
@ -81,7 +81,7 @@ $(function() {

 	settingsWindow.init(wifiboxURL,wifiboxCGIBinURL);
 	$(document).on(SettingsWindow.SETTINGS_LOADED, settingsLoaded);
-
+	
  if(debugMode) {
    console.log("debug mode is true");
    $("body").css("overflow", "auto");
--- a/less/mobile_settingspopup.less
+++ b/less/mobile_settingspopup.less
@ -3,16 +3,12 @@
  SETTINGS POPUP - MOBILE

 */
-#contentOverlay {
-  z-index: 200;
+#popupSettings {
+  width: 87%;
+  height: 82%;
+  margin: 6% 4%;

-  #settings {
-    width: 87%;
-    height: 82%;
-    margin: 6% 4%;
-
-    > .right {
-      width: 14%;
-    }
+  > .right {
+    width: 14%;
  }
 }
--- a/less/settingsPopup.less
+++ b/less/settingsPopup.less
@ -3,90 +3,76 @@
  SETTINGS POPUP

 */
-#contentOverlay {
-  background-color: rgba(255, 255, 255, 0.65);
-  z-index: 20;
+#popupSettings {
+  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
-  width: 100%;
-  height: 100%;
-  display:none;
-  user-select: text;
+  z-index: 15;
+  max-width: 775px;
+  max-height: 540px;
+  width: 80%;
+  height: 75%;
+  margin: 7% 8%;
+  box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
+  border: 2px solid #222;
+  border-radius: 15px;
+  padding: 2%;

-  #settings {
-    background-color: #fff;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 15;
-    max-width: 775px;
-    max-height: 540px;
-    width: 80%;
-    height: 75%;
-    margin: 7% 8%;
-    box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
-    border: 2px solid #222;
-    border-radius: 15px;
-    padding: 2%;
+  .toppanel {
+    height: 10%;

-    .toppanel {
-      height: 10%;
+    #settingsLabelContainer {
+      width: 100%;
+      height: auto;
+      margin-bottom: 1%;

-      #settingsLabelContainer {
-        width: 100%;
+      #settingsLabelImg {
+        width: 45%;
+        max-width: 373px;
        height: auto;
-        margin-bottom: 1%;
-
-        #settingsLabelImg {
-          width: 45%;
-          max-width: 373px;
-          height: auto;
-        }
      }
    }
-    .bottompanel {
-      width: 100%;
-      height: 90%;
+  }
+  .bottompanel {
+    width: 100%;
+    height: 90%;

-      > #settingsContainer {
-        float:left;
-        width: 83%;
-        height: 98%;
-        margin: .5%;
-        overflow-y: scroll;
-        overflow-x: hidden;
-        -webkit-overflow-scrolling: touch;
-        border: 1px solid rgb(187, 187, 187);
-        border-radius: 5px;
-      }
-      > .right {
-        width: 15%;
-        height: 100%;
-        float:right;
-        position:relative;
-        right: 0;
+    > #settingsContainer {
+      float:left;
+      width: 83%;
+      height: 98%;
+      margin: .5%;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      -webkit-overflow-scrolling: touch;
+      border: 1px solid rgb(187, 187, 187);
+      border-radius: 5px;
+    }
+    > .right {
+      width: 15%;
+      height: 100%;
+      float:right;
+      position:relative;
+      right: 0;

-				> .btnContainer {
-					position: absolute;
-					bottom: 3%;
-					right: 7%;
-					width: 100%;
+			> .btnContainer {
+				position: absolute;
+				bottom: 3%;
+				right: 7%;
+				width: 100%;

-		      > .btn {
-		        max-width: 85px;
-		        min-width: 42px;
-		        width: 88%;
-		        height: auto;
-		        margin: 8% 2% 2% 0;
-		        cursor: pointer;
-		        float:right;
-		      }
-        }
+	      > .btn {
+	        max-width: 85px;
+	        min-width: 42px;
+	        width: 88%;
+	        height: auto;
+	        margin: 8% 2% 2% 0;
+	        cursor: pointer;
+	        float:right;
+	      }
      }
    }
  }
--- a/www/index.html
+++ b/www/index.html
@ -140,19 +140,17 @@
    </div>
  </div>

-  <div id="contentOverlay">
-    <div id="settings">
-      <div class="toppanel">
-        <div id="settingsLabelContainer">
-          <img id="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
-        </div>
+  <div id="popupSettings" class="popup">
+    <div class="toppanel">
+      <div id="settingsLabelContainer">
+        <img id="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
      </div>
-      <div class="bottompanel">
-        <div id="settingsContainer"></div>
-        <div class="right">
-          <div class="btnContainer">
-            <img src="img/buttons/btnOk.png" class="btn btnOK" alt="save"/>
-          </div>
+    </div>
+    <div class="bottompanel">
+      <div id="settingsContainer"></div>
+      <div class="right">
+        <div class="btnContainer">
+          <img src="img/buttons/btnOk.png" class="btn btnOK" alt="save"/>
        </div>
      </div>
    </div>