2023-02-26 01:30

2023-02-26 01:30:37 +09:00
commit 9a13ccbd17
122 changed files with 32148 additions and 0 deletions
--- a/getting-started-electron/src/components.js
+++ b/getting-started-electron/src/components.js
@@ -0,0 +1,48 @@
+const Mustache = require('mustache');
+
+class UIComponent {
+    constructor(template, options) {
+        this.template = template;
+        this.options = options;
+    }
+    apply(params = {}) {
+        for (let key in params) {
+            this.options[key] = params[key];
+        }
+    }
+}
+
+class Toolbar extends UIComponent {
+
+    constructor() {
+        super(`<h1>{{title}}</h1>`, {
+            title: "empty"
+        });
+    }
+
+    apply(params = {}) {
+        super.apply(params);
+        document.querySelector('#toolbar').innerHTML
+            = Mustache.render(this.template, this.options);
+    }
+}
+
+class Statusbar extends UIComponent {
+    constructor() {
+        super(`<span class="current-time">{{currentDateTime}}</span>`, {
+            currentDateTime: new Date().toLocaleString()
+        });
+
+    }
+
+    apply(params = {}) {
+        super.apply(params);
+        this.options['currentDateTime'] = new Date().toLocaleString();
+        document.querySelector('#statusbar').innerHTML
+            = Mustache.render(this.template, this.options);
+    }
+}
+
+module.exports = {
+    Toolbar, Statusbar
+};
--- a/getting-started-electron/src/index.css
+++ b/getting-started-electron/src/index.css
@@ -0,0 +1,68 @@
+* {
+    box-sizing: content-box;
+}
+html,
+body {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+html *,
+body * {
+    font-size: 16px;
+}
+body > .container {
+    width: 100%;
+    height: 100%;
+    background-color: #f4f4f4;
+}
+.grid-container {
+    display: grid;
+    grid-template-rows: 64px 1fr 24px;
+    grid-template-columns: 180px 1fr;
+}
+#toolbar {
+    grid-row-start: 1;
+    grid-row-end: 2;
+    grid-column-start: 1;
+    grid-column-end: 3;
+    background-color: yellow;
+}
+#toolbar * {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+#side-pane {
+    grid-row-start: 2;
+    grid-row-end: 3;
+    grid-column-start: 1;
+    grid-column-end: 2;
+    background-color: lightsteelblue;
+}
+#content-pane {
+    grid-row-start: 2;
+    grid-row-end: 3;
+    grid-column-start: 2;
+    grid-column-end: 3;
+}
+#statusbar {
+    grid-row-start: 3;
+    grid-row-end: 4;
+    grid-column-start: 1;
+    grid-column-end: 3;
+    background-color: lightgray;
+}
+#statusbar * {
+    font-size: 0.85rem;
+    color: grey;
+}
+#statusbar > .current-time {
+    float: right;
+}
+p {
+    color: red;
+}
--- a/getting-started-electron/src/index.html
+++ b/getting-started-electron/src/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test</title>
+    <link rel="stylesheet" href="index.css" />
+
+    <script>
+        const { Toolbar, Statusbar } = require('./components');
+
+        let uiToolbar = new Toolbar();
+        let uiStatusbar = new Statusbar();
+
+        window.addEventListener('DOMContentLoaded', () => {
+            //alert('Hello');
+            uiToolbar.apply({ title: "Hahaha" });
+            setInterval(() => {
+                uiStatusbar.apply();
+            }, 1000);
+        });
+    </script>
+</head>
+
+<body class="grid-container">
+    <div id="toolbar"></div>
+    <div id="side-pane">sidebar</div>
+    <div id="contene-pane">
+        <p>Hello~</p>
+        <button onclick="uiToolbar.apply({title: 'kiki'})">Click</button>
+    </div>
+    <div id="statusbar"></div>
+</body>
+
+</html>