From: Alexander Ebert Date: Sun, 5 Mar 2017 18:20:30 +0000 (+0100) Subject: Improved scroll behavior for comments X-Git-Tag: 3.1.0_Alpha_1~605 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=dd84772f086cac732b92925db74e625ece544d38;p=GitHub%2FWoltLab%2FWCF.git Improved scroll behavior for comments See #2231 --- diff --git a/wcfsetup/install/files/js/WCF.Comment.js b/wcfsetup/install/files/js/WCF.Comment.js index 1d086b9460..bb446f9fe0 100644 --- a/wcfsetup/install/files/js/WCF.Comment.js +++ b/wcfsetup/install/files/js/WCF.Comment.js @@ -92,6 +92,8 @@ WCF.Comment.Handler = Class.extend({ _guestDialog: null, _permalinkComment: null, + _permalinkResponse: null, + _scrollTarget: null, /** * Initializes the WCF.Comment.Handler class. @@ -108,7 +110,9 @@ WCF.Comment.Handler = Class.extend({ this._loadNextComments = null; this._loadNextResponses = { }; this._permalinkComment = null; + this._permalinkResponse = null; this._responses = { }; + this._scrollTarget = null; this._userAvatar = userAvatar; this._userAvatarSmall = userAvatarSmall; @@ -160,19 +164,57 @@ WCF.Comment.Handler = Class.extend({ }); var hash = window.location.hash; - if (hash.match(/^(?:[^\/]+\/)?comment(\d+)/)) { + if (hash.match(/^(?:[^\/]+\/)?comment(\d+)(?:\/response(\d+))?/)) { var comment = elById('comment' + RegExp.$1); if (comment) { - comment.scrollIntoView({ behavior: 'smooth' }); + var response; + if (RegExp.$2) { + response = elById('comment' + RegExp.$1 + 'response' + RegExp.$2); + if (response) { + this._scrollTo(response, true); + } + else { + // load response on-the-fly + this._loadResponseSegment(comment, RegExp.$1, RegExp.$2); + } + } + else { + this._scrollTo(comment, true); + } } else { // load comment on-the-fly - this._loadCommentSegment(RegExp.$1); + this._loadCommentSegment(RegExp.$1, RegExp.$2); } } }, - _loadCommentSegment: function (commentId) { + _scrollTo: function (element, highlight) { + if (this._scrollTarget === null) { + this._scrollTarget = elCreate('span'); + this._scrollTarget.className = 'commentScrollTarget'; + + document.body.appendChild(this._scrollTarget); + } + + this._scrollTarget.style.setProperty('top', (element.getBoundingClientRect().top + window.pageYOffset - 49) + 'px', ''); + + require(['Ui/Scroll'], (function (UiScroll) { + UiScroll.element(this._scrollTarget, function () { + if (highlight) { + if (element.classList.contains('commentHighlightTarget')) { + element.classList.remove('commentHighlightTarget'); + //noinspection BadExpressionStatementJS + element.offsetTop; + } + + element.classList.add('commentHighlightTarget'); + } + }) + }).bind(this)); + }, + + _loadCommentSegment: function (commentId, responseID) { this._permalinkComment = elCreate('li'); this._permalinkComment.className = 'commentPermalinkContainer loading'; this._permalinkComment.innerHTML = ''; @@ -185,7 +227,30 @@ WCF.Comment.Handler = Class.extend({ parameters: { data: { objectID: this._container.data('objectID'), - objectTypeID: this._container.data('objectTypeID') + objectTypeID: this._container.data('objectTypeID'), + responseID: ~~responseID + } + } + }); + this._proxy.sendRequest(); + }, + + _loadResponseSegment: function (comment, commentId, responseID) { + this._permalinkResponse = elCreate('li'); + this._permalinkResponse.className = 'commentResponsePermalinkContainer loading'; + this._permalinkResponse.innerHTML = ''; + var responseList = elBySel('.commentResponseList', comment); + responseList.insertBefore(this._permalinkResponse, responseList.firstChild); + + this._proxy.setOption('data', { + actionName: 'loadResponse', + className: 'wcf\\data\\comment\\CommentAction', + objectIDs: [commentId], + parameters: { + data: { + objectID: this._container.data('objectID'), + objectTypeID: this._container.data('objectTypeID'), + responseID: ~~responseID } } }); @@ -396,6 +461,9 @@ WCF.Comment.Handler = Class.extend({ var $responseID = $response.data('responseID'); this._responses[$responseID] = $response; + //noinspection JSReferencingMutableVariableFromClosure + response.id = 'comment' + commentId + 'response' + $responseID; + this._initResponse($responseID, $response); //noinspection JSReferencingMutableVariableFromClosure diff --git a/wcfsetup/install/files/style/ui/comment.scss b/wcfsetup/install/files/style/ui/comment.scss index 118c06b3de..30429019c1 100644 --- a/wcfsetup/install/files/style/ui/comment.scss +++ b/wcfsetup/install/files/style/ui/comment.scss @@ -134,7 +134,14 @@ } } -.commentPermalinkContainer { +@keyframes wcfCommentHighlight { + 0% { opacity: 1; } + 50% { opacity: .3; } + 100% { opacity: 1; } +} + +.commentPermalinkContainer, +.commentResponsePermalinkContainer{ border-bottom-color: $wcfContentBorder !important; &.loading > .icon { @@ -143,11 +150,22 @@ } &:not(.loading) { - opacity: 0; + //opacity: 0; } &.fadeIn { - opacity: 1; - transition: opacity .24s linear; + + /*opacity: 1; + transition: opacity .24s linear;*/ } } + +.comment.commentHighlightTarget .commentContent:not(.commentResponseContent) { + animation: wcfCommentHighlight .96s linear; +} + +.commentScrollTarget { + display: block; + height: 0; + position: absolute; +}