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

59
public/views/note.html
View File

@ -1,6 +1,12 @@
<div class="ui segment js-note-card"> <div class="ui segment js-note-card" style="padding:14px 0px 0px 0px;">
<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 container" style="padding-left:14px">
<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 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>
<div class="ui container" style="padding-left:14px;padding-bottom:14px">
<div class="ui form" ng-show="add"> <div class="ui form" ng-show="add">
<div class="required field"> <div class="required field">
<label>内容</label> <label>内容</label>
@ -15,8 +21,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="ui divider" ng-show="notes.length > 0"></div> </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> <i class="close icon" ng-click="closeNote()"></i>
<div class="content"> <div class="content">
<div class="header">系统提示！ <div class="header">系统提示！
@ -26,35 +33,33 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="ui five stackable cards"> <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;">
<div class="card" ng-repeat="note in notes" id="{{note.id}}" ng-mouseover="setHoverNote(note)" ng-mouseleave="setHoverNote(null)"> <pre class="note-content" title="单击查看详情，C复制，D删除，E编辑" style="margin:0px;padding-left:14px;padding-right:14px" ng-if="!note.detail">{{ note.brief }}</pre>
<div class="content" style="height:200px;margin-bottom:8px;" ng-dblclick="detailNote(note.content)"> <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="description" style="word-break:break-all;max-width:175px;height:184px;line-height:21px; word-wrap:break-word;text-overflow:ellipsis;overflow:hidden;"> <div class="ui right aligned grid" ng-show="note.detail">
<pre class="note-content" style="margin-top:0px;">{{ note.content }}</pre> <div class="sixteen wide column" style="margin:0px 20px 0px 0px;padding:20px 0px 0px 0px;">
</div> <div class="extra content" ng-show="true" ng-mouseleave="note.edit=false;" style="height:50px;">
</div> <div class="ui mini label" ng-click="clickTag(note.tag_id)" style="margin:3px 0px 0px 10px;cursor:default;">{{ note.tagName || "未分类" }}</div>
<div class="extra content" ng-show="!note.edit" style="height:50px;padding-right:2px;padding-left:8px;"> <span style="margin:0 8px;">
<span class="left floated like" style="margin-top:6px;"> <span title="添加于{{note.created_at}}" class="need_to_be_rendered" data-timeago="{{ note.created_at }}"></span>
<i class="add to calendar icon"></i> <span style="margin-left:-3px;">添加</span>
<span title="{{note.created_at}}" class="need_to_be_rendered" data-timeago="{{ note.created_at }}"></span>
</span> </span>
<div class="ui label" ng-click="clickTag(note.tag_id)" style="margin:3px 0px 0px 10px;cursor:default;">{{ note.tagName }}</div> <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)"
<i class="ellipsis horizontal icon right floated" style="margin-top:8px;" ng-mouseover="note.edit=true;"></i> title="删除备忘">
</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"> <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="编辑备忘"> <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> </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" id="noteid{{note.id}}" style="width:16px;height:16px;margin:0 8px;" ng-src="./images/copy.png"
<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="备忘详情"> 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>
</div> </div>
</div> </div>
<div class="ui divider" ng-show="notes.length > 0"></div>
<div style="height:20px;" 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="ui grid" ng-show="totalItems>0" style="margin:0px;padding:0px 14px">
<div class="eight wide column" style="margin-top:10px;"> <div class="eight wide column" style="padding-top:26px;">
<span ng-show="searchWord">通过搜索关键字"{{searchWord}}"(点击菜单"备忘录"重新查看所有)，</span>共找到备忘一共约{{totalItems}}个 <span ng-show="searchWord">通过搜索关键字"{{searchWord}}"(点击菜单"备忘录"重新查看所有)，</span>共找到备忘一共约{{totalItems}}个
</div> </div>
<div class="eight wide column"> <div class="eight wide column">