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

完成书签的显示

This commit is contained in:
HelloWorld 2020-03-26 09:35:05 +08:00
parent 86d5ff15ba
commit dd8741ebd6
3 changed files with 79 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/controller/api.js
View File

@ -118,10 +118,11 @@ module.exports = class extends Base {
// 根据书签id获取书签 // 根据书签id获取书签
async getBookmarksByTagAction() { async getBookmarksByTagAction() {
let tagId = this.get("tagId"); let tagId = this.get("tagId");
let showType = this.get("showType") || "createdAt";
// tagId = -1 个人定制 从自己里面取 // tagId = -1 个人定制 从自己里面取
// tagId = -2 全局定制 从非个人里面取 // tagId = -2 全局定制 从非个人里面取
let where = {}; let where = {};
let order = 'createdAt DESC'; let order = showType + ' DESC';
if (tagId == -1) { if (tagId == -1) {
where = { userId: this.ctx.state.user.id }; where = { userId: this.ctx.state.user.id };
@ -131,14 +132,6 @@ module.exports = class extends Base {
where = { tagId }; where = { tagId };
} }
if (this.get('createdAt')) {
order = 'createdAt DESC';
} else if (this.get('clickCount')) {
order = 'clickCount DESC';
} else if (this.get('lastClick')) {
order = 'lastClick DESC';
}
try { try {
let data = await this.model('bookmarks').where(where).order(order).page(this.get('page'), this.get('pageSize')).countSelect(); let data = await this.model('bookmarks').where(where).order(order).page(this.get('page'), this.get('pageSize')).countSelect();
this.json({ code: 0, data }); this.json({ code: 0, data });

184
www/scripts/controllers/tags-controller.js
View File

@ -10,25 +10,23 @@ app.controller('tagsCtr', ['$scope', '$filter', '$state', '$window', '$statePara
})() })()
// getTags({}); // getTags({});
var pageSize = 20;
var dialog = null; var dialog = null;
var forbidTransition = false; var forbidTransition = false;
var addBookmarkId = -1; var addBookmarkId = -1;
$scope.hoverBookmark = null; $scope.hoverBookmark = null;
$scope.order = [false, false, false]; $scope.showType = "createdAt";
$scope.order[($stateParams && $stateParams.orderIndex) || 1] = true;
$scope.loadBookmarks = false; $scope.loadBookmarks = false;
$scope.loadTags = false; $scope.loadTags = false;
$scope.tags = []; // 书签数据 $scope.tags = []; // 书签数据
$scope.tagsIndex = []; // 书签索引 $scope.tagsIndex = []; // 书签索引
$scope.bookmarkClicked = false; $scope.bookmarkClicked = false;
$scope.bookmarksByTag = []; $scope.bookmarksByTag = [];
$scope.bookmarks = [];
$scope.bookmarkCount = 0; $scope.bookmarkCount = 0;
$scope.totalPages = 0; $scope.totalPages = 0;
$scope.currentPage = 1; $scope.currentPage = 1;
$scope.inputPage = ''; $scope.inputPage = '';
$scope.currentTagId = ($stateParams && $stateParams.tagId) || ''; $scope.currentTagId = ($stateParams && $stateParams.tagId) || (-1);
$scope.editMode = false; $scope.editMode = false;
$scope.showMode = 'item'; $scope.showMode = 'item';
$scope.newTag = ''; $scope.newTag = '';
@ -38,13 +36,13 @@ app.controller('tagsCtr', ['$scope', '$filter', '$state', '$window', '$statePara
$scope.bookmarkNormalHover = false; $scope.bookmarkNormalHover = false;
$scope.costomTag = { $scope.costomTag = {
id: -1, id: -1,
cnt: 50, bookmarkCount: 50,
bookmarkClicked: false, bookmarkClicked: false,
name: '个人定制', name: '个人定制',
} }
$scope.costomAllUsersTag = { $scope.costomAllUsersTag = {
id: -1, id: -1,
cnt: 50, bookmarkCount: 50,
bookmarkClicked: false, bookmarkClicked: false,
name: '全站定制', name: '全站定制',
} }
@ -56,123 +54,70 @@ app.controller('tagsCtr', ['$scope', '$filter', '$state', '$window', '$statePara
getTags(); getTags();
}); });
$scope.changeOrder = function (index) { $scope.getBookmarks = async function (tagId, page, showType) {
if (index < 0 || index >= $scope.order.length) { console.log(tagId, page, showType);
return;
}
$scope.order = $scope.order.map(() => false);
$scope.order[index] = true;
$scope.bookmarksByTag = [];
if ($scope.order[0]) {
$scope.bookmarkData.bookmarks.sort(clickCmp);
$scope.bookmarkData.bookmarks.forEach((bookmark) => {
if (bookmark.type == 1) {
$scope.bookmarksByTag.push(bookmark);
}
})
} else if ($scope.order[1]) {
$scope.bookmarkData.bookmarks.sort((a, b) => a.created_at >= b.created_at ? -1 : 1);
$scope.bookmarkData.bookmarks.forEach((bookmark) => {
if (bookmark.type == 2) {
$scope.bookmarksByTag.push(bookmark);
}
})
} else {
$scope.bookmarkData.bookmarks.sort((a, b) => a.last_click >= b.last_click ? -1 : 1);
$scope.bookmarkData.bookmarks.forEach((bookmark) => {
if (bookmark.type == 3) {
$scope.bookmarksByTag.push(bookmark);
}
})
}
$timeout(function () {
timeagoInstance.cancel();
timeagoInstance.render(document.querySelectorAll('.need_to_be_rendered'), 'zh_CN');
}, 100)
}
$scope.getBookmarks = async function (tagId, page) {
console.log(tagId, page)
$scope.bookmarkClicked = true; $scope.bookmarkClicked = true;
$scope.currentTagId = tagId;
$scope.currentPage = page; tagId && ($scope.currentTagId = tagId);
page && ($scope.currentPage = page);
showType && ($scope.showType = showType);
if (!forbidTransition) { if (!forbidTransition) {
$scope.loadBookmarks = true; $scope.loadBookmarks = true;
} }
$scope.costomTag.bookmarkClicked = false; $scope.costomTag.bookmarkClicked = false;
$scope.costomAllUsersTag.bookmarkClicked = false; $scope.costomAllUsersTag.bookmarkClicked = false;
pageSize = ($scope.showMode == 'item') ? 50 : 20; let pageSize = ($scope.showMode == 'item') ? 50 : 20;
$scope.tags.forEach(function (tag) { $scope.tags.forEach(function (tag) {
tag.bookmarkClicked = false; tag.bookmarkClicked = false;
if (tag.id == tagId) { if (tag.id == $scope.currentTagId) {
tag.bookmarkClicked = true; tag.bookmarkClicked = true;
} }
}); });
if (tagId == -1) {
$scope.costomTag.bookmarkClicked = true;
}
if (tagId == -2) {
$scope.costomAllUsersTag.bookmarkClicked = true;
}
var params = { var params = {
tagId, tagId: $scope.currentTagId,
page, page: $scope.currentPage,
pageSize, pageSize,
createdAt: true showType: $scope.showType
}; };
if (!forbidTransition) { if (!forbidTransition) {
$($scope.showMode == 'item' ? '.js-tag-costomTag' : '.js-tags-table').transition('hide'); $($scope.showMode == 'item' ? '.js-tag-costomTag' : '.js-tags-table').transition('hide');
} }
let data = await get('getBookmarksByTag', params); let reply = await get('getBookmarksByTag', params);
console.log(data); $scope.bookmarks = reply.data;
return; $scope.totalPages = reply.totalPages;
$scope.inputPage = '';
$scope.loadBookmarks = false;
$scope.bookmarkCount = reply.count;
bookmarkService.getBookmarksByTag(params) pubSubService.publish('Common.menuActive', {
.then((data) => { login: true,
$scope.bookmarkData = data; index: dataService.LoginIndexTags
$scope.changeOrder($scope.order.indexOf(true)); });
$scope.bookmarkCount = $scope.bookmarkData.totalItems; if (!forbidTransition) {
$scope.totalPages = tagId <= -1 ? 1 : Math.ceil($scope.bookmarkCount / pageSize); dataService.transition($scope.showMode == 'item' ? '.js-tag-costomTag' : '.js-tags-table');
}
$scope.inputPage = ''; $timeout(function () {
$scope.loadBookmarks = false; dataService.transition('#' + addBookmarkId, {
duration: 1000,
pubSubService.publish('Common.menuActive', {
login: true,
index: dataService.LoginIndexTags
});
if (!forbidTransition) {
dataService.transition($scope.showMode == 'item' ? '.js-tag-costomTag' : '.js-tags-table');
}
$timeout(function () {
dataService.transition('#' + addBookmarkId, {
duration: 1000,
});
addBookmarkId = -1;
}, 1000);
forbidTransition = false;
})
.catch((err) => {
console.log('getTags err', err);
$scope.loadBookmarks = false;
forbidTransition = false;
addBookmarkId = -1;
}); });
addBookmarkId = -1;
}, 1000);
forbidTransition = false;
}; };
$scope.changeCurrentPage = function (currentPage) { $scope.changeCurrentPage = function (currentPage) {
currentPage = parseInt(currentPage) || 0; currentPage = parseInt(currentPage) || 0;
console.log(currentPage); console.log(currentPage);
if (currentPage <= $scope.totalPages && currentPage >= 1) { if (currentPage <= $scope.totalPages && currentPage >= 1) {
$scope.getBookmarks($scope.currentTagId, currentPage); $scope.getBookmarks(null, currentPage, null);
$scope.currentPage = currentPage; $scope.currentPage = currentPage;
} }
} }
@ -189,7 +134,6 @@ app.controller('tagsCtr', ['$scope', '$filter', '$state', '$window', '$statePara
bookmark.last_click = $filter("date")(new Date(), "yyyy-MM-dd HH:mm:ss"); bookmark.last_click = $filter("date")(new Date(), "yyyy-MM-dd HH:mm:ss");
} }
}) })
// $scope.changeOrder($scope.order.indexOf(true));
$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');
@ -225,7 +169,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$state', '$window', '$statePara
$scope.tags.forEach((t1) => { $scope.tags.forEach((t1) => {
$scope.waitDelBookmark.tags.forEach((t2) => { $scope.waitDelBookmark.tags.forEach((t2) => {
if (t1.id == t2.id) { if (t1.id == t2.id) {
t1.cnt--; t1.bookmarkCount--;
} }
}) })
}) })
@ -272,7 +216,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$state', '$window', '$statePara
$scope.toggleShowMode = function (showMode) { $scope.toggleShowMode = function (showMode) {
$scope.showMode = showMode; $scope.showMode = showMode;
$scope.getBookmarks($scope.currentTagId, 1); $scope.getBookmarks(null, 1, null);
} }
$scope.editTag = function (tag) { $scope.editTag = function (tag) {
@ -501,28 +445,34 @@ app.controller('tagsCtr', ['$scope', '$filter', '$state', '$window', '$statePara
$scope.tags = []; $scope.tags = [];
let tags = await get('tags', { bookmarkCount: true }); let tags = await get('tags', { bookmarkCount: true });
tags.unshift({
id: -1,
bookmarkCount: 1,
bookmarkClicked: false,
name: '个人定制',
show: 1
})
let find = false; let find = false;
for (let tag of tags) { for (let tag of tags) {
tag.edit = false; tag.edit = false;
tag.oldName = tag.name; tag.oldName = tag.name;
$scope.tags.push(tag);
if (tag.id == $scope.currentTagId) { if (tag.id == $scope.currentTagId) {
tag.bookmarkClicked = true;
find = true; // 如果是删了分类返回来，那么要重新默认选中第一个分类 find = true; // 如果是删了分类返回来，那么要重新默认选中第一个分类
} }
$scope.tags.push(tag);
} }
if (!find && $scope.currentTagId !== -1 && $scope.currentTagId !== -2) { if (!find) {
$scope.currentTagId = -1; $scope.currentTagId = -1;
$scope.costomTag.bookmarkClicked = true; $scope.tags[0].bookmarkClicked = true;
} }
if ($scope.currentTagId) { if (!$scope.editMode) {
if (!$scope.editMode) { await $scope.getBookmarks(null, null, null);
await $scope.getBookmarks($scope.currentTagId, $scope.currentPage);
}
} else {
toastr.info('您还没有书签分类，请点击菜单栏的添加按钮进行添加', "提示");
} }
$scope.loadTags = false; $scope.loadTags = false;
pubSubService.publish('Common.menuActive', { pubSubService.publish('Common.menuActive', {
login: true, login: true,
@ -542,18 +492,18 @@ app.controller('tagsCtr', ['$scope', '$filter', '$state', '$window', '$statePara
bookmark.tags = data.tags; bookmark.tags = data.tags;
bookmark.description = data.description; bookmark.description = data.description;
find = true; find = true;
if ($scope.order[bookmark.type - 1]) { // if ($scope.order[bookmark.type - 1]) {
dataService.transition('#' + bookmark.id, { // dataService.transition('#' + bookmark.id, {
duration: 1000, // duration: 1000,
}); // });
} // }
} }
}) })
if (!find) { if (!find) {
if (data.tags.map((tag) => tag.id).indexOf($scope.currentTagId) >= 0) { if (data.tags.map((tag) => tag.id).indexOf($scope.currentTagId) >= 0) {
if (!$scope.editMode) { if (!$scope.editMode) {
forbidTransition = true; forbidTransition = true;
$scope.getBookmarks($scope.currentTagId, $scope.currentPage); $scope.getBookmarks(null, null, null);
} }
addBookmarkId = data.id; addBookmarkId = data.id;
} }
@ -573,16 +523,4 @@ app.controller('tagsCtr', ['$scope', '$filter', '$state', '$window', '$statePara
setTimeout(() => { setTimeout(() => {
$('.js-tag-label .icon').popup(); $('.js-tag-label .icon').popup();
}, 3000); }, 3000);
function clickCmp(a, b) {
var click1 = parseInt(a.click_count);
var click2 = parseInt(b.click_count);
if (click1 > click2) {
return -1;
} else if (click1 == click2) {
return a.url > b.url ? -1 : 1;
} else {
return 1;
}
}
}]); }]);

38
www/views/tags.html
View File

@ -1,14 +1,8 @@
<div class="ui segment js-tags"> <div class="ui segment js-tags">
<div class="ui container" ng-show="!editMode" style="cursor:default"> <div class="ui container" ng-show="!editMode" style="cursor:default">
<div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-class="{green:costomTag.bookmarkClicked}" ng-click="getBookmarks(-1, 1)"> <div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-if="tag.bookmarkCount && tag.show" ng-repeat="tag in tags" ng-class="{green:tag.bookmarkClicked}" ng-click="getBookmarks(tag.id, 1, null)">
{{ costomTag.name }} ({{ costomTag.bookmarkCount || 0 }})
</div>
<div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-if="tag.bookmarkCount && tag.show" ng-repeat="tag in tags" ng-class="{green:tag.bookmarkClicked}" ng-click="getBookmarks(tag.id, 1)">
{{ tag.name }} ({{ tag.bookmarkCount || 0 }}) {{ tag.name }} ({{ tag.bookmarkCount || 0 }})
</div> </div>
<div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-class="{green:costomAllUsersTag.bookmarkClicked}" ng-click="getBookmarks(-2, 1)">
{{ costomAllUsersTag.name }} ({{ costomAllUsersTag.bookmarkCount || 0 }})
</div>
<div class="ui label js-tag-label" style="margin:3px 15px 8px 0px;cursor:default;"> <div class="ui label js-tag-label" style="margin:3px 15px 8px 0px;cursor:default;">
<i class="plus icon" data-content="点击添加分类" data-position="top center" ng-click="showAddTag()"></i> <i class="plus icon" data-content="点击添加分类" data-position="top center" ng-click="showAddTag()"></i>
<i class="pencil alternate icon" data-content="点击进入分类编辑模式" data-position="top center" ng-click="toggleMode(true)"></i> <i class="pencil alternate icon" data-content="点击进入分类编辑模式" data-position="top center" ng-click="toggleMode(true)"></i>
@ -64,15 +58,15 @@
<tr> <tr>
<th class="forbid_sorted">标题</th> <th class="forbid_sorted">标题</th>
<th class="forbid_sorted">链接</th> <th class="forbid_sorted">链接</th>
<th style="width:90px;" ng-class="{descending: order[0], sorted:order[0]}" ng-click="changeOrder(0)" title="点击可对表格进行排序">点击次数</th> <th style="width:90px;" ng-class="{descending: showType == 'createdAt', sorted:showType == 'createdAt'}" ng-click="getBookmarks(null, 1, 'createdAt')" title="点击可对表格进行排序">点击次数</th>
<th style="width:100px;" ng-class="{descending: order[1], sorted:order[1]}" ng-click="changeOrder(1)" title="点击可对表格进行排序">创建日期</th> <th style="width:100px;" ng-class="{descending: showType == 'clickCount', sorted:showType == 'clickCount'}" ng-click="getBookmarks(null, 1, 'clickCount')" title="点击可对表格进行排序">创建日期</th>
<th style="width:100px;" ng-class="{descending: order[2], sorted:order[2]}" ng-click="changeOrder(2)" title="点击可对表格进行排序">最后点击</th> <th style="width:100px;" ng-class="{descending: showType == 'lastClick', sorted:showType == 'lastClick'}" ng-click="getBookmarks(null, 1, 'lastClick')" title="点击可对表格进行排序">最后点击</th>
<th style="width:150px;" class="forbid_sorted">分类</th> <th style="width:150px;" class="forbid_sorted">分类</th>
<th style="width:88px;" class="forbid_sorted">操作</th> <th style="width:88px;" class="forbid_sorted">操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat="bookmark in bookmarksByTag" id="{{ bookmark.id }}" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)"> <tr ng-repeat="bookmark in bookmarks" id="{{ bookmark.id }}" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
<td> <td>
<img class="ui ui middle aligned tiny image" ng-src="http://favicon.luchenqun.com/?url={{bookmark.url}}" err-src="./images/default.ico" style="width:16px;height:16px;cursor:pointer;" ng-click="jumpToUrl(bookmark.url, bookmark.id)" /> <img class="ui ui middle aligned tiny image" ng-src="http://favicon.luchenqun.com/?url={{bookmark.url}}" err-src="./images/default.ico" style="width:16px;height:16px;cursor:pointer;" ng-click="jumpToUrl(bookmark.url, bookmark.id)" />
<span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}" style="cursor:pointer;"> <span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}" style="cursor:pointer;">
@ -90,7 +84,7 @@
<span id="time{{bookmark.id}}" title="{{bookmark.last_click}}" class="need_to_be_rendered" data-timeago="{{bookmark.last_click}}"></span> <span id="time{{bookmark.id}}" title="{{bookmark.last_click}}" class="need_to_be_rendered" data-timeago="{{bookmark.last_click}}"></span>
</td> </td>
<td> <td>
<div class="ui label" ng-repeat="tag in bookmark.tags" tag-id="{{ tag.id }}" ng-click="getBookmarks(tag.id, 1)"> <div class="ui label" ng-repeat="tag in bookmark.tags" tag-id="{{ tag.id }}" ng-click="getBookmarks(tag.id, 1, null)">
{{ tag.name }} {{ tag.name }}
</div> </div>
</td> </td>
@ -111,7 +105,7 @@
</table> </table>
<div class="ui segment js-tag-costomTag" ng-if="bookmarkCount > 0 && showMode=='item'" style="margin-top:-15px;" ng-show="!loadBookmarks && !editMode"> <div class="ui segment js-tag-costomTag" ng-if="bookmarkCount > 0 && showMode=='item'" style="margin-top:-15px;" ng-show="!loadBookmarks && !editMode">
<div class="ui five column grid"> <div class="ui five column grid">
<div ng-repeat="bookmark in bookmarksByTag" class="column js-costomTag-item" ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmark:(!bookmarkNormalHover)}" ng-mouseover="bookmarkNormalHover=true; setHoverBookmark(bookmark)" ng-mouseleave="bookmarkNormalHover=false; setHoverBookmark(null)" ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{ bookmark.title }}" id="{{bookmark.id}}"> <div ng-repeat="bookmark in bookmarks" class="column js-costomTag-item" ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmark:(!bookmarkNormalHover)}" ng-mouseover="bookmarkNormalHover=true; setHoverBookmark(bookmark)" ng-mouseleave="bookmarkNormalHover=false; setHoverBookmark(null)" ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{ bookmark.title }}" id="{{bookmark.id}}">
<img class="ui ui middle aligned tiny image bookmarkInfo" ng-src="http://favicon.luchenqun.com/?url={{bookmark.url}}" err-src="./images/default.ico" style="width:16px;height:16px;" ng-click="detailBookmark(bookmark);$event.stopPropagation()" /> <img class="ui ui middle aligned tiny image bookmarkInfo" ng-src="http://favicon.luchenqun.com/?url={{bookmark.url}}" err-src="./images/default.ico" style="width:16px;height:16px;" ng-click="detailBookmark(bookmark);$event.stopPropagation()" />
<span>{{ bookmark.title}}</span> <span>{{ bookmark.title}}</span>
</div> </div>
@ -120,17 +114,17 @@
<div class="ui grid"> <div class="ui grid">
<div class="five wide column" style="margin-top:10px;"> <div class="five wide column" style="margin-top:10px;">
<div class="ui three column grid" style="cursor: default;"> <div class="ui three column grid" style="cursor: default;">
<div class="column" ng-click="changeOrder(1)"> <div class="column" ng-click="getBookmarks(null, 1, 'createdAt')">
<i class="add to calendar large icon" ng-class="{green: order[1]}" style="margin-bottom:4px;"></i> <i class="add to calendar large icon" ng-class="{green: showType == 'createdAt'}" style="margin-bottom:4px;"></i>
<span ng-class="{fontgreen: order[1]}" style="margin-left:-5px;">添加日期</span> <span ng-class="{fontgreen: showType == 'createdAt'}" style="margin-left:-5px;">添加日期</span>
</div> </div>
<div class="column" ng-click="changeOrder(0)"> <div class="column" ng-click="getBookmarks(null, 1, 'clickCount')">
<i class="sort numeric descending large icon" ng-class="{green: order[0]}" style="margin-bottom:4px;"></i> <i class="sort numeric descending large icon" ng-class="{green: showType == 'clickCount'}" style="margin-bottom:4px;"></i>
<span ng-class="{fontgreen: order[0]}" style="margin-left:-5px;">点击次数</span> <span ng-class="{fontgreen: showType == 'clickCount'}" style="margin-left:-5px;">点击次数</span>
</div> </div>
<div class="column" ng-click="changeOrder(2)"> <div class="column" ng-click="getBookmarks(null, 1, 'lastClick')">
<i class="sort alphabet descending large icon" ng-class="{green: order[2]}" style="margin-bottom:4px;"></i> <i class="sort alphabet descending large icon" ng-class="{green: showType == 'lastClick'}" style="margin-bottom:4px;"></i>
<span ng-class="{fontgreen: order[2]}" style="margin-left:-5px;">最后点击</span> <span ng-class="{fontgreen: showType == 'lastClick'}" style="margin-left:-5px;">最后点击</span>
</div> </div>
</div> </div>
</div> </div>