aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authoramy <[email protected]>2023-02-01 21:25:28 -0600
committeramy <[email protected]>2023-02-01 21:25:28 -0600
commit3784cf506e3653d53f94ca3acfbbece550f72e2d (patch)
tree030a7e6cca9c1ec266cbad38f1fcaa49e8c2175b
parentea6546d1ba636a249e0fc53cee47541025c126d3 (diff)
readme and scrollbars
Diffstat
-rw-r--r--display.html165
-rw-r--r--readme.md2
-rw-r--r--src/98.ttfbin0 -> 88840 bytes
3 files changed, 138 insertions, 29 deletions
diff --git a/display.html b/display.html
index 2bb7e03..1bfea3c 100644
--- a/display.html
+++ b/display.html
@@ -1,9 +1,19 @@
<html>
<head>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap" rel="stylesheet">
<style>
+ @font-face {
+ font-family: f98;
+ src: url(src/98.ttf);
+ }
* {
margin: 0;
+ font-family: f98;
+
+ scrollbar-width: none;
}
.window {
@@ -45,13 +55,14 @@
margin-top: 2.5%;
margin-bottom: 2.5%;
overflow: hidden;
+
}
.resize-n {
position: absolute;
top: -1px;
width: 100%;
- height: 5px;
+ height: 7px;
background-color: rgba(0, 0, 0, 0);
cursor: ns-resize;
}
@@ -60,15 +71,15 @@
position: absolute;
bottom: -1px;
width: 100%;
- height: 5px;
+ height: 7px;
background-color: rgba(0, 0, 0, 0);
cursor: ns-resize;
}
.resize-e {
position: absolute;
- right: -1px;
- width: 5px;
+ right: -3px;
+ width: 7px;
height: 100%;
background-color: rgba(0, 0, 0, 0);
cursor: ew-resize;
@@ -76,20 +87,40 @@
.resize-w {
position: absolute;
- left: -1px;
- width: 5px;
+ left: -3px;
+ width: 7px;
height: 100%;
background-color: rgba(0, 0, 0, 0);
cursor: ew-resize;
+
+ }
+ ::-webkit-scrollbar {
+ display: none;
+ }
+ .scrollbar{
+ width:10px;
+ height: calc(100% - 26px);
+ background-color: #aaaaaa ;
+ position: absolute;
+ bottom:0;
+ right:0;
+ }
+ .scrollbar-point{
+ width:100%;
+ background-color: #919191 ;
+ position: absolute;
+ top:0;
}
+
</style>
<script>
- function window_create(uid, name) {
+ function window_create(uid, name,content) {
+ let lines =content.split("</br>").length
let a = ''
- a += "<div id='" + uid + "-root' class='window' style='top:0px;left:0px;position:absolute;' window-name='" + name + "'>"
+ 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 + "'>"
//console.log(document.getElementById(uid).attributes["window-name"].value)
- a += "<div id='" + uid + "-head' class='head-border' window-name='" + name + "'>"
- a += "<div id='" + uid + "-close' class='close-button' window-name='" + name + "'>" + `<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;left:-3.5px;top:0px;" xmlns:xlink="http://www.w3.org/1999/xlink" width="23px" height="20px" viewBox="0 0 23 20" version="1.1">
+ a += "<div id='" + uid + "-head' class='head-border' window-name='" + name + "'> <div style='color:fdffff'>"+name+"</div>"
+ a += "<div id='" + uid + "-close' class='close-button' window-name='" + name + "'>" + `<svg draggable="false" xmlns="http://www.w3.org/2000/svg" style="position:absolute;left:-3px;top:0px;" xmlns:xlink="http://www.w3.org/1999/xlink" width="23px" height="20px" viewBox="0 0 23 20" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:evenodd;fill:rgb(2.745098%,3.137255%,2.745098%);fill-opacity:1;" d="M 8.476562 6.042969 C 9.042969 6.042969 9.613281 6.042969 10.179688 6.042969 C 10.179688 6.332031 10.179688 6.625 10.179688 6.914062 C 10.464844 6.914062 10.746094 6.914062 11.03125 6.914062 C 11.03125 7.203125 11.03125 7.492188 11.03125 7.78125 C 11.597656 7.78125 12.167969 7.78125 12.734375 7.78125 C 12.734375 7.492188 12.734375 7.203125 12.734375 6.914062 C 13.019531 6.914062 13.304688 6.914062 13.585938 6.914062 C 13.585938 6.625 13.585938 6.332031 13.585938 6.042969 C 14.15625 6.042969 14.722656 6.042969 15.289062 6.042969 C 15.289062 6.332031 15.289062 6.625 15.289062 6.914062 C 15.007812 6.914062 14.722656 6.914062 14.4375 6.914062 C 14.4375 7.203125 14.4375 7.492188 14.4375 7.78125 C 14.15625 7.78125 13.871094 7.78125 13.585938 7.78125 C 13.585938 8.074219 13.585938 8.363281 13.585938 8.652344 C 13.304688 8.652344 13.019531 8.652344 12.734375 8.652344 C 12.734375 8.941406 12.734375 9.230469 12.734375 9.523438 C 13.019531 9.523438 13.304688 9.523438 13.585938 9.523438 C 13.585938 9.8125 13.585938 10.101562 13.585938 10.390625 C 13.871094 10.390625 14.15625 10.390625 14.4375 10.390625 C 14.4375 10.679688 14.4375 10.972656 14.4375 11.261719 C 14.722656 11.261719 15.007812 11.261719 15.289062 11.261719 C 15.289062 11.550781 15.289062 11.839844 15.289062 12.128906 C 14.722656 12.128906 14.15625 12.128906 13.585938 12.128906 C 13.585938 11.839844 13.585938 11.550781 13.585938 11.261719 C 13.304688 11.261719 13.019531 11.261719 12.734375 11.261719 C 12.734375 10.972656 12.734375 10.679688 12.734375 10.390625 C 12.167969 10.390625 11.597656 10.390625 11.03125 10.390625 C 11.03125 10.679688 11.03125 10.972656 11.03125 11.261719 C 10.746094 11.261719 10.464844 11.261719 10.179688 11.261719 C 10.179688 11.550781 10.179688 11.839844 10.179688 12.128906 C 9.613281 12.128906 9.042969 12.128906 8.476562 12.128906 C 8.476562 11.839844 8.476562 11.550781 8.476562 11.261719 C 8.761719 11.261719 9.042969 11.261719 9.328125 11.261719 C 9.328125 10.972656 9.328125 10.679688 9.328125 10.390625 C 9.613281 10.390625 9.894531 10.390625 10.179688 10.390625 C 10.179688 10.101562 10.179688 9.8125 10.179688 9.523438 C 10.464844 9.523438 10.746094 9.523438 11.03125 9.523438 C 11.03125 9.230469 11.03125 8.941406 11.03125 8.652344 C 10.746094 8.652344 10.464844 8.652344 10.179688 8.652344 C 10.179688 8.363281 10.179688 8.074219 10.179688 7.78125 C 9.894531 7.78125 9.613281 7.78125 9.328125 7.78125 C 9.328125 7.492188 9.328125 7.203125 9.328125 6.914062 C 9.042969 6.914062 8.761719 6.914062 8.476562 6.914062 C 8.476562 6.625 8.476562 6.332031 8.476562 6.042969 Z M 8.476562 6.042969 "/>
</g>
@@ -98,6 +129,10 @@
a += "<div id='" + uid + "-resize-s' class='resize-s'></div>"
a += "<div id='" + uid + "-resize-e' class='resize-e'></div>"
a += "<div id='" + uid + "-resize-w' class='resize-w'></div>"
+ a += "<div style='height:25px;'></div>"
+ a += "<div id='"+ uid +"-content-root' class='content-root' style='overflow:scroll;height:calc(100% - 25px);width:100%'><div id='"+uid+"-content-content'>"+content
+ a+= "</div><div id='"+uid+"-content-scrollbar' class='scrollbar'><div id='"+uid+"-content-scrollbar-point' style='height:calc(100% - "+lines*4+"px);' class='scrollbar-point'></div>"
+ a += "</div>"
a += "</div>"
document.getElementById("root").innerHTML += a
let elems = document.getElementsByClassName("window")
@@ -106,13 +141,12 @@
let elec = elems.item(i).children
let elem
for (let ii = 0; ii != elec.length; ii++) {
- console.log(elec.item(ii).className)
if (elec.item(ii).className == 'head-border') {
elem = elec.item(ii)
break
}
}
- let elep = elem.parentElement
+ let elep = elems.item(i)
let px = 0, py = 0;
if (elem.className == 'head-border') {
@@ -126,12 +160,13 @@
elem.style.cursor = 'grabbing'
px = ev.clientX
py = ev.clientY
+ document.body.style.userSelect = "none"
document.onmouseup = ((evu) => {
-
+ document.body.style.userSelect = "unset"
document.onmousemove = null
document.onmouseup = null
document.body.style.cursor = 'initial'
- elem.style.cursor = 'grab'
+ elem.style.cursor = ''
})
document.onmousemove = ((evm) => {
console.log(elem.id)
@@ -142,38 +177,110 @@
})
})
}
+ let minx = 150;
+ let miny = 150;
- for (let ii = 0; ii != elec.length; ii++) {
- console.log(elec.item(ii))
- if (elec.item(ii).className == 'resize-n') {
+ ['resize-s','resize-n','resize-e','resize-w'].forEach((sel)=>{
+ for (let ii = 0; ii != elec.length; ii++) {
+ if (elec.item(ii).className == sel) {
elem = elec.item(ii)
break
}
}
- console.log(elem)
- if (elem.className == 'resize-n') {
+ if (elem.className == sel) {
elem.onmousedown = ((ev) => {
- console.log("hi")
- for (let i = 0; i != elems.length; i++) {
- elems.item(i).style.zIndex = 0;
- }
- elep.style.zIndex = 1
px = ev.clientX
py = ev.clientY
+ if(sel=='resize-s'||sel=='resize-n')
+ elem.style.cursor = 'ns-resize'
+ else
+ elem.style.cursor = 'ew-resize'
+ document.body.style.userSelect = "none"
document.onmouseup = ((evu) => {
+ document.body.style.userSelect = "unset"
+ document.onmousemove = null
+ document.onmouseup = null
+ document.body.style.cursor = 'initial'
+
+ })
+ document.onmousemove = ((evm) => {
+ if(sel=='resize-s')
+ if((parseInt(elep.style.height.replace("px","")) + (evm.clientY-py))>miny){
+ elep.style.height = (parseInt(elep.style.height.replace("px","")) + (evm.clientY-py)) + "px"
+ }if(sel=='resize-n'){
+ if((parseInt(elep.style.height.replace("px","")) - (evm.clientY-py))>miny){
+ elep.style.top = (elep.offsetTop - (py - evm.clientY)) + "px"
+ elep.style.height = (parseInt(elep.style.height.replace("px","")) - (evm.clientY-py)) + "px"
+ }}
+ if(sel=='resize-e')
+ if((parseInt(elep.style.width.replace("px","")) + (evm.clientX-px))>minx){
+ elep.style.width = (parseInt(elep.style.width.replace("px","")) + (evm.clientX-px)) + "px"
+ }if(sel=='resize-w'){
+ console.log((parseInt(elep.style.width.replace("px","")) - (evm.clientX-px)))
+ if((parseInt(elep.style.width.replace("px","")) - (evm.clientX-px))>minx){
+ elep.style.left = (elep.offsetLeft - (px - evm.clientX)) + "px"
+ elep.style.width = (parseInt(elep.style.width.replace("px","")) - (evm.clientX-px)) + "px"
+ }
+ }
+ //
+ py = (evm.clientY)
+ px = (evm.clientX)
+ })
+ })
+ }
+ })
+ let temp
+ for (let ii = 0; ii != elec.length; ii++) {
+
+ if (elec.item(ii).className == 'content-root') {
+ console.log(elec.item(ii).className)
+ temp = elec.item(ii).children
+ for (let iii = 0; iii != temp.length; iii++) {
+ console.log(temp.item(iii).className)
+ if (temp.item(iii).className == 'scrollbar') {
+ temp = temp.item(iii).children
+ for (let iiii = 0; iiii != temp.length; iiii++) {
+ console.log(temp.item(iiii).className)
+ if (temp.item(iiii).className == 'scrollbar-point') {
+ elem = temp.item(iiii)
+ break
+ }
+ }
+ break
+ }
+ }
+ break
+ }
+ }
+ px = 0, py = 0;
+
+ if (elem.className == 'scrollbar-point') {
+ elem.onmousedown = ((ev) => {
+
+ document.body.style.cursor = 'grabbing'
+ elem.style.cursor = 'grabbing'
+ py = ev.clientY
+ document.body.style.userSelect = "none"
+ document.onmouseup = ((evu) => {
+ document.body.style.userSelect = "unset"
document.onmousemove = null
document.onmouseup = null
document.body.style.cursor = 'initial'
- elem.style.cursor = 'grab'
+ elem.style.cursor = ''
})
document.onmousemove = ((evm) => {
- console.log(elem.offsetLeft)
- elep.style.width = (px - evm.clientX) + "px"
- elep.style.height = (py - evm.clientY) + "px"
+
+ 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))
+ if(z>-1&&z<elem.parentElement.clientHeight-elem.clientHeight)
+ elem.style.top = z + "px"
+ py = (evm.clientY)
})
})
}
+
}
@@ -183,7 +290,7 @@
</script>
</head>
-<body>
+<body onload="window_create(1,'test!','HIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHI</br></br></br></br></br></br>fwefsdf</br></br></br></br></br></br></br>fwefwr</br></br></br></br></br></br>IIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIIIHIIII')">
<div id="root"></div>
</body>
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..67400ef
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,2 @@
+credits:
+ display-font (src/98.ttf): [Levi Windows](https://www.dafont.com/leviwindows.font?text=All+your+base+belong+to+us.+Cancel+OK) \ No newline at end of file
diff --git a/src/98.ttf b/src/98.ttf
new file mode 100644
index 0000000..26abb3d
--- /dev/null
+++ b/src/98.ttf
Binary files differ
generated by cgit v1.2.3 (git 2.25.1) at 2025-07-22 22:10:42 +0000