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

Update Userscripts HTML, update FramesBrowser

This commit is contained in:
octospacc 2024-03-15 22:04:56 +01:00
parent 99dc7e605d
commit 80083457d2
2 changed files with 90 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
public/FramesBrowser/index.html
View File

@ -24,7 +24,6 @@
} }
body { body {
margin: 0px; margin: 0px;
overflow: hidden;
max-width: 100vw; max-width: 100vw;
max-height: 100vh; max-height: 100vh;
} }
@ -74,9 +73,7 @@
</style> </style>
<script> <script>
var FrameZoomLevels = [50, 200]; var FrameZoomLevels = [50, 200];
var AppInfoString = ` var AppInfoString = `Frames Browser v2024-03-15.`;
Frames Browser v2023-09-23 (WIP).
`.trim();
</script> </script>
</head> </head>
<body> <body>
@ -101,11 +98,36 @@ Frames Browser v2023-09-23 (WIP).
The code is fully open, and you can review it with "View Page Source". The code is fully open, and you can review it with "View Page Source".
</p></noscript> </p></noscript>
<div id="BoxHandy"></div> <div id="BoxHandy"></div>
<div><iframe></iframe></div> <div id="MainAppContent">
<h1>Frames Browser</h1>
<p>Frames Browser is an iFrame-based HTML5 browser made for fun and development. Use the above menu to operate the app.</p>
<p>Note: the app is still in development and data handling may break between versions! Backup your data externally to avoid losing it.</p>
<!--<p>You can also visit, or go back to, my home page: <a href="https://hub.octt.eu.org">hub.octt.eu.org</a>!</p>-->
<h2>Changelog</h2>
<h3>2024-03-15</h3><ul>
<li>Improve some crusty code.</li>
<li>Add this default/sample HTML text into the app, visible via the otherwise useless Root Window.</li>
<li>Add symbol for indicating current zoom level on zoom button.</li>
<li>Add counter for open frames (goes up to 99 before becoming generic).</li>
<li>Better handling of devtools, removed floating button and always use dedicated button.</li>
</ul>
<h3>2023-09-23 and before</h3><ul>
<li>MVP version of the app with finished UI and basic features.</li>
<li>Eruda DevTools.</li>
<li>In-frame page zoom with 3 levels.</li>
<li>Creating, deleting, and switching to different frames, inputting URL.</li>
<li>Persistent app state saving frames and their URLs.</li>
<li>Excise frame content into another native browser tab (via opening the same URL)</li>
<li>Import file into data URI from local file.</li>
</ul>
</div>
<script> <script>
var CurrentFrames = []; var CurrentFrames = [];
var FrameIndexes = [-1]; var FrameIndexes = [-1];
var FrameZoomIndex = -1; var FrameZoomIndex = -1;
var SampleHtmlContent = MainAppContent.innerHTML;
MainAppContent.innerHTML = '<iframe></iframe>';
document.body.style.overflow = 'hidden';
function $new(tag, props){ function $new(tag, props){
var el = document.createElement(tag); var el = document.createElement(tag);
@ -143,31 +165,16 @@ Frames Browser v2023-09-23 (WIP).
}; };
function ShowFrame(index){ function ShowFrame(index){
var isFrameRoot = (index === -1);
ListFramesClose(); ListFramesClose();
FrameIndexes = [index]; FrameIndexes = [index];
SaveCurrentFrames(); SaveCurrentFrames();
document.querySelector('iframe').hidden = false; InputUri.disabled = isFrameRoot;
document.querySelector('iframe').style.display = ''; InputUri.value = (isFrameRoot ? '' : CurrentFrames[index]);
InputUri.disabled = false; BtnFile.disabled = isFrameRoot;
InputUri.value = CurrentFrames[index]; BtnLoad.disabled = isFrameRoot;
BtnFile.disabled = false; BtnExcise.disabled = isFrameRoot;
BtnLoad.disabled = false; document.querySelector('iframe').src = (isFrameRoot ? `data:text/html;utf8,${SampleHtmlContent}` : CurrentFrames[index]);
BtnExcise.disabled = false;
document.querySelector('iframe').src = CurrentFrames[index];
};
function ShowRootFrame(){
ListFramesClose();
FrameIndexes = [-1];
SaveCurrentFrames();
document.querySelector('iframe').hidden = true;
document.querySelector('iframe').style.display = 'none';
InputUri.disabled = true;
InputUri.value = '';
BtnFile.disabled = true;
BtnLoad.disabled = true;
BtnExcise.disabled = true;
document.querySelector('iframe').src = '';
}; };
function SaveUrl(){ function SaveUrl(){
@ -180,20 +187,22 @@ Frames Browser v2023-09-23 (WIP).
function AddFrame(){ function AddFrame(){
CurrentFrames = CurrentFrames.concat(['']); CurrentFrames = CurrentFrames.concat(['']);
ListFrames(); //ListFrames(); ListFrames();
ShowFrame(CurrentFrames.length - 1); ShowFrame(CurrentFrames.length - 1);
SaveCurrentFrames(); SaveCurrentFrames();
RefreshFramesCounter();
}; };
function CloseFrame(index){ function CloseFrame(index){
CurrentFrames.pop(index); CurrentFrames.pop(index);
if (FrameIndexes[0] === index) { if (FrameIndexes[0] === index) {
ShowRootFrame(); ShowFrame(-1);//ShowRootFrame();
} else if (FrameIndexes[0] > index) { } else if (FrameIndexes[0] > index) {
FrameIndexes[0] --; FrameIndexes[0] --;
}; };
ListFrames(); ListFrames(); ListFrames(); ListFrames();
SaveCurrentFrames(); SaveCurrentFrames();
RefreshFramesCounter();
}; };
function SaveCurrentFrames(){ function SaveCurrentFrames(){
@ -201,6 +210,17 @@ Frames Browser v2023-09-23 (WIP).
localStorage.setItem('FramesBrowser.FrameIndexes', JSON.stringify(FrameIndexes)); localStorage.setItem('FramesBrowser.FrameIndexes', JSON.stringify(FrameIndexes));
}; };
function RefreshFramesCounter(){
var count = CurrentFrames.length;
var countHtml = '';
if (count > 99) {
countHtml = '(...)';
} else if (count > 0) {
countHtml = `(${count})`;
};
document.querySelector('button[onclick="ListFrames()"]').textContent = `🪟${countHtml} Frames`;
};
function LoadFrame(){ function LoadFrame(){
document.querySelector('iframe').src = SaveUrl(); document.querySelector('iframe').src = SaveUrl();
}; };
@ -239,6 +259,14 @@ Frames Browser v2023-09-23 (WIP).
? '' ? ''
: `scale: ${level/100}; width: ${levelopp}vw; height: calc(${levelopp}vh - (var(--BtnActionHeight) * ${levelopp / 100})); ${stylepos}` : `scale: ${level/100}; width: ${levelopp}vw; height: calc(${levelopp}vh - (var(--BtnActionHeight) * ${levelopp / 100})); ${stylepos}`
); );
var zoomButton = document.querySelector('button[onclick="ZoomFrame()"]');
if (level < 100) {
zoomButton.textContent = '🔍️(-) Zoom';
} else if (level > 100) {
zoomButton.textContent = '🔍️(+) Zoom';
} else {
zoomButton.textContent = '🔍️ Zoom';
};
}; };
function ListFrames(){ function ListFrames(){
@ -250,7 +278,7 @@ Frames Browser v2023-09-23 (WIP).
Box.Content.appendChild(BoxList); Box.Content.appendChild(BoxList);
var LiMain = $new('li'); var LiMain = $new('li');
BoxList.appendChild(LiMain); BoxList.appendChild(LiMain);
var BtnMain = $new('button', { innerHTML: 'Root Window', onclick: ShowRootFrame, disabled: FrameIndexes[0] === -1 }); var BtnMain = $new('button', { innerHTML: 'Root Window', onclick: /*ShowRootFrame*/function(){ ShowFrame(-1) }, disabled: FrameIndexes[0] === -1 });
LiMain.appendChild(BtnMain); LiMain.appendChild(BtnMain);
for (var i=0; i<CurrentFrames.length; i++) { for (var i=0; i<CurrentFrames.length; i++) {
var li = $new('li'); var li = $new('li');
@ -272,15 +300,20 @@ Frames Browser v2023-09-23 (WIP).
return exist; return exist;
}; };
var isDevToolsOpen = false;
function ToggleDevTools(){ function ToggleDevTools(){
//var src = 'https://cdn.jsdelivr.net/npm/eruda'; if (typeof(eruda) === 'undefined') {
//document.write('<scr' + 'ipt src="' + src + '" onload="eruda.init();"></scr' + 'ipt>');
//document.write('<scr' + 'ipt>eruda.init()</scr' + 'ipt>');
$request('https://cdn.jsdelivr.net/npm/eruda', { callback: function(text){ $request('https://cdn.jsdelivr.net/npm/eruda', { callback: function(text){
eval(text); eval(text);
eruda.init(); eruda.init();
eruda._shadowRoot.querySelector('div.eruda-entry-btn').style.display = 'none';
eruda.show();
isDevToolsOpen = true;
} }); } });
document.querySelector('button[onclick="ToggleDevTools()"]').disabled = true; } else {
eruda[isDevToolsOpen ? 'hide' : 'show']();
isDevToolsOpen = !isDevToolsOpen;
}
}; };
function NewBoxPopup(id){ function NewBoxPopup(id){
@ -309,13 +342,13 @@ Frames Browser v2023-09-23 (WIP).
), '_blank'); ), '_blank');
}; };
onload = function(){ window.onload = function(){
Array.from(document.querySelectorAll('noscript, .NoScript')).forEach(function(el){ el.remove() }); Array.from(document.querySelectorAll('noscript, .NoScript')).forEach(function(el){ el.remove() });
CurrentFrames = (JSON.parse(localStorage.getItem('FramesBrowser.CurrentFrames')) || []); CurrentFrames = (JSON.parse(localStorage.getItem('FramesBrowser.CurrentFrames')) || []);
FrameIndexes = (JSON.parse(localStorage.getItem('FramesBrowser.FrameIndexes')) || [-1]); FrameIndexes = (JSON.parse(localStorage.getItem('FramesBrowser.FrameIndexes')) || [-1]);
document.querySelector('input[type="text"]').value = localStorage.getItem('FramesBrowser.url'); document.querySelector('input[type="text"]').value = localStorage.getItem('FramesBrowser.url');
var frame0 = FrameIndexes[0]; ShowFrame(FrameIndexes[0]);
frame0 === -1 ? ShowRootFrame() : ShowFrame(frame0); RefreshFramesCounter();
}; };
</script> </script>
</body> </body>

14
public/Userscripts/index.html
View File

@ -17,16 +17,20 @@
<body> <body>
<div class="Content" style="text-align: center;"> <div class="Content" style="text-align: center;">
<h2>My Userscripts ⚙️</h2><br/> <h2>My Userscripts ⚙️</h2><br/>
<p style="max-width: 80%; margin: auto;"> <div style="max-width: 80%; margin: auto;">
<p>
This page exists so that I can aggregate and organize (some of) my userscripts, This page exists so that I can aggregate and organize (some of) my userscripts,
mostly made for fixing things that other developers should have fixed instead. mostly made for fixing things that other developers should have fixed instead.
</p><p> </p>
<p>
And it also makes it seem like this website has more content and that I'm girlbossing very hard to improve the web 😇. And it also makes it seem like this website has more content and that I'm girlbossing very hard to improve the web 😇.
<br/> <br/>
<small>(No ok idk why I've written this part tbh, I felt like I had to say something more but I had no proper idea lmaoo)</small> <small>(No ok idk why I've written this part tbh, I felt like I had to say something more but I had no proper idea lmaoo)</small>
</p><p> </p>
<p>
Feel free to try, inspect, share, or modify all of them. Feel free to try, inspect, share, or modify all of them.
</p> </p>
</div>
<br/> <br/>
<p id="LoadingInfo">Loading data, hang on...</p> <p id="LoadingInfo">Loading data, hang on...</p>
<noscript><p>(...if nothing happens please check that JavaScript is working on your browser for this site)</p></noscript> <noscript><p>(...if nothing happens please check that JavaScript is working on your browser for this site)</p></noscript>
@ -71,7 +75,7 @@
scriptBox.innerHTML += ` scriptBox.innerHTML += `
<h3> <h3>
<a href="${scriptHome}">${scriptName}</a> <a href="${scriptHome}">${scriptName}</a>
<span><small><small>Updated ${scriptUpdated}</small></small></span> <span><small><small><i>Updated ${scriptUpdated}</i></small></small></span>
<button onclick="location = '${scriptLocation}';"><big>Install</big></button> <button onclick="location = '${scriptLocation}';"><big>Install</big></button>
</h3> </h3>
<p><small>${scriptAbout}</small></p> <p><small>${scriptAbout}</small></p>
@ -103,7 +107,7 @@
var scriptAbout = doc.querySelector('section#script-info > header > p#script-description').textContent; var scriptAbout = doc.querySelector('section#script-info > header > p#script-description').textContent;
scriptBox.querySelector('a').textContent = scriptName; scriptBox.querySelector('a').textContent = scriptName;
scriptBox.querySelector('p').innerHTML = `<small>${scriptAbout}</small>`; scriptBox.querySelector('p').innerHTML = `<small>${scriptAbout}</small>`;
scriptBox.querySelector('span').innerHTML = `<small><small>v${scriptVersion}, Updated ${scriptUpdated}</small></small>`; scriptBox.querySelector('span').innerHTML = `<small><small><i>v${scriptVersion}, Updated ${scriptUpdated}</i></small></small>`;
var detailsElem = document.createElement('details'); var detailsElem = document.createElement('details');
detailsElem.style = 'text-align: initial;'; detailsElem.style = 'text-align: initial;';
detailsElem.innerHTML = doc.querySelector('section#script-info > div#script-content > div#additional-info').innerHTML; detailsElem.innerHTML = doc.querySelector('section#script-info > div#script-content > div#additional-info').innerHTML;