2023-09-21 17:29:40 +02:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>Frames Browser (WIP)</title>
|
|
|
|
|
|
<style>
|
2023-09-21 23:09:22 +02:00
|
|
|
|
:root {
|
|
|
|
|
|
--BtnHeight: 2em;
|
|
|
|
|
|
--BtnActionHeight: 3em;
|
|
|
|
|
|
}
|
2023-09-21 17:29:40 +02:00
|
|
|
|
* {
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
|
|
|
margin: 0px;
|
|
|
|
|
|
overflow: hidden;
|
2023-09-21 23:09:22 +02:00
|
|
|
|
max-width: 100vw;
|
|
|
|
|
|
max-height: 100vh;
|
|
|
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
|
|
|
height: var(--BtnHeight);
|
2023-09-21 17:29:40 +02:00
|
|
|
|
}
|
|
|
|
|
|
iframe {
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
width: 100vw;
|
2023-09-22 01:05:42 +02:00
|
|
|
|
height: calc(100vh - var(--BtnActionHeight));
|
2023-09-21 17:29:40 +02:00
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
2023-09-22 01:05:42 +02:00
|
|
|
|
#BoxControls table, #BoxControls table td, #BoxControls table td > * {
|
2023-09-21 23:09:22 +02:00
|
|
|
|
height: var(--BtnActionHeight);
|
|
|
|
|
|
min-width: var(--BtnActionHeight);
|
2023-09-21 17:29:40 +02:00
|
|
|
|
border-spacing: 0;
|
|
|
|
|
|
}
|
2023-09-21 23:09:22 +02:00
|
|
|
|
.BoxPopup {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
}
|
2023-09-21 17:29:40 +02:00
|
|
|
|
</style>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var FrameZoomLevels = [50, 200];
|
|
|
|
|
|
var AppInfoString = `
|
2023-09-22 01:05:42 +02:00
|
|
|
|
Frames Browser v2023-09-21.3 (WIP).
|
2023-09-21 17:29:40 +02:00
|
|
|
|
`.trim();
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="BoxControls"><table><tr>
|
|
|
|
|
|
<td><button onclick="ShowAppInfo()">ℹ️ Info</button></td>
|
2023-09-22 01:05:42 +02:00
|
|
|
|
<td>
|
|
|
|
|
|
<button onclick="this.nextElementSibling.click()">📄 File</button>
|
|
|
|
|
|
<input type="file" hidden="hidden" style="display: none;" onchange="LoadFile(this.files[0])"/>
|
|
|
|
|
|
</td>
|
2023-09-21 17:29:40 +02:00
|
|
|
|
<td><button onclick="ZoomFrame()">🔍️ Zoom</button></td>
|
2023-09-21 23:09:22 +02:00
|
|
|
|
<!--<td><button onclick="ListFrames()">🪟 Frames</button></td>-->
|
2023-09-22 01:05:42 +02:00
|
|
|
|
<td style="width: 100%;"><input type="text" style="width: 100%;"/></td>
|
2023-09-21 17:29:40 +02:00
|
|
|
|
<td><button onclick="LoadFrame()">↩️ Load</button></td>
|
2023-09-21 23:09:22 +02:00
|
|
|
|
<td><button onclick="ExciseFrame()">↗️ Excise</button></td>
|
2023-09-21 17:29:40 +02:00
|
|
|
|
<tr></table></div>
|
|
|
|
|
|
<div><iframe></iframe></div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var FrameZoomIndex = -1;
|
|
|
|
|
|
|
2023-09-22 01:05:42 +02:00
|
|
|
|
//function $rule(prop){
|
|
|
|
|
|
// return getComputedStyle(document.body).getPropertyValue(prop);
|
|
|
|
|
|
//};
|
|
|
|
|
|
|
2023-09-21 23:09:22 +02:00
|
|
|
|
function $new(tag){
|
|
|
|
|
|
return document.createElement(tag);
|
2023-09-22 01:05:42 +02:00
|
|
|
|
};
|
2023-09-21 23:09:22 +02:00
|
|
|
|
|
2023-09-21 17:29:40 +02:00
|
|
|
|
function ShowAppInfo(){
|
|
|
|
|
|
alert(AppInfoString);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
2023-09-21 23:09:22 +02:00
|
|
|
|
function SaveUrl(){
|
2023-09-22 01:05:42 +02:00
|
|
|
|
var url = document.querySelector('input[type="text"]').value;
|
2023-09-21 17:29:40 +02:00
|
|
|
|
localStorage.setItem('FramesBrowser.url', url);
|
2023-09-21 23:09:22 +02:00
|
|
|
|
return url;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function LoadFrame(){
|
|
|
|
|
|
document.querySelector('iframe').src = SaveUrl();
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
function ExciseFrame(){
|
2023-09-22 01:05:42 +02:00
|
|
|
|
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>`);
|
|
|
|
|
|
};
|
2023-09-21 23:09:22 +02:00
|
|
|
|
};
|
|
|
|
|
|
|
2023-09-22 01:05:42 +02:00
|
|
|
|
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);
|
2023-09-21 17:29:40 +02:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
function ZoomFrame(){
|
|
|
|
|
|
if (FrameZoomIndex == FrameZoomLevels.length - 1) {
|
|
|
|
|
|
FrameZoomIndex = -1;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
FrameZoomIndex ++;
|
|
|
|
|
|
};
|
|
|
|
|
|
var level = FrameZoomLevels[FrameZoomIndex];
|
|
|
|
|
|
var levelopp = FrameZoomLevels[FrameZoomLevels.length - 1 - FrameZoomIndex];
|
|
|
|
|
|
var stylepos = (level < 100
|
|
|
|
|
|
? `right: ${level}vw; bottom: calc(${level}vh - 16px);`
|
|
|
|
|
|
: `left: ${levelopp/2}vw; top: calc(${levelopp/2}vh - 8px);`
|
|
|
|
|
|
);
|
|
|
|
|
|
document.querySelector('iframe').style = (FrameZoomIndex == -1
|
|
|
|
|
|
? ''
|
2023-09-22 01:05:42 +02:00
|
|
|
|
: `scale: ${level/100}; width: ${levelopp}vw; height: calc(${levelopp}vh - (var(--BtnActionHeight) * ${levelopp / 100})); ${stylepos}`
|
2023-09-21 17:29:40 +02:00
|
|
|
|
);
|
2023-09-21 23:09:22 +02:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
function ListFrames(){
|
|
|
|
|
|
var Box = NewBoxPopup();
|
|
|
|
|
|
var BtnAdd = $new('button');
|
|
|
|
|
|
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;
|
2023-09-21 17:29:40 +02:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
onload = function(){
|
2023-09-22 01:05:42 +02:00
|
|
|
|
document.querySelector('input[type="text"]').value = localStorage.getItem('FramesBrowser.url');
|
2023-09-21 17:29:40 +02:00
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
