Gdrive support

This commit is contained in:
benweet 2013-03-28 22:00:11 +00:00
parent b0d64a6ff8
commit b860eaffde
4 changed files with 122 additions and 67 deletions

View File

@ -1,6 +1,11 @@
body { body {
background-image: url(../img/honeycomb.png); background-image: url(../img/honeycomb.png);
background-repeat: repeat; background-repeat: repeat;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
} }
#navbar { #navbar {
@ -64,6 +69,13 @@ body {
font-weight: bold; font-weight: bold;
} }
.ui-layout-center,.ui-layout-east,.ui-layout-south {
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
border-color: #cccccc !important;
}
.icon-code { .icon-code {
background-position: -384px -168px; background-position: -384px -168px;
} }

View File

@ -51,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="#" 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="#"
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="#"
@ -60,30 +60,30 @@
<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="#" title="Menu"><img
src="img/stackedit-16.png" />&nbsp;&nbsp;<b class="caret"></b></a> src="img/stackedit-16.png" />&nbsp;&nbsp;<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="#"
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="#"
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 class="divider"></li> <li class="divider"></li>
<li><a class="action-upload-gdrive" <li><a class="action-upload-gdrive"
href="javascript: void(0)"><i class="icon-gdrive"></i> Save href="#"><i class="icon-gdrive"></i> Save
on Google Drive</a></li> on Google Drive</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="javascript: void(0)" <li><a href="#"
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" class="action-load-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><i class="file-sync-indicator icon-spinner hide"></i></li> <li><i class="working-indicator icon-spinner hide"></i></li>
<li><a class="brand" id="file-title" href="javascript: void(0)" <li><a class="brand" id="file-title" href="#"
title="Rename the current file"><span class="file-title"></span> title="Rename the current file"><span class="file-title"></span>
</a></li> </a></li>
<li class="navbar-form"><input id="file-title-input" <li class="navbar-form"><input id="file-title-input"
@ -108,8 +108,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="#" class="btn" data-dismiss="modal">Cancel</a>
<a href="javascript: void(0)" <a href="#"
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>
@ -126,17 +126,17 @@
<dd> <dd>
<label class="radio"> <input type="radio" <label class="radio"> <input type="radio"
name="radio-layout-orientation" name="radio-layout-orientation"
id="radio-layout-orientation-horizontal"> Horizontal value="horizontal"> Horizontal
</label> <label class="radio"> <input type="radio" </label> <label class="radio"> <input type="radio"
name="radio-layout-orientation" name="radio-layout-orientation"
id="radio-layout-orientation-vertical"> Vertical value="vertical"> Vertical
</label> </label>
</dd> </dd>
</dl> </dl>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="javascript: void(0)" class="btn action-load-settings" <a href="#" class="btn"
data-dismiss="modal">Cancel</a> <a href="javascript: void(0)" data-dismiss="modal">Cancel</a> <a href="#"
class="btn btn-primary action-apply-settings" data-dismiss="modal">OK</a> class="btn btn-primary action-apply-settings" data-dismiss="modal">OK</a>
</div> </div>
</div> </div>

View File

@ -26,6 +26,7 @@ var gdrive = (function() {
} }
function uploadFile(fileId, parentId, title, content, callback) { function uploadFile(fileId, parentId, title, content, callback) {
setWorkingIndicator(FLAG_GDRIVE_UPLOAD);
var boundary = '-------314159265358979323846'; var boundary = '-------314159265358979323846';
var delimiter = "\r\n--" + boundary + "\r\n"; var delimiter = "\r\n--" + boundary + "\r\n";
var close_delim = "\r\n--" + boundary + "--"; var close_delim = "\r\n--" + boundary + "--";
@ -58,8 +59,11 @@ var gdrive = (function() {
'headers' : { 'Content-Type' : 'multipart/mixed; boundary="' 'headers' : { 'Content-Type' : 'multipart/mixed; boundary="'
+ boundary + '"', }, 'body' : multipartRequestBody, }); + boundary + '"', }, 'body' : multipartRequestBody, });
request.execute(function(file) { request.execute(function(file) {
unsetWorkingIndicator(FLAG_GDRIVE_UPLOAD);
var fileSyncIndex = "sync.gdrive." + file.id;
localStorage[fileSyncIndex + ".etag"] = file.etag;
if (callback) { if (callback) {
callback(file); callback(fileSyncIndex);
} }
}); });
} }

View File

@ -2,15 +2,56 @@ function showError(msg) {
alert(msg); alert(msg);
} }
var workingIndicator = 0;
var FLAG_GDRIVE_UPLOAD = 1;
function setWorkingIndicator(flag) {
workingIndicator |= flag;
if(workingIndicator) {
$(".working-indicator").removeClass("hide");
}
}
function unsetWorkingIndicator(flag) {
workingIndicator &= ~flag;
if(!workingIndicator) {
$(".working-indicator").addClass("hide");
}
}
var synchronizer = (function($) {
var synchronizer = {};
// A synchronization queue containing fileIndex that has to be synchronized
var syncQueue = undefined;
synchronizer.init = function() {
syncQueue = ";";
if(localStorage["sync.queue"]) {
syncQueue = localStorage["sync.queue"];
}
};
// Add a file to the synchronization queue
synchronizer.addFile = function(fileIndex) {
if(syncQueue.indexOf(";" + fileIndex + ";") === -1) {
syncQueue += fileIndex + ";";
localStorage["sync_queue"] = syncQueue;
}
};
return synchronizer;
})(jQuery);
var fileManager = (function($) { var fileManager = (function($) {
var fileManager = {}; var fileManager = {};
var save = false;
fileManager.init = function() { fileManager.init = function() {
synchronizer.init();
fileManager.selectFile(); fileManager.selectFile();
window.setInterval(function() { window.setInterval(function() {
fileManager.saveFile(); fileManager.saveFile();
}, 5000); }, 3000);
$(".action-create-file").click(function() { $(".action-create-file").click(function() {
fileManager.saveFile(); fileManager.saveFile();
fileManager.createFile(); fileManager.createFile();
@ -34,24 +75,30 @@ var fileManager = (function($) {
$("#file-title").show(); $("#file-title").show();
fileManager.updateFileDescList(); fileManager.updateFileDescList();
fileManager.updateFileTitleUI(); fileManager.updateFileTitleUI();
save = true;
}); });
$(".action-upload-gdrive").click(function() { $(".action-upload-gdrive").click(function() {
$(".file-sync-indicator").removeClass("hide"); $(".file-sync-indicator").removeClass("hide");
var fileIndex = localStorage["file.current"]; var fileIndex = localStorage["file.current"];
var content = localStorage[fileIndex + ".content"]; var content = localStorage[fileIndex + ".content"];
var title = localStorage[fileIndex + ".title"]; var title = localStorage[fileIndex + ".title"];
gdrive.createFile(title, content, function(file) { (function(fileIndex) {
$(".file-sync-indicator").addClass("hide"); gdrive.createFile(title, content, function(fileSyncIndex) {
console.log(file); localStorage[fileIndex + ".sync"] += fileSyncIndex + ";";
}); });
})(fileIndex);
});
$("#wmd-input").keyup(function() {
save = true;
}); });
}; };
fileManager.selectFile = function() { fileManager.selectFile = function() {
// If file system does not exist // If file system does not exist
if (!localStorage["file.count"]) { if (!localStorage["file.counter"] || !localStorage["file.list"]) {
localStorage.clear(); localStorage.clear();
localStorage["file.count"] = 0; localStorage["file.counter"] = 0;
localStorage["file.list"] = ";";
} }
this.updateFileDescList(); this.updateFileDescList();
// If no file create one // If no file create one
@ -74,46 +121,36 @@ var fileManager = (function($) {
if (!title) { if (!title) {
title = "Filename"; title = "Filename";
} }
// Find a fileIndex // Create the fileIndex
var fileCount = parseInt(localStorage["file.count"]); var fileCounter = parseInt(localStorage["file.counter"]);
var i; var fileIndex = "file." + fileCounter;
for (i = 0; i < fileCount; i++) { // Create the file in the localStorage
if (!localStorage["file." + i + ".title"]) {
break;
}
}
var fileIndex = "file." + i;
// Create the file in the localStorag
localStorage[fileIndex + ".content"] = ""; localStorage[fileIndex + ".content"] = "";
localStorage[fileIndex + ".title"] = title; localStorage[fileIndex + ".title"] = title;
localStorage[fileIndex + ".sync"] = ";";
localStorage["file.counter"] = fileCounter + 1;
localStorage["file.list"] += fileIndex + ";";
localStorage["file.current"] = fileIndex; localStorage["file.current"] = fileIndex;
if (i == fileCount) {
localStorage["file.count"] = fileCount + 1;
}
}; };
fileManager.deleteFile = function() { fileManager.deleteFile = function() {
var fileIndex = localStorage["file.current"]; var fileIndex = localStorage["file.current"];
localStorage.removeItem("file.current"); localStorage.removeItem("file.current");
localStorage["file.list"] = localStorage["file.list"].replace(";" + fileIndex + ";", ";");
localStorage.removeItem(fileIndex + ".sync");
localStorage.removeItem(fileIndex + ".title"); localStorage.removeItem(fileIndex + ".title");
localStorage.removeItem(fileIndex + ".content"); localStorage.removeItem(fileIndex + ".content");
}; };
fileManager.updateFileDescList = function() { fileManager.updateFileDescList = function() {
var fileCount = parseInt(localStorage["file.count"]);
var lastIndex = -1;
this.fileDescList = []; this.fileDescList = [];
$("#file-selector").empty(); $("#file-selector").empty();
for ( var i = 0; i < fileCount; i++) { var fileIndexList = localStorage["file.list"].split(";");
var fileIndex = "file." + i; for ( var i = 1; i < fileIndexList.length - 1; i++) {
var fileIndex = fileIndexList[i];
var title = localStorage[fileIndex + ".title"]; var title = localStorage[fileIndex + ".title"];
if (title) { this.fileDescList.push({ "index" : fileIndex, "title" : title });
lastIndex = i;
this.fileDescList
.push({ "index" : fileIndex, "title" : title });
}
} }
localStorage["file.count"] = lastIndex + 1;
this.fileDescList.sort(function(a, b) { this.fileDescList.sort(function(a, b) {
if (a.title.toLowerCase() < b.title.toLowerCase()) if (a.title.toLowerCase() < b.title.toLowerCase())
return -1; return -1;
@ -139,7 +176,7 @@ var fileManager = (function($) {
if (fileDesc.index == fileIndex) { if (fileDesc.index == fileIndex) {
li.addClass("disabled"); li.addClass("disabled");
} else { } else {
a.attr("href", "javascript:void(0);").click( a.prop("href", "#").click(
(function(fileIndex) { (function(fileIndex) {
return function() { return function() {
localStorage["file.current"] = fileIndex; localStorage["file.current"] = fileIndex;
@ -152,10 +189,13 @@ var fileManager = (function($) {
}; };
fileManager.saveFile = function() { fileManager.saveFile = function() {
var content = $("#wmd-input").val(); if(save) {
var fileIndex = localStorage["file.current"]; var content = $("#wmd-input").val();
localStorage[fileIndex + ".content"] = content; var fileIndex = localStorage["file.current"];
// insertFile(this.currentFile, this.content); localStorage[fileIndex + ".content"] = content;
synchronizer.addFile(fileIndex);
save = false;
}
}; };
return fileManager; return fileManager;
@ -166,9 +206,12 @@ var core = (function($) {
core.init = function() { core.init = function() {
this.loadSettings(); this.loadSettings();
this.saveSettings();
this.createLayout(); this.createLayout();
$(".action-load-settings").click(function() {
core.loadSettings();
});
$(".action-apply-settings").click(function() { $(".action-apply-settings").click(function() {
core.saveSettings(); core.saveSettings();
fileManager.saveFile(); fileManager.saveFile();
@ -176,26 +219,22 @@ var core = (function($) {
}); });
}; };
var settings = {}; var settings = {
layoutOrientation: "horizontal"
};
core.loadSettings = function() { core.loadSettings = function() {
if(localStorage.settings) { if(localStorage.settings) {
settings = JSON.parse(localStorage.settings); $.extend(settings, JSON.parse(localStorage.settings));
} }
// Layout orientation // Layout orientation
$("#radio-layout-orientation-horizontal").attr('checked', true); $("input:radio[name=radio-layout-orientation][value=" + settings.layoutOrientation + "]").prop("checked", true);
if(settings.layoutOrientation == "vertical") {
$("#radio-layout-orientation-vertical").attr('checked', true);
}
}; };
core.saveSettings = function() { core.saveSettings = function() {
// Layout orientation // Layout orientation
settings.layoutOrientation = "horizontal"; settings.layoutOrientation = $("input:radio[name=radio-layout-orientation]:checked").prop("value");
if($("#radio-layout-orientation-vertical").is(":checked")) {
settings.layoutOrientation = "vertical";
}
localStorage.settings = JSON.stringify(settings); localStorage.settings = JSON.stringify(settings);
}; };
@ -208,14 +247,14 @@ var core = (function($) {
togglerLength_closed : 90, center__minWidth : 100, center__minHeight : 100, togglerLength_closed : 90, center__minWidth : 100, center__minHeight : 100,
stateManagement__enabled : false, }; stateManagement__enabled : false, };
if (settings.layoutOrientation == "horizontal") { if (settings.layoutOrientation == "horizontal") {
$(".ui-layout-east").addClass("well").attr("id", "wmd-preview"); $(".ui-layout-east").addClass("well").prop("id", "wmd-preview");
layout = $('body').layout( layout = $('body').layout(
$.extend(layoutGlobalConfig, $.extend(layoutGlobalConfig,
{ east__resizable : true, east__size : .5, east__minSize : 200, { east__resizable : true, east__size : .5, east__minSize : 200,
south__closable : false, })); south__closable : false, }));
} else if (settings.layoutOrientation == "vertical") { } else if (settings.layoutOrientation == "vertical") {
$(".ui-layout-east").remove(); $(".ui-layout-east").remove();
$(".ui-layout-south").addClass("well").attr("id", "wmd-preview"); $(".ui-layout-south").addClass("well").prop("id", "wmd-preview");
layout = $('body').layout( layout = $('body').layout(
$.extend(layoutGlobalConfig, { south__resizable : true, $.extend(layoutGlobalConfig, { south__resizable : true,
south__size : .5, south__minSize : 200, })); south__size : .5, south__minSize : 200, }));
@ -264,7 +303,7 @@ var core = (function($) {
if (typeof (Storage) !== "undefined") { if (typeof (Storage) !== "undefined") {
fileManager.init(); fileManager.init();
} else { } else {
showError("Web storage is not available"); showError("Local storage is not available");
} }
}); });