vmario
/
doodle3d-client
mirror of https://github.com/Doodle3D/doodle3d-client.git
0
0
Fork 0
Code Issues Releases Wiki Activity

Generalized Popups

This commit is contained in:
peteruithoven 2014-01-16 21:30:57 +01:00
parent 548ea2732a
commit bbed35d877
8 changed files with 119 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js/AddShapeDialog.js
View File

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

29
js/Popup.js
View File

@ -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);
function hidePopup(popup) { element.fadeIn(POPUP_SHOW_DURATION, complete);
popupMask.fadeOut(POPUP_SHOW_DURATION); keyboardShortcutsEnabled=false;
popup.fadeOut(POPUP_SHOW_DURATION); document.body.removeEventListener('touchmove',prevent,false);
keyboardShortcutsEnabled=true; 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");
}
} }

37
js/SettingsWindow.js
View File

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

12
js/WordArt.js
View File

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

2
js/main.js
View File

@ -81,7 +81,7 @@ $(function() {
settingsWindow.init(wifiboxURL,wifiboxCGIBinURL); settingsWindow.init(wifiboxURL,wifiboxCGIBinURL);
$(document).on(SettingsWindow.SETTINGS_LOADED, settingsLoaded); $(document).on(SettingsWindow.SETTINGS_LOADED, settingsLoaded);
if(debugMode) { if(debugMode) {
console.log("debug mode is true"); console.log("debug mode is true");
$("body").css("overflow", "auto"); $("body").css("overflow", "auto");

16
less/mobile_settingspopup.less
View File

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

126
less/settingsPopup.less
View File

@ -3,90 +3,76 @@
SETTINGS POPUP SETTINGS POPUP
*/ */
#contentOverlay { #popupSettings {
background-color: rgba(255, 255, 255, 0.65); background-color: #fff;
z-index: 20;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 100%; z-index: 15;
height: 100%; max-width: 775px;
display:none; max-height: 540px;
user-select: text; 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 { .toppanel {
background-color: #fff; height: 10%;
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 { #settingsLabelContainer {
height: 10%; width: 100%;
height: auto;
margin-bottom: 1%;
#settingsLabelContainer { #settingsLabelImg {
width: 100%; width: 45%;
max-width: 373px;
height: auto; height: auto;
margin-bottom: 1%;
#settingsLabelImg {
width: 45%;
max-width: 373px;
height: auto;
}
} }
} }
.bottompanel { }
width: 100%; .bottompanel {
height: 90%; width: 100%;
height: 90%;
> #settingsContainer { > #settingsContainer {
float:left; float:left;
width: 83%; width: 83%;
height: 98%; height: 98%;
margin: .5%; margin: .5%;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
border: 1px solid rgb(187, 187, 187); border: 1px solid rgb(187, 187, 187);
border-radius: 5px; border-radius: 5px;
} }
> .right { > .right {
width: 15%; width: 15%;
height: 100%; height: 100%;
float:right; float:right;
position:relative; position:relative;
right: 0; right: 0;
> .btnContainer { > .btnContainer {
position: absolute; position: absolute;
bottom: 3%; bottom: 3%;
right: 7%; right: 7%;
width: 100%; width: 100%;
> .btn { > .btn {
max-width: 85px; max-width: 85px;
min-width: 42px; min-width: 42px;
width: 88%; width: 88%;
height: auto; height: auto;
margin: 8% 2% 2% 0; margin: 8% 2% 2% 0;
cursor: pointer; cursor: pointer;
float:right; float:right;
} }
}
} }
} }
} }

22
www/index.html
View File

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