From 9d140627f3a59c90686fdde5dc0383cfcb4fe434 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= <huangyunfeihufe@hotmail.com>
Date: Thu, 18 Aug 2022 18:51:33 +0800
Subject: [PATCH] feat:add date menu

---
 index.html                                |  9 +++++
 src/assets/images/date.svg                |  1 +
 src/editor/assets/css/date/datePicker.css |  1 +
 src/main.ts                               | 44 ++++++++++++++++++++++-
 src/style.css                             | 16 +++++++--
 5 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/images/date.svg

diff --git a/index.html b/index.html
index 9a8fc0c..3e5d89c 100644
--- a/index.html
+++ b/index.html
@@ -176,6 +176,15 @@
         <div class="menu-item__latex">
           <i></i>
         </div>
+        <div class="menu-item__date">
+          <i></i>
+          <div class="options">
+            <ul>
+              <li data-format="yyyy-MM-dd"></li>
+              <li data-format="yyyy-MM-dd hh:mm:ss"></li>
+            </ul>
+          </div>
+        </div>
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">
diff --git a/src/assets/images/date.svg b/src/assets/images/date.svg
new file mode 100644
index 0000000..065db22
--- /dev/null
+++ b/src/assets/images/date.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M7.5 14.154a5.654 5.654 0 100-11.308 5.654 5.654 0 000 11.308zm0 .846a6.5 6.5 0 110-13 6.5 6.5 0 010 13z" fill-rule="nonzero"/><path d="M8 8h4v1H7V4h1v4z"/></g></svg>
\ No newline at end of file
diff --git a/src/editor/assets/css/date/datePicker.css b/src/editor/assets/css/date/datePicker.css
index 9ec3583..6cd740d 100644
--- a/src/editor/assets/css/date/datePicker.css
+++ b/src/editor/assets/css/date/datePicker.css
@@ -156,6 +156,7 @@
   height: calc(100% - 20px);
   overflow-y: auto;
   border: 1px solid #e2e2e2;
+  position: relative;
 }
 
 .time-wrap>li:first-child>ol {
diff --git a/src/main.ts b/src/main.ts
index dcd906e..f556d43 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -156,7 +156,7 @@ window.onload = function () {
     instance.command.executeRowMargin(Number(li.dataset.rowmargin!))
   }
 
-  // 4. | 表格 | 图片 | 超链接 | 分割线 | 水印 | 代码块 | 分隔符 | 控件 | 复选框 | LaTeX
+  // 4. | 表格 | 图片 | 超链接 | 分割线 | 水印 | 代码块 | 分隔符 | 控件 | 复选框 | LaTeX | 日期选择器
   const tableDom = document.querySelector<HTMLDivElement>('.menu-item__table')!
   const tablePanelContainer = document.querySelector<HTMLDivElement>('.menu-item__table__collapse')!
   const tableClose = document.querySelector<HTMLDivElement>('.table-close')!
@@ -563,6 +563,48 @@ window.onload = function () {
     })
   }
 
+  const dateDom = document.querySelector<HTMLDivElement>('.menu-item__date')!
+  const dateDomOptionDom = dateDom.querySelector<HTMLDivElement>('.options')!
+  dateDom.onclick = function () {
+    console.log('date')
+    dateDomOptionDom.classList.toggle('visible')
+    // 定位调整
+    const bodyRect = document.body.getBoundingClientRect()
+    const dateDomOptionRect = dateDomOptionDom.getBoundingClientRect()
+    if (dateDomOptionRect.left + dateDomOptionRect.width > bodyRect.width) {
+      dateDomOptionDom.style.right = '0px'
+      dateDomOptionDom.style.left = 'unset'
+    } else {
+      dateDomOptionDom.style.right = 'unset'
+      dateDomOptionDom.style.left = '0px'
+    }
+    // 当前日期
+    const date = new Date()
+    const year = date.getFullYear().toString()
+    const month = (date.getMonth() + 1).toString().padStart(2, '0')
+    const day = date.getDate().toString().padStart(2, '0')
+    const hour = date.getHours().toString().padStart(2, '0')
+    const minute = date.getMinutes().toString().padStart(2, '0')
+    const second = date.getSeconds().toString().padStart(2, '0')
+    const dateString = `${year}-${month}-${day}`
+    const dateTimeString = `${dateString} ${hour}:${minute}:${second}`
+    dateDomOptionDom.querySelector<HTMLLIElement>('li:first-child')!.innerText = dateString
+    dateDomOptionDom.querySelector<HTMLLIElement>('li:last-child')!.innerText = dateTimeString
+  }
+  dateDomOptionDom.onmousedown = function (evt) {
+    const li = evt.target as HTMLLIElement
+    const dateFormat = li.dataset.format!
+    dateDomOptionDom.classList.toggle('visible')
+    instance.command.executeInsertElementList([{
+      type: ElementType.DATE,
+      value: '',
+      dateFormat,
+      valueList: [{
+        value: li.innerText.trim(),
+      }]
+    }])
+  }
+
   // 5. | 搜索&替换 | 打印 |
   const searchCollapseDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')!
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')!
diff --git a/src/style.css b/src/style.css
index 115d386..cab690b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -59,7 +59,7 @@ ul {
 .menu-divider {
   width: 1px;
   height: 16px;
-  margin: 0 6px;
+  margin: 0 8px;
   display: inline-block;
   background-color: #cfd2d8;
 }
@@ -78,7 +78,7 @@ ul {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 5px;
+  margin: 0 4px;
 }
 
 .menu-item>div:hover {
@@ -447,6 +447,18 @@ ul {
   background-image: url('./assets/images/latex.svg');
 }
 
+.menu-item__date {
+  position: relative;
+}
+
+.menu-item__date i {
+  background-image: url('./assets/images/date.svg');
+}
+
+.menu-item__date .options {
+  width: 150px;
+}
+
 .menu-item .menu-item__control .options {
   width: 55px;
 }