Dynamic Windows in Website - JDW
Tags: javascript, window, webdev
Published: 2021-09-25 09:54:19

Hello folks! Today i will show a javascript library for creating dynamic windows in website by me.

## Links
- [GitLab](https://gitlab.com/aiocat/jdw)
- [GitHub Mirror](https://github.com/aiocat/jdw)

## Documentation
Check [this repo](https://gitlab.com/aiocat/jdw-docs) 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;
```html
<!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:
```js
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:
![Example Result](https://i.imgur.com/C7gzqLO.gif)

Uh, but how we can resize this? JDW also has a utility for this!
```diff
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:
![Example Result 2](https://i.imgur.com/4X4Z63j.gif)

Well, we need to add some element to the window. For this, we will use `<JDWindow>.addElement(element)` or `<JDWindow>.addElements(...element)`:
```diff
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!
![Example Result 3](https://i.imgur.com/0nuqO8M.gif)

And also, you can customize everything with css! Here an example:
```js
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:
![Customize Result](https://i.imgur.com/lEr31i8.gif)

## 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.