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

加一个加载动画

This commit is contained in:
luchenqun 2017-03-21 16:26:44 +08:00
parent d05616d8b8
commit bbf822bb82
5 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,7 +39,6 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
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) {
$scope.loadBusy = true;
$scope.currentPage = currentPage; $scope.currentPage = currentPage;
$scope.inputPage = ''; $scope.inputPage = '';
getBookmarks(); getBookmarks();
@ -273,8 +272,10 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
toastr.error('获取信息失败。错误信息：' + JSON.stringify(err), "错误"); toastr.error('获取信息失败。错误信息：' + JSON.stringify(err), "错误");
}); });
} else { } else {
$scope.loadBusy = true;
bookmarkService.getBookmarks(params) bookmarkService.getBookmarks(params)
.then((data) => { .then((data) => {
$scope.loadBusy = false;
if (params.showStyle != 'navigate') { if (params.showStyle != 'navigate') {
$scope.bookmarkData = data; $scope.bookmarkData = data;
$scope.totalPages = Math.ceil(data.totalItems / perPageItems); $scope.totalPages = Math.ceil(data.totalItems / perPageItems);
@ -289,7 +290,6 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
$scope.bookmarks.push(bookmark); $scope.bookmarks.push(bookmark);
} }
}) })
$scope.loadBusy = false;
} else if (params.showStyle == 'costomTag') { } else if (params.showStyle == 'costomTag') {
$scope.costomTags.forEach((tag) => { $scope.costomTags.forEach((tag) => {
if (tag.clicked) { if (tag.clicked) {
@ -317,7 +317,10 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
transition(); transition();
} }
}) })
.catch((err) => console.log('getBookmarks err', err)); .catch((err) => {
console.log('getBookmarks err', err);
$scope.loadBusy = false;
});
} }
} }

7
public/scripts/controllers/hot-controller.js
View File

@ -166,6 +166,7 @@ app.controller('hotCtr', ['$scope', '$state', '$stateParams', '$filter', '$windo
data: requireData, data: requireData,
success: function(json) { success: function(json) {
// console.log('success............', json, JSON.stringify(json.data.list[0]) ); // console.log('success............', json, JSON.stringify(json.data.list[0]) );
$scope.loadBusy = false;
var alterRex = "/mmbiz.qpic.cn|images.jianshu.io|zhimg.com/g"; var alterRex = "/mmbiz.qpic.cn|images.jianshu.io|zhimg.com/g";
var defaultSnap = "./images/snap/default.png" var defaultSnap = "./images/snap/default.png"
var defaultFavicon = "./images/favicon/default.ico" var defaultFavicon = "./images/favicon/default.ico"
@ -200,7 +201,6 @@ app.controller('hotCtr', ['$scope', '$state', '$stateParams', '$filter', '$windo
$scope.bookmarks.push(b); $scope.bookmarks.push(b);
}) })
$scope.curDay--; $scope.curDay--;
$scope.loadBusy = false;
updateEditPos(); updateEditPos();
} else { } else {
toastr.error('获取热门书签失败！失败原因：' + json.message + "。将尝试从缓存中获取！", "提示"); toastr.error('获取热门书签失败！失败原因：' + json.message + "。将尝试从缓存中获取！", "提示");
@ -209,6 +209,7 @@ app.controller('hotCtr', ['$scope', '$state', '$stateParams', '$filter', '$windo
}, 100); }, 100);
}, },
error: function(json) { error: function(json) {
$scope.loadBusy = false;
toastr.error('获取热门书签失败！失败原因：' + json.message + "。将尝试从缓存中获取！", "提示"); toastr.error('获取热门书签失败！失败原因：' + json.message + "。将尝试从缓存中获取！", "提示");
getHotBookmarksbyCache(); getHotBookmarksbyCache();
} }
@ -216,16 +217,16 @@ app.controller('hotCtr', ['$scope', '$state', '$stateParams', '$filter', '$windo
} }
function getHotBookmarksbyCache() { function getHotBookmarksbyCache() {
$scope.loadBusy = true;
var date = curentDate($scope.curDay, "yyyyMMdd"); var date = curentDate($scope.curDay, "yyyyMMdd");
if (date < "20160715") { if (date < "20160715") {
$scope.loadBusy = false;
toastr.info('您已将将所有的热门标签都加载完了！', "提示"); toastr.info('您已将将所有的热门标签都加载完了！', "提示");
$scope.loadBusy = false;
return; // 这是最早的了。 return; // 这是最早的了。
} }
var params = { var params = {
date: date, date: date,
} }
$scope.loadBusy = true;
bookmarkService.getHotBookmarks(params) bookmarkService.getHotBookmarks(params)
.then((data) => { .then((data) => {
data.forEach((bookmark) => { data.forEach((bookmark) => {

2
public/scripts/controllers/menus-controller.js
View File

@ -63,6 +63,8 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', 'pubSubService',
$('.js-radio-' + showStyle).checkbox('set checked'); $('.js-radio-' + showStyle).checkbox('set checked');
$state.go('bookmarks', { $state.go('bookmarks', {
showStyle: showStyle, showStyle: showStyle,
}, {
reload: true,
}) })
} }

10
public/views/bookmarks.html
View File

@ -10,7 +10,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="ui segment js-segment-navigate" ng-if="showStyle === 'navigate'"> <div class="ui segment js-segment-navigate" ng-if="showStyle === 'navigate'" ng-show="!loadBusy">
<div class="ui container" ng-repeat="tag in bookmarks" ng-init="tagIndex=$index"> <div class="ui container" ng-repeat="tag in bookmarks" ng-init="tagIndex=$index">
<div class="ui grid"> <div class="ui grid">
<div class="row"> <div class="row">
@ -47,7 +47,7 @@
<div class="ui divider"></div> <div class="ui divider"></div>
</div> </div>
</div> </div>
<div class="ui segment js-segment-costomTag" ng-if="showStyle === 'costomTag'"> <div class="ui segment js-segment-costomTag" ng-if="showStyle === 'costomTag'" ng-show="!loadBusy">
<div class="ui container"> <div class="ui container">
<div class="ui grid"> <div class="ui grid">
<div class="two wide column js-costomTag-label" ng-repeat="tag in costomTags"> <div class="two wide column js-costomTag-label" ng-repeat="tag in costomTags">
@ -78,7 +78,7 @@
</div> </div>
</div> </div>
</div> </div>
<table class="ui selectable sortable celled table js-table-bookmarks" ng-if="showStyle === 'table'"> <table class="ui selectable sortable celled table js-table-bookmarks" ng-if="showStyle === 'table'" ng-show="!loadBusy">
<thead> <thead>
<tr> <tr>
<th class="forbid_sorted">标题</th> <th class="forbid_sorted">标题</th>
@ -128,7 +128,7 @@
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
<div class="ui segment js-segment-card" ng-if="showStyle === 'card'"> <div class="ui segment js-segment-card" ng-if="showStyle === 'card'" ng-show="!loadBusy || currentPage>1">
<div class="ui five stackable cards" infinite-scroll='loadCardData()' infinite-scroll-immediate-check="false"> <div class="ui five stackable cards" infinite-scroll='loadCardData()' infinite-scroll-immediate-check="false">
<div class="card" ng-repeat="bookmark in bookmarks" id="{{bookmark.id}}"> <div class="card" ng-repeat="bookmark in bookmarks" id="{{bookmark.id}}">
<div class="content" ng-click="jumpToUrl(bookmark.url, bookmark.id)" style="max-height:70px;cursor:pointer"> <div class="content" ng-click="jumpToUrl(bookmark.url, bookmark.id)" style="max-height:70px;cursor:pointer">
@ -159,6 +159,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="ui massive text centered inline loader" ng-class="{active:loadBusy, disabled:!loadBusy}"> <div class="ui massive text centered inline loader" ng-class="{active:loadBusy, disabled:!loadBusy}">
正在加载中...</div> 正在加载中...</div>
</div>

6
public/views/hot.html
View File

@ -1,5 +1,5 @@
<!-- 高度至少要设置1000，元素少时才能触发滚动条事件 --> <!-- 高度至少要设置1000，元素少时才能触发滚动条事件 -->
<div class="ui segment js-hot-card" style="min-height:1000px;"> <div class="ui segment js-hot-card" style="min-height:1000px;" ng-show="!loadBusy || (!random && curDay<0)">
<div class="ui five stackable cards" infinite-scroll='loadHotBookmarks()' infinite-scroll-immediate-check="false"> <div class="ui five stackable cards" infinite-scroll='loadHotBookmarks()' infinite-scroll-immediate-check="false">
<div class="card" ng-repeat="bookmark in bookmarks"> <div class="card" ng-repeat="bookmark in bookmarks">
<div class="content" style="max-height:70px;cursor:pointer" ng-click="jumpToUrl(bookmark.url)"> <div class="content" style="max-height:70px;cursor:pointer" ng-click="jumpToUrl(bookmark.url)">
@ -27,6 +27,6 @@
<div style="width:22px;height:22px;" class="js-hot-random" ng-click="randomHotBookmarks()" title="随机查看热门收藏，如需回到最新热门收藏，请点击菜单按钮热门收藏" ng-show="!loadBusy"> <div style="width:22px;height:22px;" class="js-hot-random" ng-click="randomHotBookmarks()" title="随机查看热门收藏，如需回到最新热门收藏，请点击菜单按钮热门收藏" ng-show="!loadBusy">
<img class="ui ui middle aligned tiny image" ng-src="./images/random.png"> <img class="ui ui middle aligned tiny image" ng-src="./images/random.png">
</div> </div>
<div class="ui massive text centered inline loader js-hot-loader" ng-class="{active:loadBusy, disabled:!loadBusy}" style="top:15px;">
正在加载中...</div>
</div> </div>
<div class="ui massive text centered inline loader js-hot-loader" ng-class="{active:loadBusy, disabled:!loadBusy}" >
正在加载中...</div>