Keep "#load:" in URL until "change" event

Also move the error message for loading from a URL into a separate window, and add info about CORS

src/$Window.js

@@ -21,6 +21,8 @@ function $Window($component){
 		e.preventDefault();
 	});
 	
+	// TODO: prevent selection *outside* of the window *via* the window
+
 	$w.css({
 		position: "absolute",
 		zIndex: $Window.Z_INDEX++

src/functions.js

@@ -67,6 +67,8 @@ function get_FileList(callback){
 
 function open_from_Image(img, callback, canceled){
 	are_you_sure(function(){
+		// TODO: shouldn't open_from_* start a new session?
+
 		this_ones_a_frame_changer();
 		
 		reset_file();
@@ -192,27 +194,16 @@ function file_load_from_url(){
 	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)
+	// TODO: URL validation (input has to be in a form (and we don't want the form to submit))
+	$w.$main.html("<label>URL: <input type='url' required value='' class='url-input'/></label>");
 	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();
-			}
-		});
+		$w.close();
+		// TODO: retry loading if same URL entered
+		// actually, make it change the hash only after loading successfully
+		// (but still load from the hash when necessary)
+		// make sure it doesn't overwrite the old session before switching
+		location.hash = "load:" + encodeURIComponent($input.val());
 	}).focus();
 	$w.$Button("Cancel", function(){
 		$w.close();
@@ -291,7 +282,8 @@ function are_you_sure(action, canceled){
 function show_error_message(message, error){
 	$w = $FormWindow().title("Error").addClass("dialogue-window");
 	$w.$main.text(message);
-	$(E("pre"))
+	if(error){
+		$(E("pre"))
 		.appendTo($w.$main)
 		.text(error.stack || error.toString())
 		.css({
@@ -303,13 +295,15 @@ function show_error_message(message, error){
 			width: "500px",
 			overflow: "auto",
 		});
+	}
 	$w.$Button("OK", function(){
 		$w.close();
 	});
+	$w.center();
 	console.error(message, error);
 }
 
-
+// TODO: split out paste_image and make paste_uri
 function paste_file(blob){
 	var reader = new FileReader();
 	reader.onload = function(e){

src/sessions.js

@@ -372,16 +372,52 @@
 					current_session = new FireSession(session_id);
 				}
 			}
+		}else if(load_from_url_match){
+			var url = decodeURIComponent(load_from_url_match[2]);
+			var hash_loading_url_from = location.hash;
+			
+			end_current_session();
+
+			open_from_URI(url, function(err){
+				if(err){
+					// NOTE: err doesn't give us a useful message; apparently distinguishing cross-origin errors is disallowed
+					var $w = $FormWindow().title("Error").addClass("dialogue-window");
+					$w.$main.html(
+						"<p>Failed to load image.</p>" +
+						"<p>Make sure to use an image host that supports " +
+						"<a href='https://en.wikipedia.org/wiki/Cross-origin_resource_sharing'>Cross-Origin Resource Sharing</a>" +
+						", such as <a href='https://imgur.com/'>Imgur</a>."
+					);
+					$w.$main.css({maxWidth: "500px"});
+					$w.$Button("OK", function(){
+						$w.close();
+					});
+					$w.center();
+					// TODO: close are_you_sure windows and these Error windows when switching sessions
+					// because things can get confusing
+				}
+				// NOTE: the following is intended to run regardless of error (as opposed to returning if there's an error)
+				// FIXME: race condition (make the timeout long and try to fix it with a flag or something )
+				setTimeout(function(){
+					// NOTE: this "change" event doesn't *guarantee* there was a change :/
+					// let alone that there was a user interaction with the currently loaded document
+					// that is, it also triggers for session changes, which I'm trying to avoid here
+					$canvas.one("change", function(){
+						if(location.hash === hash_loading_url_from){
+							debug("switching to new session from #load: URL because of user interaction");
+							end_current_session();
+							var session_id = (Math.random()*Math.pow(2, 32)).toString(16);
+							location.hash = "local:" + session_id;
+						}
+					});
+				}, 100);
+			});
+
 		}else{
 			debug("no session id in hash");
 			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

@@ -338,12 +338,6 @@ html, body, .jspaint {
 	margin: 5px;
 }
 
-.window-content .error {
-	padding: 5px 0;
-	min-height: 1.2em;
-	line-height: 1.2em;
-}
-
 ::before, ::after {
 	pointer-events: none;
 }