From fa6ecea0f09baf3113e64aad54f3712bfab75b4e Mon Sep 17 00:00:00 2001
From: cyber-dream <gregory_brzezinski@protonmail.com>
Date: Tue, 21 Mar 2023 15:38:51 +0300
Subject: [PATCH] add scroll calculations

---
 resources/sys/wde/wde-scrollbar.js | 80 +++++++++---------------------
 1 file changed, 23 insertions(+), 57 deletions(-)

diff --git a/resources/sys/wde/wde-scrollbar.js b/resources/sys/wde/wde-scrollbar.js
index cd9988e..dec643c 100644
--- a/resources/sys/wde/wde-scrollbar.js
+++ b/resources/sys/wde/wde-scrollbar.js
@@ -1,83 +1,49 @@
 class WdeScrollBar{
-    // max = 0
-    // isDragged = false
     /**
     * @param {HTMLElement} handler
+    * @param {HTMLElement} content
     */
-    constructor(handler){
-        console.log( handler.clientHeight)
+    constructor(handler, content){
+        let nonNativeScroll = false
+    
+        handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px'
+    
         let max = handler.parentElement.clientHeight - handler.clientHeight
-        let yOffset = null
         let yPosInit = 0
+    
         handler.addEventListener('mousedown', (event) => {
-            // yOffset = event.offsetY
+            nonNativeScroll = true
             yPosInit = event.clientY - Number(handler.style.top.replace('px','' ))
 
-            
-
-            // console.log()
             document.addEventListener('mousemove', drag);
             document.addEventListener('mouseup', stop)
-            //TODO Document dissallow select
+        })
+
+        content.addEventListener('scroll', (event) =>{
+            if (!this.nonNativeScroll){
+                let handlerPathLength = handler.parentElement.clientHeight - handler.clientHeight //TODO recalculate only on resize event
+                let coefficient = (content.scrollHeight - content.clientHeight) /handlerPathLength
+                handler.style.top = content.scrollTop/coefficient + 'px'
+            }
         })
 
         function drag() {
-
-            console.log(event.clientY - yPosInit,  Number(handler.style.top.replace('px','' )))
-
+            // console.log(event.clientY - yPosInit,  Number(handler.style.top.replace('px','' )))
             let pos = event.clientY - yPosInit
             let clampPos = Math.min(Math.max(pos, 0), max)
             handler.style.top = clampPos + "px";
 
+            let handlerPathLength = handler.parentElement.clientHeight - handler.clientHeight //TODO recalculate only on resize event
+            let coefficient = (content.scrollHeight - content.clientHeight) /handlerPathLength
+            // console.log(clampPos, coefficient, content.clientHeight, clampPos* coefficient)
 
-            // let yPos = Number(handler.style.top.replace('px', 0))
-            // console.log(event)
-            // console.log(yOffset)
-            // console.log(event.movementY)
-
-            // let pos = event.clientY - handler.clientHeight
-            
-            
-            // console.log(pos)
-            // let pos2 = yPos + event.movementY
-            // console.log(event.clientY - yPosInit)
-            // console.log(event.offsetY)
-            // yPos += event.yOffset
-            // handler.style.top = event.clientY - yPosInit + 'px'
-            // console.log(handler.Y)
-            // let pos =  yPosInit - event.clientY
-            // let newPos = Math.min(Math.max(pos, 0), max)
-            // console.log(handler.style.top , event.offsetY)
-            // handler.style.top = event.clientY+ "px";
+            content.scrollTop = clampPos* coefficient
         }
-
         function stop() {
-            console.log("stop")
+            // console.log("stop")
             document.removeEventListener('mousemove', drag);
             document.removeEventListener('mouseup', stop)
+            nonNativeScroll = false
         }
     }
-    // /**
-    // * @param {HTMLElement} element
-    // */
-    // BindHandler(element) {
-    //     element.addEventListener('mousedown', (event) => {
-    //         this.isDragged = 
-    //         element.addEventListener('mouseup', this.stop);
-    //     });
-    //     element.removeEventListener
-    // }
-
-    // drag(){
-
-    // }
-    // stop(doc){
-    //     console.log("stop")
-    //     doc.removeEventListener('mouseup', (event) => {
-    //             this.stop(document)
-    //         });
-    // }
-    // MoveHandler(param) {
-    //     console.log("Move")
-    // }
 }
\ No newline at end of file