Add a reminder to share the news about OpenBazaar, with social sharing buttons.

Author: jjeffryes

css/obBase.css

@@ -4871,6 +4871,60 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
     word-wrap: break-word;
 }
 
+.socialReminder {
+    position: fixed;
+    bottom: -150px;
+    right: 0;
+    z-index: 1;
+    padding: 20px;
+    opacity: 0;
+    background: #086A9E;
+    color: #fff;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.70);
+    transition: bottom 1s, opacity 1s;
+}
+
+.socialReminder.show {
+    bottom: 0;
+    opacity: 1;
+}
+
+.socialReminder .socialTitle {
+    margin-right: 40px;
+}
+
+.socialReminder .closeBtn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 14px;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.socialReminder .socialLinkWrapper {
+    display: flex;
+    justify-content: space-between;
+}
+
+.socialReminder .socialLink {
+    background: #08324A;
+    display: block;
+    padding: 10px;
+    border-radius: 50%;
+    width: 44px;
+    height: 44px;
+    text-align: center;
+}
+
+.socialReminder .socialIcon {
+    font-size: 28px;
+}
+
+.socialReminder .socialIcon:before {
+    line-height: 44px;
+}
+
 /*========== utility classes ==========*/
 
 /* the #ov1 id is on the HTML tag. It is used to force specificity

js/languages/en-US.json

@@ -731,6 +731,16 @@
     "newConfigTitle": "New Configuration",
     "new": "New"
   },
+  "socialSharing": {
+    "title": "OpenBazaar",
+    "blurb": "OpenBazaar%20is%20a%20decentralized%2C%20P2P%20Bitcoin%20Marketplace.",
+    "shareTwitter": "Share on Twitter",
+    "shareFacebook": "Share on Facebook",
+    "sharePinterest": "Share on Pinterest",
+    "shareLinkedIn": "Share on LinkedIn",
+    "shareTumblr": "Share on Tumblr",
+    "reminder": "Help Spread the Word About OpenBazaar"
+  },
   "langChangeRestartTitle": "Restart needed for language change",
   "langChangeRestartMessage": "In order for your language change to fully take effect, you must restart the app.",
 	"restartNow": "Restart Now",

js/templates/pageNav.html

@@ -70,6 +70,28 @@
       <span class="ion-android-favorite fontSize11 marginRight2 textOpacity1"></span>
       <%= polyglot.t('nav.support') %>
     </a>
+    <hr/>
+    <% var shareURL = "https%3A%2F%2Fopenbazaar.org" %>
+    <a href="https://twitter.com/intent/tweet/?text=<%= polyglot.t('socialSharing.blurb') %>&url=<%= shareURL %>&hashtags=OpenBazaar&related=openbazaar%3AOpenBazaar,News%20about%20OpenBazaar">
+      <span class="ion-social-twitter fontSize11 marginRight2 textOpacity1"></span>
+      Twitter
+    </a>
+    <a href="https://www.facebook.com/sharer/sharer.php?u=<%= shareURL %>">
+      <span class="ion-social-facebook fontSize11 marginRight2 textOpacity1"></span>
+      Facebook
+    </a>
+    <a href=http://pinterest.com/pin/create/button/?url=<%= shareURL %>&description=<%= polyglot.t('socialSharing.blurb') %>">
+      <span class="ion-social-pinterest fontSize11 marginRight2 textOpacity1"></span>
+      Pinterest
+    </a>
+    <a href="https://www.linkedin.com/shareArticle?mini=true&url=<%= shareURL %>&title=<%= polyglot.t('socialSharing.title') %>&summary=<%= polyglot.t('socialSharing.blurb') %>&source=OpenBazaar">
+      <span class="ion-social-linkedin fontSize11 marginRight2 textOpacity1"></span>
+      LinkedIn
+    </a>
+    <a href="http://www.tumblr.com/share/link?url=<%= shareURL %>&name=OpenBazaar&description=<%= polyglot.t('socialSharing.blurb') %>">
+      <span class="ion-social-tumblr fontSize11 marginRight2 textOpacity1"></span>
+      Tumblr
+    </a>
   </div>
 
   <div class="js-serverSubmenu popMenu-navBarSubMenu popMenu-navBarSubMenu-servers"></div>
@@ -96,7 +118,7 @@
         <%= polyglot.t('nav.testMode') %>
       </div>
       <% } %>
-      
+
     </div>
   </div>
   <div class="ctrlGroup">
@@ -147,3 +169,26 @@ <h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
     <div class="fontSize11 textOpacity75 marginTop8 marginLeft7 floatLeft js-navDismisslUpdate clickable"><%= polyglot.t('softwareUpdate.dismiss') %></div>
   </div>
 </div>
+
+<div class="socialReminder js-socialReminder">
+  <% var shareURL = "https%3A%2F%2Fopenbazaar.org" %>
+  <h3 class="socialTitle"><%= polyglot.t('socialSharing.reminder') %></h3>
+  <div class="closeBtn js-socialCloseBtn"><i class="ion-close"></i></div>
+  <div class="socialLinkWrapper">
+    <a class="socialLink" href="https://twitter.com/intent/tweet/?text=<%= polyglot.t('socialSharing.blurb') %>&url=<%= shareURL %>&hashtags=OpenBazaar&related=openbazaar%3AOpenBazaar,News%20about%20OpenBazaar">
+      <span class="ion-social-twitter socialIcon"></span>
+    </a>
+    <a class="socialLink" href="https://www.facebook.com/sharer/sharer.php?u=<%= shareURL %>">
+      <span class="ion-social-facebook socialIcon"></span>
+    </a>
+    <a class="socialLink" href=http://pinterest.com/pin/create/button/?url=<%= shareURL %>&description=<%= polyglot.t('socialSharing.blurb') %>">
+      <span class="ion-social-pinterest socialIcon"></span>
+    </a>
+    <a class="socialLink" href="https://www.linkedin.com/shareArticle?mini=true&url=<%= shareURL %>&title=<%= polyglot.t('socialSharing.title') %>&summary=<%= polyglot.t('socialSharing.blurb') %>&source=OpenBazaar">
+      <span class="ion-social-linkedin socialIcon"></span>
+    </a>
+    <a class="socialLink" href="http://www.tumblr.com/share/link?url=<%= shareURL %>&name=OpenBazaar&description=<%= polyglot.t('socialSharing.blurb') %>">
+      <span class="ion-social-tumblr socialIcon"></span>
+    </a>
+  </div>
+</div>

js/views/pageNavVw.js

@@ -43,7 +43,8 @@ module.exports = baseVw.extend({
     'mouseenter .js-serverSubmenuTrigger': 'mouseenterServerSubmenuTrigger',
     'mouseleave .js-serverSubmenuTrigger': 'mouseleaveServerSubmenuTrigger',
     'mouseenter .js-serverSubmenu': 'mouseenterServerSubmenu',
-    'mouseleave .js-serverSubmenu': 'mouseleaveServerSubmenu'
+    'mouseleave .js-serverSubmenu': 'mouseleaveServerSubmenu',
+    'click .js-socialCloseBtn': 'clickSocialCloseBtn',
   },
 
   initialize: function(options){
@@ -377,6 +378,7 @@ module.exports = baseVw.extend({
       self.suggestionsVw = new SuggestionsVw({
         $input: self.$addressInput
       });
+      self.$socialReminder = self.$('.js-socialReminder');
 
       self.$('.js-mainSearchWrapper').append(self.suggestionsVw.render().el);
 
@@ -400,11 +402,22 @@ module.exports = baseVw.extend({
         self.aboutModal.render();
         self.registerChild(self.aboutModal);
       }
+
+      if (localStorage.getItem('showSocial') !== 'hide') {
+        setTimeout(function() {
+          self.$socialReminder.addClass('show');
+        }, 10000);
+      }
     });
 
     return this;
   },
 
+  clickSocialCloseBtn: function() {
+    this.$socialReminder.removeClass('show');
+    localStorage.setItem('showSocial', 'hide');
+  },
+
   showAboutModal: function(){
     this.cleanNav();
     this.aboutModal.setTab('about')