From c8696f40329193e52008eba58cc265e2c26213bc Mon Sep 17 00:00:00 2001 From: OldHawk Date: Fri, 17 Nov 2017 15:55:57 +0800 Subject: [PATCH] feat(forums): add 'upToTop' directive to scroll window to top --- .../directives/up-to-top.client.directive.js | 99 +++++++++++++++++++ .../forums-topic.client.controller.js | 24 ++++- modules/forums/client/less/forum.less | 15 +++ .../client/views/topic.client.view.html | 8 +- modules/torrents/client/less/torrents.less | 1 + 5 files changed, 143 insertions(+), 4 deletions(-) create mode 100644 modules/core/client/directives/up-to-top.client.directive.js diff --git a/modules/core/client/directives/up-to-top.client.directive.js b/modules/core/client/directives/up-to-top.client.directive.js new file mode 100644 index 00000000..875e2c9c --- /dev/null +++ b/modules/core/client/directives/up-to-top.client.directive.js @@ -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(''); + + 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('
'); + 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%)"; + } + } + } +}()); diff --git a/modules/forums/client/controllers/forums-topic.client.controller.js b/modules/forums/client/controllers/forums-topic.client.controller.js index 21d9cb22..abaa61f6 100644 --- a/modules/forums/client/controllers/forums-topic.client.controller.js +++ b/modules/forums/client/controllers/forums-topic.client.controller.js @@ -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 diff --git a/modules/forums/client/less/forum.less b/modules/forums/client/less/forum.less index 05816230..5e962daa 100644 --- a/modules/forums/client/less/forum.less +++ b/modules/forums/client/less/forum.less @@ -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; + } +} diff --git a/modules/forums/client/views/topic.client.view.html b/modules/forums/client/views/topic.client.view.html index 49894006..21d11c36 100644 --- a/modules/forums/client/views/topic.client.view.html +++ b/modules/forums/client/views/topic.client.view.html @@ -92,12 +92,14 @@ title="{{'FORUMS.TITLES.TOPIC_DELETE' | translate}}" ng-show="vm.canEdit() || vm.isOwner(vm.topic)" ng-click="vm.beginDeleteTopic(vm.topic);"> - - @@ -290,4 +292,6 @@ + +
\ No newline at end of file diff --git a/modules/torrents/client/less/torrents.less b/modules/torrents/client/less/torrents.less index ea8e3df0..de07eac7 100644 --- a/modules/torrents/client/less/torrents.less +++ b/modules/torrents/client/less/torrents.less @@ -38,3 +38,4 @@ padding: 8px 10px; } } +