DEV Community

aiocat
aiocat

Posted on

Dynamic Windows in Website - JDW

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>
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

Let's view the result:
Example 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.
Enter fullscreen mode Exit fullscreen mode

Let's show the result:
Example Result 2

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.
Enter fullscreen mode Exit fullscreen mode

Let's test!
Example Result 3

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);
Enter fullscreen mode Exit fullscreen mode

The result:
Customize 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.

Discussion (0)