From 57d5de5d140f92c045bc0d4629142f8e1e9224de Mon Sep 17 00:00:00 2001 From: asadiqbal Date: Tue, 23 Jun 2015 13:24:38 +0500 Subject: [PATCH] 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 --- .../models/settings/course_metadata.py | 4 +- cms/envs/bok_choy.env.json | 2 +- cms/envs/common.py | 2 +- .../acceptance/pages/lms/certificate_page.py | 7 ++ .../tests/lms/test_certificate_web_view.py | 3 +- .../studio/test_studio_settings_details.py | 2 +- lms/djangoapps/certificates/views.py | 3 + lms/envs/bok_choy.env.json | 10 +- lms/envs/common.py | 11 ++- lms/static/certificates/sass/_components.scss | 9 ++ lms/static/certificates/sass/_layouts.scss | 14 +++ lms/static/js/utils/facebook.js | 32 +++++++ .../certificates/_accomplishment-banner.html | 91 ++++++++++++------- lms/templates/dashboard.html | 2 +- .../dashboard/_dashboard_course_listing.html | 6 +- 15 files changed, 148 insertions(+), 50 deletions(-) create mode 100644 lms/static/js/utils/facebook.js diff --git a/cms/djangoapps/models/settings/course_metadata.py b/cms/djangoapps/models/settings/course_metadata.py index b381ba0f15..54ccf989ac 100644 --- a/cms/djangoapps/models/settings/course_metadata.py +++ b/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. diff --git a/cms/envs/bok_choy.env.json b/cms/envs/bok_choy.env.json index 88624fb85f..3d73b109cb 100644 --- a/cms/envs/bok_choy.env.json +++ b/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, diff --git a/cms/envs/common.py b/cms/envs/common.py index b58b326f40..d9b7725859 100644 --- a/cms/envs/common.py +++ b/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 }, diff --git a/common/test/acceptance/pages/lms/certificate_page.py b/common/test/acceptance/pages/lms/certificate_page.py index 89c1ac0723..63319d6a39 100644 --- a/common/test/acceptance/pages/lms/certificate_page.py +++ b/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') diff --git a/common/test/acceptance/tests/lms/test_certificate_web_view.py b/common/test/acceptance/tests/lms/test_certificate_web_view.py index b069ee654e..f98207f084 100644 --- a/common/test/acceptance/tests/lms/test_certificate_web_view.py +++ b/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'}, diff --git a/common/test/acceptance/tests/studio/test_studio_settings_details.py b/common/test/acceptance/tests/studio/test_studio_settings_details.py index 76538422f0..905ceee8e1 100644 --- a/common/test/acceptance/tests/studio/test_studio_settings_details.py +++ b/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 diff --git a/lms/djangoapps/certificates/views.py b/lms/djangoapps/certificates/views.py index 7d0c7bf40a..020c9dd01e 100644 --- a/lms/djangoapps/certificates/views.py +++ b/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: diff --git a/lms/envs/bok_choy.env.json b/lms/envs/bok_choy.env.json index 5be8f73c84..6d4587d6fe 100644 --- a/lms/envs/bok_choy.env.json +++ b/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, diff --git a/lms/envs/common.py b/lms/envs/common.py index 1035fd0e11..7acb02d5d0 100644 --- a/lms/envs/common.py +++ b/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 = [ diff --git a/lms/static/certificates/sass/_components.scss b/lms/static/certificates/sass/_components.scss index f4a21fb94c..5333b6c660 100644 --- a/lms/static/certificates/sass/_components.scss +++ b/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 diff --git a/lms/static/certificates/sass/_layouts.scss b/lms/static/certificates/sass/_layouts.scss index 0d31c7ec65..8d52db863a 100644 --- a/lms/static/certificates/sass/_layouts.scss +++ b/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); diff --git a/lms/static/js/utils/facebook.js b/lms/static/js/utils/facebook.js new file mode 100644 index 0000000000..74b1c2a2d1 --- /dev/null +++ b/lms/static/js/utils/facebook.js @@ -0,0 +1,32 @@ +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'] + }); + } + }; +}()); diff --git a/lms/templates/certificates/_accomplishment-banner.html b/lms/templates/certificates/_accomplishment-banner.html index f8f8d81d02..a20056d261 100644 --- a/lms/templates/certificates/_accomplishment-banner.html +++ b/lms/templates/certificates/_accomplishment-banner.html @@ -1,30 +1,40 @@ -<%! 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'/> - +
-
\ No newline at end of file + diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index e4d2ec04d8..231ffc6575 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -72,7 +72,7 @@ from django.core.urlresolvers import reverse % if len(course_enrollment_pairs) > 0: