Add share buttons to blog pages (#3383)

* Add share buttons to blog pages * update button right margin * fixed typo and styling updates * conditionally toggle sticky share buttons * conditionally toggle sticky share buttons
MozillaFoundation · Jul 16, 2019 · 2a1b25b · 2a1b25b
1 parent 6da6ff2
commit 2a1b25b
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 16 deletions.
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blog_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blog_page.html
@@ -2,13 +2,20 @@
 
 {% load wagtailcore_tags mini_site_tags %}
 
+{% block bodyID %}blog{% endblock %}
 {% block subcontent %}
-  <div class="py-4 py-md-5 col-lg-8 offset-lg-2">
+  <div class="offset-lg-1 col-lg-1 py-4 py-md-5 text-center">
+    <div class="blog-sticky-side hidden-md-down"">
+      <div class="share-button-group-wrapper" data-version="mini" data-layout="stacked" data-share-text="{{page.title}} by @mozilla" data-link="{{ request.scheme }}://{{ request.get_host }}{{ request.get_full_path }}"></div>
+    </div>
+  </div>
+  <div class="py-4 py-md-5 col-lg-8">
     <div class="cms">
       <h1 class="h1-heading">{{ page.title }}</h1>
       <p class="h6-heading mb-5">By {{ page.author }} | {% if page.first_published_at %}{{ page.first_published_at|date:"F j, Y" }}{% else %}not published yet{% endif %}</p>
       <div class="blog-body">
         {{ page.body }}
+        <div class="share-button-group-wrapper mt-5" data-share-text="{{page.title}} by @mozilla" data-link="{{ request.scheme }}://{{ request.get_host }}{{ request.get_full_path }}"></div>
       </div>
     </div>
     {% include "./fragments/post_tags.html" %}

diff --git a/source/js/components/share-button-group/share-button-group.jsx b/source/js/components/share-button-group/share-button-group.jsx
@@ -22,7 +22,7 @@ export default class ShareButtonGroup extends React.Component {
       this.props.version === `mini` ? (
         <span class="sr-only">Share on Facebook</span>
       ) : (
-        `Faceook`
+        `Facebook`
       );
 
     let link = this.props.link || ``;
@@ -31,7 +31,7 @@ export default class ShareButtonGroup extends React.Component {
       <a
         class="btn btn-secondary btn-share facebook-share"
         href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-          `https://${link}`
+          link
         )}`}
       >
         {label}
@@ -40,7 +40,10 @@ export default class ShareButtonGroup extends React.Component {
   }
 
   renderTwitterButton() {
-    let shareText = this.props.shareText || ``;
+    let shareText = this.props.shareText
+      ? encodeURIComponent(this.props.shareText)
+      : ``;
+    let link = this.props.link ? ` ${encodeURIComponent(this.props.link)}` : ``;
     let label =
       this.props.version === `mini` ? (
         <span class="sr-only">Share on Twitter</span>
@@ -51,17 +54,18 @@ export default class ShareButtonGroup extends React.Component {
     return (
       <a
         class="btn btn-secondary btn-share twitter-share"
-        href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
-          shareText
-        )}`}
+        href={`https://twitter.com/intent/tweet?text=${shareText}${link}`}
       >
         {label}
       </a>
     );
   }
 
   renderEmailButton() {
-    let shareText = this.props.shareText || ``;
+    let shareText = this.props.shareText
+      ? encodeURIComponent(this.props.shareText)
+      : ``;
+    let link = this.props.link ? ` ${encodeURIComponent(this.props.link)}` : ``;
     let label =
       this.props.version === `mini` ? (
         <span class="sr-only">Share by email</span>
@@ -72,7 +76,7 @@ export default class ShareButtonGroup extends React.Component {
     return (
       <a
         class="btn btn-secondary btn-share email-share"
-        href={`mailto:?&body=${encodeURIComponent(shareText)}`}
+        href={`mailto:?&body=${shareText}${link}`}
       >
         {label}
       </a>

diff --git a/source/js/components/share-button-group/share-button-group.scss b/source/js/components/share-button-group/share-button-group.scss
@@ -6,10 +6,8 @@
       margin-bottom: 16px;
     }
 
-    .btn {
-      &:last-child {
-        margin-right: 0;
-      }
+    .btn:last-child {
+      margin-right: 0;
     }
 
     .subgroup {
@@ -18,8 +16,20 @@
   }
 
   display: flex;
+  flex-wrap: wrap;
 
   &.rectangle {
+    .subgroup {
+      display: flex;
+      flex: 1;
+
+      &:last-child {
+        .btn:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
     @media (max-width: $bp-md) {
       @include stacked-rectangle();
     }
@@ -29,7 +39,8 @@
     }
 
     .btn {
-      width: 130px;
+      min-width: 130px;
+      flex: 1;
 
       &::before {
         position: relative;
@@ -44,8 +55,12 @@
     &.stacked {
       flex-direction: column;
 
-      .btn:not(:last-child) {
-        margin-bottom: 16px;
+      .btn {
+        margin-right: 0;
+
+        &:not(:last-child) {
+          margin-bottom: 16px;
+        }
       }
     }
 

diff --git a/source/js/main.js b/source/js/main.js
@@ -155,6 +155,34 @@ let main = {
 
     window.addEventListener(`scroll`, onScroll);
 
+    // Toggle sticky share buttons on blog page
+
+    let blogPageStickyButtons = document.querySelector(
+      `#view-blog .blog-sticky-side .share-button-group`
+    );
+    let blogPageFullButtons = document.querySelector(
+      `#view-blog .blog-body .share-button-group`
+    );
+
+    if (blogPageStickyButtons && blogPageFullButtons) {
+      const isInViewport = element => {
+        let box = element.getBoundingClientRect();
+
+        return box.top <= window.innerHeight && box.top + box.height >= 0;
+      };
+
+      const toggleStickyButtons = () => {
+        if (isInViewport(blogPageFullButtons)) {
+          blogPageStickyButtons.classList.add(`d-none`);
+        } else {
+          blogPageStickyButtons.classList.remove(`d-none`);
+        }
+      };
+
+      window.addEventListener(`scroll`, toggleStickyButtons);
+      toggleStickyButtons();
+    }
+
     // Call once to get scroll position on initial page load.
     onScroll();
 

diff --git a/source/sass/views/blog.scss b/source/sass/views/blog.scss
@@ -1,3 +1,10 @@
 .blog-ih-cta-wrapper {
   margin-top: 95px;
 }
+
+.blog-sticky-side {
+  position: sticky;
+  top: 140px;
+  display: flex;
+  justify-content: flex-end;
+}