Add base ui features.

assets/core.js

@@ -0,0 +1,16 @@
+import { search } from "./search.js";
+import { pixel, percent, auto } from "./size.js";
+import { position, place_top } from "./position.js";
+import { sticky } from "./sticky.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+    const container = document.querySelector(".container");
+    
+    const top_bar = new sticky();
+    top_bar.width = new percent(100);
+    top_bar.height = new auto();
+    top_bar.position = new place_top();
+
+    container.appendChild(top_bar.element);
+});
+

assets/position.js

@@ -0,0 +1,62 @@
+class position {
+    get name() {
+        throw "This is abstract getter.";
+    }
+
+    get top_css() {
+        return "auto";
+    }
+
+    get bottom_css() {
+        return "auto";
+    }
+
+    get left_css() {
+        return "auto";
+    }
+
+    get right_css() {
+        return "auto";
+    }
+}
+
+class place_top extends position {
+    get name() {
+        return "top";
+    }
+
+    get top_css() {
+        return "0px";
+    }
+}
+
+class place_bottom extends position {
+    get name() {
+        return "bottom";
+    }
+
+    get bottom_css() {
+        return "0px";
+    }   
+}
+
+class place_left extends position {
+    get name() {
+        return "left";
+    }
+
+    get left_css() {
+        return "0px";
+    }
+}
+
+class place_right extends position {
+    get name() {
+        return "right";
+    }
+
+    get right_css() {
+        return "0px";
+    }
+}
+export { position, place_top, place_bottom, place_left, place_right };

assets/search.js

@@ -0,0 +1,14 @@
+class search {
+    constructor() {
+    }
+
+    get ui() {
+        const container = document.createElement("div");
+
+        const input = document.createElement("input");
+        input.type = "text";
+        input.className = "search";
+    }
+}
+
+export { search };

assets/size.js

@@ -0,0 +1,81 @@
+class size {
+    _value;
+
+    constructor(value) {
+        this.value = value;
+    }
+
+    set value(content) {
+        if (typeof(content) !== "number") {
+            throw "Size must be numeric.";
+        }
+
+        this._value = content;
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    get _unit() {
+        throw "This getter is abstract.";
+    }
+
+    get as_css() {
+        return this._value.toString() + this._unit;
+    }
+}
+
+class percent extends size {
+    get _unit() {
+        return "%";
+    }
+}
+
+class pixel extends size {
+    get _unit() {
+        return "px";
+    }
+}
+
+class emunit extends size {
+    get _unit() {
+        return "em";
+    }
+}
+
+class width_percent extends size {
+    get _unit() {
+        return "wv";
+    }
+}
+
+class height_percent extends size {
+    get _unit() {
+        return "hv";
+    }
+}
+
+class auto extends size {
+    get _unit() {
+        return "";
+    }
+
+    constructor() {
+        super(0);
+    }
+
+    set _value(content) {
+        throw "Auto have no value.";
+    }
+
+    get _value() {
+        throw "Auto have no value.";
+    }
+
+    get as_css() {
+        return "auto";
+    }
+}
+
+export { size, percent, pixel, emunit, width_percent, height_percent, auto };

assets/sticky.js

@@ -0,0 +1,55 @@
+import { position, place_top } from "./position.js";
+import { size, auto } from "./size.js";
+
+class sticky {
+    #width;
+    #height;
+    #position;
+    
+    constructor() {
+        this.#width = new auto();
+        this.#height = new auto();
+        this.#position = new place_top();
+    }
+
+    set width(value) {
+        if (!(value instanceof size)) {
+            throw "Width must be instance of size.";
+        }
+        
+        this.#width = value;
+    }
+
+    set height(value) {
+        if (!(value instanceof size)) {
+            throw "Height must be instance of size.";
+        }
+
+        this.#height = value;
+    }
+
+    set position(value) {
+        if (!(value instanceof position)) {
+            throw "Position must be instance of position class.";
+        }
+
+        this.#position = value;
+    }
+
+    get element() {
+        const container = document.createElement("div");
+        
+        container.style.width = this.#width.as_css;
+        container.style.height = this.#height.as_css;
+        
+        container.style.position = "fixed";
+        container.style.top = this.#position.top_css;
+        container.style.bottom = this.#position.bottom_css;
+        container.style.right = this.#position.right_css;
+        container.style.left = this.#position.left_css;
+
+        return container;
+    }
+}
+
+export { sticky };

core.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>cx-live-documentary</title>
+        <link rel="stylesheet" type="text/css" href="theme/core.css">
+        <script type="module" src="assets/core.js"></script>
+    </head>
+
+    <body>
+        <div class="container">
+        </div>
+    </body>
+</html>