add ace editor toolbar.

marboo · Apr 17, 2013 · 60581ba · 60581ba
1 parent 3daf985
commit 60581ba
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 15 deletions.
diff --git a/css/marboo-editor.css b/css/marboo-editor.css
@@ -0,0 +1,51 @@
+.fullscreen {
+    width: 100% !important;
+    height: 100% !important;
+}
+
+#editor-window {
+    float: right;
+    position:fixed;
+    bottom: 2px;
+    right: 2px;
+    width: 600px;
+    height: 420px;
+}
+
+#editor {
+    width: 100%;
+    height: 100%;
+}
+
+#save_btn {
+    float:right;
+}
+
+.toolbar {
+    background: #a0a0a0;
+    height: 20px;
+}
+
+.btn {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin: 2px;
+    background-size: cover;
+}
+
+#close_btn {
+    background: url(/media/images/marboo/marboo-icon-close.png);
+}
+
+.zoom-out-btn {
+    background: url(/media/images/marboo/marboo-icon-contract.png) !important;
+}
+
+#zoom_btn {
+    background: url(/media/images/marboo/marboo-icon-expand.png);
+}
+
+#save_btn {
+    background: url(/media/images/marboo/marboo-icon-disk.png);
+}
diff --git a/css/marboo.css b/css/marboo.css
@@ -16,15 +16,6 @@ body {
     height: 100%;
 }
 
-#editor {
-    float: right;
-    position:fixed;
-    bottom: 0px;
-    right: 0px;
-    width: 600px;
-    height: 400px;
-}
-
 .kbd {
     display: inline-block;
     margin: 0 0.1em;

diff --git a/js/marboo-editor.js b/js/marboo-editor.js
@@ -1,4 +1,8 @@
 
+var saveButton = $("#save_btn");
+var closeButton = $("#close_btn");
+var zoomButton = $("#zoom_btn");
+
 if (currentFileName === undefined) {
     var currentFileName = "md";
 }
@@ -23,9 +27,8 @@ getMimeType = function(extension) {
   }
 };
 
-var saveButton = document.getElementById("save_btn");
-
 var editor = ace.edit("editor");
+editor.focus();
 editor.setTheme("ace/theme/monokai");
 
 // init editor content
@@ -44,7 +47,7 @@ if (currentFileName == "md" ||
     src = "    " + src.replace(/\n/g, "\n    ");
 }
 
-document.getElementById("preview").innerHTML = markdown.toHTML(src);
+$("#preview").append($(markdown.toHTML(src)));
 
 editorSession.on('change', function() {
     // preview
@@ -64,4 +67,29 @@ var saveNote = function() {
     marboo.save(editorSession.getValue());
 }
 
-saveButton.onclick = saveNote;
+var closeEditor = function() {
+    //marboo.saveEditor();
+    location.href = location.href.replace(".ace.html", ".html");
+}
+
+var zoomEditor = function() {
+    $("#editor-window").toggleClass("fullscreen");
+    zoomButton.toggleClass("zoom-out-btn");
+}
+
+saveButton.on("click", saveNote);
+closeButton.on("click", closeEditor);
+zoomButton.on("click", zoomEditor);
+
+var keys = {};
+
+$("#editor").keydown(function(e) {
+    keys[e.which] = true;
+    if (keys[91] && keys[83]) {
+        saveNote();
+    }
+});
+
+$("#editor").keyup(function (e) {
+    delete keys[e.which];
+});
diff --git a/osx-templates/ace.template.html b/osx-templates/ace.template.html
@@ -7,6 +7,7 @@
         <meta name="date" content="2013-04-15 23:16:57" />
         <meta name="generator" content="Marboo 0.6.1: http://marboo.biz" />
         <link rel="stylesheet" type="text/css" href="/media/css/marboo.css" media="screen" />
+        <link rel="stylesheet" type="text/css" href="/media/css/marboo-editor.css" media="screen" />
         <script src="/media/lib/markdown.js" type="text/javascript"></script>
         <!-- highlight.js -->
         <link rel="stylesheet" href="/media/css/highlight.css/default.css">
@@ -16,9 +17,16 @@
     <body style="background-color:transparent">
         <textarea id="source" style="display:none">%s</textarea>
         <div id="preview"></div>
-        <div id="editor"></div>
-        <input type="button" id="save_btn" value="保存"></input>
+        <div id="editor-window">
+            <div class="toolbar">
+                <a id="close_btn" class="btn" title="关闭" hidefocus="" href="#"></a>
+                <a id="zoom_btn" class="btn" title="最大化" hidefocus="" href="#"></a>
+                <a id="save_btn" class="btn" title="保存" hidefocus="" href="#"></a>
+            </div>
+            <div id="editor"></div>
+        </div>
 
+        <script src="/media/lib/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="/media/lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>
         <script src="/media/js/marboo-editor.js" type="text/javascript" charset="utf-8"></script>
     </body>