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

卡片加载更多

This commit is contained in:
luchenqun 2017-02-22 11:31:50 +08:00
parent e8becc4fa4
commit f4b985269a
3 changed files with 22 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.js
View File

@ -75,7 +75,7 @@ app.use(function(err, req, res, next) {
error: {} error: {}
}); });
}); });
api.checkSnapState(); // api.checkSnapState();
api.getSnapByTimer(); api.getSnapByTimer();
module.exports = app; module.exports = app;

27
public/scripts/controllers/bookmarks-controller.js
View File

@ -14,11 +14,14 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
$scope.loadBusy = false; $scope.loadBusy = false;
$scope.changeCurrentPage = function(currentPage) { $scope.changeCurrentPage = function(currentPage) {
currentPage = parseInt(currentPage) || 0; currentPage = parseInt(currentPage) || 0;
console.log(currentPage); console.log('currentPage = ', currentPage);
if (currentPage <= $scope.totalPages && currentPage >= 1) { if (currentPage <= $scope.totalPages && currentPage >= 1) {
$scope.loadBusy = true;
$scope.currentPage = currentPage; $scope.currentPage = currentPage;
$scope.inputPage = ''; $scope.inputPage = '';
getBookmarks(params); getBookmarks(params);
} else {
$scope.currentPage = $scope.totalPages
} }
} }
@ -71,7 +74,6 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
toastr.warning('功能暂未实现。。。', "警告"); toastr.warning('功能暂未实现。。。', "警告");
} }
$scope.jumpToTags = function(tagId) { $scope.jumpToTags = function(tagId) {
$state.go('tags', { $state.go('tags', {
tagId: tagId, tagId: tagId,
@ -95,9 +97,9 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
$scope.loadCardData = function() { $scope.loadCardData = function() {
console.log('loadCardData.........') console.log('loadCardData.........')
$scope.currentPage += 1; if (!$scope.loadBusy) {
$scope.changeCurrentPage($scope.currentPage); $scope.changeCurrentPage($scope.currentPage += 1)
$scope.loadBusy = true; }
} }
pubSubService.subscribe('EditCtr.inserBookmarsSuccess', $scope, function(event, params) { pubSubService.subscribe('EditCtr.inserBookmarsSuccess', $scope, function(event, params) {
@ -109,25 +111,26 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
function getBookmarks(params) { function getBookmarks(params) {
if (params.showStyle != 'navigate') { if (params.showStyle != 'navigate') {
params.currentPage = $scope.currentPage; params.currentPage = $scope.currentPage;
params.perPageItems = params.showStyle == 'table' ? perPageItems : perPageItems * 3; params.perPageItems = perPageItems;
} }
bookmarkService.getBookmarks(params) bookmarkService.getBookmarks(params)
.then((data) => { .then((data) => {
if (params.showStyle != 'navigate') { if (params.showStyle != 'navigate') {
$scope.bookmarks = data.bookmarks;
$scope.totalPages = Math.ceil(data.totalItems / perPageItems); $scope.totalPages = Math.ceil(data.totalItems / perPageItems);
if (data.totalItems == 0) { if (data.totalItems == 0) {
toastr.info('您还没有书签，请点击菜单栏的添加按钮进行添加', "提示"); toastr.info('您还没有书签，请点击菜单栏的添加按钮进行添加', "提示");
} }
} else {
if (params.showStyle == 'card') { if (params.showStyle == 'card') {
console.log('loadCardData end.........') data.bookmarks.forEach(bookmark => {
$scope.bookmarks = $scope.bookmarks.concat(data); $scope.bookmarks.push(bookmark);
})
$scope.loadBusy = false; $scope.loadBusy = false;
console.log('loadCardData end.........', $scope.loadBusy);
} else { } else {
$scope.bookmarks = data; $scope.bookmarks = data.bookmarks;
} }
} else {
$scope.bookmarks = data;
if ($scope.bookmarks.length <= 2) { if ($scope.bookmarks.length <= 2) {
$(".js-msg").removeClass("hidden"); $(".js-msg").removeClass("hidden");
} }

18
public/views/bookmarks.html
View File

@ -19,15 +19,8 @@
</div> </div>
<div class="fourteen wide column" ng-if="tag.bookmarks.length"> <div class="fourteen wide column" ng-if="tag.bookmarks.length">
<div class="ui grid container"> <div class="ui grid container">
<div <div class="four wide column js-navigate-bookmark" ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmarkEditHover:bookmarkEditHover, bookmark:(!bookmarkNormalHover && !bookmarkEditHover)}" ng-mouseover="edit ? (bookmarkEditHover=true) : (bookmarkNormalHover=true)"
class="four wide column js-navigate-bookmark" ng-mouseleave="edit ? (bookmarkEditHover=false) : (bookmarkNormalHover=false)" ng-repeat="bookmark in tag.bookmarks" ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{ bookmark.title }}" id="{{bookmark.id}}">
ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmarkEditHover:bookmarkEditHover, bookmark:(!bookmarkNormalHover && !bookmarkEditHover)}"
ng-mouseover="edit ? (bookmarkEditHover=true) : (bookmarkNormalHover=true)"
ng-mouseleave="edit ? (bookmarkEditHover=false) : (bookmarkNormalHover=false)"
ng-repeat="bookmark in tag.bookmarks"
ng-click="jumpToUrl(bookmark.url, bookmark.id)"
title="{{ bookmark.title }}"
id="{{bookmark.id}}">
<img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px" ng-src="./images/{{ bookmarkEditHover ? 'delete-hover' : 'delete'}}.png" ng-if="edit" ng-click="delBookmark(bookmark.id)"> <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px" ng-src="./images/{{ bookmarkEditHover ? 'delete-hover' : 'delete'}}.png" ng-if="edit" ng-click="delBookmark(bookmark.id)">
<img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px;float:right;" ng-src="./images/{{ bookmarkEditHover ? 'edit-bookmark-hover' : 'edit-bookmark'}}.png" ng-if="edit" ng-click="editBookmark(bookmark.id)"> <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px;float:right;" ng-src="./images/{{ bookmarkEditHover ? 'edit-bookmark-hover' : 'edit-bookmark'}}.png" ng-if="edit" ng-click="editBookmark(bookmark.id)">
<img class="ui ui middle aligned tiny image" ng-src=" http://favicon.byi.pw/?url={{bookmark.url}}" style="width:16px;height:16px" ng-if="!edit"> <img class="ui ui middle aligned tiny image" ng-src=" http://favicon.byi.pw/?url={{bookmark.url}}" style="width:16px;height:16px" ng-if="!edit">
@ -92,12 +85,13 @@
</tfoot> </tfoot>
</table> </table>
<div class="ui segment" ng-if="showStyle === 'card'"> <div class="ui segment" ng-if="showStyle === 'card'">
<div class="ui five link stackable cards" infinite-scroll='loadCardData()' infinite-scroll-disabled='loadBusy' infinite-scroll-distance='1'> <div class="ui large text loader" ng-class="{active:loadBusy, disabled:!loadBusy}"> 正在加载中...</div>
<div class="ui five link stackable cards" infinite-scroll='loadCardData()' infinite-scroll-immediate-check="false">
<div class="card" ng-repeat="bookmark in bookmarks"> <div class="card" ng-repeat="bookmark in bookmarks">
<div class="image" href="{{ bookmark.url }}" ng-click="jumpToUrl(bookmark.url, bookmark.id)"> <div class="image" href="{{ bookmark.url }}" ng-click="jumpToUrl(bookmark.url, bookmark.id)">
<img ng-src="./images/snap/{{bookmark.id}}.png" err-src="./images/snap/default.png"/> <img ng-src="./images/snap/{{bookmark.id}}.png" err-src="./images/snap/default.png" />
</div> </div>
<div class="content" ng-click="jumpToTags(tag.id)"> <div class="content" ng-click="jumpToUrl(bookmark.url, bookmark.id)">
<div class="description bookmarkTitle"> <div class="description bookmarkTitle">
{{bookmark.title}} {{bookmark.title}}
</div> </div>