Upload to gdrive support

css/main.css

@@ -1,6 +1,6 @@
 body {
 	background-image: url(../img/honeycomb.png);
-    background-repeat: repeat;
+	background-repeat: repeat;
 }
 
 #navbar {
@@ -15,13 +15,13 @@ body {
 	margin-left: 20px;
 }
 
-#wmd-input, #wmd-preview  {
+#wmd-input,#wmd-preview {
-    position: absolute;
+	position: absolute;
 }
 
 #wmd-input {
 	font-family: "Courier New", Courier, monospace;
-    resize: none;
+	resize: none;
 }
 
 #wmd-preview {
@@ -65,19 +65,26 @@ body {
 }
 
 .icon-code {
-    background-position: -384px -168px;
+	background-position: -384px -168px;
 }
 
 .icon-numbered-list {
-    background-position: -408px -168px;
+	background-position: -408px -168px;
 }
 
 .icon-hr {
-    background-position: -432px -168px;
+	background-position: -432px -168px;
 }
 
 .icon-undo {
-    background-position: -456px -168px;
+	background-position: -456px -168px;
+}
+
+.icon-gdrive {
+	background-image: url("../img/gdrive.png") !important;
+	width: 16px;
+	height: 16px;
+	background-position: 0 0;
 }
 
 .ui-layout-toggler-north {
@@ -91,48 +98,46 @@ body {
 }
 
 .ui-layout-toggler-south .caret {
-  margin-top: 6px;
+	margin-top: 6px;
 }
 
-.ui-layout-toggler-north-open .caret,
+.ui-layout-toggler-north-open .caret,.ui-layout-toggler-south-closed .caret
-.ui-layout-toggler-south-closed .caret {
+	{
-  border-bottom: 5px solid #525252;
+	border-bottom: 5px solid #525252;
-  border-right: 5px solid transparent;
+	border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
+	border-left: 5px solid transparent;
-  border-top: 0;
+	border-top: 0;
 }
 
-.ui-layout-toggler-north-closed .caret,
+.ui-layout-toggler-north-closed .caret,.ui-layout-toggler-south-open .caret
-.ui-layout-toggler-south-open .caret {
+	{
-  border-top: 5px solid #525252;
+	border-top: 5px solid #525252;
-  border-right: 5px solid transparent;
+	border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
+	border-left: 5px solid transparent;
-  border-bottom: 0;
+	border-bottom: 0;
 }
 
-
 .ui-layout-toggler-east {
-    margin-left: 3px !important;
+	margin-left: 3px !important;
-    width: 18px !important;
+	width: 18px !important;
 }
 
-.ui-layout-toggler-east .caret,
+.ui-layout-toggler-east .caret,.ui-layout-toggler-west .caret {
-.ui-layout-toggler-west .caret {
+	margin-top: 40px;
-  margin-top: 40px;
 }
 
-.ui-layout-toggler-east-open .caret,
+.ui-layout-toggler-east-open .caret,.ui-layout-toggler-west-closed .caret
-.ui-layout-toggler-west-closed .caret {
+	{
-  border-bottom: 5px solid transparent;
+	border-bottom: 5px solid transparent;
-  border-top: 5px solid transparent;
+	border-top: 5px solid transparent;
-  border-left: 5px solid #525252;
+	border-left: 5px solid #525252;
-  border-right: 0;
+	border-right: 0;
 }
 
-.ui-layout-toggler-east-closed .caret,
+.ui-layout-toggler-east-closed .caret,.ui-layout-toggler-west-opened .caret
-.ui-layout-toggler-west-opened .caret {
+	{
-  border-bottom: 5px solid transparent;
+	border-bottom: 5px solid transparent;
-  border-top: 5px solid transparent;
+	border-top: 5px solid transparent;
-  border-right: 5px solid #525252;
+	border-right: 5px solid #525252;
-  border-left: 0;
+	border-left: 0;
 }

index.html

@@ -16,6 +16,7 @@
 <script type="text/javascript" src="js/Markdown.Converter.js"></script>
 <script type="text/javascript" src="js/Markdown.Sanitizer.js"></script>
 <script type="text/javascript" src="js/Markdown.Editor.js"></script>
+<script type="text/javascript" src="js/gdrive.js"></script>
 <script type="text/javascript" src="js/main.js"></script>
 <script type="text/javascript">
 	function handleClientLoad() {
@@ -50,8 +51,8 @@
 			</ul>
 			<ul class="pull-right" id="menu-bar">
 				<li class="btn-group"><a class="btn action-create-file"
-					href="javascript:void(0);" title="Create a local file"><i
+					href="javascript: void(0)" title="Create a local file"><i
-						class="icon-file"></i></a> <a class="btn" href="javascript:void(0);"
+						class="icon-file"></i></a> <a class="btn" href="javascript: void(0)"
 					title="Delete the current file locally" data-toggle="modal"
 					data-target="#modal-remove-file-confirm"><i class="icon-trash"></i></a>
 					<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"
@@ -59,27 +60,28 @@
 					<ul id="file-selector" class="dropdown-menu">
 					</ul></li>
 				<li class="btn-group"><a class="btn dropdown-toggle"
-					data-toggle="dropdown" href="javascript:void(0);" title="Menu"><img
+					data-toggle="dropdown" href="javascript: void(0)" title="Menu"><img
 						src="img/stackedit-16.png" />&nbsp;&nbsp;<b class="caret"></b></a>
 					<ul class="dropdown-menu">
-						<li><a class="action-create-file" href="javascript:void(0);"
+						<li><a class="action-create-file" href="javascript: void(0)"
 							title="Create a new local file"><i class="icon-file"></i> New
 								file</a></li>
-						<li><a href="javascript:void(0);"
+						<li><a href="javascript: void(0)"
 							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><a id="drive-link" href="javascript:void(0);"><i
+                        <li class="divider"></li>
-								class="icon-magnet"></i> Link with Google Drive</a></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);"
+						<li><a href="javascript: void(0)"
 							title="Modify your preferences" data-toggle="modal"
 							data-target="#modal-settings"><i class="icon-cog"></i>
 								Settings</a></li>
 					</ul></li>
 			</ul>
 			<ul class="nav pull-right">
-				<li><a class="brand" id="file-title" href="javascript:void(0);"
+				<li><a class="brand" id="file-title" href="javascript: void(0)"
 					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>
@@ -103,8 +105,8 @@
 				local machine, not on distant synchronized locations.</p>
 		</div>
 		<div class="modal-footer">
-			<a href="javascript:void(0);" class="btn" data-dismiss="modal">Cancel</a>
+			<a href="javascript: void(0)" class="btn" data-dismiss="modal">Cancel</a>
-			<a href="javascript:void(0);"
+			<a href="javascript: void(0)"
 				class="btn btn-primary action-remove-file" data-dismiss="modal">Delete</a>
 		</div>
 	</div>
@@ -132,8 +134,8 @@
 			</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 action-load-settings" data-dismiss="modal">Cancel</a>
-			<a href="javascript:void(0);" class="btn btn-primary action-apply-settings"
+			<a href="javascript: void(0)" class="btn btn-primary action-apply-settings"
 				data-dismiss="modal">OK</a>
 		</div>
 	</div>

js/gdrive.js

@@ -0,0 +1,81 @@
+var gdrive = (function() {
+
+	var CLIENT_ID = '241271498917-jpto9lls9fqnem1e4h6ppds9uob8rpvu.apps.googleusercontent.com';
+	var SCOPES = [ 'https://www.googleapis.com/auth/drive.install',
+		'https://www.googleapis.com/auth/drive.file' ];
+
+	var driveEnabled = false;
+
+	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();
+				});
+			}
+		});
+	}
+
+	function createFile(title, content, folderId, 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 } ];
+		}
+
+		var base64Data = btoa(content);
+		var multipartRequestBody = delimiter
+			+ 'Content-Type: application/json\r\n\r\n'
+			+ JSON.stringify(metadata) + delimiter + 'Content-Type: '
+			+ contentType + '\r\n' + 'Content-Transfer-Encoding: base64\r\n'
+			+ '\r\n' + base64Data + close_delim;
+
+		var request = gapi.client.request({
+			'path' : '/upload/drive/v2/files',
+			'method' : 'POST',
+			'params' : { 'uploadType' : 'multipart', },
+			'headers' : { 'Content-Type' : 'multipart/mixed; boundary="'
+				+ boundary + '"', }, 'body' : multipartRequestBody, });
+		request.execute(function(file) {
+			if (callback) {
+				callback(file);
+			}
+		});
+	}
+	;
+
+	gdrive.init = function() {
+		askAuth(true, function() {
+			try {
+				var state = JSON.parse(decodeURI((/state=(.+?)(&|$)/
+					.exec(location.search) || [ , null ])[1]));
+				if (state.action == 'create') {
+					createFile(fileManager.currentFile, fileManager.content,
+						state.folderId, function() {
+							console.log(file);
+						});
+				}
+			} catch (e) {
+			}
+		});
+	};
+
+	gdrive.createFile = function(title, content) {
+		askAuth(false, function() {
+			createFile(title, content, undefined, function() {
+				console.log(file);
+			});
+		});
+	};
+
+	return gdrive;
+})();

js/main.js

@@ -35,6 +35,12 @@ var fileManager = (function($) {
 			fileManager.updateFileDescList();
 			fileManager.updateFileTitleUI();
 		});
+		$(".action-upload-gdrive").click(function() {
+			var fileIndex = localStorage["file.current"];
+			var content = localStorage[fileIndex + ".content"];
+			var title = localStorage[fileIndex + ".title"];
+			gdrive.createFile(title, content);
+		});
 	};
 
 	fileManager.selectFile = function() {
@@ -151,77 +157,6 @@ var fileManager = (function($) {
 	return fileManager;
 })(jQuery);
 
-var gdrive = (function($) {
-
-	var CLIENT_ID = '241271498917-jpto9lls9fqnem1e4h6ppds9uob8rpvu.apps.googleusercontent.com';
-	var SCOPES = [ 'https://www.googleapis.com/auth/drive.install',
-		'https://www.googleapis.com/auth/drive.file' ];
-
-	var driveEnabled = false;
-
-	var gdrive = {};
-
-	gdrive.init = function() {
-		function start() {
-			driveEnabled = true;
-			try {
-				var state = JSON.parse(decodeURI((/state=(.+?)(&|$)/
-					.exec(location.search) || [ , null ])[1]));
-				if (state.action == 'create') {
-					gdrive.createFile(state.folderId, fileManager.currentFile,
-						fileManager.content);
-				}
-
-			} catch (e) {
-			}
-		}
-		function handleAuthResult(authResult) {
-			if (authResult && !authResult.error) {
-				$("#drive-link").hide();
-				gapi.client.load('drive', 'v2', function() {
-					start();
-				});
-			}
-		}
-		$("#drive-link").click(
-			function() {
-				gapi.auth.authorize({ 'client_id' : CLIENT_ID,
-					'scope' : SCOPES, 'immediate' : false }, handleAuthResult);
-			});
-		gapi.auth.authorize({ 'client_id' : CLIENT_ID, 'scope' : SCOPES,
-			'immediate' : true }, handleAuthResult);
-	};
-
-	gdrive.createFile = function(folderId, title, content) {
-		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,
-			'parents' : [ { 'kind' : 'drive#fileLink', 'id' : folderId } ] };
-
-		var base64Data = btoa(content);
-		var multipartRequestBody = delimiter
-			+ 'Content-Type: application/json\r\n\r\n'
-			+ JSON.stringify(metadata) + delimiter + 'Content-Type: '
-			+ contentType + '\r\n' + 'Content-Transfer-Encoding: base64\r\n'
-			+ '\r\n' + base64Data + close_delim;
-
-		var request = gapi.client.request({
-			'path' : '/upload/drive/v2/files',
-			'method' : 'POST',
-			'params' : { 'uploadType' : 'multipart', },
-			'headers' : { 'Content-Type' : 'multipart/mixed; boundary="'
-				+ boundary + '"', }, 'body' : multipartRequestBody, });
-		request.execute(function(file) {
-			console.log(file);
-		});
-	};
-
-	return gdrive;
-})(jQuery);
-
 var core = (function($) {
 	var core = {};