diff options
| -rw-r--r-- | display.html | 251 | ||||
| -rw-r--r-- | 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 @@ -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"> |