Skip to content

E
edx-platform
Commit 57d5de5d by asadiqbal Committed by Matt Drayer
Options

asadiqbal08/SOL-766: Add Facebook sharing to certificate view 

* updated the flags for social media sharing
* added facebook feed ui to share public url
* update the condition logic
* update the code as per suggestion and added pick new style for share buttons
* update the css class reference
* update the bok-choy test
* updated description and some text touch-ups
* moved the JS related to facebook into separate location
* js formatting
* Add trailing comma per chrisndodge
* Add wait to fix flaky test...maybe
parent 289ec980
Showing with 148 additions and 51 deletions
cms/djangoapps/models/settings/course_metadata.py
......@@ -73,8 +73,8 @@ class CourseMetadata(object):
filtered_list.append('facebook_url')
# Do not show social sharing url field if the feature is disabled.
if (not settings.FEATURES.get('DASHBOARD_SHARE_SETTINGS') or
not settings.FEATURES.get("DASHBOARD_SHARE_SETTINGS").get("CUSTOM_COURSE_URLS")):
if (not settings.FEATURES.get('SOCIAL_SHARING_SETTINGS') or
not settings.FEATURES.get("SOCIAL_SHARING_SETTINGS").get("CUSTOM_COURSE_URLS")):
filtered_list.append('social_sharing_url')
# Do not show teams configuration if feature is disabled.
......
cms/envs/bok_choy.env.json
......@@ -66,7 +66,7 @@
"AUTH_USE_OPENID_PROVIDER": true,
"CERTIFICATES_ENABLED": true,
"CERTIFICATES_HTML_VIEW": true,
"DASHBOARD_SHARE_SETTINGS": {
"SOCIAL_SHARING_SETTINGS": {
"CUSTOM_COURSE_URLS": true
},
"ENABLE_DISCUSSION_SERVICE": true,
......
cms/envs/common.py
......@@ -165,7 +165,7 @@ FEATURES = {
'CERTIFICATES_HTML_VIEW': False,
# Social Media Sharing on Student Dashboard
'DASHBOARD_SHARE_SETTINGS': {
'SOCIAL_SHARING_SETTINGS': {
# Note: Ensure 'CUSTOM_COURSE_URLS' has a matching value in lms/envs/common.py
'CUSTOM_COURSE_URLS': False
},
......
common/test/acceptance/pages/lms/certificate_page.py
......@@ -50,3 +50,10 @@ class CertificatePage(PageObject):
returns add to LinkedIn profile button
"""
return self.q(css='a.action-linkedin-profile')
@property
def add_to_facebook_profile_button(self):
"""
returns Facebook share button
"""
return self.q(css='a.action-share-facebook')
common/test/acceptance/tests/lms/test_certificate_web_view.py
......@@ -62,7 +62,7 @@ class CertificateWebViewTest(EventsTestMixin, UniqueCourseTest):
Given there is a course with certificate configuration
And I have passed the course and certificate is generated
When I view the certificate web view page
Then I should see the accomplishment banner
Then I should see the accomplishment banner. banner should have linked-in and facebook share buttons
And When I click on `Add to Profile` button `edx.certificate.shared` event should be emitted
"""
self.cert_fixture.install()
......@@ -70,6 +70,7 @@ class CertificateWebViewTest(EventsTestMixin, UniqueCourseTest):
self.certificate_page.visit()
self.assertTrue(self.certificate_page.accomplishment_banner.visible)
self.assertTrue(self.certificate_page.add_to_linkedin_profile_button.visible)
self.assertTrue(self.certificate_page.add_to_facebook_profile_button.visible)
self.certificate_page.add_to_linkedin_profile_button.click()
actual_events = self.wait_for_events(
event_filter={'event_type': 'edx.certificate.shared'},
......
common/test/acceptance/tests/studio/test_studio_settings_details.py
......@@ -120,7 +120,7 @@ class SettingsMilestonesTest(StudioCourseTest):
# Refresh the page again to confirm the prerequisite course selection is properly reflected
self.settings_detail.refresh_page()
self.settings_detail.wait_for_prerequisite_course_options()
dropdown_status = is_option_value_selected(
browser_query=self.settings_detail.pre_requisite_course_options,
value=pre_requisite_course_id
......
lms/djangoapps/certificates/views.py
......@@ -41,6 +41,7 @@ from opaque_keys.edx.locations import SlashSeparatedCourseKey
from student.models import LinkedInAddToProfileConfiguration
from util.json_request import JsonResponse, JsonResponseBadRequest
from util.bad_request_rate_limiter import BadRequestRateLimiter
from courseware.courses import course_image_url
logger = logging.getLogger(__name__)
......@@ -301,6 +302,8 @@ def _update_certificate_context(context, course, user, user_certificate):
context['accomplishment_copy_username'] = user.username
context['accomplishment_copy_course_org'] = course.org
context['accomplishment_copy_course_name'] = course.display_name
context['course_image_url'] = course_image_url(course)
context['share_settings'] = settings.FEATURES.get('SOCIAL_SHARING_SETTINGS', {})
try:
badge = BadgeAssertion.objects.get(user=user, course_id=course.location.course_key)
except BadgeAssertion.DoesNotExist:
......
lms/envs/bok_choy.env.json
......@@ -67,11 +67,13 @@
"CERTIFICATES_ENABLED": true,
"CERTIFICATES_HTML_VIEW": true,
"MULTIPLE_ENROLLMENT_ROLES": true,
"DASHBOARD_SHARE_SETTINGS": {
"SOCIAL_SHARING_SETTINGS": {
"CUSTOM_COURSE_URLS": true,
"FACEBOOK_SHARING": true,
"TWITTER_SHARING": true,
"TWITTER_SHARING_TEXT": "Testing feature:"
"DASHBOARD_FACEBOOK": true,
"CERTIFICATE_FACEBOOK": true,
"CERTIFICATE_FACEBOOK_TEXT": "Testing facebook feature:",
"DASHBOARD_TWITTER": true,
"DASHBOARD_TWITTER_TEXT": "Testing feature:"
},
"ENABLE_PAYMENT_FAKE": true,
"ENABLE_VERIFIED_CERTIFICATES": true,
......
lms/envs/common.py
......@@ -380,12 +380,14 @@ FEATURES = {
'CERTIFICATES_HTML_VIEW': False,
# Social Media Sharing on Student Dashboard
'DASHBOARD_SHARE_SETTINGS': {
'SOCIAL_SHARING_SETTINGS': {
# Note: Ensure 'CUSTOM_COURSE_URLS' has a matching value in cms/envs/common.py
'CUSTOM_COURSE_URLS': False,
'FACEBOOK_SHARING': False,
'TWITTER_SHARING': False,
'TWITTER_SHARING_TEXT': None
'DASHBOARD_FACEBOOK': False,
'CERTIFICATE_FACEBOOK': False,
'CERTIFICATE_FACEBOOK_TEXT': None,
'DASHBOARD_TWITTER': False,
'DASHBOARD_TWITTER_TEXT': None
},
# Course discovery feature
......@@ -1347,6 +1349,7 @@ certificates_web_view_js = [
'js/vendor/jquery.min.js',
'js/vendor/jquery.cookie.js',
'js/src/logger.js',
'js/utils/facebook.js',
]
credit_web_view_js = [
......
lms/static/certificates/sass/_components.scss
......@@ -118,6 +118,15 @@
.icon {
@include margin-right(spacing-horizontal(x-small));
font-size: font-size(mid-large);
}
// CASE: icon display only
&.icon-only {
.action-label {
@extend %a11y-hide;
}
}
// CASE mozilla open badges logo
......
lms/static/certificates/sass/_layouts.scss
......@@ -81,15 +81,29 @@
.message-actions .action {
display: block;
width: 100%;
margin: 0 auto spacing-vertical(small) auto;
&:last-child {
margin-bottom: 0;
}
// CASE: icon display only
&.icon-only {
@include susy-breakpoint($bp-medium, $susy) {
padding: spacing-vertical(x-small) spacing-horizontal(base);
.icon {
@include margin-right(0);
}
}
}
@include susy-breakpoint($bp-medium, $susy) {
display: inline-block;
vertical-align: middle;
width: auto;
margin-bottom: 0;
margin-right: spacing-horizontal(mid-small);
......
lms/static/js/utils/facebook.js 0 → 100644
var FaceBook = (function() {
var _args = {};
return {
init : function (Args) {
_args = Args;
window.fbAsyncInit = function() {
FB.init({
appId : _args.facebook_app_id,
xfbml : true,
version : 'v2.3'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
},
share: function (feed_data) {
FB.ui({
method: 'feed',
name: feed_data['share_text'],
link: feed_data['share_link'],
picture: feed_data['picture_link'],
description: feed_data['description']
});
}
};
}());
lms/templates/certificates/_accomplishment-banner.html
<%! from django.utils.translation import ugettext as _ %>
<%!
import urllib
from django.utils.translation import ugettext as _
from django.core.urlresolvers import reverse
%>
<%namespace name='static' file='../static_content.html'/>
<%
accomplishment_course_title = accomplishment_copy_course_name
if certificate_data and certificate_data.get('course_title', ''):
accomplishment_course_title = certificate_data.get('course_title', '')
%>
<%block name="js_extra">
<%static:js group='certificates_wv'/>
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRFToken': $.cookie('csrftoken')
},
dataType: 'json'
$(document).ready(function() {
FaceBook.init({"facebook_app_id": '${settings.FACEBOOK_APP_ID}'});
$.ajaxSetup({
headers: {
'X-CSRFToken': $.cookie('csrftoken')
},
dataType: 'json'
});
$(".action-linkedin-profile").click(function() {
var data = {
user_id: '${accomplishment_user_id}',
course_id: $(this).data('course-id'),
enrollment_mode: $(this).data('certificate-mode'),
certificate_id: '${certificate_id_number}',
certificate_url: window.location.href,
social_network: 'LinkedIn'
};
Logger.log('edx.certificate.shared', data);
});
});
$(".action-linkedin-profile").click(function() {
var data = {
user_id: '${accomplishment_user_id}',
course_id: $(this).data('course-id'),
enrollment_mode: $(this).data('certificate-mode'),
certificate_id: '${certificate_id_number}',
certificate_url: window.location.href,
social_network: 'LinkedIn'
};
Logger.log('edx.certificate.shared', data);
});
});
</script>
</%block>
<div id="fb-root"></div>
<div class="wrapper-banner wrapper-banner-user">
<section class="banner banner-user">
<div class="message message-block message-notice">
......@@ -32,7 +42,34 @@
<div class="wrapper-copy-and-actions">
<p class="message-copy copy copy-base emphasized">${accomplishment_banner_congrats}</p>
<div class="message-actions">
<h3 class="sr-only">${_("Take this with you:")}</h3>
<h3 class="sr-only">${_("Print or share your certificate:")}</h3>
% if share_settings:
<%
facebook_share_text = _("I completed the {course_title} course on {platform_name}.").format(course_title=accomplishment_course_title, platform_name=platform_name)
if share_settings.get('CERTIFICATE_FACEBOOK_TEXT', None):
facebook_share_text = share_settings.get('CERTIFICATE_FACEBOOK_TEXT')
%>
% if share_settings.get('CERTIFICATE_FACEBOOK', False):
<a href="javascript:void(0)"
onclick="FaceBook.share({
share_text: '${facebook_share_text}',
share_link: '${request.build_absolute_uri(reverse('cert_html_view', kwargs=dict(user_id=str(user.id),course_id=unicode(course_id))))}',
picture_link: '${request.build_absolute_uri(course_image_url)}',
description: '${_('Click the link to see my certificate.')}'
});"
class="action action-share-facebook btn btn-overlay btn-small icon-only" id="action-share-facebook">
<i class="icon fa fa-facebook-official" aria-hidden="true"></i>
<span class="action-label">${_("Post on Facebook")}</span>
</a>
%endif
%endif
%if linked_in_url:
<a class="action action-linkedin-profile btn btn-overlay btn-small icon-only" id="action-share-linkedin" target="_blank" href="${linked_in_url}" title="${_('Add to LinkedIn Profile')}" data-course-id="${course_id}" data-certificate-mode="${course_mode}">
<i class="icon fa fa-linkedin" aria-hidden="true"></i>
<span class="action-label">${_("Add to LinkedIn Profile")}</span>
</a>
%endif
%if badge:
<button class="action action-share-mozillaopenbadges btn btn-overlay btn-small">
......@@ -45,18 +82,8 @@
<i class="icon fa fa-print" aria-hidden="true"></i>
${_("Print Certificate")}
</button>
%if linked_in_url:
<a class="action-linkedin-profile" target="_blank" href="${linked_in_url}"
title="${_('Add to LinkedIn Profile')}"
data-course-id="${course_id}"
data-certificate-mode="${course_mode}">
<img class="action-linkedin-profile-img"
src="${static.url('images/linkedin_add_to_profile.png')}"
alt="${_('Add to LinkedIn Profile')}" />
</a>
%endif
</div>
</div>
</div>
</section>
</div>
\ No newline at end of file
</div>
lms/templates/dashboard.html
......@@ -72,7 +72,7 @@ from django.core.urlresolvers import reverse
% if len(course_enrollment_pairs) > 0:
<ul class="listing-courses">
<% share_settings = settings.FEATURES.get('DASHBOARD_SHARE_SETTINGS', {}) %>
<% share_settings = settings.FEATURES.get('SOCIAL_SHARING_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) %>
......
lms/templates/dashboard/_dashboard_course_listing.html
......@@ -128,7 +128,7 @@ from student.helpers import (
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_url and share_settings.get('FACEBOOK_SHARING', False):
% if share_url and share_settings.get('DASHBOARD_FACEBOOK', False):
<% facebook_url = 'https://www.facebook.com/sharer/sharer.php?u=' + share_url %>
<a
data-tooltip="${_('Share on Facebook')}"
......@@ -143,9 +143,9 @@ from student.helpers import (
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
% endif
% if share_url and share_settings.get('TWITTER_SHARING', False):
% if share_url and share_settings.get('DASHBOARD_TWITTER', False):
<% share_text_default = _("I'm learning on {platform_name}:").format(platform_name=settings.PLATFORM_NAME) %>
<% share_text = urllib.quote_plus(share_settings.get('TWITTER_SHARING_TEXT', share_text_default)) %>
<% share_text = urllib.quote_plus(share_settings.get('DASHBOARD_TWITTER_TEXT', share_text_default)) %>
<% twitter_url = 'https://twitter.com/intent/tweet?text=' + share_text + '%20' + share_url %>
<a
data-tooltip="${_('Share on Twitter')}"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment