From e6ebe96c902d6c59625e910ab92cc20969dbb4e4 Mon Sep 17 00:00:00 2001
From: amy <ameliasquires@disroot.org>
Date: Fri, 3 Feb 2023 14:12:32 -0600
Subject: bar, todo: fix scrolling issue

---
 display.html | 251 ++++++++++++++++++++++++++++++++++++++++++++++-------------
 readme.md    |   4 +-
 2 files changed, 200 insertions(+), 55 deletions(-)

diff --git a/display.html b/display.html
index 9f73bb8..6db8454 100644
--- a/display.html
+++ b/display.html
@@ -29,7 +29,7 @@
 
         .head-border {
             width: calc(100%);
-            background: linear-gradient(90deg, rgba(1,0,129,1) 0%, rgba(0,128,128,1) 100%);
+            background: linear-gradient(90deg, rgba(1, 0, 129, 1) 0%, rgba(0, 128, 128, 1) 100%);
             height: 25px;
             position: absolute;
             top: 0;
@@ -96,6 +96,7 @@
             cursor: ew-resize;
 
         }
+
         .resize-ne {
             position: absolute;
             right: -3px;
@@ -106,6 +107,7 @@
             cursor: ne-resize;
 
         }
+
         .resize-es {
             position: absolute;
             right: -3px;
@@ -116,6 +118,7 @@
             cursor: se-resize;
 
         }
+
         .resize-sw {
             position: absolute;
             left: -3px;
@@ -126,6 +129,7 @@
             cursor: sw-resize;
 
         }
+
         .resize-nw {
             position: absolute;
             left: -3px;
@@ -153,14 +157,125 @@
 
         .scrollbar-point {
             width: 100%;
-            background-color: #919191;
+            background-color: #999999;
+            position: absolute;
+            top: 0;
+            outline: 2px outset;
+            outline-offset: -2px;
+            cursor: grab;
+        }
+
+        #bar {
+            width: 100%;
+            height: 30px;
+            background-color: #c3c3c3;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+        }
+
+        .bar-item {
+            height: 80%;
+            background-color: #c3c3c3;
+            width: fit-content;
+            padding-left: 20px;
+            padding-right: 20px;
+            border-style: outset;
+            cursor: grab;
+            user-select: none;
+            display: block;
             position: absolute;
             top: 0;
         }
     </style>
     <script>
-        function window_create(uid, name, content, options) {
-            let fon = (options.font ? options.font:'')
+        function compare(a, b) {
+            if (a.left < b.left) {
+                return -1;
+            }
+            if (a.left > b.left) {
+                return 1;
+            }
+            return 1;
+        }
+        let bar_items_left = []
+        function load_bar() {
+            let bar = document.getElementById("bar-items")
+            let windows = document.getElementsByClassName("window")
+            let put = ""
+            let last_left = 0;
+            let temp = []
+            for (let i = 0; i != windows.length; i++) {
+                bar.innerHTML += "<div style='left:" + last_left + ";' id='" + windows.item(i).id + "' class='bar-item'>" + windows.item(i).getAttribute("window-name") + "</div>"
+                temp.push({ left: last_left, id: windows.item(i).id, width: bar.children.item(bar.children.length - 1).clientWidth + 5 })
+                last_left += bar.children.item(bar.children.length - 1).clientWidth + 5
+
+
+            }
+            bar_items_left = temp;
+            //bar.innerHTML = put;
+            for (let i = 0; i != bar.children.length; i++) {
+                let elemy = bar.children.item(i)
+                for (let ii = 0; ii != windows.length; ii++) {
+                    if (windows.item(ii).id == elemy.id) {
+                        //let px = 0, py = 0;
+                        elemy.onmousedown = ((ev) => {
+                            for (let iii = 0; iii != windows.length; iii++) {
+                                windows.item(iii).style.zIndex = 0;
+                                bar.children.item(iii).style.zIndex = 0;
+                            }
+                            document.body.style.cursor = "grabbing"
+                            windows.item(ii).style.zIndex = 1
+                            bar.children.item(ii).style.zIndex = 1;
+                            document.onmouseup = ((ev) => {
+                                document.onmousemove = null
+                                document.body.style.cursor = ''
+                                temp = [];
+                                for (let iii = 0; iii != bar.children.length; iii++) {
+                                    temp.push({ left: bar.children.item(iii).offsetLeft, id: bar.children.item(iii).id, width: bar.children.item(iii).clientWidth + 5 })
+                                }
+                                temp = temp.sort(compare)
+                                bar_items_left = []
+                                let len = 0
+                                for (let item in temp) {
+                                    for (let iii = 0; iii != bar.children.length; iii++) {
+                                        if (bar.children.item(iii).id == temp[item].id) {
+                                            bar.children.item(iii).style.left = len
+                                            bar_items_left.push({ left: len, id: bar.children.item(iii).id, width: bar.children.item(iii).clientWidth + 5 })
+                                            len += temp[item].width
+
+                                        }
+                                    }
+
+                                }
+
+                            })
+                            let px = elemy.offsetLeft;
+                            document.onmousemove = ((evm) => {
+                                let a = elemy.offsetLeft
+                                let zz = elemy.clientWidth
+                                let m = (a - (px - (evm.clientX - zz)))
+                                if (m >= 0 && m <= elemy.parentElement.parentElement.clientWidth - (elemy.clientWidth + 5)) {
+                                    elemy.style.left = m
+                                    px = evm.clientX - zz
+                                } else {
+                                    if (!(m >= 0)) {
+                                        elemy.style.left = 0;
+
+                                    } else {
+                                        elemy.style.left = elemy.parentElement.parentElement.clientWidth - (elemy.clientWidth + 5);
+                                    }
+                                }
+
+                                //console.log((px - evm.clientX), px, evm.clientX, m)
+
+                            })
+                        })
+                    }
+                }
+            }
+        }
+        function window_create(uid, name, content) {
             let lines = content.split("</br>").length
             let a = ''
             a += "<div id='" + uid + "-root' class='window' style=\"width:" + document.body.clientWidth * .56 + "px;height:" + document.body.clientHeight * .30 + "px;top:0px;left:0px;position:absolute;\" window-name='" + name + "'>"
@@ -180,7 +295,7 @@
             a += "</div><div id='" + uid + "-content-scrollbar' class='scrollbar'><div id='" + uid + "-content-scrollbar-point' class='scrollbar-point'></div>"
             a += "</div>"
             a += "</div>"
-            
+
             a += "<div id='" + uid + "-resize-ne' class='resize-ne'></div>"
             a += "<div id='" + uid + "-resize-nw' class='resize-nw'></div>"
             a += "<div id='" + uid + "-resize-sw' class='resize-sw'></div>"
@@ -200,6 +315,16 @@
                 for (let ii = 0; ii != elec.length; ii++) {
                     if (elec.item(ii).className == 'head-border') {
                         elem = elec.item(ii)
+                        for (let iii = 0; iii != elem.children.length; iii++) {
+                            if (elem.children.item(iii).className == "close-button") {
+                                //console.log(elem.children.item(iii))
+                                elem.children.item(iii).onmousedown = ((ev) => {
+                                    //console.log(elems.item(i))
+                                    elems.item(i).remove()
+                                })
+                                break
+                            }
+                        }
                         break
                     }
                 }
@@ -207,6 +332,7 @@
                 let px = 0, py = 0;
 
                 if (elem.className == 'head-border') {
+                    elemhb = elem
                     elem.onmousedown = ((ev) => {
 
                         for (let i = 0; i != elems.length; i++) {
@@ -214,7 +340,8 @@
                         }
                         elep.style.zIndex = 1
                         document.body.style.cursor = 'grabbing'
-                        elem.style.cursor = 'grabbing'
+                        elemhb.style.cursor = 'grabbing'
+                        console.log(elemhb)
                         px = ev.clientX
                         py = ev.clientY
                         document.body.style.userSelect = "none"
@@ -223,7 +350,7 @@
                             document.onmousemove = null
                             document.onmouseup = null
                             document.body.style.cursor = ''
-                            elem.style.cursor = ''
+                            elemhb.style.cursor = 'grab'
                         })
                         document.onmousemove = ((evm) => {
                             //console.log(elem.id)
@@ -237,7 +364,7 @@
                 let minx = 150;
                 let miny = 150;
 
-                ['resize-s', 'resize-n', 'resize-e', 'resize-w','resize-ne','resize-nw','resize-sw','resize-es'].forEach((sel) => {
+                ['resize-s', 'resize-n', 'resize-e', 'resize-w', 'resize-ne', 'resize-nw', 'resize-sw', 'resize-es'].forEach((sel) => {
                     for (let ii = 0; ii != elec.length; ii++) {
                         if (elec.item(ii).className == sel) {
                             elem = elec.item(ii)
@@ -249,17 +376,17 @@
                             px = ev.clientX
                             py = ev.clientY
                             if (sel == 'resize-s' || sel == 'resize-n')
-                                elem.style.cursor = 'ns-resize'
-                            else if(sel == 'resize-e' || sel == 'resize-w')
-                                elem.style.cursor = 'ew-resize'
-                            else if(sel == 'resize-ne')
-                                elem.style.cursor = 'ne-resize'
-                            else if(sel == 'resize-nw')
-                                elem.style.cursor = 'nw-resize'
-                            else if(sel == 'resize-sw')
-                                elem.style.cursor = 'sw-resize'
-                            else if(sel == 'resize-es')
-                                elem.style.cursor = 'se-resize'
+                                document.body.style.cursor = 'ns-resize'
+                            else if (sel == 'resize-e' || sel == 'resize-w')
+                                document.body.style.cursor = 'ew-resize'
+                            else if (sel == 'resize-ne')
+                                document.body.style.cursor = 'ne-resize'
+                            else if (sel == 'resize-nw')
+                                document.body.style.cursor = 'nw-resize'
+                            else if (sel == 'resize-sw')
+                                document.body.style.cursor = 'sw-resize'
+                            else if (sel == 'resize-es')
+                                document.body.style.cursor = 'se-resize'
                             document.body.style.userSelect = "none"
                             document.onmouseup = ((evu) => {
                                 document.body.style.userSelect = "unset"
@@ -293,41 +420,41 @@
                                     }
                                 //
                                 //if (sel == 'resize-s' || sel == 'resize-n' || ) {
-                                    for (let iii = 0; iii != elem.parentElement.parentElement.parentElement.children.length; iii++) {
-                                        //console.log(elem.parentElement.parentElement.parentElement.children.item(iii).className)
-                                        if (elem.parentElement.parentElement.parentElement.children.item(iii).className == "content-root") {
-
-                                            for (let iiii = 0; iiii != elem.parentElement.parentElement.parentElement.children.item(iii).children.length; iiii++) {
-                                                if (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).className == "scrollbar") {
-                                                    for (let iiiii = 0; iiiii != elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.length; iii++) {
-                                                        if (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).className == "scrollbar-point") {
-                                                            for (let iiiiii = 0; iiiiii != elem.parentElement.parentElement.parentElement.children.item(iii).children.length; iiiiii++) {
-
-                                                                if (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiiiii).className == "content-content") {
-
-                                                                    if (elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight / (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiiiii).clientHeight / elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight) < elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight) {
-                                                                        elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).style.display = "block"
-                                                                        elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).style.height = (elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight / (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiiiii).clientHeight / elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight))
-                                                                        if (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).offsetTop > elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).clientHeight - elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).clientHeight) {
-                                                                            elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).style.top = elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).clientHeight - elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).clientHeight
-                                                                        }
-                                                                        //elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).style.top = Math.min(elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).style.top, elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight)
-                                                                    } else {
-                                                                        elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).style.display = "none"
+                                for (let iii = 0; iii != elem.parentElement.parentElement.parentElement.children.length; iii++) {
+                                    //console.log(elem.parentElement.parentElement.parentElement.children.item(iii).className)
+                                    if (elem.parentElement.parentElement.parentElement.children.item(iii).className == "content-root") {
+
+                                        for (let iiii = 0; iiii != elem.parentElement.parentElement.parentElement.children.item(iii).children.length; iiii++) {
+                                            if (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).className == "scrollbar") {
+                                                for (let iiiii = 0; iiiii != elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.length; iii++) {
+                                                    if (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).className == "scrollbar-point") {
+                                                        for (let iiiiii = 0; iiiiii != elem.parentElement.parentElement.parentElement.children.item(iii).children.length; iiiiii++) {
+
+                                                            if (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiiiii).className == "content-content") {
+
+                                                                if (elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight / (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiiiii).clientHeight / elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight) < elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight) {
+                                                                    elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).style.display = "block"
+                                                                    elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).style.height = (elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight / (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiiiii).clientHeight / elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight))
+                                                                    if (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).offsetTop > elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).clientHeight - elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).clientHeight) {
+                                                                        elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).style.top = elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).clientHeight - elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).clientHeight
                                                                     }
-                                                                    break
+                                                                    //elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).style.top = Math.min(elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).style.top, elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight)
+                                                                } else {
+                                                                    elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).style.display = "none"
                                                                 }
+                                                                break
                                                             }
-
-                                                            break
                                                         }
+
+                                                        break
                                                     }
-                                                    break
                                                 }
+                                                break
                                             }
-                                            break
                                         }
+                                        break
                                     }
+                                }
                                 //}
                                 py = (evm.clientY)
                                 px = (evm.clientX)
@@ -357,7 +484,7 @@
                                             if (elec.item(ii).children.item(iiiii).className == 'content-content') {
                                                 //console.log(elec.item(ii).children.item(iiiii), "hi")
                                                 con = elec.item(ii).children.item(iiiii)
-
+                                                console.log(con)
                                                 elec.item(ii).onscroll = ((ev) => {
                                                     if (!scrolling) {
                                                         let aaaa = (elec.item(ii).clientHeight - elem.clientHeight)
@@ -366,6 +493,7 @@
                                                         elem.style.top = scro * aaaa
                                                     }
                                                 })
+                                                break
                                             }
                                         }
 
@@ -382,7 +510,7 @@
 
                 if (elem.className == 'scrollbar-point') {
                     elem.onmousedown = ((ev) => {
-
+                        let thi = con
                         document.body.style.cursor = 'grabbing'
                         elem.style.cursor = 'grabbing'
                         py = ev.clientY
@@ -391,8 +519,8 @@
                             document.body.style.userSelect = "unset"
                             document.onmousemove = null
                             document.onmouseup = null
-                            document.body.style.cursor = 'initial'
-                            elem.style.cursor = ''
+                            document.body.style.cursor = ''
+                            elem.style.cursor = 'grab'
                             scrolling = false
                         })
                         document.onmousemove = ((evm) => {
@@ -400,10 +528,18 @@
                             let z = (elem.offsetTop - (py - evm.clientY))
                             //let b = (elem.clientHeight - elem.offsetTop - (py - evm.clientY))
                             //console.log(elem.clientHeight/2 - elem.offsetTop - (py - evm.clientY))
+                            //console.log(z, elem.parentElement.clientHeight - elem.clientHeight)
                             if (z >= 0 && z < elem.parentElement.clientHeight - elem.clientHeight) {
                                 elem.style.top = z
-                                con.parentElement.scrollTop = ((z / (elem.parentElement.clientHeight - elem.clientHeight)) * (con.scrollHeight - elem.parentElement.clientHeight +24))
-                            }
+                                console.log(thi)
+                                thi.parentElement.scrollTop = ((z / (elem.parentElement.clientHeight - elem.clientHeight)) * (con.scrollHeight - elem.parentElement.clientHeight + 24))
+                            } /*else {
+                                if (z < elem.parentElement.clientHeight - elem.clientHeight) {
+                                    elem.style.top = 0
+                                } else {
+                                    elem.style.top = elem.parentElement.clientHeight - elem.clientHeight
+                                }
+                            }*/
                             py = (evm.clientY)
                         })
                     })
@@ -419,8 +555,17 @@
 </head>
 
 <body
-    onload="window_create(1,'test!','HIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHI</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>fwefsdf</br></br></br></br></br></br></br>fwefwr</br>IIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIII',{font:'Flow Circular'})">
-    <div id="root"></div>
+    onload="window_create(1,'hewwo','hi</br></br></br></br></br></br></br></br></br></br></br></br>hi');window_create(2,'uwu','uwu');load_bar()">
+    <div id="root">
+        <div id="bar">
+            <div id="bar-items">
+
+            </div>
+            <div id="bar-menu">
+
+            </div>
+        </div>
+    </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/readme.md b/readme.md
index 2dd4a98..af937c3 100644
--- a/readme.md
+++ b/readme.md
@@ -1,5 +1,5 @@
 credits:</br>
     display-font (src/98.ttf): [Levi Windows](https://www.dafont.com/leviwindows.font?text=All+your+base+belong+to+us.+Cancel+OK)</br>
-    badges (badges/*): [here uwu](https://cyber.dabamos.de/88x31/)</br>
+    badges (badges/\*): [here uwu](https://cyber.dabamos.de/88x31/)</br>
 
-<img title="./badges/nya2.gif" src="./badges/nya2.gif"><img title="./badges/linuxnow2.gif" src="./badges/linuxnow2.gif"><img title="./badges/digby88.gif" src="./badges/digby88.gif"><img title="./badges/asexuals_now.gif" src="./badges/asexuals_now.gif"><img title="./badges/transistor_cafe.gif" src="./badges/transistor_cafe.gif"><img title="./badges/neovim.gif" src="./badges/neovim.gif"><img title="./badges/finger-logo-people.gif" src="./badges/finger-logo-people.gif"><img title="./badges/getbsod.gif" src="./badges/getbsod.gif"><img title="./badges/zettai.gif" src="./badges/zettai.gif"><img title="./badges/transnow2.gif" src="./badges/transnow2.gif"><img title="./badges/104.gif" src="./badges/104.gif"><img title="./badges/firefox4.gif" src="./badges/firefox4.gif"><img title="./badges/css2.gif" src="./badges/css2.gif"><img title="./badges/anibanner.gif" src="./badges/anibanner.gif"><img title="./badges/beyes.gif" src="./badges/beyes.gif"><img title="./badges/devils.gif" src="./badges/devils.gif">
+<img alt="./badges\000010.gif"  title="./badges\000010.gif" src="./badges\000010.gif"> <img alt="./badges\104.gif"  title="./badges\104.gif" src="./badges\104.gif"> <img alt="./badges\1of2.gif"  title="./badges\1of2.gif" src="./badges\1of2.gif"> <img alt="./badges\anibanner.gif"  title="./badges\anibanner.gif" src="./badges\anibanner.gif"> <img alt="./badges\asexuals_now.gif"  title="./badges\asexuals_now.gif" src="./badges\asexuals_now.gif"> <img alt="./badges\beyes.gif"  title="./badges\beyes.gif" src="./badges\beyes.gif"> <img alt="./badges\css2.gif"  title="./badges\css2.gif" src="./badges\css2.gif"> <img alt="./badges\devils.gif"  title="./badges\devils.gif" src="./badges\devils.gif"> <img alt="./badges\digby88.gif"  title="./badges\digby88.gif" src="./badges\digby88.gif"> <img alt="./badges\finger-logo-people.gif"  title="./badges\finger-logo-people.gif" src="./badges\finger-logo-people.gif"> <img alt="./badges\firefox4.gif"  title="./badges\firefox4.gif" src="./badges\firefox4.gif"> <img alt="./badges\getbsod.gif"  title="./badges\getbsod.gif" src="./badges\getbsod.gif"> <img alt="./badges\linuxnow2.gif"  title="./badges\linuxnow2.gif" src="./badges\linuxnow2.gif"> <img alt="./badges\neovim.gif"  title="./badges\neovim.gif" src="./badges\neovim.gif"> <img alt="./badges\nya2.gif"  title="./badges\nya2.gif" src="./badges\nya2.gif"> <img alt="./badges\transistor_cafe.gif"  title="./badges\transistor_cafe.gif" src="./badges\transistor_cafe.gif"> <img alt="./badges\transnow2.gif"  title="./badges\transnow2.gif" src="./badges\transnow2.gif"> <img alt="./badges\zettai.gif"  title="./badges\zettai.gif" src="./badges\zettai.gif">
-- 
cgit v1.2.3