From 8dc0470007186349d557e39e43e92bfc197796fa Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 9 Nov 2015 19:01:27 +0100
Subject: [PATCH] Add Twitter button

---
 .../ascribe_detail/media_container.js         |  2 +
 .../facebook_share_button.js                  |  3 +-
 .../twitter_share_button.js                   | 54 +++++++++++++++++++
 js/constants/application_constants.js         |  3 ++
 sass/ascribe_social_share.scss                |  7 +++
 sass/main.scss                                |  1 +
 6 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 js/components/ascribe_social_share/twitter_share_button.js
 create mode 100644 sass/ascribe_social_share.scss

diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js
index 9e5126bf..81eac800 100644
--- a/js/components/ascribe_detail/media_container.js
+++ b/js/components/ascribe_detail/media_container.js
@@ -8,6 +8,7 @@ import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import MediaPlayer from './../ascribe_media/media_player';
 
 import FacebookShareButton from '../ascribe_social_share/facebook_share_button';
+import TwitterShareButton from '../ascribe_social_share/twitter_share_button';
 
 import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
 
@@ -98,6 +99,7 @@ let MediaContainer = React.createClass({
                         </Button>
                     </AclProxy>
                     <FacebookShareButton />
+                    <TwitterShareButton />
                     {embed}
                 </p>
             </div>
diff --git a/js/components/ascribe_social_share/facebook_share_button.js b/js/components/ascribe_social_share/facebook_share_button.js
index 98350347..1f0e7aa3 100644
--- a/js/components/ascribe_social_share/facebook_share_button.js
+++ b/js/components/ascribe_social_share/facebook_share_button.js
@@ -40,8 +40,7 @@ let FacebookShareButton = React.createClass({
         return (
             <span
                 ref="fbShareButton"
-                style={{width: '56px', height: '24px'}}
-                className="fb-share-button btn btn-xs"
+                className="fb-share-button btn btn-ascribe-social"
                 data-href={this.props.url}
                 data-layout={this.props.type}>
            </span>
diff --git a/js/components/ascribe_social_share/twitter_share_button.js b/js/components/ascribe_social_share/twitter_share_button.js
new file mode 100644
index 00000000..21eec3d2
--- /dev/null
+++ b/js/components/ascribe_social_share/twitter_share_button.js
@@ -0,0 +1,54 @@
+'use strict';
+
+import React from 'react';
+
+import AppConstants from '../../constants/application_constants';
+
+import { InjectInHeadUtils } from '../../utils/inject_utils';
+
+let TwitterShareButton = React.createClass({
+    propTypes: {
+        count: React.PropTypes.string,
+        counturl: React.PropTypes.string,
+        hashtags: React.PropTypes.string,
+        size: React.PropTypes.string,
+        text: React.PropTypes.string,
+        url: React.PropTypes.string,
+        via: React.PropTypes.string
+    },
+
+    getDefaultProps() {
+        return {
+            count: 'none'
+        };
+    },
+
+    componentDidMount() {
+        InjectInHeadUtils.inject(AppConstants.twitter.sdkUrl).then(this.loadTwitterButton);
+    },
+
+    loadTwitterButton() {
+        const { count, counturl, hashtags, size, text, url, via } = this.props;
+
+        twttr.widgets.createShareButton(url, this.refs.twitterShareButton.getDOMNode(), {
+            count,
+            counturl,
+            hashtags,
+            size,
+            text,
+            via,
+            dnt: true   // Do not track
+        });
+    },
+
+    render() {
+        return (
+            <span
+                ref="twitterShareButton"
+                className="btn btn-ascribe-social">
+            </span>
+        );
+    }
+});
+
+export default TwitterShareButton;
diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index b86bb594..17e85608 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -79,6 +79,9 @@ let constants = {
         'appId': '420813844732240',
         'sdkUrl': '//connect.facebook.net/en_US/sdk.js'
     },
+    'twitter': {
+        'sdkUrl': 'https://platform.twitter.com/widgets.js'
+    },
     'copyrightAssociations': ['ARS', 'DACS', 'Bildkunst', 'Pictoright', 'SODRAC', 'Copyright Agency/Viscopy', 'SAVA',
         'Bildrecht GmbH', 'SABAM', 'AUTVIS', 'CREAIMAGEN', 'SONECA', 'Copydan', 'EAU', 'Kuvasto', 'GCA', 'HUNGART',
         'IVARO', 'SIAE', 'JASPAR-SPDA', 'AKKA/LAA', 'LATGA-A', 'SOMAAP', 'ARTEGESTION', 'CARIER', 'BONO', 'APSAV',
diff --git a/sass/ascribe_social_share.scss b/sass/ascribe_social_share.scss
new file mode 100644
index 00000000..04703b96
--- /dev/null
+++ b/sass/ascribe_social_share.scss
@@ -0,0 +1,7 @@
+.btn-ascribe-social {
+    height: 20px;
+    width: 56px;
+    box-sizing: content-box;   /* We want to ignore padding in these calculations as we use the sdk buttons' height and width */
+    margin-left: 5px;
+    padding: 1px 0;
+}
diff --git a/sass/main.scss b/sass/main.scss
index 337dd32e..8a732e96 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -31,6 +31,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'offset_right';
 @import 'ascribe_settings';
 @import 'ascribe_slides_container';
+@import 'ascribe_social_share';
 @import 'ascribe_property';
 @import 'ascribe_form';
 @import 'ascribe_panel';