feat: semi

Author: sheepzh

src/content-script/limit/countdown/component/icon.ts

@@ -59,15 +59,15 @@ const STYLE = `
     }
     .${CONTAINER_CLS}:hover .${TOOLTIP_CLS} { opacity: 1; visibility: visible; }
     .tooltip-left {
-        left: auto;
-        right: calc(100% + 8px);
+        left: calc(100% + 8px);
+        right: auto;
         top: 50%;
         bottom: auto;
         transform: translateY(-50%);
     }
     .tooltip-right {
-        left: calc(100% + 8px);
-        right: auto;
+        left: auto;
+        right: calc(100% + 8px);
         top: 50%;
         bottom: auto;
         transform: translateY(-50%);
@@ -92,13 +92,6 @@ function createSvgEl<K extends keyof SVGElementTagNameMap>(tag: K, attributes: R
     return el
 }
 
-function getStage(remaining: number, total: number): Stage {
-    const progress = remaining / total
-    if (progress < 0.2 || remaining < 30 * MILL_PER_SECOND) return 'short'
-    if (progress < 0.5 || remaining < 2 * MILL_PER_MINUTE) return 'warning'
-    return 'enough'
-}
-
 type RingState = { progress: number, stage: Stage }
 
 class ProgressRing extends StatefulNode<RingState, SVGSVGElement> {
@@ -284,16 +277,6 @@ class Tooltip extends StatefulNode<RemainingData[], HTMLDivElement> {
     }
 }
 
-function getTooltipEdge(position: Position): Edge {
-    const { w } = getViewportSize()
-    const { x } = clampPosition(position)
-    const spaceRight = w - x - HALF_SIZE
-    const spaceLeft = x - HALF_SIZE
-    if (spaceRight >= TOOLTIP_MAX_WIDTH) return 'right'
-    if (spaceLeft >= TOOLTIP_MAX_WIDTH) return 'left'
-    return spaceRight >= spaceLeft ? 'right' : 'left'
-}
-
 class Container extends StatefulNode<Edge, HTMLElement> {
     protected init(): HTMLElement {
         const el = document.createElement('div')
@@ -352,15 +335,16 @@ export class Icon {
     }
 
     set position(position: Position) {
-        this.#container.render(getEdge(position))
-        this.#tooltip.edge = getTooltipEdge(position)
+        const edge = getEdge(position)
+        this.#container.render(edge)
+        this.#tooltip.edge = edge
         this.#tooltip.y = position.y
     }
 
     render(position: Position, { target, all }: CountdownData) {
         const { remaining, total } = target
         this.#text.render(this.#formatRemaining(remaining))
-        const stage = getStage(remaining, total)
+        const stage = this.#calcStage(remaining, total)
         const lastStage = this.#ring.state?.stage
         const progress = Math.ceil(remaining / total * 100)
         this.#ring.render({ stage, progress })
@@ -381,6 +365,13 @@ export class Icon {
         return `${seconds}s`
     }
 
+    #calcStage(remaining: number, total: number): Stage {
+        const progress = remaining / total
+        if (progress < 0.2 || remaining < 30 * MILL_PER_SECOND) return 'short'
+        if (progress < 0.5 || remaining < 2 * MILL_PER_MINUTE) return 'warning'
+        return 'enough'
+    }
+
     destroy() {
         this.el.remove()
     }