mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-22 09:17:56 +01:00
Generalized Popups
This commit is contained in:
peteruithoven
parent
548ea2732a
commit
bbed35d877
@ -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;
|
||||
|
||||
|
||||
29
js/Popup.js
29
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");
|
||||
}
|
||||
}
|
||||
@ -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...")
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user