diff --git a/js/AddShapeDialog.js b/js/AddShapeDialog.js
index ad4c84a..bf2adee 100644
--- 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;
diff --git a/js/Popup.js b/js/Popup.js
index a3727f9..7b4f2a1 100644
--- 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");
+ }
}
\ No newline at end of file
diff --git a/js/SettingsWindow.js b/js/SettingsWindow.js
index fdd516a..968bc3c 100644
--- 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...")
diff --git a/js/WordArt.js b/js/WordArt.js
index f449951..5c4425a 100644
--- a/js/WordArt.js
+++ b/js/WordArt.js
@@ -1,26 +1,26 @@
+var wordArtPopup;
+
function initWordArt() {
$("body").append('');
$("#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);
}
diff --git a/js/main.js b/js/main.js
index 4731217..d4bd7b5 100644
--- 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");
diff --git a/less/mobile_settingspopup.less b/less/mobile_settingspopup.less
index 213cc06..33ca42a 100644
--- 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%;
}
}
\ No newline at end of file
diff --git a/less/settingsPopup.less b/less/settingsPopup.less
index 73260d8..5086358 100644
--- 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;
+ }
}
}
}
diff --git a/www/index.html b/www/index.html
index f5e9abc..a2167ac 100644
--- a/www/index.html
+++ b/www/index.html
@@ -140,19 +140,17 @@
-
-
-
-
-
-
+
-