+
+
-
@@ -676,6 +668,7 @@ window.debug = false;
+
diff --git a/public/js/app/note.js b/public/js/app/note.js
index 9b9c7101..9f3a1e43 100644
--- a/public/js/app/note.js
+++ b/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);
}
}
}
diff --git a/public/js/app/page.js b/public/js/app/page.js
index d6b93a28..45c743fc 100644
--- a/public/js/app/page.js
+++ b/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();
});
diff --git a/public/js/app/tag.js b/public/js/app/tag.js
index ab27b8a2..cb9b7da4 100644
--- a/public/js/app/tag.js
+++ b/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('
?', 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);
- // $("#minTagNav").on("click", "li", searchTag);
-
- $("#myTag .folderBody").on("click", "li .tag-delete", deleteTag);
-});
\ No newline at end of file
+ $("#tagNav").on("click", "li .label", searchTag);
+ $("#tagNav").on("click", "li .tag-delete", deleteTag);
+});
diff --git a/public/js/app/tagNew.js b/public/js/app/tagNew.js
new file mode 100644
index 00000000..0dfb48d9
--- /dev/null
+++ b/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 = '
' + trimTitle(tag) + '';
+
+ 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('
? (?) X', tag, classes, text, noteTag.Count));
+ }
+
+ if(this.tags.length == 0) {
+ $("#tagNav").html('
' + getMsg('No tag') + '
');
+ }
+ },
+};
+
+/**
+ * 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('
?X', 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();
diff --git a/public/themes/default.css b/public/themes/default.css
index d3b6dd66..94460ce6 100644
--- a/public/themes/default.css
+++ b/public/themes/default.css
@@ -317,16 +317,32 @@ h3 {
border-bottom: 1px solid #ddd;
height: 36px;
}
-#tag {
- height: 36px;
- line-height: 36px;
+#tagInputBox {
+ height: 30px;
+ 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: 25px;
- margin-top: 0;
+ height: 20px;
+ line-height: 20px;
+ 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;