From c5b2c3b73e5bd280bfcb5852c1ce69143a554c67 Mon Sep 17 00:00:00 2001
From: wangchangqi <wangchangqi@kylinos.cn>
Date: Tue, 18 Oct 2022 20:20:47 +0800
Subject: [PATCH] =?UTF-8?q?(feature)(improve)=E6=B7=BB=E5=8A=A0hover?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=B1=BB=E5=85=A8=E5=B1=80=E4=BB=A3=E7=90=86?=
 =?UTF-8?q?;=E7=A7=BB=E5=8A=A8=E5=9F=BA=E7=A1=80=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=88=B0head=E6=A0=87=E7=AD=BE=E4=B8=AD,=E4=B8=94=E5=8F=AA?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E4=B8=80=E6=AC=A1.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/base-style.ts        |  7 ++-
 src/components/base/star-base-element.ts | 77 ++++++++++++++++++++++--
 src/components/li/li.ts                  |  2 +-
 src/components/ul/ul.ts                  |  2 +-
 4 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/src/components/base/base-style.ts b/src/components/base/base-style.ts
index a96cde2..f958026 100644
--- a/src/components/base/base-style.ts
+++ b/src/components/base/base-style.ts
@@ -1,7 +1,7 @@
 import {css, CSSResult} from 'lit'
 
 export const baseStyles: CSSResult = css`
-  :host {
+  :root {
     /* 文字/正文黑 */
     --font-main-black: #292929;
     /* 文字/辅助字-黑 */
@@ -62,13 +62,14 @@ export const baseStyles: CSSResult = css`
     /* 全/ hover_lm */
     --bg-hover: rgba(0, 0, 0, 0.06);
     --bg-gray-button: rgba(51, 51, 51, 0.06);
+    --bg-gray-button-hover: rgba(51, 51, 51, 0.15);
     --bg-icon-button: rgba(255, 255, 255, 0.68);
 
     --bg-button: rgba(247, 247, 247, 0.75);
   }
 
   @media (prefers-color-scheme: light) {
-    :host {
+    :root {
       /* 底色/弹窗浅 */
       --bg-dialog: linear-gradient(
         134.78deg,
@@ -93,7 +94,7 @@ export const baseStyles: CSSResult = css`
   }
 
   @media (prefers-color-scheme: dark) {
-    :host {
+    :root {
       /* 底色/弹窗深 */
       --bg-dialog: linear-gradient(101.98deg, #4e5161 1.12%, #363a47 96.75%);
 
diff --git a/src/components/base/star-base-element.ts b/src/components/base/star-base-element.ts
index 8a326fc..50282d3 100644
--- a/src/components/base/star-base-element.ts
+++ b/src/components/base/star-base-element.ts
@@ -5,8 +5,17 @@ import GestureDetector, {
 } from '../../lib/gesture/gesture-detector'
 import {baseStyles} from './base-style'
 
+declare global {
+  var loadStarMixin: boolean
+  interface Event {
+    path: EventTarget[]
+  }
+}
+
 export interface StarInterface {
   hello(): void
+  onhover(): void
+  onhoverend(): void
 }
 
 type Constructor<T = Record<string, unknown>> = {
@@ -15,11 +24,74 @@ type Constructor<T = Record<string, unknown>> = {
   prototype: T
 }
 
+let currentHoverTarger!: StarBaseElement
+
+function handleHover(e: Event) {
+  // Firefox 仅支持 e.composedPath()
+  const path = (e.path || e.composedPath()) as EventTarget[]
+  if (!path) return
+
+  let i = 0
+  while (path[i++] !== undefined) {
+    const target = path[i]
+    switch (target?.constructor.name) {
+      case 'StarButton':
+        currentHoverTarger = target as StarBaseElement
+        currentHoverTarger?.onhover()
+        break
+    }
+  }
+}
+
+function handleHoverEnd() {
+  currentHoverTarger?.onhoverend()
+}
+
+function handleContextMenu(e: Event) {
+  const path = (e.path || e.composedPath()) as EventTarget[]
+  if (!path) return
+
+  let i = 0
+  while (path[i++] !== undefined) {
+    if (path[i] instanceof StarBaseElement) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+    }
+  }
+}
+
 export function StarMixin<T extends Constructor<ReactiveElement>>(
   constructor: T
 ): T & Constructor<StarInterface> {
+  // 在本文件被重复加载时, 确保不会重复添加以下内容(监听和样式)
+  const loadStarMixin = (window.loadStarMixin = window.loadStarMixin || false)
+
+  if (loadStarMixin === false) {
+    // 添加按压事件监听
+    document.addEventListener('touchstart', handleHover)
+    document.addEventListener('touchend', handleHoverEnd)
+    // 禁用右键
+    document.addEventListener('contextmenu', handleContextMenu)
+
+    // 填充全局所需基础样式变量, 只添加一次
+    const style = document.createElement('style')
+    style.innerHTML = baseStyles.toString()
+    document.head.appendChild(style)
+
+    window.loadStarMixin = true
+  }
+
+  /**
+   * 以下方法均可被子类重写
+   */
   return class SlotTextObservingElement extends constructor {
     hello() {}
+    onhover() {
+      this.classList.add('pressed')
+    }
+    onhoverend() {
+      this.classList.remove('pressed')
+    }
   }
 }
 
@@ -41,10 +113,7 @@ export class StarBaseElement extends StarMixin(LitElement) {
     GestureDetector.disembedded(this)
   }
 
-  /**
-   * 填充全局所需基础样式变量
-   */
   public static get styles(): CSSResultArray {
-    return [baseStyles]
+    return []
   }
 }
diff --git a/src/components/li/li.ts b/src/components/li/li.ts
index a8511e1..ae5500d 100644
--- a/src/components/li/li.ts
+++ b/src/components/li/li.ts
@@ -19,7 +19,7 @@ export enum LiType {
 @customElement('star-li')
 export class StarLi extends StarBaseElement {
   public static override get styles(): CSSResultArray {
-    return [...super.styles, liStyles]
+    return [liStyles]
   }
 
   @property({type: String}) type = ''
diff --git a/src/components/ul/ul.ts b/src/components/ul/ul.ts
index eeb004c..06ac4bb 100644
--- a/src/components/ul/ul.ts
+++ b/src/components/ul/ul.ts
@@ -14,7 +14,7 @@ export enum UlType {
 @customElement('star-ul')
 export class StarUl extends StarBaseElement {
   public static override get styles(): CSSResultArray {
-    return [...super.styles, ulStyles]
+    return [ulStyles]
   }
 
   @property({type: String}) type = ''