cordova-mobile-app-template
Version:
Simple and fully customizable user interface template. Design for mobile app development on Apache Cordova framework or Ionic / Capacitor Native Runtime. Platforms: Android, iOS.
229 lines (185 loc) • 8.02 kB
HTML
<html>
<head>
<title>Custom UI Dialog</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="library/basic.min.css">
<script src="library/basic.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var selectedColor = "#FFD541";
var btnOpenDialog = null;
var start = function() {
page.color = "white";
// *** EXAMPLE 1:
btnOpenDialog = createButton(0, 0, "auto");
that.text = "Open Dialog";
that.color = selectedColor;
that.spaceX = 20;
that.onResize(function(self) {
self.center();
})
that.onClick(function buttonClicked(self) {
openColorSelectionDialog(selectedColor, function colorSelected(color) {
selectedColor = color;
self.color = color;
});
})
}
var openColorSelectionDialog = function(useColor, returnAnswerFunc) {
var colorList = ["#FFD541", "#689BD2", "#A5D5BE", "lightgray", "#EE7553", "pink" ]
var colorItemList = []
var closeBox = function() {
box.boxEditColor.bottom = -1 * box.boxEditColor.height - 10
box.boxBack.opacity = 0
setTimeout(function() {
box.remove()
delete box
}, 200)
}
var refreshActionButton = function() {
if (box.boxEditColor.txtColorName.text == useColor) {
box.buttonGroup.btnAction.enabled = 0
box.buttonGroup.btnAction.element.style.filter = "grayscale(100%)"
} else {
box.buttonGroup.btnAction.enabled = 1
box.buttonGroup.btnAction.element.style.filter = "none"
}
box.boxEditColor.boxColor.color = box.boxEditColor.txtColorName.text
for (var i = 0; i < colorItemList.length; i++) {
if (colorItemList[i].colorCode == box.boxEditColor.txtColorName.text) {
colorItemList[i].border = 12
} else {
colorItemList[i].border = 2
}
}
}
// BOX: Container.
var box = createBox(0, 0, getDefaultContainerBox().width, getDefaultContainerBox().height)
that.color = "transparent"
// BOX: Cover background.
box.boxBack = createBox(0, 0, box.width, box.height)
box.add(that)
that.color = "rgba(0, 0, 0, 0.2)"
that.opacity = 0
that.setMotion("opacity 0.2s")
that.withMotion(function(self) {
self.opacity = 1
})
that.onClick(function(self) {
closeBox()
})
// UI EDIT BOX:
box.boxEditColor = createBox(10, 0, box.width - 20, 330)
box.add(that)
that.bottom = -1 * that.height - 10
that.color = "white"
that.border = 2
that.borderColor = "rgba(0, 0, 0, 0.3)"
that.round = 13
that.element.style.boxShadow = "0px 0px 8px rgba(0, 0, 0, 0.2)"
that.visible = 1
that.opacity = 1
that.setMotion("bottom 0.2s, opacity 0.2s");
that.withMotion(function(self) {
self.bottom = 10
})
// TEXTBOX: Color name textbox.
box.boxEditColor.txtColorName = createTextBox(30, 70, box.width - 80)
box.boxEditColor.add(that)
that.minimal = 1
that.round = 8
that.title = "Primary Color Code:"
that.color = "whitesmoke"
that.border = 1;
that.borderColor = "rgba(0, 0, 0, 0.2)";
that.text = useColor
box.boxEditColor.boxColor = createBox(0, 0, 24, 24);
box.boxEditColor.add(that)
that.color = useColor
that.border = 2
that.borderColor = "#141414"
that.round = 40
box.boxEditColor.boxColor.aline(box.boxEditColor.txtColorName, "right", -35, "center")
// BOX: Select color list.
for (var i = 0; i < colorList.length; i++) {
var boxColor = createBox(0, 0, 40, 40);
box.boxEditColor.add(that)
that.color = colorList[i]
that.colorCode = colorList[i]
that.border = 2
that.borderColor = "#141414"
that.round = 40
that.onClick(function(self) {
box.boxEditColor.txtColorName.text = self.colorCode
refreshActionButton()
})
if (i == 0) {
boxColor.aline(box.boxEditColor.txtColorName, "bottom", 30)
} else {
boxColor.aline(previousThat, "right", 20)
}
colorItemList.push(boxColor)
}
// BOX: Bottom button group.
box.buttonGroup = createBox(0, 0, box.boxEditColor.width, 106);
box.boxEditColor.add(that);
that.color = "transparent";
that.bottom = 0;
that.border = 0;
// BUTTON: CANCEL button.
box.buttonGroup.btnCancel = createButton(0, 20, "auto", 60);
box.buttonGroup.add(that);
that.text = "CANCEL";
that.fontSize = 20;
that.minimal = 1;
that.color = "whitesmoke";
that.right = 20;
that.round = 8;
that.border = 2;
that.opacity = 1;
that.borderColor = "transparent";
that.element.style.fontFamily = "opensans-bold";
that.buttonElement.style.paddingLeft = "36px";
that.buttonElement.style.paddingRight = "36px";
that.onClick(function() {
closeBox()
})
// BUTTON: SAVE button.
box.buttonGroup.btnAction = createButton(0, 20, "auto", 60);
box.buttonGroup.add(that);
that.text = "SAVE";
that.fontSize = 20;
that.minimal = 0;
that.color = useColor;
that.right = 30;
that.round = 8;
that.opacity = 1;
that.enabled = 0;
that.element.style.filter = "grayscale(100%)"
that.element.style.fontFamily = "opensans-bold";
that.buttonElement.style.paddingLeft = "36px";
that.buttonElement.style.paddingRight = "36px";
that.setMotion("filtre 0.3s, opacity 0.3s");
that.onClick(function(self) {
// Return selection
returnAnswerFunc(box.boxEditColor.txtColorName.text)
// Close
closeBox()
});
// Reposition cancel button.
box.buttonGroup.btnAction.onResize(function(self) {
box.buttonGroup.btnCancel.aline(box.buttonGroup.btnAction, "left", 10);
})
// Check button action enabled or disabled
box.boxEditColor.txtColorName.inputElement.addEventListener("keyup" ,function(self) {
refreshActionButton()
})
refreshActionButton()
}
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>