From 4015c35d0fb56af69e7c4ef2c01e70117546cfec Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Tue, 26 Jan 2016 15:32:27 +0100 Subject: [PATCH] Using new like handler for comments --- .../templates/__commentJavaScript.tpl | 45 +++++++++- com.woltlab.wcf/templates/commentList.tpl | 2 +- .../templates/commentResponseList.tpl | 2 +- wcfsetup/install/files/js/WCF.Comment.js | 86 ------------------- .../files/js/WoltLab/WCF/Ui/Like/Handler.js | 50 +++++++---- wcfsetup/install/files/style/ui/comment.scss | 4 + 6 files changed, 83 insertions(+), 106 deletions(-) diff --git a/com.woltlab.wcf/templates/__commentJavaScript.tpl b/com.woltlab.wcf/templates/__commentJavaScript.tpl index 3ebedce8ff..4c64c0daac 100644 --- a/com.woltlab.wcf/templates/__commentJavaScript.tpl +++ b/com.woltlab.wcf/templates/__commentJavaScript.tpl @@ -16,8 +16,49 @@ new {if $commentHandlerClass|isset}{@$commentHandlerClass}{else}WCF.Comment.Handler{/if}('{$commentContainerID}', '{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(48)}', '{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)}'); {if MODULE_LIKE && $commentList->getCommentManager()->supportsLike() && $__wcf->getSession()->getPermission('user.like.canViewLike')} - new WCF.Comment.Like({if $__wcf->getUser()->userID && $__wcf->getSession()->getPermission('user.like.canLike')}1{else}0{/if}, {@LIKE_ENABLE_DISLIKE}, false, {@LIKE_ALLOW_FOR_OWN_CONTENT}); - new WCF.Comment.Response.Like({if $__wcf->getUser()->userID && $__wcf->getSession()->getPermission('user.like.canLike')}1{else}0{/if}, {@LIKE_ENABLE_DISLIKE}, false, {@LIKE_ALLOW_FOR_OWN_CONTENT}); + require(['WoltLab/WCF/Ui/Like/Handler'], function(UiLikeHandler) { + var canDislike = {if LIKE_ENABLE_DISLIKE}true{else}false{/if}; + var canLike = {if $__wcf->getUser()->userID && $__wcf->getSession()->getPermission('user.like.canLike')}true{else}false{/if}; + var canLikeOwnContent = {if LIKE_ALLOW_FOR_OWN_CONTENT}true{else}false{/if}; + + new UiLikeHandler('com.woltlab.wcf.comment', { + // settings + badgeClassNames: 'separatorLeft', + markListItemAsActive: true, + renderAsButton: false, + + // permissions + canDislike: canDislike, + canLike: canLike, + canLikeOwnContent: canLikeOwnContent, + canViewSummary: false, + + // selectors + badgeContainerSelector: '.commentContent:not(.commentResponseContent) > .containerHeadline > h3', + buttonAppendToSelector: '.commentContent .buttonList', + containerSelector: '.comment', + summarySelector: '' + }); + + new UiLikeHandler('com.woltlab.wcf.comment.response', { + // settings + badgeClassNames: 'separatorLeft', + markListItemAsActive: true, + renderAsButton: false, + + // permissions + canDislike: canDislike, + canLike: canLike, + canLikeOwnContent: canLikeOwnContent, + canViewSummary: false, + + // selectors + badgeContainerSelector: '.commentResponseContent > .containerHeadline > h3', + buttonAppendToSelector: '.commentContent .buttonList', + containerSelector: '.commentResponse', + summarySelector: '' + }); + }); {/if} {if $commentList->getCommentManager()->supportsReport() && $__wcf->session->getPermission('user.profile.canReportContent')} diff --git a/com.woltlab.wcf/templates/commentList.tpl b/com.woltlab.wcf/templates/commentList.tpl index 4a7e860256..a52cef6f3b 100644 --- a/com.woltlab.wcf/templates/commentList.tpl +++ b/com.woltlab.wcf/templates/commentList.tpl @@ -1,6 +1,6 @@ {if !$commentManager|isset}{assign var='commentManager' value=$commentList->getCommentManager()}{/if} {foreach from=$commentList item=comment} -
  • +
  • {if $comment->userID} diff --git a/com.woltlab.wcf/templates/commentResponseList.tpl b/com.woltlab.wcf/templates/commentResponseList.tpl index fe86d2fb19..39f9634953 100644 --- a/com.woltlab.wcf/templates/commentResponseList.tpl +++ b/com.woltlab.wcf/templates/commentResponseList.tpl @@ -1,5 +1,5 @@ {foreach from=$responseList item=response} -
  • +
  • {if $response->userID} diff --git a/wcfsetup/install/files/js/WCF.Comment.js b/wcfsetup/install/files/js/WCF.Comment.js index 6831fd8787..10dcba0537 100644 --- a/wcfsetup/install/files/js/WCF.Comment.js +++ b/wcfsetup/install/files/js/WCF.Comment.js @@ -890,93 +890,7 @@ WCF.Comment.Handler = Class.extend({ } }); -/** - * Like support for comments - * - * @see WCF.Like - */ -WCF.Comment.Like = WCF.Like.extend({ - /** - * @see WCF.Like._getContainers() - */ - _getContainers: function() { - return $('.commentList > li.comment'); - }, - - /** - * @see WCF.Like._getObjectID() - */ - _getObjectID: function(containerID) { - return this._containers[containerID].data('commentID'); - }, - - /** - * @see WCF.Like._buildWidget() - */ - _buildWidget: function(containerID, likeButton, dislikeButton, badge, summary) { - this._containers[containerID].find('.containerHeadline:eq(0) > h3').append(badge); - - if (this._canLike) { - likeButton.appendTo(this._containers[containerID].find('ul.buttonList:eq(0)')); - dislikeButton.appendTo(this._containers[containerID].find('ul.buttonList:eq(0)')); - } - }, - - /** - * @see WCF.Like._getWidgetContainer() - */ - _getWidgetContainer: function(containerID) {}, - - /** - * @see WCF.Like._addWidget() - */ - _addWidget: function(containerID, widget) {} -}); - /** * Namespace for comment responses */ WCF.Comment.Response = { }; - -/** - * Like support for comments responses. - * - * @see WCF.Like - */ -WCF.Comment.Response.Like = WCF.Like.extend({ - /** - * @see WCF.Like._addWidget() - */ - _addWidget: function(containerID, widget) { }, - - /** - * @see WCF.Like._buildWidget() - */ - _buildWidget: function(containerID, likeButton, dislikeButton, badge, summary) { - this._containers[containerID].find('.containerHeadline:eq(0) > h3').append(badge); - - if (this._canLike) { - likeButton.appendTo(this._containers[containerID].find('ul.buttonList:eq(0)')); - dislikeButton.appendTo(this._containers[containerID].find('ul.buttonList:eq(0)')); - } - }, - - /** - * @see WCF.Like._getContainers() - */ - _getContainers: function() { - return $('.commentResponseList > li.commentResponse'); - }, - - /** - * @see WCF.Like._getObjectID() - */ - _getObjectID: function(containerID) { - return this._containers[containerID].data('responseID'); - }, - - /** - * @see WCF.Like._getWidgetContainer() - */ - _getWidgetContainer: function(containerID) { } -}); diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js index 311ba61a77..729c3e6bee 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js @@ -25,7 +25,7 @@ define( /** * @constructor */ - function UiLikeHandler(objectType, options) { this.init(objectType, options); }; + function UiLikeHandler(objectType, options) { this.init(objectType, options); } UiLikeHandler.prototype = { /** * Initializes the like handler. @@ -42,7 +42,11 @@ define( this._details = new ObjectMap(); this._objectType = objectType; this._options = Core.extend({ + // settings + badgeClassNames: '', isSingleItem: false, + markListItemAsActive: false, + renderAsButton: true, // permissions canDislike: false, @@ -52,6 +56,7 @@ define( // selectors badgeContainerSelector: '.messageHeader .messageHeadline > p', + buttonAppendToSelector: '', buttonBeforeSelector: '.messageFooterButtons > .toTopLink', containerSelector: '', summarySelector: '.messageFooterNotes' @@ -125,7 +130,7 @@ define( if (badgeContainer !== null) { badge = elCreate('a'); badge.href = '#'; - badge.className = 'wcfLikeCounter jsTooltip'; + badge.className = 'wcfLikeCounter jsTooltip' + (this._options.badgeClassNames ? ' ' + this._options.badgeClassNames : ''); badge.addEventListener('click', this._showSummary.bind(this, element)); badgeContainer.appendChild(badge); @@ -134,16 +139,19 @@ define( this._updateBadge(element); } - var insertPosition, userId = elAttr(element, 'data-user-id'); - if (this._options.canLikeOwnContent || WCF.User.userID === userId) { - insertPosition = elBySel(this._options.buttonBeforeSelector, element); - if (insertPosition !== null) { + if (WCF.User.userID != elData(element, 'user-id') || this._options.canLikeOwnContent) { + var appendTo = (this._options.buttonAppendToSelector) ? elBySel(this._options.buttonAppendToSelector, element) : null; + var insertPosition = (this._options.buttonBeforeSelector) ? elBySel(this._options.buttonBeforeSelector, element) : null; + if (insertPosition === null && appendTo === null) { + throw new Error("Unable to find insert location for like/dislike buttons."); + } + else { // like button - elementData.likeButton = this._createButton(element, insertPosition, true); + elementData.likeButton = this._createButton(element, true, insertPosition, appendTo); // dislike button if (this._options.canDislike) { - elementData.dislikeButton = this._createButton(element, insertPosition, false); + elementData.dislikeButton = this._createButton(element, false, insertPosition, appendTo); } this._updateActiveState(element); @@ -155,18 +163,19 @@ define( * Creates a like or dislike button. * * @param {Element} element container element - * @param {Element} insertBefore insert button before given element * @param {boolean} isLike false if this is a dislike button + * @param {Element?} insertBefore insert button before given element + * @param {Element?} appendTo append button to given element * @return {Element} button element */ - _createButton: function(element, insertBefore, isLike) { + _createButton: function(element, isLike, insertBefore, appendTo) { var title = Language.get('wcf.like.button.' + (isLike ? 'like' : 'dislike')); var listItem = elCreate('li'); listItem.className = 'wcf' + (isLike ? 'Like' : 'Dislike') + 'Button'; var button = elCreate('a'); - button.className = 'button jsTooltip'; + button.className = 'jsTooltip' + (this._options.renderAsButton ? ' button' : ''); button.href = '#'; button.title = title; button.innerHTML = ' '; @@ -174,7 +183,13 @@ define( button.setAttribute('data-type', (isLike ? 'like' : 'dislike')); listItem.appendChild(button); - insertBefore.parentNode.insertBefore(listItem, insertBefore); + + if (insertBefore) { + insertBefore.parentNode.insertBefore(listItem, insertBefore); + } + else { + appendTo.appendChild(listItem); + } return button; }, @@ -275,14 +290,17 @@ define( _updateActiveState: function(element) { var data = this._containers.get(element); - if (data.dislikeButton !== null) data.dislikeButton.classList.remove('active'); - data.likeButton.classList.remove('active'); + var dislikeTarget = (this._options.markListItemAsActive) ? data.dislikeButton.parentNode : data.dislikeButton; + var likeTarget = (this._options.markListItemAsActive) ? data.likeButton.parentNode : data.likeButton; + + if (data.dislikeButton !== null) dislikeTarget.classList.remove('active'); + likeTarget.classList.remove('active'); if (data.liked === 1) { - data.likeButton.classList.add('active'); + likeTarget.classList.add('active'); } else if (data.liked === -1 && data.dislikeButton !== null) { - data.dislikeButton.classList.add('active'); + dislikeTarget.classList.add('active'); } }, diff --git a/wcfsetup/install/files/style/ui/comment.scss b/wcfsetup/install/files/style/ui/comment.scss index 5378a95965..013ebdb150 100644 --- a/wcfsetup/install/files/style/ui/comment.scss +++ b/wcfsetup/install/files/style/ui/comment.scss @@ -28,6 +28,10 @@ margin-top: 20px; } } + + .wcfLikeCounter { + @extend .wcfFontSmall; + } } .commentResponseList { -- 2.20.1