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

FramesBrowser sync

This commit is contained in:
octospacc 2023-09-21 23:09:22 +02:00
parent f49bea9fa3
commit 6880f6bac7
1 changed files with 61 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
public/FramesBrowser/index.html
View File

@ -5,12 +5,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frames Browser (WIP)</title> <title>Frames Browser (WIP)</title>
<style> <style>
:root {
--BtnHeight: 2em;
--BtnActionHeight: 3em;
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
margin: 0px; margin: 0px;
overflow: hidden; overflow: hidden;
max-width: 100vw;
max-height: 100vh;
}
button {
height: var(--BtnHeight);
} }
iframe { iframe {
border: none; border: none;
@ -19,36 +28,63 @@
position: relative; position: relative;
} }
#BoxControls table, #BoxControls td > * { #BoxControls table, #BoxControls td > * {
height: 32px; height: var(--BtnActionHeight);
min-width: var(--BtnActionHeight);
border-spacing: 0; border-spacing: 0;
} }
.BoxPopup {
position: absolute;
top: 0;
left: 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 (WIP). Frames Browser v2023-09-21.2 (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="ZoomFrame()">🔍️ Zoom</button></td> <td><button onclick="ZoomFrame()">🔍️ Zoom</button></td>
<!--<td><button onclick="ListFrames()">🪟 Frames</button></td>-->
<td style="width: 100%;"><input style="width: 100%;"/></td> <td style="width: 100%;"><input 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>
<tr></table></div> <tr></table></div>
<div><iframe></iframe></div> <div><iframe></iframe></div>
<script> <script>
var FrameZoomIndex = -1; var FrameZoomIndex = -1;
function $new(tag){
return document.createElement(tag);
}
function ShowAppInfo(){ function ShowAppInfo(){
alert(AppInfoString); alert(AppInfoString);
}; };
function LoadFrame(){ function SaveUrl(){
var url = document.querySelector('input').value; var url = document.querySelector('input').value;
localStorage.setItem('FramesBrowser.url', url); localStorage.setItem('FramesBrowser.url', url);
document.querySelector('iframe').src = url; return url;
}
function LoadFrame(){
document.querySelector('iframe').src = SaveUrl();
};
function ExciseFrame(){
window.open(SaveUrl());
};
function LoadFile(){
}; };
function ZoomFrame(){ function ZoomFrame(){
@ -67,12 +103,27 @@ Frames Browser v2023-09-21 (WIP).
? '' ? ''
: `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 - ${32 * (levelopp / 100)}px); ${stylepos}`
); );
//switch (FrameZoom) { };
// case 100: FrameZoom = 200; break;
// case 200: FrameZoom = 50; break; function ListFrames(){
// case 50: FrameZoom = 100; break; var Box = NewBoxPopup();
//}; var BtnAdd = $new('button');
//document.querySelector('iframe').style = `scale: ${FrameZoom/100}; width: ${FrameZoom}vw; height: ${FrameZoom}vh; left: ${''}; top: ${''};`; BtnAdd.innerHTML = '➕ Add';
Box.appendChild(BtnAdd);
var BtnMain = $new('button');
BtnMain.innerHTML = 'No Frame';
Box.appendChild(BtnMain);
};
function NewBoxPopup(){
var Box = $new('div');
Box.className = 'BoxPopup';
var BtnClose = $new('button');
BtnClose.innerHTML = '❌ Close';
BtnClose.onclick = function(){ this.parentElement.remove() };
Box.appendChild(BtnClose);
document.body.appendChild(Box);
return Box;
}; };
onload = function(){ onload = function(){