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

Add settings panel

Browse Source
This commit is contained in:
benweet 2013-03-27 15:28:31 +00:00
parent 5bd0925a2b
commit 6f69c07a71
3 changed files with 134 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/main.css
View File

@ -20,13 +20,11 @@ body {
}
#wmd-input {
left: 20px;
font-family: "Courier New", Courier, monospace;
resize: none;
}
#wmd-preview {
left: 50%;
overflow: auto;
}

45
index.html
View File

@ -53,8 +53,8 @@
href="javascript:void(0);" title="Create a local file"><i
class="icon-file"></i></a> <a class="btn" href="javascript:void(0);"
title="Delete the current file locally" data-toggle="modal"
data-target="#remove-file-confirm"><i class="icon-trash"></i></a> <a
class="btn dropdown-toggle" data-toggle="dropdown" href="#"
data-target="#modal-remove-file-confirm"><i class="icon-trash"></i></a>
<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></li>
@ -67,10 +67,15 @@
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>
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
class="icon-magnet"></i> Link with Google Drive</a></li>
<li class="divider"></li>
<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">
@ -84,7 +89,8 @@
<textarea id="wmd-input" class="ui-layout-center"></textarea>
<div class="ui-layout-east"></div>
<div class="ui-layout-south"></div>
<div id="remove-file-confirm" class="modal hide">
<div id="modal-remove-file-confirm" class="modal hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
@ -102,5 +108,34 @@
class="btn btn-primary action-remove-file" data-dismiss="modal">Delete</a>
</div>
</div>
<div id="modal-settings" class="modal hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h3>Settings</h3>
</div>
<div class="modal-body">
<dl class="dl-horizontal">
<dt>Layout orientation</dt>
<dd>
<label class="radio"> <input type="radio"
name="radio-layout-orientation"
id="radio-layout-orientation-horizontal">
Horizontal
</label> <label class="radio"> <input type="radio"
name="radio-layout-orientation"
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>
</div>
</div>
</body>
</html>

111
js/main.js
View File

@ -56,7 +56,7 @@ var fileManager = (function($) {
// Update the editor and the file title
var fileIndex = localStorage["file.current"];
$("#wmd-input").val(localStorage[fileIndex + ".content"]);
createEditor();
core.createEditor();
this.updateFileTitleUI();
};
@ -222,7 +222,77 @@ var gdrive = (function($) {
return gdrive;
})(jQuery);
function createEditor() {
var core = (function($) {
var core = {};
core.init = function() {
this.loadSettings();
this.saveSettings();
this.createLayout();
$(".action-apply-settings").click(function() {
core.saveSettings();
fileManager.saveFile();
location.reload();
});
};
var settings = {};
core.loadSettings = function() {
if(localStorage.settings) {
settings = JSON.parse(localStorage.settings);
}
// Layout orientation
$("#radio-layout-orientation-horizontal").attr('checked', true);
if(settings.layoutOrientation == "vertical") {
$("#radio-layout-orientation-vertical").attr('checked', true);
}
};
core.saveSettings = function() {
// Layout orientation
settings.layoutOrientation = "horizontal";
if($("#radio-layout-orientation-vertical").is(":checked")) {
settings.layoutOrientation = "vertical";
}
localStorage.settings = JSON.stringify(settings);
};
core.createLayout = function() {
var layout = undefined;
var layoutGlobalConfig = { closable : true, resizable : false,
slidable : false, livePaneResizing : true, spacing_open : 20,
spacing_closed : 20, togglerLength_open : 90,
togglerLength_closed : 90, center__minWidth : 100, center__minHeight : 100,
stateManagement__enabled : false, };
if (settings.layoutOrientation == "horizontal") {
$(".ui-layout-east").addClass("well").attr("id", "wmd-preview");
layout = $('body').layout(
$.extend(layoutGlobalConfig,
{ east__resizable : true, east__size : .5, east__minSize : 200,
south__closable : false, }));
} else if (settings.layoutOrientation == "vertical") {
$(".ui-layout-east").remove();
$(".ui-layout-south").addClass("well").attr("id", "wmd-preview");
layout = $('body').layout(
$.extend(layoutGlobalConfig, { south__resizable : true,
south__size : .5, south__minSize : 200, }));
}
$(".ui-layout-toggler-north").addClass("btn").append(
$("<b>").addClass("caret"));
$(".ui-layout-toggler-south").addClass("btn").append(
$("<b>").addClass("caret"));
$(".ui-layout-toggler-east").addClass("btn").append(
$("<b>").addClass("caret"));
$("#navbar").click(function() {
layout.allowOverflow('north');
});
};
core.createEditor = function() {
$("#wmd-button-bar").empty();
var converter = Markdown.getSanitizingConverter();
var editor = new Markdown.Editor(converter);
@ -242,50 +312,21 @@ function createEditor() {
$("#wmd-hr-button").append($("<i>").addClass("icon-hr"));
$("#wmd-undo-button").append($("<i>").addClass("icon-undo"));
$("#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 : 100, center__minHeight : 100,
stateManagement__enabled : false, };
if (layoutOrientation === 0) {
$(".ui-layout-east").addClass("well").attr("id", "wmd-preview");
layout = $('body').layout(
$.extend(layoutGlobalConfig,
{ east__resizable : true, east__size : .5, east__minSize : 200,
south__closable : false, }));
} else if (layoutOrientation === 1) {
$(".ui-layout-east").remove();
$(".ui-layout-south").addClass("well").attr("id", "wmd-preview");
layout = $('body').layout(
$.extend(layoutGlobalConfig, { south__resizable : true,
south__size : .5, south__minSize : 200, }));
}
$(".ui-layout-toggler-north").addClass("btn").append(
$("<b>").addClass("caret"));
$(".ui-layout-toggler-south").addClass("btn").append(
$("<b>").addClass("caret"));
$(".ui-layout-toggler-east").addClass("btn").append(
$("<b>").addClass("caret"));
}
return core;
})(jQuery);
(function($) {
$(function() {
createLayout();
core.init();
if (typeof (Storage) !== "undefined") {
fileManager.init();
} else {
showError("Web storage is not available");
}
$("#navbar").click(function() {
layout.allowOverflow('north');
});
});
})(jQuery);