Add settings panel
This commit is contained in:
benweet
parent
5bd0925a2b
commit
6f69c07a71
@ -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
45
index.html
@ -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">×</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">×</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>
|
||||
|
||||
147
js/main.js
147
js/main.js
@ -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,70 +222,111 @@ var gdrive = (function($) {
|
||||
return gdrive;
|
||||
})(jQuery);
|
||||
|
||||
function createEditor() {
|
||||
$("#wmd-button-bar").empty();
|
||||
var converter = Markdown.getSanitizingConverter();
|
||||
var editor = new Markdown.Editor(converter);
|
||||
editor.run();
|
||||
var core = (function($) {
|
||||
var core = {};
|
||||
|
||||
$(".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-italic-button").append($("<i>").addClass("icon-italic"));
|
||||
$("#wmd-link-button").append($("<i>").addClass("icon-globe"));
|
||||
$("#wmd-quote-button").append($("<i>").addClass("icon-indent-left"));
|
||||
$("#wmd-code-button").append($("<i>").addClass("icon-code"));
|
||||
$("#wmd-image-button").append($("<i>").addClass("icon-picture"));
|
||||
$("#wmd-olist-button").append($("<i>").addClass("icon-numbered-list"));
|
||||
$("#wmd-ulist-button").append($("<i>").addClass("icon-list"));
|
||||
$("#wmd-heading-button").append($("<i>").addClass("icon-text-height"));
|
||||
$("#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"));
|
||||
}
|
||||
core.init = function() {
|
||||
this.loadSettings();
|
||||
this.saveSettings();
|
||||
this.createLayout();
|
||||
|
||||
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"));
|
||||
}
|
||||
$(".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);
|
||||
editor.run();
|
||||
|
||||
$(".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-italic-button").append($("<i>").addClass("icon-italic"));
|
||||
$("#wmd-link-button").append($("<i>").addClass("icon-globe"));
|
||||
$("#wmd-quote-button").append($("<i>").addClass("icon-indent-left"));
|
||||
$("#wmd-code-button").append($("<i>").addClass("icon-code"));
|
||||
$("#wmd-image-button").append($("<i>").addClass("icon-picture"));
|
||||
$("#wmd-olist-button").append($("<i>").addClass("icon-numbered-list"));
|
||||
$("#wmd-ulist-button").append($("<i>").addClass("icon-list"));
|
||||
$("#wmd-heading-button").append($("<i>").addClass("icon-text-height"));
|
||||
$("#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"));
|
||||
};
|
||||
|
||||
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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user