add page changed effect

This commit is contained in:
OldHawk
2017-04-27 09:36:56 +08:00
parent 652a00faf5
commit 4db7cb0438
7 changed files with 149 additions and 91 deletions

View File

@@ -153,6 +153,12 @@
SUBTITLE_DELETE_SUCCESSFULLY: '字幕文件删除成功',
SUBTITLE_DELETE_ERROR: '字幕文件下载失败',
//page text
PAGE_TEXT_FIRST: '首页',
PAGE_TEXT_PREVIOUS: '上一页',
PAGE_TEXT_NEXT: '下一页',
PAGE_TEXT_LAST: '尾页',
//comment
USER_COMMENT_LIST: '用户评论',
POST_NEW_COMMENT: '发表新评论',

View File

@@ -153,6 +153,12 @@
SUBTITLE_DELETE_SUCCESSFULLY: 'Subtitle file delete successfully',
SUBTITLE_DELETE_ERROR: 'Subtitle file delete failed',
//page text
PAGE_TEXT_FIRST: 'First',
PAGE_TEXT_PREVIOUS: 'Previous',
PAGE_TEXT_NEXT: 'Next',
PAGE_TEXT_LAST: 'Last',
//comment
USER_COMMENT_LIST: 'User Comments List',
POST_NEW_COMMENT: 'Post New Comment',

View File

@@ -50,10 +50,10 @@
* getMovieTopInfo
*/
vm.getMovieTopInfo = function () {
vm.moviesInfo = TorrentsService.query({
vm.moviesInfo = TorrentsService.get({
limit: 16
}, function (items) {
vm.movieTopList = items;
vm.movieTopList = items.rows;
}, function (err) {
Notification.error({
message: '<i class="glyphicon glyphicon-remove"></i> ' + $translate.instant('TOP_MOVIE_INFO_ERROR')

View File

@@ -22,38 +22,68 @@
vm.progress = 0;
//page init
vm.commentBuildPager = commentBuildPager;
vm.commentFigureOutItemsToDisplay = commentFigureOutItemsToDisplay;
vm.commentPageChanged = commentPageChanged;
function commentBuildPager() {
vm.commentBuildPager = function () {
vm.commentPagedItems = [];
vm.commentItemsPerPage = 10;
vm.commentCurrentPage = 1;
vm.commentFigureOutItemsToDisplay();
}
};
function commentFigureOutItemsToDisplay() {
vm.commentFigureOutItemsToDisplay = function (callback) {
vm.commentFilterLength = vm.torrentLocalInfo._replies.length;
var begin = ((vm.commentCurrentPage - 1) * vm.commentItemsPerPage);
var end = begin + vm.commentItemsPerPage;
vm.commentPagedItems = vm.torrentLocalInfo._replies.slice(begin, end);
}
function commentPageChanged() {
if (callback) callback();
};
vm.commentPageChanged = function (autoScroll) {
var element = angular.element('#top_of_comments');
vm.commentFigureOutItemsToDisplay();
window.scrollTo(0, element[0].offsetTop - 30);
}
$('#comment-list-div').fadeTo(100, 0.01, function () {
vm.commentFigureOutItemsToDisplay(function () {
$timeout(function () {
$('#comment-list-div').fadeTo(400, 1, function () {
if (autoScroll) {
//window.scrollTo(0, element[0].offsetTop - 30);
$('html,body').animate({scrollTop: element[0].offsetTop - 30}, 200);
}
});
}, 100);
});
});
};
$scope.$watch('vm.torrentLocalInfo', function (newValue, oldValue) {
if (vm.torrentLocalInfo && vm.torrentLocalInfo._replies) {
var hasme = false;
var meitem = null;
if (newValue._replies.length > oldValue._replies.length) {
var totalPages = vm.commentItemsPerPage < 1 ? 1 : Math.ceil(newValue._replies.length / vm.commentItemsPerPage);
vm.commentCurrentPage = Math.max(totalPages || 0, 1);
angular.forEach(newValue._replies, function (n) {
if (oldValue._replies.indexOf(n) < 0) {
if (n.user._id.toString() === vm.user._id) {
hasme = true;
meitem = n;
}
}
});
}
if (hasme) {
var totalPages = vm.commentItemsPerPage < 1 ? 1 : Math.ceil(newValue._replies.length / vm.commentItemsPerPage);
var p = Math.max(totalPages || 0, 1);
if (vm.commentCurrentPage !== p) {
vm.commentCurrentPage = p;
vm.commentPageChanged(false);
vm.scrollToId = meitem._id;
} else {
vm.commentFigureOutItemsToDisplay();
}
} else {
vm.commentFigureOutItemsToDisplay();
}
vm.commentFigureOutItemsToDisplay();
}
});

View File

@@ -30,30 +30,36 @@
}
//page init
vm.torrentBuildPager = torrentBuildPager;
vm.torrentFigureOutItemsToDisplay = torrentFigureOutItemsToDisplay;
vm.torrentPageChanged = torrentPageChanged;
function torrentBuildPager() {
vm.torrentBuildPager = function () {
vm.torrentPagedItems = [];
vm.torrentItemsPerPage = 8;
vm.torrentCurrentPage = 1;
vm.torrentFigureOutItemsToDisplay();
}
};
function torrentFigureOutItemsToDisplay() {
vm.torrentFigureOutItemsToDisplay = function (callback) {
vm.getMoviePageInfo(vm.torrentCurrentPage, function (items) {
vm.torrentFilterLength = items.total;
vm.torrentPagedItems = items.rows;
});
}
function torrentPageChanged() {
if (callback) callback();
});
};
vm.torrentPageChanged = function () {
var element = angular.element('#top_of_torrent_list');
vm.torrentFigureOutItemsToDisplay();
window.scrollTo(0, element[0].offsetTop - 60);
}
$('.tb-v-middle').fadeTo(100, 0.01, function () {
vm.torrentFigureOutItemsToDisplay(function () {
$timeout(function () {
$('.tb-v-middle').fadeTo(400, 1, function () {
//window.scrollTo(0, element[0].offsetTop - 60);
$('html,body').animate({scrollTop: element[0].offsetTop - 60}, 200);
});
}, 100);
});
});
};
/**
* getMovieTopInfo

View File

@@ -180,7 +180,10 @@
<div class="pagination-div">
<uib-pagination boundary-links="true" max-size="8" items-per-page="vm.torrentItemsPerPage" total-items="vm.torrentFilterLength"
ng-model="vm.torrentCurrentPage" ng-change="vm.torrentPageChanged()"></uib-pagination>
ng-model="vm.torrentCurrentPage" ng-change="vm.torrentPageChanged()"
first-text="{{ 'PAGE_TEXT_FIRST' | translate}}" previous-text="{{ 'PAGE_TEXT_PREVIOUS' | translate}}"
next-text="{{ 'PAGE_TEXT_NEXT' | translate}}" last-text="{{ 'PAGE_TEXT_LAST' | translate}}">
</uib-pagination>
</div>
</div>
</section>

View File

@@ -155,74 +155,78 @@
class="badge badge_info">{{vm.torrentLocalInfo._replies.length}}</span></div>
<div class="panel-body">
<uib-pagination boundary-links="true" max-size="8" items-per-page="vm.commentItemsPerPage" total-items="vm.commentFilterLength"
ng-model="vm.commentCurrentPage" ng-change="vm.commentPageChanged()"
ng-if="vm.torrentLocalInfo._replies.length > 0"></uib-pagination>
ng-model="vm.commentCurrentPage" ng-change="vm.commentPageChanged(true)"
ng-if="vm.torrentLocalInfo._replies.length > 0"
first-text="{{ 'PAGE_TEXT_FIRST' | translate}}" previous-text="{{ 'PAGE_TEXT_PREVIOUS' | translate}}"
next-text="{{ 'PAGE_TEXT_NEXT' | translate}}" last-text="{{ 'PAGE_TEXT_LAST' | translate}}">
</uib-pagination>
<div class="comment-list" id="{{item._id}}" scroll-if="item._id==vm.scrollToId" offset-top="-60"
ng-repeat="item in vm.commentPagedItems">
<div class="timeline-comment-wrapper">
<a class="timeline-comment-avatar" ng-click="vm.replyComment(item);">
<img title="{{item.user.displayName}}" ng-src="/{{item.user.profileImageURL}}">
</a>
<div id="comment-list-div">
<div class="comment-list" id="{{item._id}}" scroll-if="item._id==vm.scrollToId" offset-top="-60"
ng-repeat="item in vm.commentPagedItems">
<div class="timeline-comment-wrapper">
<a class="timeline-comment-avatar" ng-click="vm.replyComment(item);">
<img title="{{item.user.displayName}}" ng-src="/{{item.user.profileImageURL}}">
</a>
<div class="timeline-comment">
<div class="timeline-comment-header">
<div class="timeline-comment-header-text">{{item.user.displayName}}
<span class="user-ud-text">
(<span class="glyphicon glyphicon-arrow-up torrent-up"></span>{{item.user.uploaded | bytes}}
<span class="glyphicon glyphicon-arrow-down torrent-down"></span>{{item.user.downloaded | bytes}}
)
</span>
<div class="timeline-comment">
<div class="timeline-comment-header">
<div class="timeline-comment-header-text">{{item.user.displayName}}
<span class="user-ud-text">
(<span class="glyphicon glyphicon-arrow-up torrent-up"></span>{{item.user.uploaded | bytes}}
<span class="glyphicon glyphicon-arrow-down torrent-down"></span>{{item.user.downloaded | bytes}}
)
</span>
</div>
<span class="timeline-comment-header-time-text">{{item.createdat | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</div>
<span class="timeline-comment-header-time-text">{{item.createdat | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</div>
<div class="timeline-comment-body">
<div class="timeline-comment-body-text" ng-bind-html="vm.getCommentMarked(item);" compile="true"></div>
<div class="row text-right" ng-show="item.editedat">
<p class="timeline-comment-body-edited-text">[ {{item.editedby}} {{ 'COMMENT_EDITED_INFO' | translate}} {{item.editedat | date:'yyyy-MM-dd HH:mm:ss'}} ]</p>
</div>
<div class="row" ng-show="item._replies.length>0">
<div class="col-sm-10 col-sm-offset-2 timeline-comment-sub-list">
<div class="timeline-comment-sub-item" ng-repeat="sitem in item._replies">
<a class="timeline-comment-sub-avatar" ng-click="vm.replySubComment(item, sitem);">
<img title="{{sitem.user.displayName}}" ng-src="/{{sitem.user.profileImageURL}}">
</a>
<div class="timeline-comment-body">
<div class="timeline-comment-body-text" ng-bind-html="vm.getCommentMarked(item);" compile="true"></div>
<div class="row text-right" ng-show="item.editedat">
<p class="timeline-comment-body-edited-text">[ {{item.editedby}} {{ 'COMMENT_EDITED_INFO' | translate}} {{item.editedat | date:'yyyy-MM-dd HH:mm:ss'}} ]</p>
</div>
<div class="row" ng-show="item._replies.length>0">
<div class="col-sm-10 col-sm-offset-2 timeline-comment-sub-list">
<div class="timeline-comment-sub-item" ng-repeat="sitem in item._replies">
<a class="timeline-comment-sub-avatar" ng-click="vm.replySubComment(item, sitem);">
<img title="{{sitem.user.displayName}}" ng-src="/{{sitem.user.profileImageURL}}">
</a>
<div class="timeline-comment-sub-body">
<span>{{sitem.comment}}</span>
<span style="font-size: 12px;"> -
<a ng-click="vm.markLinkClick($event, item);"
ng-href="#">@{{sitem.user.displayName}}</a>
</span>
<span style="font-size: 12px; color: #999999;">{{sitem.createdat | date: 'yyyy-MM-dd HH:mm:ss'}}</span>
<div class="timeline-comment-sub-body">
<span>{{sitem.comment}}</span>
<span style="font-size: 12px;"> -
<a ng-click="vm.markLinkClick($event, item);"
ng-href="#">@{{sitem.user.displayName}}</a>
</span>
<span style="font-size: 12px; color: #999999;">{{sitem.createdat | date: 'yyyy-MM-dd HH:mm:ss'}}</span>
<span class="glyphicon glyphicon-edit edit-button"
title="{{ 'COMMENT_EDIT_ICON_TITLE' | translate}}"
ng-if="sitem.user._id.toString()==vm.user._id || vm.user.roles[0] == 'admin'"
ng-click="vm.editSubComment(item,sitem);">
</span>
<span class="glyphicon glyphicon-remove-circle delete-button"
title="{{ 'COMMENT_DELETE_ICON_TITLE' | translate}}"
ng-if="sitem.user._id.toString()==vm.user._id || vm.user.roles[0] == 'admin'"
ng-click="vm.deleteSubComment(item,sitem);">
</span>
<span class="glyphicon glyphicon-edit edit-button"
title="{{ 'COMMENT_EDIT_ICON_TITLE' | translate}}"
ng-if="sitem.user._id.toString()==vm.user._id || vm.user.roles[0] == 'admin'"
ng-click="vm.editSubComment(item,sitem);">
</span>
<span class="glyphicon glyphicon-remove-circle delete-button"
title="{{ 'COMMENT_DELETE_ICON_TITLE' | translate}}"
ng-if="sitem.user._id.toString()==vm.user._id || vm.user.roles[0] == 'admin'"
ng-click="vm.deleteSubComment(item,sitem);">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="timeline-comment-footer">
<div class="timeline-comment-footer-button text-right">
<button class="btn btn-default btn-xs"
ng-if="item.user._id.toString()==vm.user._id || vm.user.roles[0] == 'admin'"
translate="COMMENT_REPLY_EDIT" ng-click="vm.editComment(item);"></button>
<button class="btn btn-default btn-xs"
ng-if="item.user._id.toString()==vm.user._id || vm.user.roles[0] == 'admin'"
translate="COMMENT_REPLY_DELETE" ng-click="vm.deleteComment(item);"></button>
<button class="btn btn-default btn-xs"
translate="COMMENT_REPLY_BUTTON" ng-click="vm.replyComment(item);"></button>
<div class="timeline-comment-footer">
<div class="timeline-comment-footer-button text-right">
<button class="btn btn-default btn-xs"
ng-if="item.user._id.toString()==vm.user._id || vm.user.roles[0] == 'admin'"
translate="COMMENT_REPLY_EDIT" ng-click="vm.editComment(item);"></button>
<button class="btn btn-default btn-xs"
ng-if="item.user._id.toString()==vm.user._id || vm.user.roles[0] == 'admin'"
translate="COMMENT_REPLY_DELETE" ng-click="vm.deleteComment(item);"></button>
<button class="btn btn-default btn-xs"
translate="COMMENT_REPLY_BUTTON" ng-click="vm.replyComment(item);"></button>
</div>
</div>
</div>
</div>
@@ -230,8 +234,11 @@
</div>
<uib-pagination boundary-links="true" max-size="8" items-per-page="vm.commentItemsPerPage" total-items="vm.commentFilterLength"
ng-model="vm.commentCurrentPage" ng-change="vm.commentPageChanged()"
ng-if="vm.torrentLocalInfo._replies.length > 0"></uib-pagination>
ng-model="vm.commentCurrentPage" ng-change="vm.commentPageChanged(true)"
ng-if="vm.torrentLocalInfo._replies.length > 0"
first-text="{{ 'PAGE_TEXT_FIRST' | translate}}" previous-text="{{ 'PAGE_TEXT_PREVIOUS' | translate}}"
next-text="{{ 'PAGE_TEXT_NEXT' | translate}}" last-text="{{ 'PAGE_TEXT_LAST' | translate}}">
</uib-pagination>
<div class="padding-top-20"></div>
<div class="comment-new">