Separate tag.js it into tagNav and tagInput.

node_modules/api.js

@@ -193,7 +193,6 @@ var Api = {
 			}
 			var ret = response.body;
 			console.log('--getSyncState--ret---')
-			console.log(ret);
 			if(Common.isOk(ret)) {
 				callback && callback(ret);
 			} else {
@@ -570,7 +569,6 @@ var Api = {
 			}
 
 			console.log('update note :');
-			console.log(data);
 
 			// files处理
 			var needMultiple = false;

node_modules/web.js

@@ -98,9 +98,9 @@ var Web = {
 		// console.log("是啊");
 		// console.error(tagSyncInfo);
 		var adds = tagSyncInfo.adds;
-		me.Tag.addTagsNav(adds);
+		me.Tag.nav.addTags(adds);
 		var deletes = tagSyncInfo.deletes;
-		me.Tag.deleteTagsNav(deletes);
+		me.Tag.nav.deleteTags(deletes);
 	},
 
 	addTag: function(tag) { 

note.html

@@ -181,10 +181,6 @@ function log(o) {
               </div>
 
               <ul class="folderBody clearfix" id="tagNav">
-                <li data-tag="red"><a> <span class="label label-red">red</span></a></li>
-                <li data-tag="blue"><a> <span class="label label-blue">blue</span></a></li>
-                <li data-tag="yellow"><a> <span class="label label-yellow">yellow</span></a></li>
-                <li data-tag="green"><a> <span class="label label-green">green</span></a></li>
               </ul>
             </div>
 
@@ -467,26 +463,22 @@ function log(o) {
           </div>
 
           <div id="editorBottom">
-            <div id="tag" class="clearfix">
+            <div id="tagInputBox" class="clearfix">
+              <i class="fa fa-bookmark-o" id="tagIcon"></i>
+              <!-- TODO use ul here -->
               <div id="tags">
               </div>
-              <div class="dropdown" style="" id="tagDropdown">
+              <div class="dropdown" id="tagInputGroup">
-                <i class="fa fa-bookmark-o"></i>
                 <a
                   class="metro-a dropdown-toggle" data-toggle="dropdown"
-                  id="addTagTrigger" style="cursor: text; padding-left: 0">
+                  id="tagInputTrigger" style="cursor: text; padding-left: 0">
                   <span class="add-tag-text lang">
                     clickAddTag
                   </span>
                 </a>
-                <input type="text" id="addTagInput" />
+                <input type="text" id="tagInput" />
-                <ul class="dropdown-menu" role="menu" id="tagColor">
+                <!-- TODO delete this -->
-                  <li role="presentation"><span class="label label-red lang">red</span>
+                <ul class="dropdown-menu" role="menu" id="tagSuggestion">
-                  </li>
-                  <li role="presentation"><span class="label label-blue lang">blue</span>
-                  </li>
-                  <li role="presentation"><span class="label label-yellow lang">yellow</span></li>
-                  <li role="presentation"><span class="label label-green lang">green</span></li>
                 </ul>
               </div>
             </div>
@@ -676,6 +668,7 @@ window.debug = false;
 <script src="public/js/bootstrap-min.js"></script>
 <script src="public/js/app/note.js"></script>
 <script src="public/js/app/tag.js"></script>
+<script src="public/js/app/tagNew.js"></script>
 <script src="public/js/app/notebook.js"></script>
 <script src="public/js/app/share.js"></script>
 <script src="public/js/object_id.js"></script>

public/js/app/note.js

@@ -247,7 +247,7 @@ Note.curHasChanged = function(force) {
 
 	// 收集当前信息, 与cache比对
 	var title = $('#noteTitle').val();
-	var tags = Tag.getTags();
+	var tags = Tag.input.getTags();
 
 	var hasChanged = {
 		hasChanged: false, // 总的是否有改变
@@ -811,7 +811,7 @@ Note.renderChangedNote = function(changedNote) {
 // 此时需要清空只读的, 且切换到note edit模式下
 Note.clearNoteInfo = function() {
 	Note.clearCurNoteId();
-	Tag.clearTags();
+	Tag.input.clearTags();
 	$("#noteTitle").val("");
 	setEditorContent("");
 
@@ -849,7 +849,7 @@ Note.renderNote = function(note) {
 
 	// 当前正在编辑的
 	// tags
-	Tag.renderTags(note.Tags);
+	Tag.input.setTags(note.Tags);
 };
 
 // render content
@@ -1760,7 +1760,7 @@ Note.deleteNoteTag = function(item, tag) {
 			}
 			// 如果当前笔记是展示的笔记, 则重新renderTags
 			if(noteId == Note.curNoteId) {
-				Tag.renderTags(note.Tags);
+				Tag.input.setTags(note.Tags);
 			}
 		}
 	}

public/js/app/page.js

@@ -1283,7 +1283,7 @@ var State = {
 		if(Notebook.isStarred) {
 			CurIsStarred = true;
 		} else if(Notebook.isTag) {
-			CurTag = Tag.curTag;
+			CurTag = Tag.nav.curTag;
 		}
 		CurNotebookId = Notebook.curNotebookId;
 
@@ -1363,7 +1363,7 @@ var State = {
 		}
 		// 搜索标签
 		else if(state.CurTag) {
-			Tag.searchTag(state.CurTag, state.CurNoteId);
+			Tag.nav.searchByTag(state.CurTag, state.CurNoteId);
 		}
 		// 搜索笔记
 		else if(state.CurSearchKey) {
@@ -1484,7 +1484,7 @@ function initPage(initedCallback) {
 
 			// 标签
 			TagService.getTags(function(tags) {
-				Tag.renderTagNav(tags);
+        Tag.nav.setTags(tags);
 				ok();
 			});
 

public/js/app/tag.js

@@ -1,7 +1,5 @@
 // Tag
 
-// 蓝色, 红色怎么存到数据库中? 直接存蓝色
-
 Tag.classes = {
 	"蓝色": "label label-blue",
 	"红色": "label label-red",
@@ -37,7 +35,6 @@ Tag.getTags = function() {
 	var tags = [];
 	Tag.t.children().each(function(){
 		var text = $(this).data('tag');
-		// text = text.substring(0, text.length - 1); // 把X去掉
 		text = Tag.mapCn2En[text] || text;
 		tags.push(text);
 	});
@@ -64,13 +61,6 @@ Tag.renderTags = function(tags) {
 	}
 };
 
-// tag最初状态
-function revertTagStatus() {
-	$("#addTagTrigger").show();
-	$("#addTagInput").hide();
-	// hideTagList();
-}
-
 function hideTagList(event) {
 	$("#tagDropdown").removeClass("open");
 	if (event) {
@@ -84,39 +74,6 @@ function showTagList(event) {
 	}
 }
 
-// 只读模式下显示tags
-// called by Note
-Tag.renderReadOnlyTags = function(tags) {
-	// 先清空
-	$("#noteReadTags").html("");
-	if(isEmpty(tags)) {
-		$("#noteReadTags").html(getMsg("noTag"));
-	}
-	
-	var i = true;
-	function getNextDefaultClasses() {
-		if (i) {
-			return "label label-default";
-			i = false
-		} else {
-			i = true;
-			return "label label-info";
-		}
-	}
-	
-	for(var i in tags) {
-		var text = tags[i];
-		text = Tag.mapEn2Cn[text] || text;
-		var classes = Tag.classes[text];
-		if(!classes) {
-			classes = getNextDefaultClasses();
-		}
-		tag = tt('<span class="?">?</span>', classes, text);
-		
-		$("#noteReadTags").append(tag);
-	}
-}
-
 // 添加tag
 // tag = {classes:"label label-red", text:"红色"}
 // tag = life
@@ -265,7 +222,6 @@ Tag.renderTagNav = function(tags) {
 };
 
 // 添加的标签重新render到左边, 放在第一个位置
-// 重新render
 Tag.addTagNav = function(newTag) {
 	var me = this;
 	for(var i in me.tags) {
@@ -312,7 +268,7 @@ Tag.searchTag = function(tag, noteId) {
 
 // 事件
 $(function() {
-	// tag
+	// tag input box
 	$("#addTagTrigger").click(function() {
 		$(this).hide();
 		$("#addTagInput").show().focus().val("");
@@ -358,29 +314,17 @@ $(function() {
 			text : a.text()
 		}, true);
 	});
-	// 这是个问题, 为什么? 捕获不了事件?, input的blur造成
-	/*
-	$(".label").click(function(event) {
-		var a = $(this);
-		Tag.appendTag({
-			classes : a.attr("class"),
-			text : a.text()
-		});
-		// event.stopPropagation();
-	});
-	*/
 	
 	$("#tags").on("click", "i", function() {
 		Tag.removeTag($(this).parent());
 	});
-	//----------
+  
-	// 
+	// tag nav
 	function deleteTag() {
 		$li = $(this).closest('li');
 		var tag = $.trim($li.data("tag"));
 		if(confirm(getMsg("Are you sure ?"))) {
 			TagService.deleteTag(tag, function(re) {
-				// re = {NoteId => note}
 				if(typeof re == "object" && re.Ok !== false) {
 					Note.deleteNoteTag(re, tag);
 					$li.remove();
@@ -389,52 +333,12 @@ $(function() {
 		};
 	}
 	
-	//-------------
-	// nav 标签搜索
 	function searchTag() {
 		var $li = $(this).closest('li');
 		var tag = $.trim($li.data("tag"));
-
 		Tag.searchTag(tag);
-		/*
-
-		// tag = Tag.mapCn2En[tag] || tag;
-		
-		// 学习changeNotebook
-		
-		// 1
-		Note.curChangedSaveIt();
-		
-		// 2 先清空所有
-		// 也会把curNoteId清空
-		Note.clearAll();
-		
-		// $("#tagSearch").html($li.html()).show();
-
-		var h = $li.html();
-		Notebook.changeCurNotebookTitle(h, false, '', true);
-		Tag.curTag = h;
-		$('#curNotebookForListNote').find('i, em').remove();
-		// $("#tagSearch .tag-delete").remove();
-		
-		showLoading();
-		NoteService.searchNoteByTag(tag, function(notes) {
-			hideLoading();
-			if(notes) {
-				// 和note搜索一样
-				// 设空, 防止发生上述情况
-				// Note.curNoteId = "";
-				Note.renderNotes(notes);
-				if(!isEmpty(notes)) {
-					Note.changeNote(notes[0].NoteId);
-				}
-			}
-		});
-		*/
 	};
 
-	$("#myTag .folderBody").on("click", "li .label", searchTag);
+	$("#tagNav").on("click", "li .label", searchTag);	
-	// $("#minTagNav").on("click", "li", searchTag);
+	$("#tagNav").on("click", "li .tag-delete", deleteTag);
-	
+});
-	$("#myTag .folderBody").on("click", "li .tag-delete", deleteTag);
-});

public/js/app/tagNew.js

@@ -0,0 +1,243 @@
+/**
+ * tag navigator
+ */
+var TagNav = function() {
+  this.tags = [];
+  this.curTag = null;
+  this.$element = $("tagNav");
+  this.$element.on("click", "li .label", function() {
+    var tagValue = $(this).closest('li').data("tag").trim();
+    this._searchByTag(tagValue);
+  });
+  this.$element.on("click", "li .tag-delete", this._deleteTag);    
+};
+
+TagNav.prototype = {
+  constructor: TagNav,
+  _searchByTag: function(tag, noteId) {
+  	Note.curChangedSaveIt();
+  	// 清空所有，也会把curNoteId清空
+  	Note.clearAll();
+
+  	var tagTitle = '<span class="label label-default">' + trimTitle(tag) + '</span>';
+
+  	Notebook.changeCurNotebookTitle(tagTitle, false, '', true);
+    this.curTag = tag;
+
+  	NoteService.searchNoteByTag(tag, function(notes) {
+  		hideLoading();
+  		if(notes) {
+  			Note.renderNotes(notes);
+  			Note.renderNotesAndTargetNote(notes, noteId);
+  		}
+  	});
+  },
+  
+  _deleteTag: function() {
+    $li = $(this).closest('li');
+    var tag = $.trim($li.data("tag"));
+    if(confirm(getMsg("Are you sure ?"))) {
+      TagService.deleteTag(tag, function(re) {
+        if(typeof re == "object" && re.Ok !== false) {
+          Note.deleteNoteTag(re, tag);
+          $li.remove();
+        }
+      });
+    };
+  },
+  
+  // called by node: web.js
+  deleteTags: function(tags) {
+    tags = tags || [];
+    for(var i = 0; i < tags.length; ++i) {
+      var title = tags[i];
+      $('#myTag li[data-tag="' + title + '"]').remove();
+    }
+  },
+
+  // called by node: web.js
+  // 添加标签，并重绘到左侧
+  addTags: function(tags) {
+    console.warn("nav addtags", tags);
+    tags = tags || [];
+    // 去重，将添加的标签放在第一个位置
+    for(var i = 0; i < tags.length; ++i) {
+      for(var j in this.tags) {
+        if(this.tags[j].Tag == tags[i].Tag) {
+          this.tags.splice(j, 1);
+          break;
+        }
+      }
+      this.tags.unshift(tags[i]);
+    }
+    this.setTags(this.tags);
+  },
+
+  // called by page.js
+  // 更新tags，并重绘到左侧
+  setTags: function(tags) {
+    console.warn("nav settags", tags);
+  	this.tags = tags || [];
+  	$("#tagNav").html('');
+  	for(var i in this.tags) {
+  		var noteTag = this.tags[i];
+  		var tag = noteTag.Tag;
+  		var text = tag;
+  		
+  		text = trimTitle(text);
+  		var classes = "label label-default";
+  		// 笔记数量先隐藏, 不准确
+  		$("#tagNav").append(tt('<li data-tag="?"><a> <span class="?">? <em style="display: none">(?)</em></span> <i class="tag-delete">X</i></li>', tag, classes, text, noteTag.Count));
+  	}
+
+  	if(this.tags.length == 0) {
+  		$("#tagNav").html('<p class="no-info">' + getMsg('No tag') + '</p>');
+  	}
+  },
+};
+
+/**
+ * tag edit area of editor
+ */
+var TagInput = function() {
+  this.tags = []; //array of strings
+  var me = this;
+  this.$tags = $("#tags");
+  this.$input = $("#tagInput");
+  this.$inputTrigger = $("#tagInputTrigger");
+  this.$suggestion = $("#tagSuggestion");
+  this.$suggestion.hide();
+  
+  this.$inputTrigger.click(function() {
+    me.$inputTrigger.hide();
+    me.$input.show().focus().val("");
+  });
+  
+  this.$input.blur(function() {
+    var val = me.$input.val();
+    if(val) {
+      me._addTag(val, true);
+    }
+  });
+  
+  this.$input.keydown(function(e) {
+    if (e.keyCode == 13) {
+      me._hideSuggestion();
+      $(this).trigger("blur");
+    }
+    else {
+      me._showSuggestion(me.$input.val());
+    }
+  });
+  // 点击下拉时也会触发input的blur事件
+  $("#tagColor li").click(function(event) {
+    var a;
+    if($(this).attr("role")) {
+      a = $(this).find("span");
+    } else {
+      a = $(this);
+    }
+    Tag.appendTag({
+      classes : a.attr("class"),
+      text : a.text()
+    }, true);
+  });
+  
+  this.$tags.on("click", "i", function() {
+    me._removeTag($(this).parent());
+  });
+}
+
+TagInput.prototype = {
+  constructor: TagInput,
+  
+  // called by Note
+  getTags: function() {
+  	var tags = [];
+  	this.$tags.children().each(function(){
+  		var text = $(this).data('tag');
+  		tags.push(text);
+  	});
+  	// 正常情况下不会重复
+  	return tags;
+  },
+  
+  // called by Note
+  clearTags: function() {
+  	this.$tags.html("");
+  },
+
+  // called by Note
+  setTags: function(tags) {
+  	if(isEmpty(tags) || !Array.isArray(tags)) {
+  		return;
+  	}
+    console.warn("input settags", tags);
+    this.$tags.html("");
+  	for(var i = 0; i < tags.length; ++i) {
+  		this._addTag(tags[i]);
+  	}
+  },
+  
+  // tag应该是string的，也可能是number
+  _addTag: function(tag, save) {
+    if(!tag) {
+      return;
+    }
+    var classes = "label label-default",
+      text = (tag + "").trim(),
+      escapedText = trimTitle(text);
+    
+    // 取出tags中重复
+    var duplicate = false;
+    this.$tags.children().each(function() {
+      if (escapedText + "X" == $(this).text()) {
+        $(this).remove();
+        duplicate = true;
+      }
+    });
+
+    this._hideSuggestion();
+    this.$tags.append(tt('<span class="?" data-tag="?">?<i title="' + getMsg("delete") + '">X</i></span>', classes, text, escapedText));
+        
+    if(save && !duplicate) {
+      this._saveTag(text);
+    }
+  },
+
+  // 保存tag
+  _saveTag(text) {
+    Note.curChangedSaveIt(true, function() {
+      TagService.addOrUpdateTag(text, function(ret) {
+        if(typeof ret == 'object' && ret.Ok !== false) {
+          Tag.nav.addTags([ret]);
+        }
+      });
+    });    
+  },
+  
+  // 删除tag
+  _removeTag: function($target) {
+    var tag = $target.data('tag');
+    $target.remove();
+    Note.curChangedSaveIt(true, function() {
+      TagService.addOrUpdateTag(tag, function(ret) {
+        console.error("delete ret", ret);
+        if(typeof ret == 'object' && ret.Ok !== false) {
+          Tag.nav.addTags([ret]);
+        }
+      });
+    });
+  },
+  
+  _showSuggestion: function(keyword) {
+    this.$suggestion.show();
+  },
+  
+  _hideSuggestion: function() {
+    this.$suggestion.hide();
+  },
+};
+
+Tag.nav = new TagNav();
+Tag.input = new TagInput();

public/themes/default.css

@@ -317,16 +317,32 @@ h3 {
   border-bottom: 1px solid #ddd;
   height: 36px;
 }
-#tag {
+#tagInputBox {
-  height: 36px;
+  height: 30px;
-  line-height: 36px;
+  line-height: 30px;
+}
+#tagInputBox > * {
+  float: left;
+  height: 30px;
+  line-height: 30px;
+}
+#tagIcon {
+  display: block;
+  text-align: center;
+  margin-right: 4px;
 }
 #tags {
   display: block;
+  padding: 0;
+  margin: 0;
+  list-style: none;  
+}
+#tags li {
   float: left;
-  line-height: 25px;
+  height: 20px;
-  height: 25px;
+  line-height: 20px;
-  margin-top: 0;
+  margin-top: 5px;
+  margin-right: 2px;
 }
 #tags .label {
   margin-right: 2px;
@@ -993,7 +1009,7 @@ h3 {
   height: 30px;
   border-top: 1px solid #eee;
 }
-#tag {
+#tagInputBox {
   position: absolute;
   right: 0;
   top: 0;