diff options
Diffstat (limited to 'display.html')
| -rw-r--r-- | display.html | 190 |
1 files changed, 190 insertions, 0 deletions
diff --git a/display.html b/display.html new file mode 100644 index 0000000..2bb7e03 --- /dev/null +++ b/display.html @@ -0,0 +1,190 @@ +<html> + +<head> + <style> + * { + margin: 0; + } + + .window { + width: 56%; + max-width: inherit; + height: 30%; + max-height: inherit; + background-color: #c3c3c3; + position: absolute; + } + + .head-border { + width: calc(100% - 2px); + background-color: #010081; + height: 25px; + position: absolute; + top: 1px; + left: 1px; + cursor: grab; + } + + .close-button { + width: calc(25px - 7px); + background-color: #c3c3c3; + height: calc(100% - 7px); + position: absolute; + top: 3.5px; + right: 3.5px; + cursor: initial; + + } + + #root { + position: relative; + background-color: cornsilk; + width: 90%; + height: 90%; + margin-left: 5%; + margin-top: 2.5%; + margin-bottom: 2.5%; + overflow: hidden; + } + + .resize-n { + position: absolute; + top: -1px; + width: 100%; + height: 5px; + background-color: rgba(0, 0, 0, 0); + cursor: ns-resize; + } + + .resize-s { + position: absolute; + bottom: -1px; + width: 100%; + height: 5px; + background-color: rgba(0, 0, 0, 0); + cursor: ns-resize; + } + + .resize-e { + position: absolute; + right: -1px; + width: 5px; + height: 100%; + background-color: rgba(0, 0, 0, 0); + cursor: ew-resize; + } + + .resize-w { + position: absolute; + left: -1px; + width: 5px; + height: 100%; + background-color: rgba(0, 0, 0, 0); + cursor: ew-resize; + } + </style> + <script> + function window_create(uid, name) { + let a = '' + a += "<div id='" + uid + "-root' class='window' style='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"> +<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> +</svg></div></div>` + a += "<div id='" + uid + "-resize-n' class='resize-n'></div>" + 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>" + document.getElementById("root").innerHTML += a + let elems = document.getElementsByClassName("window") + for (let i = 0; i != elems.length; i++) { + //let elem = elems.item(i).children[0] + 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 px = 0, py = 0; + + if (elem.className == 'head-border') { + elem.onmousedown = ((ev) => { + + for (let i = 0; i != elems.length; i++) { + elems.item(i).style.zIndex = 0; + } + elep.style.zIndex = 1 + document.body.style.cursor = 'grabbing' + elem.style.cursor = 'grabbing' + px = ev.clientX + py = ev.clientY + document.onmouseup = ((evu) => { + + document.onmousemove = null + document.onmouseup = null + document.body.style.cursor = 'initial' + elem.style.cursor = 'grab' + }) + document.onmousemove = ((evm) => { + console.log(elem.id) + elep.style.left = (elep.offsetLeft - (px - evm.clientX)) + "px" + elep.style.top = (elep.offsetTop - (py - evm.clientY)) + "px" + px = (evm.clientX) + py = (evm.clientY) + }) + }) + } + + for (let ii = 0; ii != elec.length; ii++) { + console.log(elec.item(ii)) + if (elec.item(ii).className == 'resize-n') { + elem = elec.item(ii) + break + } + } + console.log(elem) + if (elem.className == 'resize-n') { + 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 + document.onmouseup = ((evu) => { + + document.onmousemove = null + document.onmouseup = null + document.body.style.cursor = 'initial' + elem.style.cursor = 'grab' + }) + document.onmousemove = ((evm) => { + console.log(elem.offsetLeft) + elep.style.width = (px - evm.clientX) + "px" + elep.style.height = (py - evm.clientY) + "px" + }) + }) + } + } + + + + } + + </script> +</head> + +<body> + <div id="root"></div> +</body> + +</html>
\ No newline at end of file |