Add wait spinner

css/main.css

@@ -87,6 +87,14 @@ body {
 	background-position: 0 0;
 }
 
+.icon-spinner {
+	background-image: url("../img/ajax-loader.gif");
+	width: 43px;
+	height: 11px;
+	background-position: 0 0;
+	margin: 13px 15px 0;
+}
+
 .ui-layout-toggler-north {
 	margin-top: -3px !important;
 	height: 18px !important;

index.html

@@ -70,9 +70,10 @@
 							title="Delete the current file locally" data-toggle="modal"
 							data-target="#modal-remove-file-confirm"><i
 								class="icon-trash"></i> Remove file</a></li>
-                        <li class="divider"></li>
-						<li><a class="action-upload-gdrive" href="javascript: void(0)"><i
-								class="icon-gdrive"></i> Save on Google Drive</a></li>
+						<li class="divider"></li>
+						<li><a class="action-upload-gdrive"
+							href="javascript: void(0)"><i class="icon-gdrive"></i> Save
+								on Google Drive</a></li>
 						<li class="divider"></li>
 						<li><a href="javascript: void(0)"
 							title="Modify your preferences" data-toggle="modal"
@@ -81,8 +82,10 @@
 					</ul></li>
 			</ul>
 			<ul class="nav pull-right">
+				<li><i class="file-sync-indicator icon-spinner hide"></i></li>
 				<li><a class="brand" id="file-title" href="javascript: void(0)"
-					title="Rename the current file"><span class="file-title"></span></a></li>
+					title="Rename the current file"><span class="file-title"></span>
+				</a></li>
 				<li class="navbar-form"><input id="file-title-input"
 					type="text" class="span3 hide" placeholder="File title" /></li>
 			</ul>
@@ -123,20 +126,18 @@
 				<dd>
 					<label class="radio"> <input type="radio"
 						name="radio-layout-orientation"
-						id="radio-layout-orientation-horizontal">
-						Horizontal
+						id="radio-layout-orientation-horizontal"> Horizontal
 					</label> <label class="radio"> <input type="radio"
 						name="radio-layout-orientation"
-						id="radio-layout-orientation-vertical">
-						Vertical
+						id="radio-layout-orientation-vertical"> Vertical
 					</label>
 				</dd>
 			</dl>
 		</div>
 		<div class="modal-footer">
-			<a href="javascript: void(0)" class="btn action-load-settings" data-dismiss="modal">Cancel</a>
-			<a href="javascript: void(0)" class="btn btn-primary action-apply-settings"
-				data-dismiss="modal">OK</a>
+			<a href="javascript: void(0)" class="btn action-load-settings"
+				data-dismiss="modal">Cancel</a> <a href="javascript: void(0)"
+				class="btn btn-primary action-apply-settings" data-dismiss="modal">OK</a>
 		</div>
 	</div>
 </body>

js/gdrive.js

@@ -9,27 +9,37 @@ var gdrive = (function() {
 	var gdrive = {};
 
 	function askAuth(immediate, callback) {
-		gapi.auth.authorize({ 'client_id' : CLIENT_ID, 'scope' : SCOPES,
-			'immediate' : immediate }, function(authResult) {
-			if (authResult && !authResult.error) {
-				// $("#drive-link").hide();
-				gapi.client.load('drive', 'v2', function() {
-					driveEnabled = true;
-					callback();
-				});
-			}
-		});
+		if (!driveEnabled) {
+			gapi.auth.authorize({ 'client_id' : CLIENT_ID, 'scope' : SCOPES,
+				'immediate' : immediate }, function(authResult) {
+				if (authResult && !authResult.error) {
+					// $("#drive-link").hide();
+					gapi.client.load('drive', 'v2', function() {
+						driveEnabled = true;
+						callback();
+					});
+				}
+			});
+		}
 	}
 
-	function createFile(title, content, folderId, callback) {
+	function uploadFile(fileId, parentId, title, content, callback) {
 		var boundary = '-------314159265358979323846';
 		var delimiter = "\r\n--" + boundary + "\r\n";
 		var close_delim = "\r\n--" + boundary + "--";
 
 		var contentType = 'text/x-markdown';
 		var metadata = { title : title, mimeType : contentType };
-		if (folderId) {
-			metadata.parents = [ { kind : 'drive#fileLink', id : folderId } ];
+		if (parentId) {
+			// Specify the directory
+			metadata.parents = [ { kind : 'drive#fileLink', id : parentId } ];
+		}
+		var path = '/upload/drive/v2/files';
+		var method = 'POST';
+		if (fileId) {
+			// If it's an update
+			path += fileId;
+			method = 'PUT';
 		}
 
 		var base64Data = btoa(content);
@@ -40,8 +50,8 @@ var gdrive = (function() {
 			+ '\r\n' + base64Data + close_delim;
 
 		var request = gapi.client.request({
-			'path' : '/upload/drive/v2/files',
-			'method' : 'POST',
+			'path' : path,
+			'method' : method,
 			'params' : { 'uploadType' : 'multipart', },
 			'headers' : { 'Content-Type' : 'multipart/mixed; boundary="'
 				+ boundary + '"', }, 'body' : multipartRequestBody, });
@@ -59,8 +69,9 @@ var gdrive = (function() {
 				var state = JSON.parse(decodeURI((/state=(.+?)(&|$)/
 					.exec(location.search) || [ , null ])[1]));
 				if (state.action == 'create') {
-					createFile(fileManager.currentFile, fileManager.content,
-						state.folderId, function(file) {
+					uploadFile(undefined, state.folderId,
+						fileManager.currentFile, fileManager.content, function(
+							file) {
 							console.log(file);
 						});
 				}
@@ -69,19 +80,17 @@ var gdrive = (function() {
 		});
 	};
 
-	gdrive.createFile = function(title, content) {
-		var callback = function() {
-			createFile(title, content, undefined, function(file) {
-				console.log(file);
-			});
-		};
-		if(!driveEnabled) {
-			askAuth(false, callback);
-		}
-		else {
-			callback();
-		}
+	gdrive.createFile = function(title, content, callback) {
+		askAuth(false, function() {
+			uploadFile(undefined, undefined, title, content, callback);
+		});
 	};
 
+	gdrive.updateFile = function(id, title, content, callback) {
+		askAuth(false, function() {
+			uploadFile(id, undefined, title, content, callback);
+		});
+	};
+	
 	return gdrive;
 })();

js/main.js

@@ -36,10 +36,14 @@ var fileManager = (function($) {
 			fileManager.updateFileTitleUI();
 		});
 		$(".action-upload-gdrive").click(function() {
+			$(".file-sync-indicator").removeClass("hide");
 			var fileIndex = localStorage["file.current"];
 			var content = localStorage[fileIndex + ".content"];
 			var title = localStorage[fileIndex + ".title"];
-			gdrive.createFile(title, content);
+			gdrive.createFile(title, content, function(file) {
+				$(".file-sync-indicator").addClass("hide");
+				console.log(file);
+			});
 		});
 	};