66 lines
5.5 KiB
JavaScript
66 lines
5.5 KiB
JavaScript
/* Small iframe browser. Cross-origin pages decide whether they allow embedding. */
|
|
(() => {
|
|
const HOME = 'https://www.google.com/webhp?igu=1';
|
|
const pages = [HOME];
|
|
let position = 0;
|
|
const t = key => LifeI18n.t(`browser.${key}`);
|
|
const container = () => document.querySelector('#content-browser');
|
|
const current = () => pages[position];
|
|
|
|
function address(value) {
|
|
const input = String(value || '').trim();
|
|
if (!input) return HOME;
|
|
if (/^[a-z][a-z\d+.-]*:/i.test(input) && !/^https?:\/\//i.test(input)) return null;
|
|
let url;
|
|
try {
|
|
if (/^https?:\/\//i.test(input)) url = new URL(input);
|
|
else if (/^[^\s/]+\.[^\s]+/.test(input)) url = new URL(`https://${input}`);
|
|
else return `https://www.google.com/search?igu=1&q=${encodeURIComponent(input)}`;
|
|
} catch { return null; }
|
|
if (!['http:', 'https:'].includes(url.protocol) || !url.hostname) return null;
|
|
if (url.protocol === 'http:') url.protocol = 'https:';
|
|
if (['google.com', 'www.google.com'].includes(url.hostname.toLowerCase())) {
|
|
if (url.pathname === '/') url.pathname = '/webhp';
|
|
if (['/webhp', '/search'].includes(url.pathname)) url.searchParams.set('igu', '1');
|
|
}
|
|
return url.href;
|
|
}
|
|
|
|
function updateChrome(node, navigate = false) {
|
|
const frame = node.querySelector('iframe'), input = node.querySelector('.browser-address');
|
|
if (!frame) return;
|
|
if (navigate || !frame.getAttribute('src')) frame.src = current();
|
|
if (input && document.activeElement !== input) input.value = current();
|
|
node.querySelector('[data-action="back"]').disabled = position === 0;
|
|
node.querySelector('[data-action="forward"]').disabled = position === pages.length - 1;
|
|
node.querySelector('.browser-external').href = current();
|
|
node.querySelector('.browser-hint-link').href = current();
|
|
}
|
|
|
|
function go(value) {
|
|
const url = address(value);
|
|
if (!url) { toast(t('invalid')); return; }
|
|
if (url !== current()) { pages.splice(position + 1); pages.push(url); position = pages.length - 1; }
|
|
const node = container(); if (node) updateChrome(node, true);
|
|
}
|
|
|
|
window.browserApp = node => {
|
|
if (node.querySelector('.browser-shell') && node.dataset.browserLocale === lang()) { updateChrome(node); return; }
|
|
node.dataset.browserLocale = lang();
|
|
node.innerHTML = `<div class="browser-shell"><form class="browser-toolbar"><button type="button" data-action="back" aria-label="${t('back')}" title="${t('back')}">←</button><button type="button" data-action="forward" aria-label="${t('forward')}" title="${t('forward')}">→</button><button type="button" data-action="reload" aria-label="${t('reload')}" title="${t('reload')}">↻</button><label class="sr-only" for="browser-address">${t('address')}</label><input id="browser-address" class="browser-address" type="text" inputmode="url" autocomplete="off" spellcheck="false" aria-label="${t('address')}" placeholder="${t('placeholder')}"><button type="submit" class="browser-go">${t('go')}</button><a class="browser-external" target="_blank" rel="noopener noreferrer" aria-label="${t('external')}" title="${t('external')}">↗</a></form><div class="browser-frame-wrap"><iframe title="${t('frame')}" referrerpolicy="no-referrer" sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe></div><p class="browser-hint">${t('embedHint')} <a class="browser-hint-link" target="_blank" rel="noopener noreferrer">${t('external')}</a></p></div>`;
|
|
const toolbar = node.querySelector('.browser-toolbar');
|
|
toolbar.addEventListener('submit', event => { event.preventDefault(); go(node.querySelector('.browser-address').value); });
|
|
toolbar.addEventListener('click', event => {
|
|
const action = event.target.closest('[data-action]')?.dataset.action;
|
|
if (action === 'back' && position > 0) { position--; updateChrome(node, true); }
|
|
if (action === 'forward' && position < pages.length - 1) { position++; updateChrome(node, true); }
|
|
if (action === 'reload') updateChrome(node, true);
|
|
});
|
|
updateChrome(node, true);
|
|
};
|
|
|
|
const style = document.createElement('style');
|
|
style.textContent = `#content-browser{padding:0;overflow:hidden}.browser-shell{height:100%;min-height:0;display:flex;flex-direction:column}.browser-toolbar{display:flex;align-items:center;gap:6px;padding:10px;background:var(--panel);border-bottom:1px solid var(--line)}.browser-toolbar button,.browser-external{flex:none;display:grid;place-items:center;min-width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--ink);text-decoration:none;font-size:18px}.browser-toolbar button:disabled{opacity:.38;cursor:default}.browser-toolbar .browser-go{font-size:12px;padding:0 11px;background:var(--accent);color:var(--bg);border-color:var(--accent)}.browser-address{flex:1;min-width:0;height:36px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--ink);padding:0 11px;font:13px Manrope,system-ui;outline:none}.browser-address:focus{border-color:var(--accent)}.browser-frame-wrap{flex:1;min-height:0;background:#fff}.browser-frame-wrap iframe{display:block;width:100%;height:100%;border:0}.browser-hint{margin:0;padding:7px 12px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.4}.browser-hint a{color:var(--accent)}@media(max-width:650px){.browser-toolbar{gap:4px;padding:8px}.browser-toolbar button,.browser-external{min-width:30px;height:32px}.browser-address{font-size:12px}.browser-hint{padding:7px 9px;font-size:11px}}`;
|
|
document.head.append(style);
|
|
})();
|