leanote/desktop-app
1
0
Fork 0
mirror of https://github.com/leanote/desktop-app.git synced 2025-10-18 09:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Separate tag.js it into tagNav and tagInput.

Browse Source
This commit is contained in:
LucasYuNju
2016-09-11 16:52:23 +08:00
parent dbd93609ad
commit 48519b48ad
8 changed files with 290 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
node_modules/api.js generated vendored
View File

@@ -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;

4
node_modules/web.js generated vendored
View File

@@ -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) {

25
note.html
View File

@@ -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">
<i class="fa fa-bookmark-o"></i>
<div class="dropdown" id="tagInputGroup">
<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" />
<ul class="dropdown-menu" role="menu" id="tagColor">
<li role="presentation"><span class="label label-red lang">red</span>
</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>
<input type="text" id="tagInput" />
<!-- TODO delete this -->
<ul class="dropdown-menu" role="menu" id="tagSuggestion">
</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>

8
public/js/app/note.js
View File

@@ -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);
}
}
}

6
public/js/app/page.js
View File

@@ -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();
});

108
public/js/app/tag.js
View File

@@ -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);
// $("#minTagNav").on("click", "li", searchTag);
$("#myTag .folderBody").on("click", "li .tag-delete", deleteTag);
});
$("#tagNav").on("click", "li .label", searchTag);
$("#tagNav").on("click", "li .tag-delete", deleteTag);
});

243
public/js/app/tagNew.js Normal file
View File

@@ -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();

30
public/themes/default.css
View File

@@ -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;