From 8149511f0f79ccebfdb03d440e2137b0a7dc0d85 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Joshua=20R=C3=BCsweg?= Date: Wed, 1 Aug 2018 20:47:38 +0200 Subject: [PATCH] Add mobile react buttons for mobileNavigation See #2508 --- .../WoltLabSuite/Core/Ui/Reaction/Handler.js | 101 +++++++++++++++--- .../install/files/style/ui/reactions.scss | 5 + 2 files changed, 90 insertions(+), 16 deletions(-) diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js index e04c6fbca7..87154914bb 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js @@ -12,13 +12,13 @@ define( 'Ajax', 'Core', 'Dictionary', 'Language', 'ObjectMap', 'StringUtil', 'Dom/ChangeListener', 'Dom/Util', 'Ui/Dialog', 'WoltLabSuite/Core/Ui/User/List', 'User', 'WoltLabSuite/Core/Ui/Reaction/CountButtons', - 'Ui/Alignment', 'Ui/CloseOverlay' + 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen' ], function( Ajax, Core, Dictionary, Language, ObjectMap, StringUtil, DomChangeListener, DomUtil, UiDialog, UiUserList, User, CountButtons, - UiAlignment, UiCloseOverlay + UiAlignment, UiCloseOverlay, UiScreen ) { "use strict"; @@ -113,9 +113,91 @@ define( return; } + if (elementData.reactButton.parentElement.parentElement.classList.contains('jsMobileNavigation')) { + UiScreen.on('screen-sm-down', { + match: this._enableMobileView.bind(this, elementData.reactButton, elementData.objectId), + unmatch: this._disableMobileView.bind(this, elementData.reactButton, elementData.objectId), + setup: this._setupMobileView.bind(this, elementData.reactButton, elementData.objectId) + }); + } + elementData.reactButton.addEventListener(WCF_CLICK_EVENT, this._toggleReactPopover.bind(this, elementData.objectId, elementData.reactButton)); }, + /** + * Enables the mobile view for the reaction button. + * + * @param {Element} element + */ + _enableMobileView: function(element) { + var messageFooterGroup = element.parentElement.parentElement.parentElement; + + var mobileReaction = elBySel('.mobileReactButton', messageFooterGroup); + + mobileReaction.style.display = ''; + }, + + /** + * Disables the mobile view for the reaction button. + * + * @param {Element} element + */ + _disableMobileView: function(element) { + var messageFooterGroup = element.parentElement.parentElement.parentElement; + + var mobileReaction = elBySel('.mobileReactButton', messageFooterGroup); + + mobileReaction.style.display = 'none'; + }, + + /** + * Setup the mobile view for the reaction button. + * + * @param {Element} element + * @param {int} objectID + */ + _setupMobileView: function(element, objectID) { + var messageFooterGroup = element.parentElement.parentElement.parentElement; + + var button = elCreate('button'); + button.classList = 'mobileReactButton'; + button.innerHTML = element.innerHTML; + + button.addEventListener(WCF_CLICK_EVENT, this._toggleReactPopover.bind(this, objectID, button)); + + messageFooterGroup.appendChild(button); + }, + + _rebuildMobileView: function(objectID) { + if (this._containers.get(objectID).reactButton.parentElement.parentElement.classList.contains('jsMobileNavigation')) { + var messageFooterGroup = this._containers.get(objectID).reactButton.parentElement.parentElement.parentElement; + var button = elBySel('.mobileReactButton', messageFooterGroup); + + if (button !== null) { + button.innerHTML = this._containers.get(objectID).reactButton.innerHTML; + } + } + }, + + _updateReactButton: function(objectID, reactionTypeID) { + if (reactionTypeID) { + this._containers.get(objectID).reactButton.classList.add('active'); + + // update icon + elBySel('img', this._containers.get(objectID).reactButton).src = REACTION_TYPES[reactionTypeID].iconPath; + elData(elBySel('img', this._containers.get(objectID).reactButton), 'reaction-type-id', reactionTypeID); + } + else { + this._containers.get(objectID).reactButton.classList.remove('active'); + + // update icon + elBySel('img', this._containers.get(objectID).reactButton).src = WCF_PATH+'images/reaction/reactionIcon.svg'; + elData(elBySel('img', this._containers.get(objectID).reactButton), 'reaction-type-id', 0); + } + + this._rebuildMobileView(objectID); + }, + /** * Toggle the visibility of the react popover. * @@ -280,20 +362,7 @@ define( this.countButtons.updateCountButtons(data.returnValues.objectID, data.returnValues.reactions); // update react button status - if (data.returnValues.reactionTypeID) { - this._containers.get(data.returnValues.objectID).reactButton.classList.add('active'); - - // update icon - elBySel('img', this._containers.get(data.returnValues.objectID).reactButton).src = REACTION_TYPES[data.returnValues.reactionTypeID].iconPath; - elData(elBySel('img', this._containers.get(data.returnValues.objectID).reactButton), 'reaction-type-id', data.returnValues.reactionTypeID); - } - else { - this._containers.get(data.returnValues.objectID).reactButton.classList.remove('active'); - - // update icon - elBySel('img', this._containers.get(data.returnValues.objectID).reactButton).src = WCF_PATH+'images/reaction/reactionIcon.svg'; - elData(elBySel('img', this._containers.get(data.returnValues.objectID).reactButton), 'reaction-type-id', 0); - } + this._updateReactButton(data.returnValues.objectID, data.returnValues.reactionTypeID); }, _ajaxSetup: function() { diff --git a/wcfsetup/install/files/style/ui/reactions.scss b/wcfsetup/install/files/style/ui/reactions.scss index 9bc39d384c..622950087d 100644 --- a/wcfsetup/install/files/style/ui/reactions.scss +++ b/wcfsetup/install/files/style/ui/reactions.scss @@ -180,4 +180,9 @@ li.reactCountButton:hover { .reactionStatusContainer { display: none; } +} + +.messageFooterGroup > .mobileReactButton { + margin-left: auto; + margin-top: 20px; } \ No newline at end of file -- 2.20.1