feat: 500xp 모드에서 오른쪽 고속 이동 툴바

hwe/ts/main.ts

@@ -18,12 +18,12 @@ $(function ($) {
         return false;
     });
 
-    $('.open-window').on('click', function(e){
+    $('.open-window').on('click', function (e) {
         e.preventDefault();
         let target = $(e.target as HTMLAnchorElement);
-        while(target.attr('href') === undefined){
+        while (target.attr('href') === undefined) {
             target = target.parent('a');
-            if(target.length == 0){
+            if (target.length == 0) {
                 return;
             }
         }
@@ -34,3 +34,77 @@ $(function ($) {
     activateFlip();
     initTooltip();
 });
+
+
+(() => {
+
+    let finInit = false;
+    const objects: {
+        target: HTMLElement,
+        button: HTMLAnchorElement,
+    }[] = [];
+
+    function init() {
+        const buttons = document.querySelectorAll<HTMLAnchorElement>('#float-tabs a.btn');
+        if (!buttons) {
+            return false;
+        }
+        finInit = true;
+
+        for (const button of buttons) {
+            const targetQuery = button.href.split('#');
+            if (!targetQuery || targetQuery.length < 2) {
+                continue;
+            }
+            const target = document.getElementById(targetQuery[1]);
+            if (!target) {
+                continue;
+            }
+            objects.push({ target, button });
+        }
+    }
+    function onScroll() {
+        if (!finInit && !init()) return;
+
+        for (const { button } of objects) {
+            button.classList.remove('active');
+        }
+
+        const screenHeight = window.innerHeight
+        for (const { target, button } of objects) {
+            const { top, bottom, height } = target.getBoundingClientRect();
+
+            if (top >= 0 && bottom <= screenHeight) {
+                //valid
+            }
+            else if (top <= 0 && bottom >= screenHeight) {
+                //valid
+            }
+            else if (top < 0) {
+                if (bottom / height < 0.8) {
+                    continue;
+                }
+            }
+            else if (bottom > screenHeight) {
+                if ((screenHeight - top) / height < 0.8) {
+                    continue;
+                }
+            }
+
+            button.classList.add('active');
+        }
+    }
+    function ready(fn: () => unknown) {
+        if (document.readyState != 'loading') {
+            fn();
+        } else {
+            document.addEventListener('DOMContentLoaded', fn);
+        }
+    }
+
+    ready(() => {
+        init();
+        onScroll();
+        window.addEventListener('scroll', onScroll, true);
+    });
+})();