Add settings panel

css/main.css

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

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
+					data-target="#modal-remove-file-confirm"><i class="icon-trash"></i></a>
-					class="btn dropdown-toggle" data-toggle="dropdown" href="#"
+					<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>
+							data-target="#modal-remove-file-confirm"><i
-								Remove file</a></li>
+								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>

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,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;
+	return core;
-var layout;
+})(jQuery);
-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"));
-}
 
 (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);