202405312007

pardnchiu · May 31, 2024 · 0fde28e · 0fde28e
1 parent 5d59984
commit 0fde28e
Show file tree

Hide file tree

Showing 28 changed files with 272 additions and 2,367 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 **/.DS_Store
 **/workspace.code-workspace
 **/sass
-# **/index.js
+**/index.js
 **/Icon?
diff --git a/code-edit.html b/code-edit.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="zh-hant">
+
+    <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">
+        <title>文章撰寫範例</title>
+        <!-- link -->
+        <link rel="stylesheet" href="./css/index.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css">
+        <link rel="stylesheet" href="https://pardnchiu.github.io/markdown-editor/css/md-viewer.css">
+        <!-- script -->
+        <script src="https://pardnchiu.github.io/PDExtension-js/v3/PDExtension.min.js" copyright="Pardn Ltd" defer></script>
+        <script src="./js/index.js"></script>
+        <script type="module" src="./js/code-edit.js"></script>
+        <!-- inline-style -->
+        <style>
+            .dom-temp {
+                display: none !important;
+            }
+        </style>
+    </head>
+
+    <body id="body">
+        <!-- 登入 -->
+        <section class="login dom-temp" :if="is_guest">
+            <h1>{{ login.title }}</h1>
+            <section>
+                <label>
+                    <input type="password" placeholder="密碼" :model="login.password">
+                </label>
+                <i class="fa-solid fa-eye-slash" @click="show"></i>
+            </section>
+            <button @click="login">
+                前往
+                <i class="fa-solid fa-arrow-right"></i>
+            </button>
+        </section>
+        <!-- 主要 -->
+        <section class="dom-temp" :else>
+            <!-- 頂部導覽列 -->
+            <section :path="./view/body-top.html"></section>
+            <!-- 左側導覽列 -->
+            <section :path="./view/body-left.html"></section>
+            <!-- 內容 -->
+            <section class="body-right">
+                <!-- 頂部導覽列 -->
+                <nav>
+                    <button @click="body_left_show">
+                        <i class="fa-solid fa-bars"></i>
+                    </button>
+                    <a :href="e.href" :for="e in top_tab">{{ e.title }}</a>
+                </nav>
+                <!-- 頂部按鈕 -->
+                <section class="top-button">
+                    <section>
+                        <button class="hint" title="儲存" @click="save">
+                            <i class="fa-solid fa-floppy-disk"></i>
+                        </button>
+                        <span></span>
+                        <button class="hint" title="返回" @click="go_back">
+                            <i class="fa-solid fa-reply"></i>
+                        </button>
+                        <button class="hint" title="前進" @click="go_forward">
+                            <i class="fa-solid fa-share"></i>
+                        </button>
+                    </section>
+                </section>
+                <!--  -->
+                <section class="markdown file">
+                    <section class="editor code">
+                    </section>
+                </section>
+            </section>
+        </section>
+    </body>
+
+</html>
diff --git a/css/index.css b/css/index.css
diff --git a/css/index.css.map b/css/index.css.map
diff --git a/file-edit.html b/file-edit.html
@@ -22,7 +22,7 @@
         </style>
     </head>
 
-    <body id="body" class="no-select">
+    <body id="body">
         <!-- 登入 -->
         <section class="login dom-temp" :if="is_guest">
             <h1>{{ login.title }}</h1>

diff --git a/js/json-edit-input.js → js/code-edit.js b/js/json-edit-input.js → js/code-edit.js
@@ -1,4 +1,4 @@
-import { MDEditor, MDViewer } from "https://pardnchiu.github.io/markdown-editor/js/PDMDEditor.min.js";
+import { MDEditor } from "https://pardnchiu.github.io/markdown-editor/js/PDMDEditor.min.js";
 
 document.addEventListener("DOMContentLoaded", function () {
 
@@ -25,8 +25,7 @@ document.addEventListener("DOMContentLoaded", function () {
                 is_article_add: 0,
                 is_folder_image: 0,
                 is_file_edit: 0,
-                is_json_edit: 0,
-                is_json_edit_input: 1
+                is_json_edit: 1
             },
             // 頂部導覽列
             top_tab: [
@@ -35,7 +34,7 @@ document.addEventListener("DOMContentLoaded", function () {
                     href: "/management-1-web",
                 },
                 {
-                    title: "JSON編輯範例",
+                    title: "Code編輯範例",
                     href: "",
                 }
             ],
@@ -66,14 +65,20 @@ document.addEventListener("DOMContentLoaded", function () {
                 "section.markdown".$.$sel("section.editor")._child([
                     editor.body
                 ]);
-                
+
                 if ("section.markdown".$.$sel("section.viewer") != null) {
                     "section.markdown".$.$sel("section.viewer")._child([
                         viewer.body
                     ]);
                 };
             };
-
+
+            const dom_code = "section.code".$;
+
+            if (dom_code == null) {
+                return;
+            };
+
             editor.init(JSON.stringify({
                 meta: {
                     robots: "index follow",

diff --git a/js/json-edit.js b/js/json-edit.js
@@ -1,4 +1,4 @@
-import { MDEditor, MDViewer } from "https://pardnchiu.github.io/markdown-editor/js/PDMDEditor.min.js";
+import { MDEditor } from "https://pardnchiu.github.io/markdown-editor/js/PDMDEditor.min.js";
 
 document.addEventListener("DOMContentLoaded", function () {
 
@@ -25,7 +25,8 @@ document.addEventListener("DOMContentLoaded", function () {
                 is_article_add: 0,
                 is_folder_image: 0,
                 is_file_edit: 0,
-                is_json_edit: 1
+                is_json_edit: 0,
+                is_json_edit_input: 1
             },
             // 頂部導覽列
             top_tab: [
@@ -58,19 +59,33 @@ document.addEventListener("DOMContentLoaded", function () {
                 catch (err) {
                     alert("錯誤: JSON解析失敗, 請檢查格式.")
                 }
+            },
+            change_json_mode: function () {
+                const dom_json = "section.json".$;
+                const dom_markdown = "section.markdown".$;
+
+                if ([dom_json, dom_markdown].filter(e => e == null).length) {
+                    return;
+                };
+
+                const is_dom_json_hide = dom_json.$style("display") == "none";
+                const is_dom_markdown_hide = dom_markdown.$style("display") == "none";
+
+                if (!is_dom_json_hide && is_dom_markdown_hide) {
+                    dom_json._style({ display: "none" });
+                    dom_markdown._style({ display: "flex" });
+                }
+                else {
+                    dom_json._style({ display: "flex" });
+                    dom_markdown._style({ display: "none" });
+                };
             }
         },
         next: () => {
             if ("section.markdown".$) {
                 "section.markdown".$.$sel("section.editor")._child([
                     editor.body
                 ]);
-
-                if ("section.markdown".$.$sel("section.viewer") != null) {
-                    "section.markdown".$.$sel("section.viewer")._child([
-                        viewer.body
-                    ]);
-                };
             };
 
             editor.init(JSON.stringify({

diff --git a/js/test.js b/js/test.js