feat: 新增隐藏按钮

ocsjs · Apr 8, 2022 · dce116e · dce116e
1 parent b6b8e8e
commit dce116e
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 4 deletions.
diff --git a/packages/core/src/assets/css/common.css b/packages/core/src/assets/css/common.css
@@ -33,6 +33,9 @@ ocs-panel .ocs-panel-header .title {
 ocs-panel .ocs-panel-header .title.active {
   font-weight: bold;
 }
+ocs-panel .ocs-panel-header.hide {
+  display: none;
+}
 ocs-panel .ocs-panel-container {
   font-size: 12px;
   padding: 4px;
@@ -42,9 +45,20 @@ ocs-panel .ocs-panel-container {
 ocs-panel .ocs-panel-container ul li {
   list-style: inside;
 }
+ocs-panel .ocs-panel-container.hide {
+  display: none;
+}
 ocs-panel .draggable {
   cursor: move;
 }
+ocs-panel.hide {
+  width: 48px;
+  height: 48px;
+  background-color: rgba(0, 0, 0, 0);
+  box-shadow: 0px 0px 16px grey;
+  border-radius: 10px;
+  min-width: unset;
+}
 .ocs-panel-footer {
   font-size: 1px;
   color: #c5c5c5;
@@ -53,6 +67,19 @@ ocs-panel .draggable {
   text-align: right;
   padding-right: 4px;
 }
+.ocs-panel-footer.hide {
+  border-top: none;
+}
+.ocs-panel-footer.hide > .hide-btn {
+  display: none;
+}
+.ocs-panel-footer.hide > .ocs-tip {
+  text-align: center;
+  white-space: nowrap;
+  position: absolute;
+  top: 64px;
+  left: -32px;
+}
 .ocs-setting-items {
   display: grid;
   grid-template-columns: min-content auto;
@@ -142,3 +169,11 @@ ocs-panel .draggable {
 #search-results .search-results-item {
   margin-bottom: 8px;
 }
+.ocs-icon {
+  width: 64px;
+  height: 64px;
+  position: relative;
+  top: -16px;
+  left: -8px;
+  display: none;
+}
diff --git a/packages/core/src/assets/less/common.less b/packages/core/src/assets/less/common.less
@@ -15,9 +15,10 @@ ocs-panel {
     border-radius: 4px;
     text-align: left;
     box-shadow: 0px 2px 6px #848484;
-
     max-width: 800px;
 
+    // transition: all 0.5s;
+
     .ocs-panel-header {
         gap: 12px;
         display: flex;
@@ -34,6 +35,10 @@ ocs-panel {
                 font-weight: bold;
             }
         }
+
+        &.hide {
+            display: none;
+        }
     }
 
     .ocs-panel-container {
@@ -45,11 +50,24 @@ ocs-panel {
         ul li {
             list-style: inside;
         }
+
+        &.hide {
+            display: none;
+        }
     }
 
     .draggable {
         cursor: move;
     }
+
+    &.hide {
+        width: 48px;
+        height: 48px;
+        background-color: rgba(0, 0, 0, 0);
+        box-shadow: 0px 0px 16px grey;
+        border-radius: 10px;
+        min-width: unset;
+    }
 }
 
 .ocs-panel-footer {
@@ -59,6 +77,20 @@ ocs-panel {
     margin-top: 8px;
     text-align: right;
     padding-right: 4px;
+
+    &.hide {
+        border-top: none;
+        & > .hide-btn {
+            display: none;
+        }
+        & > .ocs-tip {
+            text-align: center;
+            white-space: nowrap;
+            position: absolute;
+            top: 64px;
+            left: -32px;
+        }
+    }
 }
 
 .ocs-setting-items {
@@ -171,3 +203,12 @@ ocs-panel {
         margin-bottom: 8px;
     }
 }
+
+.ocs-icon {
+    width: 64px;
+    height: 64px;
+    position: relative;
+    top: -16px;
+    left: -8px;
+    display: none;
+}
diff --git a/packages/core/src/bootstrap.ts b/packages/core/src/bootstrap.ts
@@ -62,6 +62,7 @@ export function showPanels(options?: StartOptions) {
 
     if (draggable) {
         dragElement("ocs-panel .draggable", panel);
+        dragElement(".ocs-icon", panel);
     }
 
     function createPanel() {
@@ -129,7 +130,7 @@ export function showPanels(options?: StartOptions) {
                 const footer = createFooter();
                 const styleElement =
                     /** 添加样式 */
-                    /[a-zA-z]+:\/\/[^\s]*/.test(style)
+                    style.startsWith("http")
                         ? h("link", {
                               href: style,
                               type: "text/css",

diff --git a/packages/core/src/core/create.element.ts b/packages/core/src/core/create.element.ts
@@ -1,6 +1,7 @@
 import { defaults } from "lodash";
 import { DefineComponent, defineComponent, defineCustomElement, h, VNode, VNodeArrayChildren, VNodeProps } from "vue";
 import { setItem } from "./store";
+import { domSearch, togglePanel } from "./utils";
 /**
  * 创建自定义元素
  */
@@ -49,7 +50,38 @@ export function createContainers(children: string | number | boolean | VNode | V
 }
 
 export function createFooter() {
-    return h("div", { class: "ocs-panel-footer" }, `—— OCS网课助手 v${OCS.VERSION}`);
+    return h(
+        "div",
+        {
+            class: "ocs-panel-footer",
+        },
+        [
+            h(
+                "span",
+                {
+                    class: "hide-btn",
+                    style: { float: "left", cursor: "pointer" },
+                    onClick() {
+                        togglePanel();
+                    },
+                },
+                "点击隐藏"
+            ),
+            h("span", { class: "ocs-tip" }, `OCS网课助手 ${OCS.VERSION}`),
+            h("img", {
+                class: "ocs-icon",
+                src: "https://cdn.ocs.enncy.cn/logo.png",
+                title: "双击展开",
+                onclick(e: any) {
+                    e.stopPropagation();
+                },
+                ondblclick(e: any) {
+                    e.stopPropagation();
+                    togglePanel();
+                },
+            }),
+        ]
+    );
 }
 
 /**

diff --git a/packages/core/src/core/utils.ts b/packages/core/src/core/utils.ts
@@ -212,6 +212,7 @@ export function dragElement(
     function dragMouseDown(e: any) {
         e = e || window.event;
         e.preventDefault();
+
         // get the mouse cursor position at startup:
         pos3 = e.clientX;
         pos4 = e.clientY;
@@ -233,7 +234,7 @@ export function dragElement(
         containerEl.style.left = containerEl.offsetLeft - pos1 + "px";
     }
 
-    function closeDragElement() {
+    function closeDragElement(e: any) {
         // stop moving when mouse button is released:
         document.onmouseup = null;
         document.onmousemove = null;
@@ -256,6 +257,42 @@ export function clearSearchResult(el: HTMLElement | null) {
     if (el) el.innerHTML = "开始搜索，点击题目可以展开查看搜题结果。";
 }
 
+/** 显示与隐藏面板 */
+export function togglePanel() {
+    const panel = OCS.panel;
+
+    if (panel) {
+        const { icon, header, container, footer, tip } = domSearch(
+            {
+                icon: ".ocs-icon",
+                tip: ".ocs-tip",
+                header: ".ocs-panel-header",
+                container: ".ocs-panel-container",
+                footer: ".ocs-panel-footer",
+            },
+            panel
+        );
+
+        if (icon && header && container && footer && tip) {
+            if (panel.classList.contains("hide")) {
+                panel.classList.remove("hide");
+                header.classList.remove("hide");
+                container.classList.remove("hide");
+                footer.classList.remove("hide");
+                icon.style.display = "none";
+                tip.innerHTML = tip.innerHTML.replace("<br>双击展开<br>按下ocs重新居中", "");
+            } else {
+                panel.classList.add("hide");
+                header.classList.add("hide");
+                container.classList.add("hide");
+                footer.classList.add("hide");
+                icon.style.display = "block";
+                tip.innerHTML = tip.innerHTML + "<br>双击展开<br>按下ocs重新居中";
+            }
+        }
+    }
+}
+
 export class StringUtils {
     constructor(private _text: string) {}