liweichun
/
my-bookmark
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

备忘录使用列表显示

This commit is contained in:
luchenqun 2018-04-15 21:59:09 +08:00
parent 5d90a022b2
commit 0d5cc8ffc1
2 changed files with 89 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
public/scripts/controllers/note-controller.js
View File

@ -1,4 +1,4 @@
app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$window', '$timeout', '$document', 'ngDialog', 'bookmarkService', 'pubSubService', 'dataService', function($scope, $state, $stateParams, $filter, $window, $timeout, $document, ngDialog, bookmarkService, pubSubService, dataService) {
app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$window', '$timeout', '$document', 'ngDialog', 'bookmarkService', 'pubSubService', 'dataService', function ($scope, $state, $stateParams, $filter, $window, $timeout, $document, ngDialog, bookmarkService, pubSubService, dataService) {
console.log("Hello noteCtr...", $stateParams);
const perPageItems = 35;
@ -37,7 +37,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
console.log('autoLogin err', err)
});
$scope.changeCurrentPage = function(currentPage) {
$scope.changeCurrentPage = function (currentPage) {
currentPage = parseInt(currentPage) || 0;
console.log('currentPage = ', currentPage);
if (currentPage <= $scope.totalPages && currentPage >= 1) {
@ -50,8 +50,8 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
}
// 快捷键a增加书签
$document.bind("keydown", function(event) {
$scope.$apply(function() {
$document.bind("keydown", function (event) {
$scope.$apply(function () {
// a按键，显示
var key = event.key.toUpperCase();
if (key == 'A' && dataService.keyShortcuts() && (!$scope.add)) {
@ -60,12 +60,12 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
})
});
$scope.showAddNote = function() {
$scope.showAddNote = function () {
$scope.add = (!$scope.add);
$scope.edit = false;
$scope.content = '';
if ($scope.add) {
$timeout(function() {
$timeout(function () {
$("#noteedit")[0].focus();
});
}
@ -82,7 +82,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
}
}
$scope.addNote = function(close) {
$scope.addNote = function (close) {
if ($scope.content == '') {
toastr.error('不允许备忘录内容为空！', "提示");
return;
@ -130,11 +130,12 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
});
}
$scope.copy = function(content) {
$scope.copy = function (content, $event) {
dataService.clipboard(content);
$event && $event.stopPropagation();
}
$scope.delNote = function(id, content) {
$scope.delNote = function (id, content) {
$scope.currentNoteId = id;
$scope.content = content;
var width = content.length >= 500 ? "50%" : "30%";
@ -146,7 +147,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
});
}
$scope.confirmDelNote = function() {
$scope.confirmDelNote = function () {
if ($scope.currentNoteId) {
var params = {
id: $scope.currentNoteId
@ -158,7 +159,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
$("#" + $scope.currentNoteId).transition({
animation: dataService.animation(),
duration: 500,
onComplete: function() {
onComplete: function () {
$("#" + $scope.currentNoteId).remove();
}
});
@ -176,7 +177,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
}
}
$scope.editNote = function(id, content, tagId) {
$scope.editNote = function (id, content, tagId) {
$scope.add = true;
$scope.edit = true;
$scope.content = content;
@ -185,7 +186,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
updateSelectTag(tagId);
}
$scope.updateNote = function() {
$scope.updateNote = function () {
var tagName = '';
$scope.tags.forEach((tag) => {
if ($scope.currentTagId === tag.id) {
@ -227,7 +228,7 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
});
}
$scope.detailNote = function(content) {
$scope.detailNote = function (content) {
$scope.content = content;
var width = content.length >= 500 ? "50%" : "30%";
dialog = ngDialog.open({
@ -238,21 +239,21 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
});
}
$scope.closeNote = function() {
$scope.closeNote = function () {
$('.js-note').transition({
animation: dataService.animation(),
duration: '500ms',
onComplete: function() {
onComplete: function () {
$(".js-note").remove();
}
});
}
$scope.setHoverNote = function(note) {
$scope.setHoverNote = function (note) {
$scope.hoverNote = note;
}
$scope.clickTag = function(id) {
$scope.clickTag = function (id) {
$scope.currentTagId = id;
$scope.totalItems = 0;
updateSelectTag(id);
@ -264,6 +265,21 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
}
}
$scope.noteClick = function (note, flag, $event) {
if (!note.detail || flag) {
var detail = note.detail;
$scope.notes.forEach((note) => {
note.detail = false;
$("#" + note.id).css("background", "none");
})
note.detail = !detail;
$("#" + note.id).css("background", note.detail ? "#f8f8f8" : "none");
}
if (flag) {
$event && $event.stopPropagation();
}
}
function updateSelectTag(tagId) {
$scope.tags.forEach((tag) => {
tag.clicked = false;
@ -275,8 +291,8 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
}
// 在输入文字的时候也会触发，所以不要用Ctrl,Shift之类的按键
$document.bind("keydown", function(event) {
$scope.$apply(function() {
$document.bind("keydown", function (event) {
$scope.$apply(function () {
var key = event.key.toUpperCase();
if ($scope.hoverNote && dataService.keyShortcuts()) {
if (key == 'E') {
@ -306,9 +322,16 @@ app.controller('noteCtr', ['$scope', '$state', '$stateParams', '$filter', '$wind
bookmarkService.getNotes(params)
.then((data) => {
$scope.notes = data.notes;
$scope.notes.forEach((note) => {
note.brief = note.content;
while (note.brief.indexOf("\n") > 0) {
note.brief = note.brief.replace(/\n/g, "");
}
note.brief = " " + note.brief.substring(0, 200) + (note.content.length > 200 ? " ......" : "");
})
$scope.totalPages = Math.ceil(data.totalItems / perPageItems);
$scope.totalItems = data.totalItems;
$timeout(function() {
$timeout(function () {
timeagoInstance.cancel();
timeagoInstance.render(document.querySelectorAll('.need_to_be_rendered'), 'zh_CN');
// 如果需要增加书签

85
public/views/note.html
View File

@ -1,22 +1,29 @@
<div class="ui segment js-note-card">
<div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-class="{green:tag.clicked}" ng-repeat="tag in tags" ng-click="clickTag(tag.id)">{{ tag.name }} ({{ tag.ncnt || 0 }})</div>
<div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-click="showAddNote()" data-tooltip="点击添加备忘。你也可以在任意界面按快捷键A(不区分大小写)增加备忘录。"><i class="plus icon" style="margin-right:0px;"></i></div>
<div class="ui form" ng-show="add">
<div class="required field">
<label>内容</label>
<textarea rows="12" placeholder="" ng-model="content" id="noteedit"></textarea>
<div class="ui segment js-note-card" style="padding:14px 0px 0px 0px;">
<div class="ui container" style="padding-left:14px">
<div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-class="{green:tag.clicked}" ng-repeat="tag in tags"
ng-click="clickTag(tag.id)">{{ tag.name }} ({{ tag.ncnt || 0 }})</div>
<div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-click="showAddNote()" data-tooltip="点击添加备忘。你也可以在任意界面按快捷键A(不区分大小写)增加备忘录。">
<i class="plus icon" style="margin-right:0px;"></i>
</div>
<div class="field">
<div class="actions">
<div class="ui cancel button" ng-click="add=false;">取消</div>
<div class="ui green button" ng-click="addNote(false)" ng-show="!edit">提交关闭</div>
<div class="ui green button" ng-click="addNote(true)" ng-show="!edit">提交继续</div>
<div class="ui green button" ng-click="updateNote()" ng-show="edit">更新</div>
</div>
<div class="ui container" style="padding-left:14px;padding-bottom:14px">
<div class="ui form" ng-show="add">
<div class="required field">
<label>内容</label>
<textarea rows="12" placeholder="" ng-model="content" id="noteedit"></textarea>
</div>
<div class="field">
<div class="actions">
<div class="ui cancel button" ng-click="add=false;">取消</div>
<div class="ui green button" ng-click="addNote(false)" ng-show="!edit">提交关闭</div>
<div class="ui green button" ng-click="addNote(true)" ng-show="!edit">提交继续</div>
<div class="ui green button" ng-click="updateNote()" ng-show="edit">更新</div>
</div>
</div>
</div>
</div>
<div class="ui divider" ng-show="notes.length > 0"></div>
<div class="ui hidden info message js-note" ng-if="(!add) && notes.length == 0">
<div class="ui divider" ng-show="notes.length > 0" style="margin:0px;"></div>
<div class="ui hidden info message js-note" ng-if="(!add) && notes.length == 0" style="margin-left:14px;margin-right:14px">
<i class="close icon" ng-click="closeNote()"></i>
<div class="content">
<div class="header">系统提示！
@ -26,35 +33,33 @@
</ul>
</div>
</div>
<div class="ui five stackable cards">
<div class="card" ng-repeat="note in notes" id="{{note.id}}" ng-mouseover="setHoverNote(note)" ng-mouseleave="setHoverNote(null)">
<div class="content" style="height:200px;margin-bottom:8px;" ng-dblclick="detailNote(note.content)">
<div class="description" style="word-break:break-all;max-width:175px;height:184px;line-height:21px; word-wrap:break-word;text-overflow:ellipsis;overflow:hidden;">
<pre class="note-content" style="margin-top:0px;">{{ note.content }}</pre>
<div class="ui vertical segment" ng-repeat="note in notes" ng-click="noteClick(note)" ng-mouseover="setHoverNote(note)" ng-mouseleave="setHoverNote(null)" id="{{note.id}}" style="margin:0px;padding-top:10px;padding-bottom: 10px;">
<pre class="note-content" title="单击查看详情，C复制，D删除，E编辑" style="margin:0px;padding-left:14px;padding-right:14px" ng-if="!note.detail">{{ note.brief }}</pre>
<pre class="note-content" title="双击复制" ng-dblclick="copy(note.content)" style="margin:0px; font-size:16px;padding-left:14px;padding-right:14px" ng-if="note.detail">{{ note.content }}</pre>
<div class="ui right aligned grid" ng-show="note.detail">
<div class="sixteen wide column" style="margin:0px 20px 0px 0px;padding:20px 0px 0px 0px;">
<div class="extra content" ng-show="true" ng-mouseleave="note.edit=false;" style="height:50px;">
<div class="ui mini label" ng-click="clickTag(note.tag_id)" style="margin:3px 0px 0px 10px;cursor:default;">{{ note.tagName || "未分类" }}</div>
<span style="margin:0 8px;">
<span title="添加于{{note.created_at}}" class="need_to_be_rendered" data-timeago="{{ note.created_at }}"></span>
<span style="margin-left:-3px;">添加</span>
</span>
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;" ng-src="./images/delete.png" ng-click="delNote(note.id, note.content)"
title="删除备忘">
<label for="noteedit">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;" ng-src="./images/edit-bookmark.png" ng-click="editNote(note.id, note.content, note.tag_id)"
title="编辑备忘">
</label>
<img class="ui mini spaced image" id="noteid{{note.id}}" style="width:16px;height:16px;margin:0 8px;" ng-src="./images/copy.png"
id="url{{bookmark.id}}" ng-click="copy(note.content)" title="复制备忘">
<i class="chevron up icon" title="收起详情" ng-click="noteClick(note, true, $event)"></i>
</div>
</div>
<div class="extra content" ng-show="!note.edit" style="height:50px;padding-right:2px;padding-left:8px;">
<span class="left floated like" style="margin-top:6px;">
<i class="add to calendar icon"></i>
<span title="{{note.created_at}}" class="need_to_be_rendered" data-timeago="{{ note.created_at }}"></span>
</span>
<div class="ui label" ng-click="clickTag(note.tag_id)" style="margin:3px 0px 0px 10px;cursor:default;">{{ note.tagName }}</div>
<i class="ellipsis horizontal icon right floated" style="margin-top:8px;" ng-mouseover="note.edit=true;"></i>
</div>
<div class="extra content" ng-show="note.edit" ng-mouseleave="note.edit=false;" style="height:50px;">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/delete.png" ng-click="delNote(note.id, note.content)" title="删除备忘">
<label for="noteedit">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/edit-bookmark.png" ng-click="editNote(note.id, note.content, note.tag_id)" title="编辑备忘">
</label>
<img class="ui mini spaced image" id="noteid{{note.id}}" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/copy.png" id="url{{bookmark.id}}" ng-click="copy(note.content)" title="复制备忘">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/detail.png" ng-click="detailNote(note.content)" title="备忘详情">
</div>
</div>
</div>
<div class="ui divider" ng-show="notes.length > 0"></div>
<div style="height:20px;" ng-show="notes.length === 0"></div>
<div class="ui grid" ng-show="totalItems>0">
<div class="eight wide column" style="margin-top:10px;">
<div class="ui grid" ng-show="totalItems>0" style="margin:0px;padding:0px 14px">
<div class="eight wide column" style="padding-top:26px;">
<span ng-show="searchWord">通过搜索关键字"{{searchWord}}"(点击菜单"备忘录"重新查看所有)，</span>共找到备忘一共约{{totalItems}}个
</div>
<div class="eight wide column">
@ -63,4 +68,4 @@
</div>
</div>
<div class="ui massive text centered inline loader js-hot-loader" ng-class="{active:loadBusy, disabled:!loadBusy}">
正在加载中...</div>
正在加载中...</div>