Add uploading to Imgur (#52)

index.html

@@ -10,20 +10,20 @@
 			(function(){
 				var default_theme = "classic.css";
 				var theme_storage_key = "jspaint theme";
-				
+
 				var href_for = function(theme){
 					return "styles/themes/" + theme;
 				};
 				try{
 					var current_theme = localStorage[theme_storage_key];
 				}catch(e){}
-				
+
 				current_theme = current_theme || default_theme;
 				document.write('<link rel="stylesheet" type="text/css" href="' + href_for(current_theme) + '" id="theme-link" />');
-				
+
 				var theme_link = document.getElementById("theme-link");
 				var theme_style = document.createElement("style");
-				
+
 				self.set_theme = function(theme){
 					current_theme = theme;
 					var can_probably_refresh_to_switch = true;
@@ -94,6 +94,7 @@
 		<script src="src/tools.js"></script>
 		<script src="src/functions.js"></script>
 		<script src="src/manage-storage.js"></script>
+		<script src="src/imgur.js"></script>
 		<script src="src/help.js"></script>
 		<script src="src/app.js"></script>
 		<script src="src/menus.js"></script>

src/imgur.js

@@ -0,0 +1,52 @@
+var $imgur_window;
+
+function upload_to_imgur(){
+  if($imgur_window){
+    $imgur_window.close();
+  }
+  $imgur_window = $FormWindow().title("Upload To Imgur").addClass("dialogue-window");
+  $imgur_window.$main.html(
+    "<label>URL: </label>" +
+    "<label id='imgur-description'>Click to upload</label>" +
+    "<a id='imgur-url' href='' target='_blank'></a>"
+  );
+
+  var $imgur_url = $imgur_window.$main.find("#imgur-url");
+  var $imgur_description = $imgur_window.$main.find("#imgur-description");
+
+  $imgur_window.$Button("Upload", function(){
+    // base64 encoding to send to imgur api
+    var base64 = canvas.toDataURL().split(",")[1];
+    var payload = {
+      image: base64,
+    };
+
+    // send ajax call to the imgur image upload api
+    $.ajax({
+      type: "POST",
+      url: "https://api.imgur.com/3/image",
+      headers: {
+        "Authorization":"Client-ID 203da2f300125a1",
+      },
+      dataType: 'json',
+      data: payload,
+      beforeSend: function(){
+        $imgur_description.text("Loading...");
+      },
+      success: function(data){
+        var url = data.data.link;
+        $imgur_description.text("");
+        $imgur_url.text(url);
+        $imgur_url.attr('href', url);
+      },
+      error: function(error){
+        $imgur_description.text("Error uploading image :(");
+      },
+    })
+  });
+  $imgur_window.$Button("Cancel", function(){
+    $imgur_window.close();
+  });
+  $imgur_window.width(300);
+  $imgur_window.center();
+}

src/menus.js

@@ -32,6 +32,17 @@ var menus = {
 			action: file_save_as,
 			description: "Saves the active document with a new name.",
 		},
+		{
+			item: "Upload To &Imgur",
+			action: upload_to_imgur,
+			description: "Uploads the active document to Imgur",
+		},
+		$MenuBar.DIVIDER,
+		{
+			item: "Manage Storage",
+			action: manage_storage,
+			description: "Manages storage of previously created or opened pictures.",
+		},
 		$MenuBar.DIVIDER,
 		{
 			item: "Print Pre&view",
@@ -69,12 +80,6 @@ var menus = {
 			description: "Centers this bitmap as the desktop background.",
 		},
 		$MenuBar.DIVIDER,
-		{
-			item: "Manage Storage",
-			action: manage_storage,
-			description: "Manages storage of previously created or opened pictures.",
-		},
-		$MenuBar.DIVIDER,
 		{
 			item: "Recent File",
 			enabled: false, // @TODO for chrome app
@@ -326,7 +331,7 @@ var menus = {
 						"opaque": "transparent",
 						"transparent": "opaque",
 					}[transparent_opaque];
-					
+
 					$G.trigger("option-changed");
 				},
 				check: function(){