updatge

2024-11-01 15:42:09 +01:00
parent f60e975765
commit 7539e6ed48
50 changed files with 2004 additions and 750 deletions
--- a/app/DJTooltip.tsx
+++ b/app/DJTooltip.tsx
@@ -0,0 +1,80 @@
+import { watchEffect, watch, onMounted, type CSSProperties, defineComponent, ref } from "vue";
+
+const carrierStyle = {
+    opacity: "0",
+    display: "block",
+    pointerEvents: "none",
+    backgroundColor: "black",
+    border: "white solid 1px",
+    color: "white",
+    padding: "10px",
+    position: "absolute",
+    zIndex: "1",
+    overflow: "hidden",
+    height: "0",
+    width: "0",
+    transition: "opacity 200ms, height 200ms, width 200ms",
+} satisfies CSSProperties;
+
+const textCarrierStyle = {
+    fontSize: '16px',
+    fontFamily: "Roboto, serif",
+    display: "block",
+    overflow: "hidden",
+} satisfies CSSProperties;
+
+const defaultWidth = 350;
+
+export default defineComponent({
+    name: "dj-sexy-tooltip",
+    props: {
+        tooltip: {
+            type: String,
+            required: true,
+        },
+    },
+    setup(props, { slots, attrs }) {
+        const active = ref(false);
+
+        const carrier = ref<HTMLElement | null>(null);
+        const textCarrier = ref<HTMLElement | null>(null);
+
+        onMounted(() => {
+            document.addEventListener("mousemove", (event) => {
+                const pos = { x: event.pageX, y: event.pageY };
+                if (carrier.value && getComputedStyle(carrier.value).opacity !== "0") {
+                    if (pos.x + 15 + carrier.value.clientWidth <= document.body.scrollWidth) {
+                        carrier.value.style.left = (pos.x + 15) + "px";
+                    } else {
+                        carrier.value.style.left = (document.body.scrollWidth - carrier.value.clientWidth - 5) + "px";
+                    }
+                    if (pos.y + carrier.value.clientHeight <= document.body.scrollHeight) {
+                        carrier.value.style.top = pos.y + "px";
+                    } else {
+                        carrier.value.style.top = (document.body.scrollHeight - carrier.value.clientHeight - 5) + "px";
+                    }
+                }
+            }); 
+        });
+
+        watchEffect(() => {
+            if (carrier.value) {
+                carrier.value.style.height = active.value ? '16px' : '0';
+                carrier.value.style.opacity = active.value ? '1' : '0';
+                carrier.value.style.width = active.value ? '350px' : '0';
+            }
+        });
+
+        return () => <>
+            <div class="tooltip-container" {...attrs} 
+                onMouseenter={() => { active.value = true; }}
+                onMouseleave={() => { active.value = false; }}
+            >
+                {slots.default && <slots.default />}
+            </div>
+            <div style={carrierStyle} ref={carrier}>
+                <span style={textCarrierStyle}>{props.tooltip}</span>
+            </div>
+        </>;
+    },
+});