import and export renamed into upload and download

added top-level buttons, removed file dialog buttons

src/ide/elements/commands.ts

@@ -89,12 +89,6 @@ export let buttons: any = [
 		hotkey: "F8",
 		group: "debug",
 	},
-	/*{
-		click: function() { module.sourcecode.execCommand("findPersistent"); },
-		icon: icons.search,
-		tooltip: "Search",
-		group: "edit",
-	},*/
 ];
 
 function cmd_reset() {
@@ -342,6 +336,57 @@ function cmd_save_as() {
 	);
 }
 
+export function cmd_upload() {
+	let dom_file = tgui.createElement({
+		type: "input",
+		parent: document.body,
+		properties: { type: "file", multiple: "multiple" },
+		events: {
+			change: async (event) => {
+				event.preventDefault();
+				if (!dom_file.files) return;
+				for (let i = 0; i < dom_file.files.length; i++) {
+					let file = dom_file.files[i];
+					let filename = file.name.split(".tscript")[0];
+					let content = await file.text();
+					if (!content) continue;
+					localStorage.setItem("tscript.code." + filename, content); // write or overwrite
+					let ed = ide.collection.getEditor(filename);
+					if (ed) {
+						ide.collection.setActiveEditor(ed);
+						ed.setText(content);
+						ed.focus();
+					} else {
+						openEditorFromLocalStorage(filename);
+					}
+					updateControls();
+				}
+			},
+		},
+	});
+	dom_file.click();
+	dom_file.remove();
+}
+
+export function cmd_download() {
+	const ed = ide.collection.getActiveEditor();
+	if (!ed) return;
+	let filename = ed.properties().name;
+	let content = ed.text();
+
+	let link = tgui.createElement({
+		type: "a",
+		parent: document.body,
+		properties: {
+			href:
+				"data:text/plain;charset=utf-8," + encodeURIComponent(content),
+			download: filename + ".tscript",
+		},
+	});
+	link.click();
+	link.remove();
+}
+
 function isInterpreterBusy() {
 	return (
 		!ide.interpreter ||

src/ide/elements/dialogs.ts

@@ -431,36 +431,6 @@ export function fileDlg(
 			classname: "tgui-modal-button",
 		});
 
-		let importBtn = tgui.createElement({
-			parent: toolbar,
-			type: "button",
-			style: {
-				width: "100px",
-				height: "100%",
-				"margin-right": "10px",
-			},
-			text: "Import",
-			click: () => importFile(),
-			classname: "tgui-modal-button",
-		});
-
-		let exportBtn = tgui.createElement({
-			parent: toolbar,
-			type: "button",
-			style: {
-				width: "100px",
-				height: "100%",
-				"margin-right": "10px",
-			},
-			text: "Export",
-			click: () => exportFile(name.value),
-			classname: "tgui-modal-button",
-		});
-
-		// allow multiple selection: export selected
-		// TODO: allow to export all TScript files at once to a zip file
-		// TODO: allow to export whole TScript local storage
-
 		let status = tgui.createElement({
 			parent: toolbar,
 			type: "label",
@@ -559,59 +529,6 @@ export function fileDlg(
 			});
 		}
 	}
-
-	function download(filename, text, mime = "text/plain") {
-		var element = document.createElement("a");
-		element.setAttribute(
-			"href",
-			"data:" + mime + ";charset=utf-8," + encodeURIComponent(text)
-		);
-		element.setAttribute("download", filename);
-
-		element.style.display = "none";
-		document.body.appendChild(element);
-
-		element.click();
-
-		document.body.removeChild(element);
-	}
-
-	function exportFile(filename) {
-		let data = localStorage.getItem("tscript.code." + filename);
-		if (!filename || !data) return;
-		download(filename + ".tscript", data);
-	}
-
-	function importFile() {
-		let fileImport = document.createElement("input");
-		fileImport.type = "file";
-		fileImport.multiple = true;
-		fileImport.style.display = "none";
-		fileImport.accept = ".tscript";
-
-		fileImport.addEventListener("change", async (event: any) => {
-			if (event.target.files) {
-				for (let file of event.target.files) {
-					let filename = file.name.split(".tscript")[0];
-					if (files.includes(filename)) {
-						/*if(!confirm("Replace file \"" + filename + "\"\nAre you sure?"))
-						{
-							return;
-						}*/
-					}
-					let data = await file.text();
-					localStorage.setItem("tscript.code." + filename, data);
-					if (!files.includes(filename)) {
-						files.push(filename);
-						let option = new Option(filename, filename);
-						list.appendChild(option);
-					}
-				}
-			}
-		});
-
-		fileImport.click();
-	}
 }
 
 export function tabNameDlg(onOkay: (filename: string) => boolean) {

src/ide/elements/index.ts

@@ -8,7 +8,7 @@ import { toClipboard } from "../clipboard";
 import { icons } from "../icons";
 import * as tgui from "../tgui";
 import { tutorial } from "../tutorial";
-import { buttons, cmd_export } from "./commands";
+import { buttons, cmd_upload, cmd_download, cmd_export } from "./commands";
 import { configDlg, loadConfig, saveConfig, options } from "./dialogs";
 import { showdoc, showdocConfirm } from "./show-docs";
 import * as utils from "./utils";
@@ -398,6 +398,21 @@ export function create(container: HTMLElement, options?: any) {
 		classname: "ide ide-toolbar",
 	});
 
+	buttons.push({
+		click: cmd_upload,
+		icon: icons.uploadDocument,
+		tooltip: "Upload document",
+		hotkey: null,
+		group: "export",
+	});
+	buttons.push({
+		click: cmd_download,
+		icon: icons.downloadDocument,
+		tooltip: "Download document",
+		hotkey: null,
+		group: "export",
+	});
+
 	// add the export button on demand
 	if (options["export-button"]) {
 		buttons.push({

src/ide/gen-icons.ts

@@ -27,7 +27,7 @@ function svgIcon(
 	return {
 		width: width,
 		height: height,
-		innerSVG: svg.serialize_childs(),
+		innerSVG: svg.serialize_children(),
 	};
 }
 
@@ -333,6 +333,52 @@ const icons = (function () {
 		draw.endPath();
 	}); //*/
 
+	icons.uploadDocument = svgIcon(20, 20, (draw: SVGDrawingContext) => {
+		let group = draw.group();
+		group.attributes.set("transform", "scale(0.7 0.7) translate(0 7)");
+		let sub = new SVGDrawingContext(group);
+		sub.setStyle("fill: #ec5; stroke: #330");
+		sub.polygon(
+			[2.5, 4.5],
+			[7.5, 4.5],
+			[9.5, 6.5],
+			[15.5, 6.5],
+			[15.5, 15.5],
+			[2.5, 15.5]
+		);
+		sub.setStyle("fill: #fd6; stroke: #330");
+		sub.polygon([5.5, 8.5], [17.5, 8.5], [15.5, 15.5], [3.5, 15.5]);
+
+		draw.setStyle("stroke: #111; fill: #fff");
+		draw.polygon(
+			[14, 15],
+			[14, 7],
+			[12, 7],
+			[16, 1],
+			[20, 7],
+			[18, 7],
+			[18, 15]
+		);
+	});
+
+	icons.downloadDocument = svgIcon(20, 20, (draw: SVGDrawingContext) => {
+		let group = draw.group();
+		group.attributes.set("transform", "scale(0.7 0.7) translate(0 7)");
+		let sub = new SVGDrawingContext(group);
+		draw_icon_floppy_disk(sub);
+
+		draw.setStyle("stroke: #111; fill: #fff");
+		draw.polygon(
+			[14, 1],
+			[14, 9],
+			[12, 9],
+			[16, 15],
+			[20, 9],
+			[18, 9],
+			[18, 1]
+		);
+	});
+
 	icons.export = svgIcon(20, 20, (draw: SVGDrawingContext) => {
 		draw.setClass("icon-green-frame");
 		draw.polygon(

src/ide/icons.ts

@@ -138,6 +138,18 @@ export const icons: { [id: string]: SVGIcon } = {
 		innerSVG:
 			'<path d="M 11.54,11.54 A 5,5 0 0 1 4.46,4.46 A 5,5 0 0 1 11.54,11.54 L 17 17" class="icon-neutral-line" style="stroke-width: 1.5"/>',
 	},
+	uploadDocument: {
+		width: 20,
+		height: 20,
+		innerSVG:
+			'<g transform="scale(0.7 0.7) translate(0 7)"><polygon points="2.5,4.5 7.5,4.5 9.5,6.5 15.5,6.5 15.5,15.5 2.5,15.5" style="fill: #ec5; stroke: #330"/><polygon points="5.5,8.5 17.5,8.5 15.5,15.5 3.5,15.5" style="fill: #fd6; stroke: #330"/></g><polygon points="14,15 14,7 12,7 16,1 20,7 18,7 18,15" style="stroke: #111; fill: #fff"/>',
+	},
+	downloadDocument: {
+		width: 20,
+		height: 20,
+		innerSVG:
+			'<g transform="scale(0.7 0.7) translate(0 7)"><polygon points="3.5,3.5 16.5,3.5 16.5,16.5 5.5,16.5 3.5,14.5" style="stroke: #139; fill: #36d"/><rect x="7" y="11" width="6" height="5" style="stroke: none; fill: #eef"/><rect x="8" y="12" width="2" height="3" style="stroke: none; fill: #36d"/><rect x="6" y="4" width="8" height="5" style="stroke: none; fill: #fff"/></g><polygon points="14,1 14,9 12,9 16,15 20,9 18,9 18,1" style="stroke: #111; fill: #fff"/>',
+	},
 	export: {
 		width: 20,
 		height: 20,

src/ide/svg.ts

@@ -1,22 +1,21 @@
-// This file is considered to be used by 'gen-icons.ts' and
-// would not be part of the output
+// This file is used by 'gen-icons.ts'. It is not included in the output.
 
 class SVGNode {
 	type: string;
 	attributes: Map<string, string>;
-	childs: SVGNode[];
+	children: SVGNode[];
 	constructor(url, type) {
 		// url ignored
 		this.type = type;
 		this.attributes = new Map<string, string>();
-		this.childs = [];
+		this.children = [];
 	}
 	setAttribute(name, value) {
 		this.attributes.set(name, value);
 	}
 
 	appendChild(node: SVGNode) {
-		this.childs.push(node);
+		this.children.push(node);
 	}
 
 	serialize(): string {
@@ -26,17 +25,17 @@ class SVGNode {
 		for (let [name, value] of this.attributes.entries()) {
 			attrs += ` ${name}="${value}"`;
 		}
-		let childs = this.serialize_childs();
-		if (childs) return `<${this.type}${attrs}>${childs}</${this.type}>`;
+		let children = this.serialize_children();
+		if (children) return `<${this.type}${attrs}>${children}</${this.type}>`;
 		else return `<${this.type}${attrs}/>`;
 	}
-	serialize_childs(): string {
+	serialize_children(): string {
 		// like innerHTML
-		let childs = "";
-		for (let child of this.childs) {
-			childs += child.serialize();
+		let children = "";
+		for (let child of this.children) {
+			children += child.serialize();
 		}
-		return childs;
+		return children;
 	}
 }
 
@@ -106,6 +105,12 @@ export class SVGDrawingContext {
 		return this;
 	}
 
+	group(): SVGNode {
+		let el = createSvgElement("g", {});
+		this.addElement(el);
+		return el;
+	}
+
 	rect(
 		x: number,
 		y: number,