make share package use React; abstract Social sharing to take a title and url; update dependencies across packages; rename package; fix styles a little

.meteor/packages

@@ -20,6 +20,7 @@ nova:search
 nova:notifications
 nova:getting-started
 nova:categories
+nova:share
 
 # nova:voting
 # nova:migrations

.meteor/versions

@@ -49,6 +49,8 @@ ecmascript-runtime@0.2.7-beta.11
 ejson@1.0.8-beta.11
 email@1.0.9-beta.11
 facebook@1.2.3-beta.11
+fortawesome:fontawesome@4.5.0
+fourseven:scss@0.9.6
 geojson-utils@1.0.5-beta.11
 hot-code-push@1.0.1-beta.11
 html-tools@1.0.6-beta.11
@@ -103,6 +105,7 @@ nova:notifications@0.25.7
 nova:posts@0.25.7
 nova:search@0.25.7
 nova:settings@0.25.7
+nova:share@0.25.7
 nova:users@0.25.7
 npm-bcrypt@0.7.8_2
 npm-mongo@1.4.40-beta.11

packages/_telescope-share/lib/client/post_share.html

@@ -1,13 +0,0 @@
-<template name="post_share">
-  <div class="post-share {{moduleClass}}">
-    <a href="#" class="share-link action" title="{{_ 'share'}}">
-      {{{icon "share"}}}
-    </a>
-    <div class="share-options hidden">
-      <a class="share-option-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{this.getShareableLink}}" target="_blank">{{{icon "facebook"}}}</a>
-      <a class="share-option-twitter" href="//twitter.com/intent/tweet?text={{encodedTitle}}&url={{this.getShareableLink}}&{{viaTwitter}}" target="_blank">{{{icon "twitter"}}}</a>
-      <a class="share-option-linkedin" href="//www.linkedin.com/shareArticle?mini=true&url={{this.getShareableLink}}&amp;summary={{encodedTitle}}" target="_blank">{{{icon "linkedin"}}}</a>
-      <a class="share-option-google" href="https://plus.google.com/share?url={{this.getShareableLink}}" target="_blank">{{{icon "googleplus"}}}</a>
-    </div>
-  </div>
-</template>

packages/_telescope-share/lib/client/post_share.js

@@ -1,25 +0,0 @@
-Meteor.startup(function () {
-  Template.post_share.helpers({
-    encodedTitle: function () {
-      return encodeURIComponent(this.title);
-    },
-    sourceLink: function () {
-      return !!this.url ? this.url : Posts.getPageUrl(this);
-    },
-    viaTwitter: function () {
-      return !!Settings.get('twitterAccount') ? 'via='+Settings.get('twitterAccount') : '';
-    }
-  });
-
-  Template.post_share.events({
-    'click .share-link': function(e){
-      var $this = $(e.target).parents('.post-share').find('.share-link');
-      var $share = $this.parents('.post-share').find('.share-options');
-      e.preventDefault();
-      $('.share-link').not($this).removeClass("active");
-      $(".share-options").not($share).addClass("hidden");
-      $this.toggleClass("active");
-      $share.toggleClass("hidden");
-    }
-  });
-});

packages/_telescope-share/lib/share.js

@@ -1,4 +0,0 @@
-Telescope.modules.add("postComponents", {
-  template: 'post_share', 
-  order: 25
-});

packages/base-components/lib/posts/Post.jsx

@@ -1,6 +1,6 @@
 const Post = (props) => {
   
-  ({ListContainer, CommentList, CommentNew, PostCategories} = Telescope.components);
+  ({ListContainer, CommentList, CommentNew, PostCategories, SocialShare} = Telescope.components);
 
   const post = props.document;
   const htmlBody = {__html: post.htmlBody};
@@ -9,6 +9,7 @@ const Post = (props) => {
     <div className="post">
 
       <h3>{post.title}</h3>
+      <SocialShare url={ Posts.getLink(post) } title={ post.title }/>
       <p>{post.commentCount} comments</p>
       <p>{moment(post.postedAt).fromNow()}</p>
       {post.categoriesArray ? <PostCategories categories={post.categoriesArray} /> : ""}

packages/base-components/package.js

@@ -12,11 +12,12 @@ Package.onUse(function (api) {
   api.use([
 
     // Nova packages
-    
+
     'nova:core@0.25.7',
     'nova:posts@0.25.7',
     'nova:users@0.25.7',
     'nova:comments@0.25.7',
+    'nova:share@0.25.7',
 
     // third-party packages
 

packages/nova-lib/package.js

@@ -53,7 +53,7 @@ Package.onUse(function (api) {
     // 'sacha:spin@2.3.1',
     // 'aslagle:reactive-table@0.8.24',
     // 'utilities:avatar@0.9.2',
-    // 'fortawesome:fontawesome@4.5.0',
+    'fortawesome:fontawesome@4.5.0',
     // 'ccan:cssreset@1.0.0',
     'djedi:sanitize-html@1.11.2',
     'jparker:gravatar@0.4.1',

packages/nova-share/lib/client/social_share.scss

@@ -11,15 +11,11 @@ $small-break: 600px;
   }
 }
 
-.post-share{
+.social-share{
   position: relative;
   color: #b3c1c6;
   order: 8;
-  // temporary
+  width: 40px;
-  display: none;
-  @include small{
-    display: none;
-  } 
   .icon-share{
     &:before{
       font-size: 24px;
@@ -35,20 +31,21 @@ $small-break: 600px;
   z-index: 10000;
   background: rgba(0,0,0,0.4);
   border-radius: 3px;
-  width: 185px;
+  width: auto;
   padding: 10px;
   line-height: 1;
   @include small {
-    left: 50% !important;
+    left: -50% !important;
     top: 40px !important;
-    margin-left: -92px;
+    
   }
   @include medium-large {
-    left: -200px;
+    left: 40px;
-    top: -8px;
+    top: 0;
   }
   .icon {
     color: white;
+    width: 100%;
   }
   a {
     display: inline-block;
@@ -88,8 +85,9 @@ $small-break: 600px;
       margin-left: -11px;
     }
     @include medium-large {
-      border-left-color: rgba(0,0,0,0.4);
+      border-right-color: rgba(0,0,0,0.4);
-      top: 20px;
+      top: 5px;
+      left: -20px;
       margin-top: -3px;
     }
   }

packages/nova-share/lib/common/social_share.jsx

@@ -0,0 +1,43 @@
+const SocialShare = React.createClass({
+
+  propTypes: {
+    url: React.PropTypes.string.isRequired,
+    title: React.PropTypes.string.isRequired,
+  },
+
+  getInitialState: function() {
+    return {showShare: false};
+  },
+
+  viaTwitter() {
+    return !!Settings.get('twitterAccount') ? 'via='+Settings.get('twitterAccount') : '';
+  },
+
+  toggleView() {
+    this.setState({
+      showShare: !this.state.showShare
+    });
+    return;
+  },
+
+  insertIcon(name) {
+    return {__html: Telescope.utils.getIcon(name)};
+  },
+
+  render() {
+    let shareDisplay = this.state.showShare ? 'active' : 'hidden';
+    return (
+      <div className="social-share">
+        <a className="share-link action" title="share" onClick={ this.toggleView } dangerouslySetInnerHTML={ this.insertIcon('share')}/>
+        <div className={ `share-options ${shareDisplay}` }>
+          <a className="share-option-facebook" href={ `https://www.facebook.com/sharer/sharer.php?u=${ encodeURIComponent(FlowRouter.url(this.props.url)) }`} target="_blank" dangerouslySetInnerHTML={ this.insertIcon('facebook')} />
+          <a className="share-option-twitter" href={ `//twitter.com/intent/tweet?text=${ encodeURIComponent(this.props.title) }%20-%20${ encodeURIComponent(FlowRouter.url(this.props.url)) }` } target="_blank" dangerouslySetInnerHTML={ this.insertIcon('twitter')}/>
+          <a className="share-option-linkedin" href={ `//www.linkedin.com/shareArticle?mini=true&url=${ encodeURIComponent(FlowRouter.url(this.props.url)) }&summary=${ encodeURIComponent(this.props.title) }` } target="_blank" dangerouslySetInnerHTML={ this.insertIcon('linkedin')}/>
+          <a className="share-option-google" href={ `https://plus.google.com/share?url=${ encodeURIComponent(FlowRouter.url(this.props.url)) }` } target="_blank" dangerouslySetInnerHTML={ this.insertIcon('googleplus')}/>
+        </div>
+      </div>
+    )
+  }
+});
+
+module.exports = SocialShare;

packages/nova-share/lib/social_share.js

@@ -0,0 +1 @@
+Telescope.registerComponent("SocialShare", require('./common/social_share.jsx'));

packages/nova-share/package.js

@@ -9,17 +9,16 @@ Package.onUse(function (api) {
 
   api.versionsFrom("METEOR@1.0");
 
-  api.use(['nova:core@0.25.7']);
+  api.use([
+    'nova:core@0.25.7',
+    'fourseven:scss'
+  ]);
 
   api.addFiles([
-    'lib/share.js'
+    'lib/social_share.js'
   ], ['client', 'server']);
 
   api.addFiles([
-    'lib/client/post_share.html',
+    'lib/client/social_share.scss'
-    'lib/client/post_share.js',
+  ], ['client'], {isImport:true});
-    'lib/client/post_share.scss'
-  ], ['client']);
-
-  // api.export();
 });