Nemcio/meanTorrent
1
0
Fork 0
mirror of https://github.com/taobataoma/meanTorrent.git synced 2026-02-28 09:10:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(forums): add 'upToTop' directive to scroll window to top

Browse Source
This commit is contained in:
OldHawk
2017-11-17 15:55:57 +08:00
parent 9d2f567dff
commit c8696f4032
5 changed files with 143 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
modules/core/client/directives/up-to-top.client.directive.js Normal file
View File

@@ -0,0 +1,99 @@
(function () {
'use strict';
angular.module('core')
.directive('upToTop', upToTop);
upToTop.$inject = ['$timeout', '$window'];
function upToTop($timeout, $window) {
var directive = {
restrict: 'A',
link: link
};
return directive;
function link(scope, element, attrs) {
scope.$watch(attrs.upToTop, function (s) {
if (attrs.upToTop) {
element.css('cursor', 'pointer');
element.css('display', 'none');
element.css('position', 'fixed');
element.css('right', '20px');
element.css('bottom', '20px');
element.css('width', '36px');
element.css('height', '36px');
element.css('border-radius', '50%');
element.css('backgroundColor', 'rgba(255, 255, 255, 0.8)');
var scTop = 0;
angular.element($window).bind('scroll', function (e) {
var shTop = angular.element('#' + attrs.upToTop).prop('offsetTop') - 60;
if ($(window).scrollTop() > shTop) {
element.css('display', 'block');
} else {
element.css('display', 'none');
}
if (shTop !== scTop) {
scTop = shTop;
element.bind('click', function (e) {
$timeout(function () {
$('html,body').animate({scrollTop: scTop}, 200);
}, 10);
});
}
});
var iEle = angular.element('<i></i>');
iEle.css('position', 'relative');
iEle.css('top', '-3px');
iEle.addClass('fa');
iEle.addClass('fa-arrow-circle-o-up');
iEle.addClass('fa-3x');
iEle.addClass('text-primary');
iEle.bind('mouseover', function (e) {
iEle.addClass('fa-arrow-circle-up');
//iEle.addClass('text-primary');
});
iEle.bind('mouseleave', function (e) {
iEle.removeClass('fa-arrow-circle-up');
//iEle.removeClass('text-primary');
});
var wave = angular.element('<div></div>');
wave.css('position', 'absolute');
wave.css('top', '0');
wave.css('left', '0');
wave.css('width', '100%');
wave.css('height', '100%');
wave.css('border-radius', '50%');
wave.css('z-index', '-1');
wave.css('pointer-events', 'none');
wave.css('backgroundColor', 'transparent');
wave.css('border', 'solid 5px #888');
wave.css('animation', 'sonarWave 2s linear infinite');
wave.on("webkitAnimationIteration oanimationiteration animationiteration", function () {
wave.css("borderColor", colorize());
});
element.append(iEle);
element.append(wave);
}
});
function colorize() {
var hue = Math.random() * 360;
return "HSL(" + hue + ",100%,50%)";
}
}
}
}());

24
modules/forums/client/controllers/forums-topic.client.controller.js
View File

@@ -7,11 +7,11 @@
ForumsTopicController.$inject = ['$scope', '$state', '$translate', 'Authentication', 'MeanTorrentConfig', 'ForumsService', 'ScoreLevelService', '$timeout', 'NotifycationService',
'marked', 'ModalConfirmService', '$stateParams', 'TopicsService', 'localStorageService', '$compile', 'RepliesService', '$filter', 'Upload', 'DownloadService',
'DebugConsoleService'];
'DebugConsoleService', '$window'];
function ForumsTopicController($scope, $state, $translate, Authentication, MeanTorrentConfig, ForumsService, ScoreLevelService, $timeout, NotifycationService,
marked, ModalConfirmService, $stateParams, TopicsService, localStorageService, $compile, RepliesService, $filter, Upload, DownloadService,
mtDebug) {
mtDebug, $window) {
var vm = this;
vm.DLS = DownloadService;
vm.forumsConfig = MeanTorrentConfig.meanTorrentConfig.forumsConfig;
@@ -23,6 +23,26 @@
vm.forumPath = [];
vm.postReplyFields = {};
angular.element($window).bind('scroll', function (e) {
var scTop = angular.element('#top_of_reply_list').prop('offsetTop') - 60;
if ($(window).scrollTop() > scTop) {
//alert('boom');up-to-top
angular.element('.up-to-top').css('display', 'block');
} else {
angular.element('.up-to-top').css('display', 'none');
}
});
/**
* upToTop
*/
vm.upToTop = function () {
var element = angular.element('#top_of_reply_list');
$timeout(function () {
$('html,body').animate({scrollTop: element[0].offsetTop - 60}, 200);
}, 10);
};
/**
* buildPager
* pagination init

15
modules/forums/client/less/forum.less
View File

@@ -750,3 +750,18 @@ em {
background-color: yellowgreen;
}
.up_to_top_div {
@media (max-width: @screen-xs-max) {
display: none !important;
}
}
@keyframes sonarWave {
from {
opacity: 0.8;
}
to {
transform: scale(3);
opacity: 0;
}
}

8
modules/forums/client/views/topic.client.view.html
View File

@@ -92,12 +92,14 @@
title="{{'FORUMS.TITLES.TOPIC_DELETE' | translate}}"
ng-show="vm.canEdit() || vm.isOwner(vm.topic)"
ng-click="vm.beginDeleteTopic(vm.topic);"></i>
<i class="fa" ng-class="vm.topic.isTop ? 'fa-arrow-circle-down text-primary' : 'fa-arrow-circle-up'"
<i class="fa"
ng-class="vm.topic.isTop ? 'fa-arrow-circle-down text-primary' : 'fa-arrow-circle-up'"
aria-hidden="true"
title="{{'FORUMS.TITLES.TOPIC_TOP_TOPIC' | translate}}: {{vm.topic.isTop}}"
ng-show="vm.canEdit()"
ng-click="vm.beginTopTopic(vm.topic);"></i>
<i class="fa" ng-class="vm.topic.isGlobal ? 'fa-download text-primary' : 'fa-upload'" aria-hidden="true"
<i class="fa" ng-class="vm.topic.isGlobal ? 'fa-download text-primary' : 'fa-upload'"
aria-hidden="true"
title="{{'FORUMS.TITLES.TOPIC_GLOBAL_TOPIC' | translate}}: {{vm.topic.isGlobal}}"
ng-show="vm.user.isOper;"
ng-click="vm.beginGlobalTopic(vm.topic);"></i>
@@ -290,4 +292,6 @@
</div>
</div>
</div>
<div class="up_to_top_div" up-to-top="top_of_reply_list"></div>
</section>

1
modules/torrents/client/less/torrents.less
View File

@@ -38,3 +38,4 @@
padding: 8px 10px;
}
}