From d1741ed5e406e4f3d600b3010821998a7e93b3ca Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Fri, 10 Jun 2016 17:35:42 +0200 Subject: [PATCH] Overhauled share buttons --- com.woltlab.wcf/templates/shareButtons.tpl | 74 +++-- wcfsetup/install/files/js/WCF.Message.js | 299 +----------------- .../files/js/WoltLab/WCF/Ui/Message/Share.js | 76 +++++ .../install/files/style/ui/shareButtons.scss | 116 +++++++ wcfsetup/install/lang/de.xml | 6 +- wcfsetup/install/lang/en.xml | 6 +- 6 files changed, 248 insertions(+), 329 deletions(-) create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Ui/Message/Share.js create mode 100644 wcfsetup/install/files/style/ui/shareButtons.scss diff --git a/com.woltlab.wcf/templates/shareButtons.tpl b/com.woltlab.wcf/templates/shareButtons.tpl index eee9c9e717..2be87763a9 100644 --- a/com.woltlab.wcf/templates/shareButtons.tpl +++ b/com.woltlab.wcf/templates/shareButtons.tpl @@ -1,50 +1,60 @@
diff --git a/wcfsetup/install/files/js/WCF.Message.js b/wcfsetup/install/files/js/WCF.Message.js index 933b2a161c..5e8b35fea6 100644 --- a/wcfsetup/install/files/js/WCF.Message.js +++ b/wcfsetup/install/files/js/WCF.Message.js @@ -2212,304 +2212,13 @@ WCF.Message.Share.Content = Class.extend({ /** * Provides buttons to share a page through multiple social community sites. * - * @param boolean fetchObjectCount - * @param object privacySettings + * @deprecated 2.2 - please use `WoltLab/WCF/Ui/Message/Share` instead */ WCF.Message.Share.Page = Class.extend({ - /** - * dialog overlay - * @var jQuery - */ - _dialog: null, - - /** - * true if share count should be fetched - * @var boolean - */ - _fetchObjectCount: false, - - /** - * page description - * @var string - */ - _pageDescription: '', - - /** - * canonical page URL - * @var string - */ - _pageURL: '', - - /** - * list of privacy settings per social media site - */ - _privacySettings: { }, - - /** - * list of provider links and share callback - * @var object - */ - _provider: { }, - - /** - * action proxy - * @var WCF.Action.Proxy - */ - _proxy: null, - - /** - * Initializes the WCF.Message.Share.Page class. - * - * @param boolean fetchObjectCount - * @param object privacySettings - */ - init: function(fetchObjectCount, privacySettings) { - this._dialog = null; - this._fetchObjectCount = (fetchObjectCount === true) ? true : false; - this._pageDescription = encodeURIComponent($('meta[property="og:title"]').prop('content')); - this._pageURL = encodeURIComponent($('meta[property="og:url"]').prop('content')); - this._privacySettings = $.extend({ - facebook: false, - google: false, - twitter: false, - reddit: false - }, privacySettings || { }); - this._proxy = null; - - this._initProvider(); - }, - - /** - * Initializes all social media providers. - */ - _initProvider: function() { - var $container = $('.messageShareButtons'); - var self = this; - this._provider = { - facebook: { - fetch: function() { self._fetchFacebook(); }, - link: $container.find('.jsShareFacebook'), - share: function() { self._share('facebook', 'https://www.facebook.com/sharer.php?u={pageURL}&t={text}', true); } - }, - google: { - fetch: undefined, - link: $container.find('.jsShareGoogle'), - share: function() { self._share('google', 'https://plus.google.com/share?url={pageURL}', true); } - }, - reddit: { - fetch: function() { self._fetchReddit(); }, - link:$container.find('.jsShareReddit'), - share: function() { self._share('reddit', 'https://ssl.reddit.com/submit?url={pageURL}', true); } - }, - twitter: { - fetch: undefined, - link: $container.find('.jsShareTwitter'), - share: function() { self._share('twitter', 'https://twitter.com/share?url={pageURL}&text={text}', false); } - } - }; - - $.each(this._provider, function(provider, data) { - if (self._privacySettings[provider]) { - if (self._fetchObjectCount && data.fetch) { - data.fetch(); - } - } - else { - data.link.addClass('disabled'); - } - - data.link.data('provider', provider).click($.proxy(self._click, self)); - }); - - if (WCF.User.userID && !$container.find('.jsShowPrivacySettings').length) { - var $openSettings = $('
    • '); - $openSettings.appendTo($container.children('ul')).children('a').click($.proxy(this._openPrivacySettings, this)); - } - }, - - /** - * Handles clicks on a social media provider link. - * - * @param object event - */ - _click: function(event) { - var $link = $(event.currentTarget); - var $provider = $link.data('provider'); - - if ($link.hasClass('disabled')) { - if (WCF.User.userID) { - this._openPrivacySettings(); - } - else { - // guest => enable button - $link.removeClass('disabled'); - } - } - else { - this._provider[$provider].share(); - } - }, - - /** - * Opens the privacy settings dialog. - */ - _openPrivacySettings: function() { - if (this._proxy === null) { - this._proxy = new WCF.Action.Proxy({ - success: $.proxy(this._success, this) - }); - } - - this._proxy.setOption('data', { - actionName: 'getSocialNetworkPrivacySettings', - className: 'wcf\\data\\user\\UserAction' - }); - this._proxy.sendRequest(); - }, - - /** - * Handles successful AJAX requests. - * - * @param object data - * @param string textStatus - * @param jQuery jqXHR - */ - _success: function(data, textStatus, jqXHR) { - switch (data.actionName) { - case 'getSocialNetworkPrivacySettings': - this._renderDialog(data); - break; - - case 'saveSocialNetworkPrivacySettings': - this._updatePrivacySettings(data); - break; - } - }, - - /** - * Renders the settings dialog. - * - * @param object data - */ - _renderDialog: function(data) { - if (this._dialog === null) { - this._dialog = $('
    ').hide().appendTo(document.body); - this._dialog.html(data.returnValues.template); - this._dialog.wcfDialog({ - title: WCF.Language.get('wcf.message.share.privacy') - }); - } - else { - this._dialog.html(data.returnValues.template); - this._dialog.wcfDialog('open'); - } - - this._dialog.find('input[type=submit]').click($.proxy(this._save, this)); - }, - - /** - * Saves settings. - */ - _save: function() { - this._proxy.setOption('data', { - actionName: 'saveSocialNetworkPrivacySettings', - className: 'wcf\\data\\user\\UserAction', - parameters: { - facebook: (this._dialog.find('input[name=facebook]').is(':checked')), - google: (this._dialog.find('input[name=google]').is(':checked')), - reddit: (this._dialog.find('input[name=reddit]').is(':checked')), - twitter: (this._dialog.find('input[name=twitter]').is(':checked')) - } - }); - this._proxy.sendRequest(); - - this._dialog.wcfDialog('close'); - }, - - /** - * Updates the internal privacy settings. - * - * @param object data - */ - _updatePrivacySettings: function(data) { - this._privacySettings = $.extend(this._privacySettings, data.returnValues.settings); - - var self = this; - $.each(data.returnValues.settings, function(provider, status) { - self._privacySettings[provider] = (status) ? true : false; - - if (status) { - self._provider[provider].link.removeClass('disabled'); - - if (self._fetchObjectCount && self._provider[provider].fetch) { - self._provider[provider].fetch(); - } - } - else { - self._provider[provider].link.addClass('disabled'); - } + init: function() { + require(['WoltLab/WCF/Ui/Message/Share'], function(UiMessageShare) { + UiMessageShare.init(); }); - - new WCF.System.Notification().show(); - }, - - /** - * Shares current page to selected social community site. - * - * @param string objectName - * @param string url - * @param boolean appendURL - */ - _share: function(objectName, url, appendURL) { - window.open(url.replace(/{pageURL}/, this._pageURL).replace(/{text}/, this._pageDescription + (appendURL ? " " + this._pageURL : "")), objectName, 'height=600,width=600'); - }, - - /** - * Fetches share count from a social community site. - * - * @param string url - * @param object callback - * @param string callbackName - */ - _fetchCount: function(url, callback, callbackName) { - var $options = { - autoSend: true, - dataType: 'jsonp', - showLoadingOverlay: false, - success: callback, - suppressErrors: true, - type: 'GET', - url: url.replace(/{pageURL}/, this._pageURL) - }; - if (callbackName) { - $options.jsonp = callbackName; - } - - new WCF.Action.Proxy($options); - }, - - /** - * Fetches number of Facebook likes. - */ - _fetchFacebook: function() { - this._fetchCount('https://graph.facebook.com/?id={pageURL}', $.proxy(function(data) { - if (data.shares) { - this._provider.facebook.link.children('span.badge').show().text(data.shares); - } - }, this)); - }, - - /** - * Fetches cumulative vote sum from Reddit. - */ - _fetchReddit: function() { - if (window.location.protocol.match(/^https/)) return; - - this._fetchCount('http://www.reddit.com/api/info.json?url={pageURL}', $.proxy(function(data) { - if (data.data.children.length) { - this._provider.reddit.link.children('span.badge').show().text(data.data.children[0].data.score); - } - }, this), 'jsonp'); } }); diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Message/Share.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Message/Share.js new file mode 100644 index 0000000000..6e9ef327a3 --- /dev/null +++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Message/Share.js @@ -0,0 +1,76 @@ +/** + * Provides buttons to share a page through multiple social community sites. + * + * @author Marcel Werk + * @copyright 2001-2016 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLab/WCF/Ui/Message/Share + */ +define([], function() { + "use strict"; + + /** + * @exports WoltLab/WCF/Ui/Message/Share + */ + return { + _pageDescription: '', + _pageUrl: '', + + init: function() { + var container = elBySel('.messageShareButtons'); + var providers = { + facebook: { + link: elBySel('.jsShareFacebook', container), + share: (function() { this._share('facebook', 'https://www.facebook.com/sharer.php?u={pageURL}&t={text}', true); }).bind(this) + }, + google: { + link: elBySel('.jsShareGoogle', container), + share: (function() { this._share('google', 'https://plus.google.com/share?url={pageURL}', false); }).bind(this) + }, + reddit: { + link: elBySel('.jsShareReddit', container), + share: (function() { this._share('reddit', 'https://ssl.reddit.com/submit?url={pageURL}', false); }).bind(this) + }, + twitter: { + link: elBySel('.jsShareTwitter', container), + share: (function() { this._share('twitter', 'https://twitter.com/share?url={pageURL}&text={text}', false); }).bind(this) + }, + linkedIn: { + link: elBySel('.jsShareLinkedIn', container), + share: (function() { this._share('twitter', 'https://www.linkedin.com/cws/share?url={pageURL}', false); }).bind(this) + }, + pinterest: { + link: elBySel('.jsSharePinterest', container), + share: (function() { this._share('twitter', 'https://www.pinterest.com/pin/create/link/?url={pageURL}&description={text}', false); }).bind(this) + }, + xing: { + link: elBySel('.jsShareXing', container), + share: (function() { this._share('twitter', 'https://www.xing.com/social_plugins/share?url={pageURL}', false); }).bind(this) + }, + whatsApp: { + link: elBySel('.jsShareWhatsApp', container), + share: (function() { + window.location.href = 'whatsapp://send?text=' + this._pageDescription + '%20' + this._pageUrl; + }).bind(this) + } + }; + + for (var provider in providers) { + if (providers.hasOwnProperty(provider)) { + if (providers[provider].link !== null) { + providers[provider].link.addEventListener(WCF_CLICK_EVENT, providers[provider].share); + } + } + } + + var title = elBySel('meta[property="og:title"]'); + if (title !== null) this._pageDescription = encodeURIComponent(title.content); + var url = elBySel('meta[property="og:url"]'); + if (url !== null) this._pageUrl = encodeURIComponent(url.content); + }, + + _share: function(objectName, url, appendURL) { + window.open(url.replace(/\{pageURL}/, this._pageUrl).replace(/\{text}/, this._pageDescription + (appendURL ? "%20" + this._pageUrl : "")), objectName, 'height=600,width=600'); + } + }; +}); diff --git a/wcfsetup/install/files/style/ui/shareButtons.scss b/wcfsetup/install/files/style/ui/shareButtons.scss new file mode 100644 index 0000000000..e17b26c9d9 --- /dev/null +++ b/wcfsetup/install/files/style/ui/shareButtons.scss @@ -0,0 +1,116 @@ +$shareFacebookBackground: rgba(59, 89, 153, 1); +$shareTwitterBackground: #55ACEE; +$shareGoogleBackground: rgba(220, 78, 65, 1); +$shareRedditBackground: rgba(255, 69, 0, 1); +$shareWhatsAppBackground: #25D366; +$shareLinkedInBackground: rgba(0, 122, 182, 1); +$sharePinterestBackground: rgba(189, 33, 37, 1); +$shareXingBackground: rgba(0, 101, 103, 1); + +.messageShareButtons { + .inlineList { + margin-right: -5px; + margin-bottom: -5px; + + > li { + margin-bottom: 5px; + } + } + + .button { + display: flex; + align-items: center; + + @include screen-sm-down { + > span:not(.icon) { + display: none; + } + } + } + + @include screen-md-up { + .icon { + margin-right: 3px; + } + } + + .jsShareFacebook { + background-color: $shareFacebookBackground; + color: rgba(255, 255, 255, 1); + + &:hover { + background-color: darken($shareFacebookBackground, 10%); + color: rgba(255, 255, 255, 1); + } + } + + .jsShareTwitter { + background-color: $shareTwitterBackground; + color: rgba(255, 255, 255, 1); + + &:hover { + background-color: darken($shareTwitterBackground, 10%); + color: rgba(255, 255, 255, 1); + } + } + + .jsShareGoogle { + background-color: $shareGoogleBackground; + color: rgba(255, 255, 255, 1); + + &:hover { + background-color: darken($shareGoogleBackground, 10%); + color: rgba(255, 255, 255, 1); + } + } + + .jsShareReddit { + background-color: $shareRedditBackground; + color: rgba(255, 255, 255, 1); + + &:hover { + background-color: darken($shareRedditBackground, 10%); + color: rgba(255, 255, 255, 1); + } + } + + .jsShareWhatsApp { + background-color: $shareWhatsAppBackground; + color: rgba(255, 255, 255, 1); + + &:hover { + background-color: darken($shareWhatsAppBackground, 10%); + color: rgba(255, 255, 255, 1); + } + } + + .jsShareLinkedIn { + background-color: $shareLinkedInBackground; + color: rgba(255, 255, 255, 1); + + &:hover { + background-color: darken($shareLinkedInBackground, 10%); + color: rgba(255, 255, 255, 1); + } + } + + .jsSharePinterest { + background-color: $sharePinterestBackground; + color: rgba(255, 255, 255, 1); + + &:hover { + background-color: darken($sharePinterestBackground, 10%); + color: rgba(255, 255, 255, 1); + } + } + + .jsShareXing { + background-color: $shareXingBackground; + color: rgba(255, 255, 255, 1); + + &:hover { + background-color: darken($shareXingBackground, 10%); + color: rgba(255, 255, 255, 1); + } + } +} diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index 2cb403bdd1..ae7bacf2f9 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -2352,12 +2352,16 @@ Fehler sind beispielsweise: - + + + + + diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml index d6a0f202ae..9fae0282f8 100644 --- a/wcfsetup/install/lang/en.xml +++ b/wcfsetup/install/lang/en.xml @@ -2389,12 +2389,16 @@ Errors are: - + + + + + -- 2.20.1