octospacc
/
OctoSpaccHub
mirror of https://gitlab.com/octospacc/octospacc.gitlab.io
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FramesBrowser WIP

This commit is contained in:
octospacc 2023-09-22 01:05:42 +02:00
parent 6880f6bac7
commit 3deeb7a122
1 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
public/FramesBrowser/index.html
View File

@ -24,10 +24,10 @@
iframe { iframe {
border: none; border: none;
width: 100vw; width: 100vw;
height: calc(100vh - 32px); height: calc(100vh - var(--BtnActionHeight));
position: relative; position: relative;
} }
#BoxControls table, #BoxControls td > * { #BoxControls table, #BoxControls table td, #BoxControls table td > * {
height: var(--BtnActionHeight); height: var(--BtnActionHeight);
min-width: var(--BtnActionHeight); min-width: var(--BtnActionHeight);
border-spacing: 0; border-spacing: 0;
@ -37,23 +37,25 @@
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 1;
} }
</style> </style>
<script> <script>
var FrameZoomLevels = [50, 200]; var FrameZoomLevels = [50, 200];
var AppInfoString = ` var AppInfoString = `
Frames Browser v2023-09-21.2 (WIP). Frames Browser v2023-09-21.3 (WIP).
`.trim(); `.trim();
</script> </script>
</head> </head>
<body> <body>
<div id="BoxControls"><table><tr> <div id="BoxControls"><table><tr>
<td><button onclick="ShowAppInfo()">ℹ️ Info</button></td> <td><button onclick="ShowAppInfo()">ℹ️ Info</button></td>
<!--<td><button onclick="LoadFile()">📄 File</button></td>--> <td>
<button onclick="this.nextElementSibling.click()">📄 File</button>
<input type="file" hidden="hidden" style="display: none;" onchange="LoadFile(this.files[0])"/>
</td>
<td><button onclick="ZoomFrame()">🔍️ Zoom</button></td> <td><button onclick="ZoomFrame()">🔍️ Zoom</button></td>
<!--<td><button onclick="ListFrames()">🪟 Frames</button></td>--> <!--<td><button onclick="ListFrames()">🪟 Frames</button></td>-->
<td style="width: 100%;"><input style="width: 100%;"/></td> <td style="width: 100%;"><input type="text" style="width: 100%;"/></td>
<td><button onclick="LoadFrame()">↩️ Load</button></td> <td><button onclick="LoadFrame()">↩️ Load</button></td>
<td><button onclick="ExciseFrame()">↗️ Excise</button></td> <td><button onclick="ExciseFrame()">↗️ Excise</button></td>
<tr></table></div> <tr></table></div>
@ -61,16 +63,20 @@ Frames Browser v2023-09-21.2 (WIP).
<script> <script>
var FrameZoomIndex = -1; var FrameZoomIndex = -1;
//function $rule(prop){
// return getComputedStyle(document.body).getPropertyValue(prop);
//};
function $new(tag){ function $new(tag){
return document.createElement(tag); return document.createElement(tag);
} };
function ShowAppInfo(){ function ShowAppInfo(){
alert(AppInfoString); alert(AppInfoString);
}; };
function SaveUrl(){ function SaveUrl(){
var url = document.querySelector('input').value; var url = document.querySelector('input[type="text"]').value;
localStorage.setItem('FramesBrowser.url', url); localStorage.setItem('FramesBrowser.url', url);
return url; return url;
} }
@ -80,11 +86,20 @@ Frames Browser v2023-09-21.2 (WIP).
}; };
function ExciseFrame(){ function ExciseFrame(){
window.open(SaveUrl()); var url = SaveUrl();
var extwindow = open(url, '_blank');
if (url.toLowerCase().startsWith('data:')) {
extwindow.document.write(`<style>body { margin: 0; } iframe { width: 100vw; height: 100vh; border: none; }</style><iframe src="${url}" frameborder="0"></iframe>`);
};
}; };
function LoadFile(){ function LoadFile(file){
var reader = new FileReader();
reader.onload = function(){
document.querySelector('input[type="text"]').value = `data:text/html;utf8,${reader.result}`;
LoadFrame();
};
reader.readAsText(file);
}; };
function ZoomFrame(){ function ZoomFrame(){
@ -101,7 +116,7 @@ Frames Browser v2023-09-21.2 (WIP).
); );
document.querySelector('iframe').style = (FrameZoomIndex == -1 document.querySelector('iframe').style = (FrameZoomIndex == -1
? '' ? ''
: `scale: ${level/100}; width: ${levelopp}vw; height: calc(${levelopp}vh - ${32 * (levelopp / 100)}px); ${stylepos}` : `scale: ${level/100}; width: ${levelopp}vw; height: calc(${levelopp}vh - (var(--BtnActionHeight) * ${levelopp / 100})); ${stylepos}`
); );
}; };
@ -127,7 +142,7 @@ Frames Browser v2023-09-21.2 (WIP).
}; };
onload = function(){ onload = function(){
document.querySelector('input').value = localStorage.getItem('FramesBrowser.url'); document.querySelector('input[type="text"]').value = localStorage.getItem('FramesBrowser.url');
}; };
</script> </script>
</body> </body>