Add social sharing feature (Twitter, Facebook) to student dashboard

common/lib/xmodule/xmodule/modulestore/tests/sample_courses.py

@@ -51,7 +51,7 @@ TOY_BLOCK_INFO_TREE = [
                 }, [
                     BlockInfo(
                         "secret:toylab", "html", {
-                            "data": "<b>Lab 2A: Superposition Experiment</b>\n\n<<<<<<< Updated upstream\n<p>Isn't the toy course great?</p>\n\n<p>Let's add some markup that uses non-ascii characters.\nFor example, we should be able to write words like encyclop&aelig;dia, or foreign words like fran&ccedil;ais.\nLooking beyond latin-1, we should handle math symbols:  &pi;r&sup2 &le; &#8734.\nAnd it shouldn't matter if we use entities or numeric codes &mdash; &Omega; &ne; &pi; &equiv; &#937; &#8800; &#960;.\n</p>\n=======\n<p>Isn't the toy course great? — &le;</p>\n>>>>>>> Stashed changes\n",
+                            "data": "<b>Lab 2A: Superposition Experiment</b>\n\n\n<p>Isn't the toy course great?</p>\n\n<p>Let's add some markup that uses non-ascii characters.\n'For example, we should be able to write words like encyclop&aelig;dia, or foreign words like fran&ccedil;ais.\nLooking beyond latin-1, we should handle math symbols:  &pi;r&sup2 &le; &#8734.\nAnd it shouldn't matter if we use entities or numeric codes &mdash; &Omega; &ne; &pi; &equiv; &#937; &#8800; &#960;.\n</p>\n\n",  # pylint: disable=line-too-long
                             "xml_attributes": {"filename": ["html/secret/toylab.xml", "html/secret/toylab.xml"]},
                             "display_name": "Toy lab"
                         }, []

lms/envs/common.py

@@ -364,6 +364,13 @@ FEATURES = {
 
     # Certificates Web/HTML Views
     'CERTIFICATES_HTML_VIEW': False,
+
+    # Social Media Sharing on Student Dashboard
+    'DASHBOARD_SHARE_SETTINGS': {
+        'FACEBOOK_SHARING': False,
+        'TWITTER_SHARING': False,
+        'TWITTER_SHARING_TEXT': None
+    },
 }
 
 # Ignore static asset files on import which match this pattern

lms/static/sass/multicourse/_dashboard.scss

 // lms - views - user/student dashboard
 // ====================
 
-// Table of Contents 
+// Table of Contents
 // * +Dashboard - Sidebar
 // * +Dashboard - Course Listing
 // * +Dashboard - Course Item
@@ -10,7 +10,7 @@
 
 
 // +Dashboard - Sidebar
-// ==================== 
+// ====================
 .dashboard {
   @include clearfix();
   padding: ($baseline*2) 0 0 0;
@@ -214,7 +214,7 @@
 }
 
 // +Dashboard - Course Listing
-// ==================== 
+// ====================
 .dashboard {
   .my-courses {
     @include float(left);
@@ -289,7 +289,7 @@
 }
 
 // +Dashboard - Course
-// ==================== 
+// ====================
 .dashboard .my-courses {
 
   // UI: individual course item
@@ -409,7 +409,6 @@
       .course-actions {
 
         // UI: course item actions
-
         .action {
           @include box-sizing(border-box);
           @include margin-right($baseline/2);
@@ -419,7 +418,8 @@
           border-radius: 3px;
           padding: 12px;
           border: 1px solid $white;
-          
+          text-align: center;
+
           &:hover, &:focus {
             color: $gray-d3;
             border: 1px solid $gray-l4;
@@ -447,7 +447,6 @@
           position: relative;
           @include float(right);
 
-
           .actions-dropdown {
             @extend %ui-no-list;
             @extend %ui-depth1;
@@ -968,7 +967,7 @@
           }
         }
 
-        // TYPE: pre-requisites 
+        // TYPE: pre-requisites
         .prerequisites {
           @include clearfix;
 
@@ -1069,7 +1068,7 @@
 }
 
 // +Misc - Uncategorized
-// ==================== 
+// ====================
 .dashboard .my-courses {
 
   // status - language
@@ -1256,7 +1255,7 @@
     border:0;
     color:white;
     box-shadow:none;
-    
+
     &.archived {
       @include button(simple, $button-archive-color);
       font: normal 15px/1.6rem $sans-serif;
@@ -1279,8 +1278,8 @@
 }
 
 // +Dashboard - Banner
-// ==================== 
-.dashboard .my-courses { 
+// ====================
+.dashboard .my-courses {
   .dashboard-banner {
 
     &:empty {

lms/templates/dashboard.html

@@ -81,6 +81,7 @@
 
     % if len(course_enrollment_pairs) > 0:
       <ul class="listing-courses">
+      <% share_settings = settings.FEATURES.get('DASHBOARD_SHARE_SETTINGS', {}) %>
       % for dashboard_index, (course, enrollment) in enumerate(course_enrollment_pairs):
         <% show_courseware_link = (course.id in show_courseware_links_for) %>
         <% cert_status = cert_statuses.get(course.id) %>
@@ -91,7 +92,7 @@
         <% is_course_blocked = (course.id in block_courses) %>
         <% course_verification_status = verification_status_by_course.get(course.id, {}) %>
         <% course_requirements = courses_requirements_not_met.get(course.id) %>
-        <%include file='dashboard/_dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info, show_refund_option = show_refund_option, is_paid_course = is_paid_course, is_course_blocked = is_course_blocked, verification_status=course_verification_status, course_requirements=course_requirements, dashboard_index=dashboard_index" />
+        <%include file='dashboard/_dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info, show_refund_option = show_refund_option, is_paid_course = is_paid_course, is_course_blocked = is_course_blocked, verification_status=course_verification_status, course_requirements=course_requirements, dashboard_index=dashboard_index, share_settings=share_settings" />
       % endfor
       </ul>
     % else:

lms/templates/dashboard/_dashboard_course_listing.html

-<%page args="course, enrollment, show_courseware_link, cert_status, show_email_settings, course_mode_info, show_refund_option, is_paid_course, is_course_blocked, verification_status, course_requirements, dashboard_index" />
+<%page args="course, enrollment, show_courseware_link, cert_status, show_email_settings, course_mode_info, show_refund_option, is_paid_course, is_course_blocked, verification_status, course_requirements, dashboard_index, share_settings" />
 
 <%!
+import urllib
+
 from django.utils.translation import ugettext as _
 from django.utils.translation import ungettext
 from django.core.urlresolvers import reverse
@@ -113,6 +115,48 @@ from student.helpers import (
                   <a class="enter-course-blocked">${_('View Course')}<span class="sr">&nbsp;${course.display_name_with_default}</span></a>
                 % endif
               % endif
+
+              % if share_settings:
+                <% share_url = urllib.quote_plus(request.build_absolute_uri(reverse('about_course', args=[unicode(course.id)]))) %>
+                <% share_window_name = 'shareWindow' %>
+                <% share_window_config = 'toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=640, height=480' %>
+                % if share_settings.get('FACEBOOK_SHARING', False):
+                  <% facebook_url = 'https://www.facebook.com/sharer/sharer.php?u=' + share_url %>
+                    <a
+                      data-tooltip="${_('Share on Facebook')}"
+                      class="action action-facebook"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                      href="${facebook_url}"
+                      target="_blank"
+                      title="${_('Share on Facebook')}"
+                      onclick="window.open('${facebook_url}', '${share_window_name}', '${share_window_config}'); return false;">
+                      <span class="sr">${_('Facebook')}</span>
+                      <i class="fa fa-facebook" aria-hidden="true"></i>
+                    </a>
+                % endif
+                % if share_settings.get('TWITTER_SHARING', False):
+                  <% share_text_default = _("I'm learning on {platform_name}:").format(platform_name=settings.PLATFORM_NAME) %>
+                  <% share_text = share_settings.get('TWITTER_SHARING_TEXT', share_text_default) %>
+                  <% twitter_url = 'https://twitter.com/intent/tweet?text=' + share_text + '%20' + share_url %>
+                    <a
+                      data-tooltip="${_('Share on Twitter')}"
+                      class="action action-twitter"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                      href="${twitter_url}"
+                      target="_blank"
+                      title="${_('Share on Twitter')}"
+                      href="${twitter_url}"
+                      target="_blank"
+                      title="Tweet"
+                      onclick="window.open('${twitter_url}', '${share_window_name}', '${share_window_config}'); return false;">
+                      <span class="sr">${_('Twitter')}</span>
+                      <i class="fa fa-twitter" aria-hidden="true"></i>
+                    </a>
+                % endif
+              % endif
+
               <div class="wrapper-action-more">
                 <a href="#actions-dropdown-${dashboard_index}" class="action action-more" id="actions-dropdown-link-${dashboard_index}" aria-haspopup="true" aria-expanded="false" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}">
                   <span class="sr">${_('Course options dropdown')}</span>