basic-ui-js
Version:
A lightweight JavaScript library for building web-based applications with simple code. No need to write HTML or CSS — just use basic JavaScript.
235 lines (191 loc) • 8.16 kB
HTML
<html>
<head>
<title>Dialog Component</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- LIBRARY FILES -->
<!-- <link rel="preload" href="image.png" as="image"> -->
<link rel="preload" href="basic/font/open-sans/OpenSans-Regular.ttf" as="font" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="basic/basic.min.css">
<script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="basic/scroll-bar.min.js" type="text/javascript" charset="utf-8"></script>-->
<style>
/*
body {
margin: 0px !important;
overflow: hidden !important;
}
*/
</style>
<script>
// First running function.
window.onload = function() {
page.color = "lightgray";
AutoLayout();
Button({
text: "Show Dialog",
minimal: 1,
border: 1,
color: "white",
width: "auto",
padding: [18, 0],
});
that.on("click", function(event) {
Dialog({
icon: "assets/key.png",
title: "Warning!",
desc: "This action cannot be undone. Are you sure you want to proceed?",
confirmButtonText: "Yes, I'm sure",
callback: function(id) {
println("answer: " + id);
},
cancelButtonText: "Cancel",
confirmButtonColor: basic.WARNING_COLOR,
color: "rgba(0,0,0,0.7)",
});
});
endAutoLayout();
}
// Dialog: Component example
const DialogDefaults = {
icon: "assets/key.png",
title: "?",
desc: "?",
confirmButtonText: "Send",
callback: function(id) {},
cancelButtonText: "Cancel",
confirmButtonColor: basic.ACTION_COLOR,
color: "rgba(0,0,0,0.7)",
};
const Dialog = function(params = {}) {
const box = startObject();
// You can't set these values over params.
params.opacity = 0;
params.left = 0;
params.top = 0;
params.width = "100%";
params.height = "100%";
// Values are ready to use
box.props(DialogDefaults, params);
that.setMotion("opacity 0.2s");
that.withMotion(function(self) {
self.opacity = 1;
});
// Close alert
Box(0,0,"100%","100%", {
color: "transparent",
});
that.on("click", function() {
box.remove();
box.callback(0);
});
// GROUP: Cover background
AutoLayout({
align: "center",
});
// BOX: Alert box
startBox({
width: 500,
height: "auto",
round: 6,
color: "white",
});
that.elem.style.minWidth = "500px";
that.opacity = 0;
that.elem.style.transform = "translateY(50px)";
that.setMotion("transform 0.2s, opacity 0.2s");
that.withMotion(function(self) {
self.opacity = 1;
self.elem.style.transform = "translateY(0px)";
});
that.elem.style.boxShadow = "0px 0px 8px rgba(0, 0, 0, 0.2)";
that.clickable = 1;
// Buttons background
Box({
color: "whitesmoke",
width: "100%",
height: 64,
left: 0,
bottom: 0,
});
that.elem.style.borderTop = "1px solid rgba(0,0,0,0.3)";
// GROUP: Title
AutoLayout({
align: "top left",
gap: 6,
padding: 12,
height: 56,
});
// ICON: Title
Icon({
width: 32,
height: 32,
});
that.load(box.icon);
// LABEL: Title
Label({
text: box.title,
});
that.elem.style.fontFamily = "opensans-bold";
endAutoLayout();
// GROUP: Description
AutoLayout({
align: "left top",
padding: [12, 50, 12, 80],
});
that.position = "relative";
Label({
text: box.desc,
fontSize: 16,
textColor: "#4A4A4A",
});
endAutoLayout();
// GROUP: Buttons
AutoLayout({
align: "right bottom",
gap: 6,
padding: 12,
});
// BUTTON: Cancel
Button({
text: box.cancelButtonText,
color: "lightgrey",
minimal: 1,
height: 40,
width: "auto",
padding: [18, 0],
});
that.on("click", function() {
box.remove();
box.callback(0);
});
// BUTTON: Confirm
const btnConfirm = Button({
text: box.confirmButtonText,
color: box.confirmButtonColor,
height: 40,
width: "auto",
padding: [18, 0],
});
that.on("mouseover", function() {
btnConfirm.elem.style.filter = "brightness(120%)";
});
that.on("mouseout", function() {
btnConfirm.elem.style.filter = "brightness(100%)";
});
that.on("click", function() {
box.remove();
box.callback(1);
});
endAutoLayout(); // Button group
endBox(); // Alert box
endAutoLayout(); // Cover black background
return endObject(box);
};
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>