<div class="messageShareButtons jsOnly">
<ul class="inlineList">
- <li class="jsShareFacebook">
- <a>
- <span class="icon icon32 fa-facebook-square jsTooltip" title="{lang}wcf.message.share.facebook{/lang}"></span>
- <span class="invisible">{lang}wcf.message.share.facebook{/lang}</span>
+ <li>
+ <a class="button jsShareFacebook" title="{lang}wcf.message.share.facebook{/lang}">
+ <span class="icon icon24 fa-facebook-official"></span>
+ <span>{lang}wcf.message.share.facebook{/lang}</span>
</a>
- <span class="badge" style="display: none">0</span>
</li>
- <li class="jsShareTwitter">
- <a>
- <span class="icon icon32 fa-twitter-square jsTooltip" title="{lang}wcf.message.share.twitter{/lang}"></span>
- <span class="invisible">{lang}wcf.message.share.twitter{/lang}</span>
+ <li>
+ <a class="button jsShareTwitter" title="{lang}wcf.message.share.twitter{/lang}">
+ <span class="icon icon24 fa-twitter"></span>
+ <span>{lang}wcf.message.share.twitter{/lang}</span>
</a>
- <span class="badge" style="display: none">0</span>
</li>
- <li class="jsShareGoogle">
- <a>
- <span class="icon icon32 fa-google-plus-square jsTooltip" title="{lang}wcf.message.share.google{/lang}"></span>
- <span class="invisible">{lang}wcf.message.share.google{/lang}</span>
+ <li>
+ <a class="button jsShareGoogle" title="{lang}wcf.message.share.google{/lang}">
+ <span class="icon icon24 fa-google-plus"></span>{*@todo: change to fa-google-plus-official (fa 4.6)*}
+ <span>{lang}wcf.message.share.google{/lang}</span>
</a>
- <span class="badge" style="display: none">0</span>
</li>
- <li class="jsShareReddit">
- <a>
- <span class="icon icon32 fa-reddit-square jsTooltip" title="{lang}wcf.message.share.reddit{/lang}"></span>
- <span class="invisible">{lang}wcf.message.share.reddit{/lang}</span>
+ <li>
+ <a class="button jsShareReddit" title="{lang}wcf.message.share.reddit{/lang}">
+ <span class="icon icon24 fa-reddit"></span>
+ <span>{lang}wcf.message.share.reddit{/lang}</span>
+ </a>
+ </li>
+ <li>
+ <a class="button jsShareWhatsApp" title="{lang}wcf.message.share.whatsApp{/lang}">
+ <span class="icon icon24 fa-whatsapp jsTooltip"></span>
+ <span>{lang}wcf.message.share.whatsApp{/lang}</span>
+ </a>
+ </li>
+ <li>
+ <a class="button jsShareLinkedIn" title="{lang}wcf.message.share.linkedIn{/lang}">
+ <span class="icon icon24 fa-linkedin jsTooltip"></span>
+ <span>{lang}wcf.message.share.linkedIn{/lang}</span>
+ </a>
+ </li>
+ <li>
+ <a class="button jsSharePinterest" title="{lang}wcf.message.share.pinterest{/lang}">
+ <span class="icon icon24 fa-pinterest-p jsTooltip"></span>
+ <span>{lang}wcf.message.share.pinterest{/lang}</span>
+ </a>
+ </li>
+ <li>
+ <a class="button jsShareXing" title="{lang}wcf.message.share.xing{/lang}">
+ <span class="icon icon24 fa-xing jsTooltip"></span>
+ <span>{lang}wcf.message.share.xing{/lang}</span>
</a>
- <span class="badge" style="display: none">0</span>
</li>
{event name='buttons'}
</ul>
<script data-relocate="true">
- //<![CDATA[
- $(function() {
- WCF.Language.addObject({
- 'wcf.message.share.facebook': '{lang}wcf.message.share.facebook{/lang}',
- 'wcf.message.share.google': '{lang}wcf.message.share.google{/lang}',
- 'wcf.message.share.reddit': '{lang}wcf.message.share.reddit{/lang}',
- 'wcf.message.share.twitter': '{lang}wcf.message.share.twitter{/lang}',
- 'wcf.message.share.privacy': '{lang}wcf.message.share.privacy{/lang}'
- });
- var $privacySettings = { {implode from=$__wcf->getUser()->getSocialNetworkPrivacySettings() key=provider item=value}'{$provider}': {if $value}true{else}false{/if}{/implode} };
- new WCF.Message.Share.Page({if SHARE_BUTTONS_SHOW_COUNT}true{else}false{/if}, $privacySettings);
+ require(['WoltLab/WCF/Ui/Message/Share'], function(UiMessageShare) {
+ UiMessageShare.init();
});
- //]]>
</script>
</div>
/**
* 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<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 = $('<li class="jsShowPrivacySettings"><a><span class="icon icon32 fa-gear jsTooltip" title="' + WCF.Language.get('wcf.message.share.privacy') + '" /></a></li>');
- $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 = $('<div />').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');
}
});
--- /dev/null
+/**
+ * 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 <http://opensource.org/licenses/lgpl-license.php>
+ * @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');
+ }
+ };
+});
--- /dev/null
+$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);
+ }
+ }
+}
<item name="wcf.message.settings.showSignature.description"><![CDATA[Die im Profil eingestellte Signatur wird an diese Nachricht angehÃĪngt.]]></item>
<item name="wcf.message.share"><![CDATA[Teilen]]></item>
<item name="wcf.message.share.facebook"><![CDATA[Facebook]]></item>
- <item name="wcf.message.share.google"><![CDATA[Google Plus]]></item>
+ <item name="wcf.message.share.google"><![CDATA[Google+]]></item>
<item name="wcf.message.share.permalink"><![CDATA[Permalink]]></item>
<item name="wcf.message.share.permalink.bbcode"><![CDATA[BBCode]]></item>
<item name="wcf.message.share.permalink.html"><![CDATA[HTML]]></item>
<item name="wcf.message.share.reddit"><![CDATA[Reddit]]></item>
<item name="wcf.message.share.twitter"><![CDATA[Twitter]]></item>
+ <item name="wcf.message.share.whatsApp"><![CDATA[WhatsApp]]></item>
+ <item name="wcf.message.share.linkedIn"><![CDATA[LinkedIn]]></item>
+ <item name="wcf.message.share.pinterest"><![CDATA[Pinterest]]></item>
+ <item name="wcf.message.share.xing"><![CDATA[XING]]></item>
<item name="wcf.message.share.privacy"><![CDATA[Einstellungen zum Teilen]]></item>
<item name="wcf.message.share.privacy.description"><![CDATA[Die Anzahl der Teilungen auf der jeweiligen Plattform werden nur bei aktivierten Anbietern ermittelt, diese Angaben werden durch Ihren Browser direkt vom Anbieter abgefragt.]]></item>
<item name="wcf.message.smilies"><![CDATA[Smileys]]></item>
<item name="wcf.message.settings.showSignature.description"><![CDATA[Appends signature to this message, which can be edited in your profile.]]></item>
<item name="wcf.message.share"><![CDATA[Share]]></item>
<item name="wcf.message.share.facebook"><![CDATA[Facebook]]></item>
- <item name="wcf.message.share.google"><![CDATA[Google Plus]]></item>
+ <item name="wcf.message.share.google"><![CDATA[Google+]]></item>
<item name="wcf.message.share.permalink"><![CDATA[Permalink]]></item>
<item name="wcf.message.share.permalink.bbcode"><![CDATA[BBCode]]></item>
<item name="wcf.message.share.permalink.html"><![CDATA[HTML]]></item>
<item name="wcf.message.share.reddit"><![CDATA[Reddit]]></item>
<item name="wcf.message.share.twitter"><![CDATA[Twitter]]></item>
+ <item name="wcf.message.share.whatsApp"><![CDATA[WhatsApp]]></item>
+ <item name="wcf.message.share.linkedIn"><![CDATA[LinkedIn]]></item>
+ <item name="wcf.message.share.pinterest"><![CDATA[Pinterest]]></item>
+ <item name="wcf.message.share.xing"><![CDATA[XING]]></item>
<item name="wcf.message.share.privacy"><![CDATA[Privacy Settings]]></item>
<item name="wcf.message.share.privacy.description"><![CDATA[Displaying the number of shares is only available for enabled providers, data will be fetched directly using your browser.]]></item>
<item name="wcf.message.smilies"><![CDATA[Smilies]]></item>
projects / GitHub / WoltLab / WCF.git / commitdiff