Add Load From URL

TODO.md

@@ -34,6 +34,7 @@
 
 * Warning sign for "Save changes to X?" dialogue
 * Error symbol for error message dialogues
+* 3D inset border for inputs
 * The window close button uses text; font rendering is not consistent
 * The progress bar (Rendering GIF) is left native
 * Menu separator spacing
@@ -43,6 +44,7 @@
 	* Inverty fill bucket and airbrush cursors
 	* Previewy brush and eraser cursors
 * Custom cursors in Edge; apparently they require `.cur` files? ugh
+* The canvas-area's border is different in Firefox and Edge from Chrome
 
 
 ### Issues

src/functions.js

@@ -83,6 +83,7 @@ function open_from_Image(img, callback, canceled){
 }
 function open_from_URI(uri, callback, canceled){
 	var img = new Image();
+	img.crossOrigin = "Anonymous";
 	img.onload = function(){
 		if(!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0){
             return callback() && callback(new Error("Image failed to load; naturalWidth == " + this.naturalWidth));
@@ -183,6 +184,43 @@ function file_open(){
 	}
 }
 
+var $file_load_from_url_window;
+function file_load_from_url(){
+	if($file_load_from_url_window){
+		$file_load_from_url_window.close();
+	}
+	var $w = new $FormWindow().addClass("dialogue-window");
+	$file_load_from_url_window = $w;
+	$w.title("Load from URL");
+	$w.$main.html("<label>URL: <input type='url' value='' class='url-input'/></label>");
+	var $error = $("<div class='error'></div>").appendTo($w.$main)
+	var $input = $w.$main.find(".url-input");
+	$input.on("change input", function(){
+		$error.text("");
+	});
+	$w.$Button("Load", function(){
+		// TODO: make $error into $load_status and indicate loading?
+		open_from_URI($input.val(), function(err){
+			// $w.close();
+			// if(err){
+			// 	this doesn't give a helpful message, and apparently we can't distinguish cross-origin errors:
+			// 	show_error_message("Failed to load an image from the given URL:", err);
+			// }
+			if(err){
+				$error.text("Failed to load the image.");
+				console.log("open_from_URI failed:", err);
+			}else{
+				$w.close();
+			}
+		});
+	}).focus();
+	$w.$Button("Cancel", function(){
+		$w.close();
+	});
+	$w.center();
+	$input.focus();
+}
+
 function file_save(){
 	if(file_name.match(/\.svg$/)){
 		file_name = file_name.replace(/\.svg$/, "") + ".png";

src/menus.js

@@ -13,6 +13,12 @@ var menus = {
 			action: file_open,
 			description: "Opens an existing document.",
 		},
+		{
+			item: "&Load From URL",
+			// shortcut: "Ctrl+L",
+			action: file_load_from_url,
+			description: "Opens an image from the web.",
+		},
 		{
 			item: "&Save",
 			shortcut: "Ctrl+S",

src/sessions.js

@@ -339,10 +339,16 @@
 		}
 	};
 	$G.on("hashchange", function(){
-		var match = location.hash.match(/^#?(session|local):(.*)$/i);
-		if(match){
-			var local = match[1] === "local";
-			var session_id = match[2];
+		// TODO: should load: be separate from session:/local:
+		// and be able to load *into* a session, rather than just start one?
+		// well I guess loading into a session wouldn't be that helpful if it makes a new image anyways
+		// but it would be useful for collaborative sessions if collaborative sessions actually worked well enough to be useful
+		// well, but you can paste images too, so you could just do that
+		var session_match = location.hash.match(/^#?(session|local):(.*)$/i);
+		var load_from_url_match = location.hash.match(/^#?(load):(.*)$/i);
+		if(session_match){
+			var local = session_match[1] === "local";
+			var session_id = session_match[2];
 			if(session_id === ""){
 				debug("invalid session id; session id cannot be empty");
 				end_current_session();
@@ -371,6 +377,11 @@
 			end_current_session();
 			var session_id = (Math.random()*Math.pow(2, 32)).toString(16);
 			location.hash = "local:" + session_id;
+			// TODO: for "load:" URLs, don't change the URL to "local:" until a change is made
+			if(load_from_url_match){
+				var url = decodeURIComponent(load_from_url_match[2]);
+				open_from_URI(url);
+			}
 		}
 	}).triggerHandler("hashchange");
 	

styles/layout.css

@@ -336,7 +336,13 @@ html, body, .jspaint {
 .storage-manager a > img,
 .storage-manager p {
 	margin: 5px;
-} 
+}
+
+.window-content .error {
+	padding: 5px 0;
+	min-height: 1.2em;
+	line-height: 1.2em;
+}
 
 ::before, ::after {
 	pointer-events: none;

styles/themes/classic.css

@@ -214,7 +214,6 @@ button.selected,
 .current-colors {
 	box-sizing: border-box;
 	-moz-box-sizing: border-box;
-	border: 2px inset;
 }
 .color-selection {
 	box-sizing: border-box;
@@ -445,6 +444,15 @@ button:focus {
 	outline-offset: -1px;
 }
 
+input[type=text],
+input[type=url] {
+	/* TODO: fancy 3d inset border (might need a surrounding element because pseudo elements won't work with input) */
+	/* I guess an image border could work; maybe I should be using (svg) image borders for stuff */
+	/* (css inset border style doesn't look good and isn't consistent between browsers) */
+	border: 1px solid gray;
+	background: white;
+	color: black;
+}
 
 ::selection {
 	background-color: #000080;