Upload to gdrive support
This commit is contained in:
parent
8ae02b850d
commit
76b7b9b039
85
css/main.css
85
css/main.css
@ -1,6 +1,6 @@
|
|||||||
body {
|
body {
|
||||||
background-image: url(../img/honeycomb.png);
|
background-image: url(../img/honeycomb.png);
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
#navbar {
|
#navbar {
|
||||||
@ -15,13 +15,13 @@ body {
|
|||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#wmd-input, #wmd-preview {
|
#wmd-input,#wmd-preview {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
#wmd-input {
|
#wmd-input {
|
||||||
font-family: "Courier New", Courier, monospace;
|
font-family: "Courier New", Courier, monospace;
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#wmd-preview {
|
#wmd-preview {
|
||||||
@ -65,19 +65,26 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icon-code {
|
.icon-code {
|
||||||
background-position: -384px -168px;
|
background-position: -384px -168px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-numbered-list {
|
.icon-numbered-list {
|
||||||
background-position: -408px -168px;
|
background-position: -408px -168px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-hr {
|
.icon-hr {
|
||||||
background-position: -432px -168px;
|
background-position: -432px -168px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-undo {
|
.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 {
|
.ui-layout-toggler-north {
|
||||||
@ -91,48 +98,46 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ui-layout-toggler-south .caret {
|
.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 {
|
.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;
|
||||||
}
|
}
|
BIN
img/gdrive.png
Normal file
BIN
img/gdrive.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 741 B |
28
index.html
28
index.html
@ -16,6 +16,7 @@
|
|||||||
<script type="text/javascript" src="js/Markdown.Converter.js"></script>
|
<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.Sanitizer.js"></script>
|
||||||
<script type="text/javascript" src="js/Markdown.Editor.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" src="js/main.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
function handleClientLoad() {
|
function handleClientLoad() {
|
||||||
@ -50,8 +51,8 @@
|
|||||||
</ul>
|
</ul>
|
||||||
<ul class="pull-right" id="menu-bar">
|
<ul class="pull-right" id="menu-bar">
|
||||||
<li class="btn-group"><a class="btn action-create-file"
|
<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"
|
title="Delete the current file locally" data-toggle="modal"
|
||||||
data-target="#modal-remove-file-confirm"><i class="icon-trash"></i></a>
|
data-target="#modal-remove-file-confirm"><i class="icon-trash"></i></a>
|
||||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"
|
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"
|
||||||
@ -59,27 +60,28 @@
|
|||||||
<ul id="file-selector" class="dropdown-menu">
|
<ul id="file-selector" class="dropdown-menu">
|
||||||
</ul></li>
|
</ul></li>
|
||||||
<li class="btn-group"><a class="btn dropdown-toggle"
|
<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" /> <b class="caret"></b></a>
|
src="img/stackedit-16.png" /> <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<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
|
title="Create a new local file"><i class="icon-file"></i> New
|
||||||
file</a></li>
|
file</a></li>
|
||||||
<li><a href="javascript:void(0);"
|
<li><a href="javascript: void(0)"
|
||||||
title="Delete the current file locally" data-toggle="modal"
|
title="Delete the current file locally" data-toggle="modal"
|
||||||
data-target="#modal-remove-file-confirm"><i
|
data-target="#modal-remove-file-confirm"><i
|
||||||
class="icon-trash"></i> Remove file</a></li>
|
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 class="divider"></li>
|
||||||
<li><a href="javascript:void(0);"
|
<li><a href="javascript: void(0)"
|
||||||
title="Modify your preferences" data-toggle="modal"
|
title="Modify your preferences" data-toggle="modal"
|
||||||
data-target="#modal-settings"><i class="icon-cog"></i>
|
data-target="#modal-settings"><i class="icon-cog"></i>
|
||||||
Settings</a></li>
|
Settings</a></li>
|
||||||
</ul></li>
|
</ul></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="nav pull-right">
|
<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>
|
title="Rename the current file"><span class="file-title"></span></a></li>
|
||||||
<li class="navbar-form"><input id="file-title-input"
|
<li class="navbar-form"><input id="file-title-input"
|
||||||
type="text" class="span3 hide" placeholder="File title" /></li>
|
type="text" class="span3 hide" placeholder="File title" /></li>
|
||||||
@ -103,8 +105,8 @@
|
|||||||
local machine, not on distant synchronized locations.</p>
|
local machine, not on distant synchronized locations.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<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>
|
class="btn btn-primary action-remove-file" data-dismiss="modal">Delete</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -132,8 +134,8 @@
|
|||||||
</dl>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<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>
|
data-dismiss="modal">OK</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
87
js/gdrive.js
Normal file
87
js/gdrive.js
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
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(file) {
|
||||||
|
console.log(file);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
gdrive.createFile = function(title, content) {
|
||||||
|
var callback = function() {
|
||||||
|
createFile(title, content, undefined, function(file) {
|
||||||
|
console.log(file);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
if(!driveEnabled) {
|
||||||
|
askAuth(false, callback);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return gdrive;
|
||||||
|
})();
|
77
js/main.js
77
js/main.js
@ -35,6 +35,12 @@ var fileManager = (function($) {
|
|||||||
fileManager.updateFileDescList();
|
fileManager.updateFileDescList();
|
||||||
fileManager.updateFileTitleUI();
|
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() {
|
fileManager.selectFile = function() {
|
||||||
@ -151,77 +157,6 @@ var fileManager = (function($) {
|
|||||||
return fileManager;
|
return fileManager;
|
||||||
})(jQuery);
|
})(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 = (function($) {
|
||||||
var core = {};
|
var core = {};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user