From 7df10bb8918b25a8e7f55e94250ebf711cdde1fa Mon Sep 17 00:00:00 2001
From: benweet <benoit.schweblin@gmail.com>
Date: Wed, 27 Mar 2013 22:09:27 +0000
Subject: [PATCH] Add wait spinner

---
 css/main.css        |   8 ++++++
 img/ajax-loader.gif | Bin 0 -> 404 bytes
 index.html          |  25 +++++++++--------
 js/gdrive.js        |  67 +++++++++++++++++++++++++-------------------
 js/main.js          |   6 +++-
 5 files changed, 64 insertions(+), 42 deletions(-)
 create mode 100644 img/ajax-loader.gif

diff --git a/css/main.css b/css/main.css
index c9c48ccf..8b0d570f 100644
--- a/css/main.css
+++ b/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;
diff --git a/img/ajax-loader.gif b/img/ajax-loader.gif
new file mode 100644
index 0000000000000000000000000000000000000000..60e718fbebf7f2df0ad34d2f7cb7270831698a41
GIT binary patch
literal 404
zcmZ?wbhEHb)Mnsj_{hNU|Ns9bOO{-^bO}f*{^#~{4GDI33~)8lGhk+9U|>-EC*@p}
znpl#WqEMb$lA(~8l~|FJpO~VTnU|K&p!k!8lMARy2Z$L!1~M=iwe)eEo_6y_^XH>n
z()YqXpKg6%))o=DFipMo-mHDgdD3+~ueYDl`*mdVPrDrp6pVaCftFwzV|xT>i~@gR
z^2S*$$Jf++o{@O(dr!)Y8S_sq^m6tp(AmMBeRkv8mnwXl7*j>0@*_Ug_MP&({AiX=
zQqb}B*i8gE%m8TO%2`>_ck&<ca|v&+d|27D<jR5-yZDxIAA0SRY}Wbw<hhqWgJ#WG
zV|vD*$NkjHPcwlgu2_fFL<gu>XH40}E?u|r*UnU*6(;lD<pQ-z)Q_%P`I~Q}+3c-z
n`~PlwJTb*N_U$umud)-a!UB5|l+Fo={$dhgV6X;-8yElp9dwyK

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 92bb7a2d..aed185dd 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
 <script type="text/javascript" src="js/main.js"></script>
 <script type="text/javascript">
 	function handleClientLoad() {
-		window.setTimeout(gdrive.init, 1);
+		window.setTimeout(fileManager.gdriveInit, 1);
 	}
 </script>
 <script type="text/javascript"
@@ -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>
diff --git a/js/gdrive.js b/js/gdrive.js
index 87f997bb..507ac386 100644
--- a/js/gdrive.js
+++ b/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;
 })();
diff --git a/js/main.js b/js/main.js
index 043412cd..41408a54 100644
--- a/js/main.js
+++ b/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);
+			});
 		});
 	};