Merge pull request #74 from Flow-Works/dev

Update v1.0.10-beta

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "flow-os",
-	"version": "1.0.9-beta",
+	"version": "1.0.10-beta",
 	"description": "The customizable webOS.",
 	"keywords": [
 		"tomp",

public/builtin/apps/browser/browser.js

@@ -0,0 +1,187 @@
+/* eslint-env browser */
+
+import { config } from '../../../scripts/managers.js';
+import { removeObjectWithId } from '../../../scripts/utilities.js';
+import { TabManager, HistoryManager } from './managers.js';
+
+const input = document.querySelector('input');
+
+let id = 0;
+const tabs = [], proxyConfig = parent.currentProxy;
+window.clickList = [];
+
+const tm = new TabManager();
+const history = new HistoryManager();
+
+export class Tab {
+	constructor() {
+		id++;
+		const _id = id;
+
+		const div = document.createElement('div');
+		const titleBtn = document.createElement('a');
+		const closeBtn = document.createElement('a');
+		const img = document.createElement('img');
+
+		titleBtn.id = id;
+		titleBtn.innerText = 'Loading... ';
+		titleBtn.href = '#';
+
+		closeBtn.innerText = '[x]';
+		closeBtn.href = '#';
+
+		img.width = '18';
+		img.height = '18';
+		img.src = '/assets/loading.gif';
+
+		const iframe = this.#createIFrame(titleBtn, img);
+
+		tabs.push({ iframe, id: _id });
+
+		titleBtn.onclick = () => {
+			tm.setActiveTab(iframe);
+		};
+
+		closeBtn.onclick = () => {
+			iframe.remove();
+			div.remove();
+
+			removeObjectWithId(tabs, _id);
+
+			if (tabs.includes(window.clickList.at(-1))) {
+				tm.setActiveTab(window.clickList.at(-1));
+			} else if (tabs.at(-1)) {
+				tm.setActiveTab(tabs.at(-1));
+			} else {
+				new Tab();
+			}
+		};
+
+		div.appendChild(img);
+		div.appendChild(titleBtn);
+		div.appendChild(closeBtn);
+
+		document.querySelector('.tabs').append(div);
+		document.querySelector('main').append(iframe);
+
+		tm.setActiveTab(iframe);
+	}
+
+	/**
+	 * Creates an iFrame for a tab
+	 * @param {HTMLAnchorElement} titleBtn
+	 * @param {HTMLImageElement} img
+	 * @returns {HTMLIFrameElement}
+	 */
+	#createIFrame = (titleBtn, img) => {
+		const iframe = document.createElement('iframe');
+		iframe.src = proxyConfig.prefix + proxyConfig.encodeUrl(config.settings.get('search').url);
+		iframe.id = id;
+		iframe.onload = () => {
+			this.#handleTab(iframe, titleBtn, img);
+		};
+		return iframe;
+	};
+
+	/**
+ 	 * Handles the iFrame onLoad event
+ 	 * @param {HTMLIFrameElement} tab
+ 	 * @param {HTMLAnchorElement} titleBtn
+ 	 * @param {HTMLImageElement} img
+ 	 * @returns {void}
+ 	 */
+	#handleTab = (iframe, titleBtn, img) => {
+		const open = false;
+		const url = proxyConfig.decodeUrl(new URL(iframe.contentWindow.location).pathname.replace(/\/uv\/service\//g, ''));
+
+		if (iframe.contentWindow.location.pathname.startsWith('/builtin/browser')) {
+			input.value = 'flow://' + url.split('/').pop().split('.')[0];
+		} else {
+			input.value = url;
+			history.add(iframe.contentWindow.location.href, iframe.contentDocument.title, `https://s2.googleusercontent.com/s2/favicons?domain_url=${url}`);
+		}
+		titleBtn.innerText = `${iframe.contentDocument.title} `;
+		img.src = `https://s2.googleusercontent.com/s2/favicons?domain_url=${url}`;
+
+		config.settings.get('search').urls.forEach((url) => {
+			this.#injectJS(iframe, url, false, () => {});
+		});
+
+		this.#injectJS(iframe, 'https://cdn.jsdelivr.net/npm/eruda', true, () => {
+			this.#injectJS(iframe, 'https://cdn.jsdelivr.net/npm/eruda-code', true, () => {
+				iframe.contentWindow.eruda.add(iframe.contentWindow.erudaCode);
+			});
+
+			iframe.contentWindow.eruda.init({ tool: ['console', 'elements', 'code', 'sources'] });
+			iframe.contentWindow.eruda._entryBtn.hide();
+
+			document.querySelector('.eruda').onclick = () => {
+				if (open == false) {
+					iframe.contentWindow.eruda.show();
+				} else {
+					iframe.contentWindow.eruda.hide();
+				}
+
+				open = !open;
+			};
+		});
+
+		document.querySelector('.block').onclick = () => {
+			this.#blockElement(iframe);
+		};
+	};
+
+	/**
+ 	 * Injects JS code into the iFrame
+ 	 * @param {HTMLIFrameElement} iframe
+ 	 * @param {string} FILE_URL
+ 	 * @param {boolean} async
+ 	 * @param {function} callback
+ 	 * @returns {Event}
+ 	 */
+	#injectJS = (iframe, FILE_URL, async = true, callback) => {
+		const scriptEle = document.createElement('script');
+
+		scriptEle.setAttribute('src', FILE_URL);
+		scriptEle.setAttribute('defer', async);
+
+		iframe.contentDocument.body.appendChild(scriptEle);
+
+		scriptEle.addEventListener('load', (e) => {
+			callback(e);
+		});
+
+		scriptEle.addEventListener('error', (e) => {
+			console.error(e, FILE_URL);
+		});
+	};
+
+	/**
+ 	 * Injects the block element script into iFrame
+ 	 * @param {HTMLIFrameElement} iframe
+ 	 * @returns {void}
+ 	 */
+	#blockElement = (iframe) => {
+		const cursor = (cur) => { iframe.contentDocument.body.style.cursor = cur; };
+
+		for (const element of iframe.contentDocument.getElementsByTagName('a')) {
+			(element).style.pointerEvents = 'none';
+		}
+
+		const handler = (e) => {
+			e = e || window.event;
+			const target = e.target || e.srcElement;
+			target.style.display = 'none';
+
+			iframe.contentDocument.removeEventListener('click', handler, false);
+			cursor('default');
+
+			for (const element of iframe.contentDocument.getElementsByTagName('a')) {
+			(element).style.pointerEvents = 'initial';
+			}
+		};
+
+		iframe.contentDocument.addEventListener('click', handler, false);
+		cursor('crosshair');
+	};
+}

public/builtin/apps/browser.html → public/builtin/apps/browser/index.html

@@ -6,7 +6,7 @@
 		<link rel="stylesheet" href="/styles/style.css" />
 		<link rel="stylesheet" href="/styles/window.css" />
 
-		<link rel="stylesheet" href="/builtin/apps/styles/browser.css" />
+		<link rel="stylesheet" href="./style.css" />
 		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 	</head>
 
@@ -55,6 +55,6 @@
 		<main></main>
 
 		<script src="/scripts/app.js" defer type="module"></script>
-		<script src="/builtin/apps/scripts/browser.js" defer type="module"></script>
+		<script src="./index.js" defer type="module"></script>
 	</body>
 </html>

public/builtin/apps/browser/index.js

@@ -0,0 +1,69 @@
+
+/* eslint-env browser */
+
+import { Tab } from './browser.js';
+
+const proxyConfig = parent.currentProxy;
+
+const input = document.querySelector('input');
+const dropdownBtn = document.querySelector('.more');
+const dropdownMenu = document.getElementById('dropdown');
+
+let inputShowing = true;
+
+/**
+ * Creates a new tab
+ * @returns {Tab}
+ */
+window.newTab = () => new Tab();
+
+/**
+ * Toggles the options dropdown
+ * @returns {boolean}
+ */
+window.toggleDropdown = () => dropdownMenu.classList.toggle('show');
+
+document.querySelector('.hide').onclick = () => {
+	switch (inputShowing) {
+		case true:
+			document.querySelector('.hide').innerText = 'expand_more';
+			document.querySelector('.tb').style.display = 'none';
+			break;
+		case false:
+			document.querySelector('.hide').innerText = 'expand_less';
+			document.querySelector('.tb').style.display = 'flex';
+			break;
+	}
+
+	inputShowing = !inputShowing;
+};
+
+dropdownBtn.addEventListener('click', (e) => {
+	e.stopPropagation();
+	window.toggleDropdown();
+});
+
+document.documentElement.addEventListener('click', () => {
+	if (dropdownMenu.classList.contains('show')) {
+		window.toggleDropdown();
+	}
+});
+
+input.onkeydown = (e) => {
+	if (e.key == 'Enter') {
+		if (input.value.startsWith('flow:')) {
+			window.clickList[0].src = '/builtin/browser/' + input.value.split('://')[1] + '.html';
+		} else {
+			let inputValue = input.value;
+
+if (!inputValue.startsWith('http://') && !inputValue.startsWith('https://')) {
+    inputValue = 'http://' + inputValue;
+}
+			window.clickList[0].src = proxyConfig.prefix + proxyConfig.encodeUrl(inputValue);
+		}
+	}
+};
+
+window.onload = () => {
+	new Tab();
+};

public/builtin/apps/browser/managers.js

@@ -0,0 +1,57 @@
+/* eslint-env browser */
+
+const input = document.querySelector('input');
+
+const proxyConfig = parent.currentProxy;
+
+export class HistoryManager {
+	constructor() {
+        if (!window.localStorage.getItem('history')) { window.localStorage.setItem('history', '[]'); }
+    }
+
+	/**
+	 * Adds a URL to the history
+	 * @param {string} url
+	 * @param {string} title
+	 * @param {string} favicon
+	 * @returns {Array}
+	 */
+	add = (url, title, favicon) => {
+		return window.localStorage.setItem('history', JSON.stringify([{ url, title, favicon, date: new Date() }, ...this.get()]));
+	};
+
+	/**
+	 * Gets the history
+	 * @returns {Array}
+	 */
+	get = () => JSON.parse(window.localStorage.getItem('history'));
+}
+
+export class TabManager {
+	constructor() {
+		document.querySelector('.tabs').addEventListener('wheel', (evt) => {
+			evt.preventDefault();
+			document.querySelector('.tabs').scrollLeft += evt.deltaY;
+		});
+	}
+
+	/**
+	 * Sets the active tab
+	 * @param {HTMLIFrameElement} iframe
+	 * @returns {void}
+	 */
+	setActiveTab = (iframe) => {
+		window.clickList.push(iframe);
+
+		if (!iframe && window.clickList[0] !== window.clickList[1]) {
+			return;
+		}
+
+		try { input.value = proxyConfig.decodeUrl(new URL(iframe.contentWindow.location).pathname.replace(/\/uv\/service\//g, '')); }
+		catch(e) {};
+		iframe.style.display = 'block';
+		if (window.clickList.length > 1) {
+			window.clickList.at(-2).style.display = 'none';
+		}
+	};
+}