Hello folks! Today i will show a javascript library for creating dynamic windows in website by me.
Links
Documentation
Check this repo for documentation. (if gitlab pages not works, download the source code and run /web/index.html in your browser.)
Example
Let's get the CDN link from the README.md and get started. Of course we need a empty html file first;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Noto Sans Font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<!-- JDW CDN -->
<script src="https://cdn.jsdelivr.net/gh/aiocat/jdw@0.0.1/jdw.min.js"></script>
<title>Document</title>
</head>
<body></body>
</html>
Now we can create a window! Let's open a script tag in body and create a simple window like this:
let jdwindow = new JDWindow({
width: 600, // 600px width.
height: 400, // 400px height.
titlebar: {
title: "Window", // Window title will be "Window".
height: 25, // Titlebar height.
},
});
jdwindow.windowCss("background-color: #333; font-family: Noto Sans JP; border: 5px solid #777;"); // Simple css for window.
jdwindow.titleBarCss("background-color: #111; color: #fff;"); // Simple css for titlebar
jdwindow.draggable(); // Make the window draggable.
jdwindow.draw(); // Add the window to the body.
Let's view the result:
Uh, but how we can resize this? JDW also has a utility for this!
let jdwindow = new JDWindow({
width: 600, // 600px width.
height: 400, // 400px height.
titlebar: {
title: "Window", // Window title will be "Window".
height: 25, // Titlebar height.
},
});
jdwindow.windowCss("background-color: #333; font-family: Noto Sans JP; border: 5px solid #777;"); // Simple css for window.
jdwindow.titleBarCss("background-color: #111; color: #fff;"); // Simple css for titlebar
+ jdwindow.resizable(); // Make the window resizable.
jdwindow.draggable(); // Make the window draggable.
- jdwindow.draw(); // Add the window to the body.
+ jdwindow.draw(50, 50); // Add the window to the body with 50px top and 50px left.
Let's show the result:
Well, we need to add some element to the window. For this, we will use <JDWindow>.addElement(element) or <JDWindow>.addElements(...element):
let jdwindow = new JDWindow({
width: 600, // 600px width.
height: 400, // 400px height.
titlebar: {
title: "Window", // Window title will be "Window".
height: 25, // Titlebar height.
},
});
+ let btn = document.createElement("button"); // Create a new element to append.
+ btn.innerText = "Hello!"; // Add a text to the button.
+ btn.onclick = () => btn.remove(); // Remove the button when clicked.
+ jdwindow.addElement(btn); // Add element to the window.
jdwindow.windowCss("background-color: #333; font-family: Noto Sans JP; border: 5px solid #777;"); // Simple css for window.
jdwindow.titleBarCss("background-color: #111; color: #fff;"); // Simple css for titlebar
jdwindow.resizable(); // Make the window resizable.
jdwindow.draggable(); // Make the window draggable.
jdwindow.draw(); // Add the window to the body.
jdwindow.draw(50, 50); // Add the window to the body with 50px top and 50px left.
Let's test!
And also, you can customize everything with css! Here an example:
let jdwindow = new JDWindow({
width: 600,
height: 400,
titlebar: {
title: "Rice",
height: 25,
},
});
let title = document.createElement("h1");
title.style.margin = "0 auto";
title.style.paddingLeft = "10px";
title.style.color = "#fff";
title.innerText = "This is a simple JDW window.";
let btn = document.createElement("button");
btn.innerText = "Hello!";
btn.onclick = () => btn.remove();
jdwindow.addElements(title, btn);
jdwindow.windowCss(
"font-family: Noto Sans JP; border: 2.5px solid #2C3645;"
);
jdwindow.setCloseButtonContent("");
jdwindow.titleCss("color: #434C5E; font-weight: 800; padding-left: 8px;");
jdwindow.appCss("height: 100%; background-color: #0D1117; opacity: 0.8;");
jdwindow.titleBarCss(
'background-color: #161B22; font-family: "Noto Sans JP", sans-serif;'
);
jdwindow.closeButtonCss(
"background-color: #EF534F; border-radius: 300px; padding: 8px; border: 0px solid #000; outline: none; margin-right: 10px;"
);
jdwindow.draggable();
jdwindow.draw(50, 50);
The result:
Contribute
Since this project is new, it can have some bugs || errors. If you found a bug or an error, please create an issue in gitlab repository. Read README.md for more informations.
Top comments (0)