caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add jquery layout library and support for resizable panels

Browse Source
This commit is contained in:
benweet 2013-03-26 22:41:37 +00:00
parent 1138227618
commit 400b5ccac9
10 changed files with 9802 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
css/main.css
View File

@ -3,16 +3,20 @@ body {
font-family: sans-serif; font-family: sans-serif;
} }
#file-title { #navbar {
position: static;
} }
#file-title-input { #menu-bar {
display: none; margin-right: 20px;
}
#wmd-button-bar {
margin-left: 20px;
} }
#wmd-input, #wmd-preview { #wmd-input, #wmd-preview {
position: absolute; position: absolute;
top: 50px;
} }
#wmd-input { #wmd-input {
@ -27,27 +31,15 @@ body {
} }
.wmd-button-row { .wmd-button-row {
margin: 10px; margin: 10px 0;
height: 20px; height: 20px;
} }
.wmd-spacer { .wmd-spacer {
margin: 0 7px; margin: 0 5px;
display: inline-block; display: inline-block;
} }
/*
.wmd-button {
width: 20px;
height: 20px;
padding-left: 2px;
padding-right: 3px;
display: inline-block;
list-style: none;
cursor: pointer;
}
*/
.wmd-button>span { .wmd-button>span {
background-image: url(../img/wmd-buttons.png); background-image: url(../img/wmd-buttons.png);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -100,3 +92,47 @@ body {
background-position: -456px -168px; background-position: -456px -168px;
} }
.ui-layout-toggler-north {
margin-top: -3px !important;
height: 18px !important;
}
.ui-layout-toggler-north-open .caret,
.ui-layout-toggler-south-closed .caret {
border-bottom: 5px solid #525252;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-top: 0;
}
.ui-layout-toggler-north-closed .caret,
.ui-layout-toggler-south-open .caret {
border-top: 5px solid #525252;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-bottom: 0;
}
.ui-layout-toggler-east {
margin-left: 3px !important;
width: 18px !important;
}
.ui-layout-toggler-east-open .caret,
.ui-layout-toggler-west-closed .caret {
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-left: 5px solid #525252;
border-right: 0;
margin-top: 40px;
}
.ui-layout-toggler-east-closed .caret,
.ui-layout-toggler-west-opened .caret {
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 5px solid #525252;
border-left: 0;
margin-top: 40px;
}

BIN
img/stackedit-128.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 630 B

After

Width:  |  Height:  |  Size: 645 B

BIN
img/stackedit-16.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 270 B

After

Width:  |  Height:  |  Size: 278 B

BIN
img/stackedit-32.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 314 B

After

Width:  |  Height:  |  Size: 321 B

BIN
img/stackedit-64.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
img/stackedit-64.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 446 B

After

Width:  |  Height:  |  Size: 450 B

73
index.html
View File

@ -1,12 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Pagedown editor</title> <title>StackEdit</title>
<link rel="icon" href="img/stackedit-64.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/stackedit-64.ico"
type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap --> <!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen"> <link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen"> <link href="css/main.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.custom.js"></script>
<script type="text/javascript" src="js/jquery.layout.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script>
<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>
@ -37,39 +42,65 @@
</script> </script>
</head> </head>
<body> <body>
<div id="navbar" class="navbar navbar-fixed-top"> <div id="navbar" class="navbar navbar-fixed-top ui-layout-north">
<div class="navbar-inner"> <div class="navbar-inner">
<ul class="nav"> <ul class="nav">
<li class="divider-vertical"></li>
<li><div id="wmd-button-bar"></div></li> <li><div id="wmd-button-bar"></div></li>
</ul> </ul>
<ul class="nav pull-right"> <ul class="pull-right" id="menu-bar">
<li><a class="brand" id="file-title" href="javascript:void(0);" title="Rename"><span></span></a></li> <li class="btn-group"><a class="btn action-create-file"
<li class="navbar-form"><input id="file-title-input" href="javascript:void(0);" title="Create a local file"><i
type="text" class="span3" placeholder="File title" /></li> class="icon-file"></i></a> <a class="btn" href="javascript:void(0);"
<li class="dropdown"><a class="dropdown-toggle" title="Delete the current file locally" data-toggle="modal"
data-toggle="dropdown" href="#" title="Open file"><i data-target="#remove-file-confirm"><i class="icon-trash"></i></a> <a
class="icon-folder-open"></i></a> class="btn dropdown-toggle" data-toggle="dropdown" href="#"
title="Open a local file"><i class="icon-folder-open"></i></a>
<ul id="file-selector" class="dropdown-menu"> <ul id="file-selector" class="dropdown-menu">
</ul></li> </ul></li>
<li class="divider-vertical"></li> <li class="btn-group"><a class="btn dropdown-toggle"
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" title="Menu"><img
data-toggle="dropdown" href="#" title="Menu"><img src="img/stackedit-16.png" /> src="img/stackedit-16.png" />&nbsp;&nbsp;<b class="caret"></b></a>
Menu <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a id="new-file" href="javascript:void(0);" title="Create a new local file"><i <li><a class="action-create-file" href="javascript:void(0);"
class="icon-file"></i> New file</a></li> title="Create a new local file"><i class="icon-file"></i> New
<li><a id="remove-file" href="javascript:void(0);" title="Delete the current file locally"><i file</a></li>
class="icon-trash"></i> Remove file</a></li> <li><a href="javascript:void(0);"
title="Delete the current file locally" data-toggle="modal"
data-target="#remove-file-confirm"><i class="icon-trash"></i>
Remove file</a></li>
<li><a id="drive-link" href="javascript:void(0);"><i <li><a id="drive-link" href="javascript:void(0);"><i
class="icon-magnet"></i> Link with Google Drive</a></li> class="icon-magnet"></i> Link with Google Drive</a></li>
</ul></li> </ul></li>
<li class="divider-vertical"></li> </ul>
<ul class="nav pull-right">
<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>
</ul> </ul>
</div> </div>
</div> </div>
<textarea id="wmd-input"></textarea> <textarea id="wmd-input" class="ui-layout-center"></textarea>
<div id="wmd-preview" class="well"></div> <div id="wmd-preview" class="well ui-layout-east"></div>
<div class="ui-layout-south"></div>
<div id="remove-file-confirm" class="modal hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h3>Remove file</h3>
</div>
<div class="modal-body">
<p>Are you sure you want to remove "<span class="file-title"></span>"?
</p>
<p class="muted"><b>NOTE:</b> The file will be destroyed on the
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 btn-primary action-remove-file" data-dismiss="modal">Delete</a>
</div>
</div>
</body> </body>
</html> </html>

3670
js/jquery-ui.custom.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

5939
js/jquery.layout.js Normal file
View File

File diff suppressed because it is too large Load Diff

115
js/main.js
View File

@ -11,11 +11,15 @@ var fileManager = (function($) {
window.setInterval(function() { window.setInterval(function() {
fileManager.saveFile(); fileManager.saveFile();
}, 5000); }, 5000);
$("#new-file").click(function() { $(".action-create-file").click(function() {
fileManager.saveFile(); fileManager.saveFile();
fileManager.createFile(); fileManager.createFile();
fileManager.selectFile(); fileManager.selectFile();
}); });
$(".action-remove-file").click(function() {
fileManager.deleteFile();
fileManager.selectFile();
});
$("#file-title").click(function() { $("#file-title").click(function() {
$(this).hide(); $(this).hide();
$("#file-title-input").show().focus(); $("#file-title-input").show().focus();
@ -28,7 +32,7 @@ var fileManager = (function($) {
} }
$(this).hide(); $(this).hide();
$("#file-title").show(); $("#file-title").show();
fileManager.updateFileTitleList(); fileManager.updateFileDescList();
fileManager.updateFileTitleUI(); fileManager.updateFileTitleUI();
}); });
}; };
@ -39,22 +43,15 @@ var fileManager = (function($) {
localStorage.clear(); localStorage.clear();
localStorage["file.count"] = 0; localStorage["file.count"] = 0;
} }
this.updateFileTitleList(); this.updateFileDescList();
// If no file create one // If no file create one
if(this.fileTitleList.length === 0) { if(this.fileDescList.length === 0) {
this.createFile(); this.createFile();
this.updateFileTitleList(); this.updateFileDescList();
} }
// If no default file take first one // If no default file take first one
if(!localStorage["file.current"]) { if(!localStorage["file.current"]) {
var fileCount = parseInt(localStorage["file.count"]); localStorage["file.current"] = this.fileDescList[0].index;
for(var i=0; i<fileCount; i++) {
var fileIndex = "file." + i;
if(localStorage[fileIndex + ".title"]) {
localStorage["file.current"] = fileIndex;
break;
}
}
} }
// Update the editor and the file title // Update the editor and the file title
var fileIndex = localStorage["file.current"]; var fileIndex = localStorage["file.current"];
@ -67,40 +64,68 @@ var fileManager = (function($) {
if(!title) { if(!title) {
title = "Filename"; title = "Filename";
} }
var fileIndex = "file." + parseInt(localStorage["file.count"]); // Find a fileIndex
localStorage[fileIndex + ".title"] = title; var fileCount = parseInt(localStorage["file.count"]);
var i;
for(i=0; i<fileCount; i++) {
if(!localStorage["file." + i + ".title"]) {
break;
}
}
var fileIndex = "file." + i;
// Create the file in the localStorag
localStorage[fileIndex + ".content"] = ""; localStorage[fileIndex + ".content"] = "";
localStorage["file.count"] = parseInt(localStorage["file.count"]) + 1; localStorage[fileIndex + ".title"] = title;
localStorage["file.current"] = fileIndex; localStorage["file.current"] = fileIndex;
if(i == fileCount) {
localStorage["file.count"] = fileCount + 1;
}
}; };
fileManager.updateFileTitleList = function() { fileManager.deleteFile = function() {
var fileIndex = localStorage["file.current"];
localStorage.removeItem("file.current");
localStorage.removeItem(fileIndex + ".title");
localStorage.removeItem(fileIndex + ".content");
};
fileManager.updateFileDescList = function() {
var fileCount = parseInt(localStorage["file.count"]); var fileCount = parseInt(localStorage["file.count"]);
this.fileTitleList = []; var lastIndex = -1;
this.fileDescList = [];
$("#file-selector").empty(); $("#file-selector").empty();
for(var i=0; i<fileCount; i++) { for(var i=0; i<fileCount; i++) {
var fileIndex = "file." + i; var fileIndex = "file." + i;
var title = localStorage[fileIndex + ".title"]; var title = localStorage[fileIndex + ".title"];
if(title) { if(title) {
this.fileTitleList[i] = title; lastIndex = i;
this.fileDescList.push({"index": fileIndex, "title": title});
} }
} }
localStorage["file.count"] = lastIndex + 1;
this.fileDescList.sort(function(a, b) {
if (a.title.toLowerCase() < b.title.toLowerCase())
return -1;
if (a.title.toLowerCase() > b.title.toLowerCase())
return 1;
return 0;
});
}; };
fileManager.updateFileTitleUI = function() { fileManager.updateFileTitleUI = function() {
// Update the editor and the file title // Update the editor and the file title
var fileIndex = localStorage["file.current"]; var fileIndex = localStorage["file.current"];
var title = localStorage[fileIndex + ".title"]; var title = localStorage[fileIndex + ".title"];
$("#file-title > span").text(title); document.title = "StackEdit - " + title;
$(".file-title").text(title);
$("#file-title-input").val(title); $("#file-title-input").val(title);
$("#file-selector").empty(); $("#file-selector").empty();
for(var i=0; i<this.fileTitleList.length; i++) {
title = this.fileTitleList[i]; for(var i=0; i<this.fileDescList.length; i++) {
if(title) { var fileDesc = this.fileDescList[i];
var fileIndex1 = "file." + i; var a = $("<a>").text(fileDesc.title);
var a = $("<a>").text(title);
var li = $("<li>").append(a); var li = $("<li>").append(a);
if(fileIndex1 == fileIndex) { if(fileDesc.index == fileIndex) {
li.addClass("disabled"); li.addClass("disabled");
} }
else { else {
@ -110,11 +135,10 @@ var fileManager = (function($) {
localStorage["file.current"] = fileIndex; localStorage["file.current"] = fileIndex;
fileManager.selectFile(); fileManager.selectFile();
}; };
})(fileIndex1)); })(fileDesc.index));
} }
$("#file-selector").append(li); $("#file-selector").append(li);
} }
}
}; };
fileManager.saveFile = function() { fileManager.saveFile = function() {
@ -202,7 +226,7 @@ function createEditor() {
var editor = new Markdown.Editor(converter); var editor = new Markdown.Editor(converter);
editor.run(); editor.run();
$(".wmd-button-row").addClass("btn-group").find("li:not(.wmd-spacer)").addClass("btn").css({"left": 0,}).find("span").hide(); $(".wmd-button-row").addClass("btn-group").find("li:not(.wmd-spacer)").addClass("btn").css("left", 0).find("span").hide();
$("#wmd-bold-button").append($("<i>").addClass("icon-bold")); $("#wmd-bold-button").append($("<i>").addClass("icon-bold"));
$("#wmd-italic-button").append($("<i>").addClass("icon-italic")); $("#wmd-italic-button").append($("<i>").addClass("icon-italic"));
$("#wmd-link-button").append($("<i>").addClass("icon-globe")); $("#wmd-link-button").append($("<i>").addClass("icon-globe"));
@ -215,28 +239,39 @@ function createEditor() {
$("#wmd-hr-button").append($("<i>").addClass("icon-hr")); $("#wmd-hr-button").append($("<i>").addClass("icon-hr"));
$("#wmd-undo-button").append($("<i>").addClass("icon-undo")); $("#wmd-undo-button").append($("<i>").addClass("icon-undo"));
$("#wmd-redo-button").append($("<i>").addClass("icon-share-alt")); $("#wmd-redo-button").append($("<i>").addClass("icon-share-alt"));
}
var layoutOrientation = 0;
var layout;
function createLayout() {
var layoutGlobalConfig = { closable : true, resizable : false,
slidable : false, livePaneResizing : true, spacing_open : 20,
spacing_closed : 20, togglerLength_open : 90,
togglerLength_closed : 90, center__minWidth : 200,
stateManagement__enabled : false, };
if (layoutOrientation === 0) {
layout = $('body').layout(
$.extend(layoutGlobalConfig,
{ east__resizable : true, east__size : .5, east__minSize : 200,
south__closable : false, }));
}
$(".ui-layout-toggler-north").addClass("btn").append($("<b>").addClass("caret"));
$(".ui-layout-toggler-east").addClass("btn").append($("<b>").addClass("caret"));
} }
(function($) { (function($) {
$(function() { $(function() {
$(window).resize(resize); createLayout();
resize();
if (typeof (Storage) !== "undefined") { if (typeof (Storage) !== "undefined") {
fileManager.init(); fileManager.init();
} else { } else {
showError("Web storage is not available"); showError("Web storage is not available");
}; }
$("#navbar").click(function() {
layout.allowOverflow('north');
});
}); });
function resize() {
$("#wmd-input").width($(window).width() / 2 - 60).height(
$(window).height() - 70);
$("#wmd-preview").width($(window).width() / 2 - 60).height(
$(window).height() - 100);
};
})(jQuery); })(jQuery);