> latex math menu added.

> initial implementation of Structure in tree with jQuery.zTree lib. > cleanup option more remove-safe.
atilacamurca · Feb 25, 2014 · 6e4166a · 6e4166a
1 parent 5001b39
commit 6e4166a
Show file tree

Hide file tree

Showing 26 changed files with 573 additions and 59 deletions.
diff --git a/editor/css/editor.css b/editor/css/editor.css
@@ -0,0 +1,39 @@
+body {
+	background-color: #eeeeee;
+	padding-bottom: 40px;
+}
+
+.CodeMirror {
+	border: 1px solid #ddd;
+	font-size: 14px;
+	height: 450px;
+}
+
+.editor-name {
+	font-size: 20px;
+	margin-right: 16px;
+	font-weight: bold;
+}
+
+#editor-log {
+	border-top: 1px solid #ddd;
+	-webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	border-radius: 6px;
+	margin: 10px 0;
+	position: relative;
+}
+
+#editor-log-header {
+	padding: 9px 15px;
+	background-color: #f2dede;
+	color: #b94a48;
+	font-weight: bold;
+}
+
+#editor-log-content {
+	background-color: #ffffff;
+	padding: 9px 15px;
+	max-height: 100px;
+	overflow-y: scroll;
+}
diff --git a/editor/css/mkdoc.css b/editor/css/mkdoc.css
@@ -28,4 +28,4 @@ code {
 
 img.img-polaroid {
    width: 350px;
-}
+}
diff --git a/editor/css/zTreeStyle/img/diy/1_close.png b/editor/css/zTreeStyle/img/diy/1_close.png
diff --git a/editor/css/zTreeStyle/img/diy/1_open.png b/editor/css/zTreeStyle/img/diy/1_open.png
diff --git a/editor/css/zTreeStyle/img/diy/2.png b/editor/css/zTreeStyle/img/diy/2.png
diff --git a/editor/css/zTreeStyle/img/diy/3.png b/editor/css/zTreeStyle/img/diy/3.png
diff --git a/editor/css/zTreeStyle/img/diy/4.png b/editor/css/zTreeStyle/img/diy/4.png
diff --git a/editor/css/zTreeStyle/img/diy/5.png b/editor/css/zTreeStyle/img/diy/5.png
diff --git a/editor/css/zTreeStyle/img/diy/6.png b/editor/css/zTreeStyle/img/diy/6.png
diff --git a/editor/css/zTreeStyle/img/diy/7.png b/editor/css/zTreeStyle/img/diy/7.png
diff --git a/editor/css/zTreeStyle/img/diy/8.png b/editor/css/zTreeStyle/img/diy/8.png
diff --git a/editor/css/zTreeStyle/img/diy/9.png b/editor/css/zTreeStyle/img/diy/9.png
diff --git a/editor/css/zTreeStyle/img/line_conn.gif b/editor/css/zTreeStyle/img/line_conn.gif
diff --git a/editor/css/zTreeStyle/img/loading.gif b/editor/css/zTreeStyle/img/loading.gif
diff --git a/editor/css/zTreeStyle/img/zTreeStandard.gif b/editor/css/zTreeStyle/img/zTreeStandard.gif
diff --git a/editor/css/zTreeStyle/img/zTreeStandard.png b/editor/css/zTreeStyle/img/zTreeStandard.png
diff --git a/editor/css/zTreeStyle/zTreeStyle.css b/editor/css/zTreeStyle/zTreeStyle.css
@@ -0,0 +1,97 @@
+/*-------------------------------------
+zTree Style
+
+version:	3.4
+author:		Hunter.z
+email:		[email protected]
+website:	https://code.google.com/p/jquerytree/
+
+-------------------------------------*/
+
+.ztree * {padding:0; margin:0; font-size:12px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif}
+.ztree {margin:0; padding:5px; color:#333}
+.ztree li{padding:0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap; outline:0}
+.ztree li ul{ margin:0; padding:0 0 0 18px}
+.ztree li ul.line{ background:url(./img/line_conn.gif) 0 0 repeat-y;}
+
+.ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent;
+	text-decoration:none; vertical-align:top; display: inline-block}
+.ztree li a:hover {text-decoration:underline}
+.ztree li a.curSelectedNode {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
+.ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;}
+.ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#316AC5; color:white; height:16px; border:1px #316AC5 solid;
+	opacity:0.8; filter:alpha(opacity=80)}
+.ztree li a.tmpTargetNode_prev {}
+.ztree li a.tmpTargetNode_next {}
+.ztree li a input.rename {height:14px; width:80px; padding:0; margin:0;
+	font-size:12px; border:1px #7EC4CC solid; *border:0px}
+.ztree li span {line-height:16px; margin-right:2px}
+.ztree li span.button {line-height:0; margin:0; width:16px; height:16px; display: inline-block; vertical-align:middle;
+	border:0 none; cursor: pointer;outline:none;
+	background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
+	background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")}
+
+.ztree li span.button.chk {width:13px; height:13px; margin:0 3px 0 0; cursor: auto}
+.ztree li span.button.chk.checkbox_false_full {background-position:0 0}
+.ztree li span.button.chk.checkbox_false_full_focus {background-position:0 -14px}
+.ztree li span.button.chk.checkbox_false_part {background-position:0 -28px}
+.ztree li span.button.chk.checkbox_false_part_focus {background-position:0 -42px}
+.ztree li span.button.chk.checkbox_false_disable {background-position:0 -56px}
+.ztree li span.button.chk.checkbox_true_full {background-position:-14px 0}
+.ztree li span.button.chk.checkbox_true_full_focus {background-position:-14px -14px}
+.ztree li span.button.chk.checkbox_true_part {background-position:-14px -28px}
+.ztree li span.button.chk.checkbox_true_part_focus {background-position:-14px -42px}
+.ztree li span.button.chk.checkbox_true_disable {background-position:-14px -56px}
+.ztree li span.button.chk.radio_false_full {background-position:-28px 0}
+.ztree li span.button.chk.radio_false_full_focus {background-position:-28px -14px}
+.ztree li span.button.chk.radio_false_part {background-position:-28px -28px}
+.ztree li span.button.chk.radio_false_part_focus {background-position:-28px -42px}
+.ztree li span.button.chk.radio_false_disable {background-position:-28px -56px}
+.ztree li span.button.chk.radio_true_full {background-position:-42px 0}
+.ztree li span.button.chk.radio_true_full_focus {background-position:-42px -14px}
+.ztree li span.button.chk.radio_true_part {background-position:-42px -28px}
+.ztree li span.button.chk.radio_true_part_focus {background-position:-42px -42px}
+.ztree li span.button.chk.radio_true_disable {background-position:-42px -56px}
+
+.ztree li span.button.switch {width:18px; height:18px}
+.ztree li span.button.root_open{background-position:-92px -54px}
+.ztree li span.button.root_close{background-position:-74px -54px}
+.ztree li span.button.roots_open{background-position:-92px 0}
+.ztree li span.button.roots_close{background-position:-74px 0}
+.ztree li span.button.center_open{background-position:-92px -18px}
+.ztree li span.button.center_close{background-position:-74px -18px}
+.ztree li span.button.bottom_open{background-position:-92px -36px}
+.ztree li span.button.bottom_close{background-position:-74px -36px}
+.ztree li span.button.noline_open{background-position:-92px -72px}
+.ztree li span.button.noline_close{background-position:-74px -72px}
+.ztree li span.button.root_docu{ background:none;}
+.ztree li span.button.roots_docu{background-position:-56px 0}
+.ztree li span.button.center_docu{background-position:-56px -18px}
+.ztree li span.button.bottom_docu{background-position:-56px -36px}
+.ztree li span.button.noline_docu{ background:none;}
+
+.ztree li span.button.ico_open{margin-right:2px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.ico_close{margin-right:2px; background-position:-110px 0; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.ico_docu{margin-right:2px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle}
+.ztree li span.button.remove {margin-right:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle}
+
+.ztree li span.button.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
+
+ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)}
+
+span.tmpzTreeMove_arrow {width:16px; height:16px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute;
+	background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
+	background-position:-110px -80px; background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")}
+
+ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden; background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)}
+.zTreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute}
+
+/* level style*/
+/*.ztree li span.button.level0 {
+	display:none;
+}
+.ztree li ul.level0 {
+	padding:0;
+	background:none;
+}*/
diff --git a/editor/index.html b/editor/index.html
@@ -6,26 +6,11 @@
     <link rel="stylesheet" href="css/codemirror.css">
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
+    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">
     <link href="css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css">
     <link rel="stylesheet" href="theme/lesser-dark.css">
+    <link rel="stylesheet" href="css/editor.css">
 
-    <style type="text/css">
-        body {
-            background-color: #eeeeee;
-        }
-
-        .CodeMirror {
-            border: 1px solid #ddd;
-            font-size: 14px;
-            height: 500px;
-        }
-
-        .editor-name {
-            font-size: 20px;
-            margin-right: 16px;
-            font-weight: bold;
-        }
-    </style>
     <style id="cursor-highlight" type="text/css">
         .CodeMirror-activeline-background {
             background: #555753 !important;
@@ -36,9 +21,9 @@
 <div class="container">
     <div class="row" style="margin-top: 20px;">
         <div class="span12">
-					<span class="editor-name">
-                        <i class="icon-file"></i> mkdoc-editor
-                    </span>
+				<span class="editor-name">
+               <i class="icon-file"></i> mkdoc-editor
+            </span>
 
             <div class="btn-group">
                 <button id="save" href="#" onclick="return false;"
@@ -101,11 +86,34 @@
                     <i class="icon-share-alt"></i> Redo
                 </a>
             </div>
-            <hr/>
+
+            <div class="btn-group">
+                <a href="#" class="btn theme"
+                   data-theme="default" data-color="#e8f2ff"
+                   onclick="return false;"
+                   rel="tooltip" title="Lighs On">
+                    <i class="icon-lightbulb"></i>
+                </a>
+                <a href="#" class="btn btn-inverse theme"
+                   data-theme="lesser-dark" data-color="#555753"
+                   onclick="return false;"
+                   rel="tooltip" title="Lighs Off">
+                    <i class="icon-lightbulb"></i>
+                </a>
+            </div>
         </div>
         <!-- .span -->
     </div>
     <!-- .row -->
+
+    <hr/>
+
+    <div class="row">
+		<div class="span12">
+			<span style="margin-right: 10px;">LaTeX</span>
+			<div class="btn-group" id="latex-math"></div>
+		</div>
+    </div>
 
     <div class="row" style="margin-top: 10px;">
         <div class="span3">
@@ -115,8 +123,8 @@
             </div>
 
             <div class="well" style="max-width: 340px; padding: 8px 0;">
-					<ul class="nav nav-list" id="struct">
-               </ul>
+					<!--<h6>Structure</h6>-->
+					<ul class="nav nav-list" id="struct"></ul>
             </div>
 
             <div class="well" style="max-width: 340px; padding: 8px 0;">
@@ -139,24 +147,35 @@
         </div>
     </div>
     <!-- .row -->
-
-    <div class="row">
-        <div class="span2 offset3">
-            <div>Theme:</div>
-            <div class="btn-group">
-                <a href="#" class="btn btn-large theme"
-                   data-theme="default" data-color="#e8f2ff"
-                   onclick="return false;">
-                    <i class="icon-lightbulb"></i>
-                </a>
-                <a href="#" class="btn btn-inverse btn-large theme"
-                   data-theme="lesser-dark" data-color="#555753"
-                   onclick="return false;">
-                    <i class="icon-lightbulb icon-"></i>
-                </a>
-            </div>
-        </div>
-    </div>
+
+    <!--<div class="row">
+		<div class="offset3 span9">
+			<div id="editor-log" class="clearfix">
+				<div id="editor-log-header">Log</div>
+				<div id="editor-log-content">
+					text<br/>
+					text<br/>
+					text<br/>
+					text<br/>
+					text<br/>
+					text<br/>
+					text<br/>
+					text<br/>
+					text<br/>
+					text<br/>
+					text<br/>
+				</div>
+			</div>
+		</div>
+   </div>-->
+
+   <footer>
+		<p class="pull-right"><a href="#">Back to top</a></p>
+		<p>
+			mkdoc por <a href="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/atilacamurca">github.com/atilacamurca</a>
+			&middot; <a href="https://twitter.com/atilacamurca">@atilacamurca</a>
+		</p>
+	</footer>
 </div>
 <!-- .container -->
 
@@ -187,6 +206,8 @@ <h3>Insert picture</h3>
    <script src="addon/edit/closebrackets.js"></script>
    <script src="lib/mousetrap.min.js"></script>
    <script src="lib/mousetrap-global-bind.min.js"></script>
+   <script src="lib/jquery.ztree.all-3.5.min.js"></script>
+
    <script src="js/editor.js"></script>
    <script src="js/main.js"></script>
    <script src="js/shortcuts.js"></script>

diff --git a/editor/js/editor.js b/editor/js/editor.js
@@ -1,20 +1,11 @@
 var editor = function() {
 
 	var openfile = "content.md",
-		doc,
 		DEF_TEXT = {
 			save: '<i class="icon-save"></i> Save',
 			view: '<i class="icon-eye-open"></i> View',
 		};
 
-	/**
-	 * @param doc_ref document reference
-	 * hack: CodeMirror could not be initialized inside this object!
-	 */
-	function init(doc_ref) {
-		doc = doc_ref;
-	}
-
 	function load(file) {
 		openfile = file || openfile;
 		$.post('/load', {file: openfile}, function (json) {
@@ -25,7 +16,7 @@ var editor = function() {
 			} else if (/(\.md)$/.test(openfile)) {
 				doc.setOption("mode", "markdown");
 			}
-			struct.parse(doc);
+			struct.parse();
 			// if the document changes and an undo is called
 			// the history from the previous document is used
 			// causing data loss...
@@ -230,8 +221,6 @@ var editor = function() {
 
 	/* public functions and variables */
 	return {
-		//openfile: openfile,
-		init: init,
 		load: load,
 		save: save,
 		view: view,