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.
131 lines (100 loc) • 4.19 kB
HTML
<html>
<head>
<title>Custom Component, based on JSON data</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- LIBRARY FILES -->
<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>
const itemDataList = [
{ id: "1", label: "Broccoli", desc: "Vegetable", icon: "assets/broccoli.png" },
{ id: "2", label: "Strawberry", desc: "Fruit", icon: "assets/strawberry.png" },
{ id: "3", label: "Carrot", desc: "Vegetable", icon: "assets/carrot.png" },
{ id: "4", label: "Blueberries", desc: "Fruit", icon: "assets/blueberries.png" },
];
let itemList = [];
let containerBox;
window.onload = function() {
page.color = "whitesmoke";
// GROUP: Autolayout centered.
AutoLayout();
// BOX: Fruit items container box.
containerBox = startBox(40, 40, 300, "auto", {
color: "white",
round: 13,
});
itemDataList.forEach((item) => {
const newItem = PlantItem(item);
itemList.push(newItem);
newItem.on("click", () => {
newItem.selected = newItem.selected ? 0 : 1;
newItem.elem.style.filter = newItem.selected ? "grayscale(100%)" : "none";
if (newItem.selected) println(newItem.id);
});
});
endBox(); // END containerBox
endAutoLayout(); // END Autolayout
};
// DEFAULT VALUES: PlantItem
const PlantItemDefaults = {
width: 300,
height: 94,
color: "transparent",
position: "relative",
};
// CUSTOM COMPONENT: PlantItem
const PlantItem = function(params = {}) {
// BOX: Component container box.
const box = startObject();
// Apply default values and params:
box.props(PlantItemDefaults, params);
// Private, public variables and functions:
const privateVariable = null;
box.publicVariable = null;
const privateFunction = function() {};
box.publicFunction = function() {};
// COMPONENT VIEW:
// BOX: Item background box.
box.backgroundBox = Box(4, 2, box.width - 8, 90, {
color: "rgba(0, 0, 0, 0.01)",
round: 13,
border: 1,
borderColor: "rgba(0, 0, 0, 0.04)",
});
that.setMotion("background-color 0.3s");
that.clickable = 1;
that.elem.style.cursor = "pointer";
// IMAGE: Item icon image.
Icon(30, 12, 70, 70, {
round: 4,
color: "transparent",
border: 0,
});
that.load(box.icon);
// LABEL: Item label text.
Label(120, 25, 280, "auto", {
text: box.label,
});
// LABEL: Item description text.
Label(120, 49, 280, "auto", {
text: box.desc,
textColor: "gray",
fontSize: 14,
});
// INIT CODE:
box.on("mouseover", function(event) {
box.backgroundBox.color = "rgba(90, 90, 0, 0.09)";
});
box.on("mouseout", function(event) {
box.backgroundBox.color = "rgba(0, 0, 0, 0.01)";
});
return endObject(box);
};
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>