ECOM-1547 created new template and Sass file for new footer. Wrapped it in a…

ECOM-1547 created new template and Sass file for new footer. Wrapped it in a feature flag and updated previously named footer-edx-new.html to footer-edx-v2.html to better track/name updates to the footer going forward.
ECOM-1547 removed data-updated attributes from body
ECOM-1548 added JS file that inits analytics event listener and makes ajax call to API to get footer and HTML and add it to the DOM
ECOM-1547 code review cleanup
ECOM-1547 rebase and Sass appraoch update after @talbs the IE9 killer slayed the mighty beast.
ECOM-1547 updated file names and added comments in light of @talbs review of PR
ECOM-1547 update to social media link styles and nav link order
ECOM-1547 updated SOCIAL_MEDIA_FOOTER_NAMES if ENABLE_FOOTER_V3 is true
ECOM-1547 added translations to screenreader text
ECOM-1547 fixed test and renamed files in line with @talbs's pending PR
ECOM-1547 cleaned up file naming

.gitignore

@@ -78,6 +78,8 @@ lms/static/sass/lms-main.scss
 lms/static/sass/lms-main-rtl.scss
 lms/static/sass/lms-course.scss
 lms/static/sass/lms-course-rtl.scss
+lms/static/sass/lms-footer-edx.scss
+lms/static/sass/lms-footer-edx-rtl.scss
 cms/static/css/
 cms/static/sass/*.css
 cms/static/sass/*.css.map

lms/envs/common.py

@@ -342,6 +342,9 @@ FEATURES = {
     # Show the mobile app links in the footer
     'ENABLE_FOOTER_MOBILE_APP_LINKS': False,
 
+    # Use version 3 of the footer (added May 2015)
+    'ENABLE_FOOTER_V3': False,
+
     # Let students save and manage their annotations
     'ENABLE_EDXNOTES': False,
 
@@ -1173,6 +1176,7 @@ dashboard_js = (
 )
 discussion_js = sorted(rooted_glob(COMMON_ROOT / 'static', 'coffee/src/discussion/**/*.js'))
 rwd_header_footer_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'js/common_helpers/rwd_header_footer.js'))
+footer_edx_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'js/footer-edx.js'))
 staff_grading_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/staff_grading/**/*.js'))
 open_ended_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/open_ended/**/*.js'))
 notes_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/notes/**/*.js'))
@@ -1329,6 +1333,18 @@ PIPELINE_CSS = {
         ],
         'output_filename': 'css/lms-style-xmodule-annotations.css',
     },
+    'style-edx-footer': {
+        'source_filenames': [
+            'sass/footer-v3.css',
+        ],
+        'output_filename': 'css/lms-footer-edx.css',
+    },
+    'style-edx-footer-rtl': {
+        'source_filenames': [
+            'sass/footer-v3-rtl.css',
+        ],
+        'output_filename': 'css/lms-footer-edx-rtl.css',
+    },
 }
 
 
@@ -1421,6 +1437,10 @@ PIPELINE_JS = {
     'ccx': {
         'source_filenames': ccx_js,
         'output_filename': 'js/ccx.js'
+    },
+    'footer_edx': {
+        'source_filenames': footer_edx_js,
+        'output_filename': 'js/footer_edx.js'
     }
 }
 
@@ -1765,16 +1785,25 @@ MKTG_URL_LINK_MAP = {
 ################# Social Media Footer Links #######################
 # The names list controls the order of social media
 # links in the footer.
-SOCIAL_MEDIA_FOOTER_NAMES = [
-    "facebook",
-    "twitter",
-    "linkedin",
-    "google_plus",
-    "tumblr",
-    "meetup",
-    "reddit",
-    "youtube",
-]
+if FEATURES.get('ENABLE_FOOTER_V3'):
+    SOCIAL_MEDIA_FOOTER_NAMES = [
+        "facebook",
+        "twitter",
+        "linkedin",
+        "weibo",
+        "vk",
+    ]
+else:
+    SOCIAL_MEDIA_FOOTER_NAMES = [
+        "facebook",
+        "twitter",
+        "linkedin",
+        "google_plus",
+        "tumblr",
+        "meetup",
+        "reddit",
+        "youtube",
+    ]
 
 # The footer URLs dictionary maps social footer names
 # to URLs defined in configuration.
@@ -1825,6 +1854,18 @@ SOCIAL_MEDIA_FOOTER_DISPLAY = {
         "title": _("Reddit"),
         "icon": "fa-reddit-square"
     },
+    "vk": {
+        # Translators: This is the website name of https://vk.com.  Please
+        # translate this the way that VK advertises in your language.
+        "title": _("VK"),
+        "icon": "fa-vk"
+    },
+    "weibo": {
+        # Translators: This is the website name of http://www.weibo.com.  Please
+        # translate this the way that Weibo advertises in your language.
+        "title": _("Weibo"),
+        "icon": "fa-weibo"
+    },
     "youtube": {
         # Translators: This is the website name of www.youtube.com.  Please
         # translate this the way that YouTube advertises in your language.

lms/static/js/footer-edx.js

+var edx = edx || {};
+
+(function($) {
+    'use strict';
+
+    edx.footer = (function() {
+        var _fn = {
+            el: '#footer-edx-v3',
+
+            init: function() {
+                _fn.$el = _fn.$el || $( _fn.el );
+
+                /**
+                 *  Only continue if the expected element
+                 *  to add footer to is in the DOM
+                 */
+                if ( _fn.$el.length > -1 ) {
+                    _fn.footer.get();
+                }
+            },
+
+            analytics: {
+                init: function() {
+                    _fn.$el = _fn.$el || $( _fn.el );
+
+                    /**
+                     *  Only continue if the expected element
+                     *  to add footer to is in the DOM
+                     */
+                    if ( _fn.$el.length > -1 ) {
+                        _fn.analytics.eventListener();
+                    }
+                },
+
+                eventListener: function() {
+                    if ( window.analytics ) {
+                        _fn.$el.on( 'click', 'a', _fn.analytics.track );
+                    }
+                },
+
+                track: function( event ) {
+                    var $link = $( event.currentTarget );
+
+                    // Only tracking external links
+                    if ( $link.hasClass('external') ) {
+                        window.analytics.track( 'edx.bi.footer.link', {
+                            category: 'outbound_link',
+                            label: $link.attr('href')
+                        });
+                    }
+                }
+            },
+
+            footer: {
+                get: function() {
+                    $.ajax({
+                        url: 'https://courses.edx.org/api/v1/branding/footer',
+                        type: 'GET',
+                        dataType: 'html',
+                        success: function( data ) {
+                            _fn.footer.render( data );
+                        }
+                    });
+                },
+
+                render: function( html ) {
+                    _fn.$el.html( html );
+                }
+            }
+        };
+
+        return {
+            load: _fn.init,
+            analytics: _fn.analytics.init
+        };
+    })();
+
+    // Initialize the analytics events
+    edx.footer.analytics();
+})(jQuery);

lms/static/sass/_build-lms.scss

@@ -21,6 +21,7 @@
 @import 'shared/fields';
 @import 'shared/forms';
 @import 'shared/footer';
+@import 'shared/footer-edx'; // Replaces most of the footer partial. Will update footer to remove edx specific styles once feature flag removed.
 @import 'shared/header';
 @import 'shared/course_object';
 @import 'shared/course_filter';

lms/static/sass/lms-footer-edx-rtl.scss.mako

+## Note: This Sass infrastructure is repeated in application-extend1 and application-extend2, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
+
+// lms - css application architecture
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for left to right languages
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/variables';
+@import 'base/mixins';
+
+## THEMING
+## -------
+## Set up this file to import an edX theme library if the environment
+## indicates that a theme should be used. The assumption is that the
+## theme resides outside of this main edX repository, in a directory
+## called themes/<theme-name>/, with its base Sass file in
+## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
+## point can be used to @import in as many other things as needed.
+% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
+  // import theme's Sass overrides
+  @import '${env.get('THEME_NAME')}';
+% endif
+
+// base - assets
+@import 'base/font_face';
+
+footer#footer-edx-v3 {
+    @import 'base/extends';
+
+    // base - starter
+    @import 'base/base';
+
+}
+
+// base - elements
+@import 'elements/typography';
+
+// shared - platform
+@import 'shared/footer-edx';

lms/static/sass/lms-footer-edx.scss.mako

+## Note: This Sass infrastructure is repeated in application-extend1 and application-extend2, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
+
+// lms - css application architecture
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/variables';
+@import 'base/mixins';
+
+## THEMING
+## -------
+## Set up this file to import an edX theme library if the environment
+## indicates that a theme should be used. The assumption is that the
+## theme resides outside of this main edX repository, in a directory
+## called themes/<theme-name>/, with its base Sass file in
+## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
+## point can be used to @import in as many other things as needed.
+% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
+  // import theme's Sass overrides
+  @import '${env.get('THEME_NAME')}';
+% endif
+
+// base - assets
+@import 'base/font_face';
+
+footer#footer-edx-v3 {
+    @import 'base/extends';
+
+    // base - starter
+    @import 'base/base';
+
+}
+
+// base - elements
+@import 'elements/typography';
+
+// shared - platform
+@import 'shared/footer-edx';

lms/static/sass/lms-main-rtl.scss.mako

@@ -27,4 +27,3 @@
 % endif
 
 @import 'build-lms'; // shared app style assets/rendering
-

lms/static/sass/shared/_footer-edx.scss

+// edX theme: LMS Footer
+// ====================
+@import '../base/grid-settings';
+@import 'neat/neat'; // lib - Neat
+
+
+$edx-footer-link-color: rgb(0, 158, 231);
+$edx-footer-bg-color: rgb(252,252,252);
+
+
+// Aggressively scoped for Drupal
+// ==============================
+// These styles are being loaded on Drupal, LMS and WordPress
+// sites so the scope has to be aggressive to override default
+// CMS styles
+footer#footer-edx-v3 {
+  @include outer-container;
+  @include box-sizing(border-box);
+  background: $edx-footer-bg-color;
+  padding: 20px;
+
+  p {
+    @include font-size(14);
+    @include line-height(14);
+    font-family: $sans-serif;
+  }
+
+  .site-nav,
+  .legal-notices {
+    a {
+      @include font-size(14);
+      @include line-height(14);
+      @include margin-right(20px);
+      color: $edx-footer-link-color;
+
+      &:last-of-type {
+        @include margin-right(0);
+      }
+    }
+  }
+
+  .footer-logo,
+  .site-details,
+  .external-links {
+    @include span-columns(12);
+  }
+
+  .site-details,
+  .external-links {
+    margin-top: 5px;
+  }
+
+  .footer-logo {
+    margin-bottom: 30px;
+  }
+
+  .legal-notices {
+    margin: 20px 0 30px;
+  }
+
+  .openedx-link {
+    width: 141px;
+    margin-bottom: 30px;
+
+    a {
+      display: inline-block;
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .social-media-links,
+  .mobile-app-links {
+    @include clearfix();
+  }
+
+  .social-media-links {
+    margin-bottom: 30px;
+  }
+
+  .sm-link {
+    @include float(left);
+    @include margin(0, 0, 10px, 12px);
+    @include font-size(28);
+    @include line-height(28);
+    width: 30px;
+    height: 30px;
+    line-height: 1;
+    position: relative;
+    display: inline;
+    background: none;
+    text-align: center;
+
+    &:first-of-type {
+      @include margin-left(0);
+    }
+
+    &:hover {
+      opacity: 0.7;
+    }
+
+    .icon {
+      font-family: 'FontAwesome';
+      color: $edx-footer-link-color;
+    }
+  }
+
+  .app-link {
+    @include float(left);
+    @include margin-right(10px);
+    position: relative;
+    display: inline-block;
+
+    &:last-of-type {
+      @include margin-right(0);
+    }
+
+    img {
+      height: 40px;
+    }
+  }
+
+  @include media( $edx-bp-large ) {
+    padding: 20px 10px;
+
+    .site-details {
+      @include span-columns(7);
+    }
+
+    .external-links {
+      @include span-columns(5);
+    }
+
+    .social-media-links,
+    .mobile-app-links {
+      @include float(right);
+    }
+
+    .social-media-links {
+      width: calc();
+      margin-bottom: 40px;
+    }
+  }
+
+  @include media( $edx-bp-huge ) {
+    .footer-logo {
+      @include span-columns(2);
+    }
+
+    .site-details {
+      @include span-columns(6);
+    }
+
+    .external-links {
+      @include span-columns(4);
+    }
+
+    .social-media-links {
+      margin-bottom: 50px;
+    }
+  }
+}

lms/templates/footer-edx-v3.html

+## mako
+<%! from django.core.urlresolvers import reverse %>
+<%! from django.utils.translation import ugettext as _ %>
+<%namespace name='static' file='static_content.html'/>
+## WARNING: These files are specific to edx.org and are not used in installations outside of that domain. Open edX users will want to use the file "footer.html" for any changes or overrides.
+<footer id="footer-edx-v3" role="contentinfo" aria-label="${_("Page Footer")}">
+    <h2 class="sr footer-about-title">${_("About edX")}</h2>
+
+    <div class="footer-logo">
+        <img alt="edX logo" src="${static.url('images/edx-theme/edx-header-logo.png')}">
+    </div>
+
+    <div class="site-details">
+        <nav class="site-nav" aria-label="${_("About edX")}">
+            <a href="${marketing_link('ABOUT')}">${_("About")}</a>
+            <a href="${marketing_link('BLOG')}">${_("Blog")}</a>
+            <a href="${marketing_link('NEWS')}">${_("News")}</a>
+            <a href="${marketing_link('FAQ')}">${_("FAQs")}</a>
+            <a href="${marketing_link('CONTACT')}">${_("Contact")}</a>
+            <a href="${marketing_link('JOBS')}">${_("Jobs")}</a>
+            <a href="${marketing_link('DONATE')}">${_("Donate")}</a>
+            <a href="${marketing_link('DONATE')}">${_("Sitemap")}</a>
+        </nav>
+        <nav class="legal-notices" aria-label="${_("Legal")}">
+            <a href="${marketing_link('TOS')}">${_("Terms of Service &amp; Honor Code")}</a>
+            <a href="${marketing_link('PRIVACY')}">${_("Privacy Policy")}</a>
+            <a href="${marketing_link('PRIVACY')}">${_("Website Accessibility Policy")}</a>
+        </nav>
+        <p class="copyright">
+            ## Using "edX Inc." explicitly here for copyright purposes (settings.PLATFORM_NAME is just "edX", and this footer is only used on edx.org)
+            ## Site operators: Please do not remove this paragraph! This attributes back to edX and makes your acknowledgement of edX's trademarks clear.
+            <p>&copy; ${settings.COPYRIGHT_YEAR} edX Inc. All rights reserved except where noted. EdX, Open edX and the edX and Open edX logos are registered trademarks of trademarks of edX Inc.</p>
+        </p>
+        <div class="openedx-link">
+          <a href="http://open.edx.org" title="${_("Powered by Open edX")}">
+            <img alt="${_("Powered by Open edX")}" src="https://files.edx.org/openedx-logos/edx-openedx-logo-tag.png">
+          </a>
+        </div>
+    </div>
+
+    <div class="external-links">
+        <div class="social-media-links">
+          ## Translators: This is the website name of www.facebook.com. Please
+          ## translate this the way that Facebook advertises in your language.
+          <a href="${settings.SOCIAL_MEDIA_FOOTER_URLS.get('facebook', '#')}" class="sm-link external" title="${_("Facebook")}" rel="noreferrer">
+            <span class="icon fa fa-facebook-square element-invisible"></span>
+          </a>
+
+          ## Translators: This is the website name of www.twitter.com. Please
+          ## translate this the way that Twitter advertises in your language.
+          <a href="${settings.SOCIAL_MEDIA_FOOTER_URLS.get('twitter', '#')}" class="sm-link external" title="${_("Twitter")}" rel="noreferrer">
+            <span class="icon fa fa-twitter element-invisible"></span>
+          </a>
+
+          ## Translators: This is the website name of www.linked.com. Please
+          ## translate this the way that LinkedIn advertises in your language.
+          <a href="${settings.SOCIAL_MEDIA_FOOTER_URLS.get('linkedin', '#')}" class="sm-link external" title="${_("LinkedIn")}" rel="noreferrer">
+            <span class="icon fa fa-linkedin-square element-invisible"></span>
+          </a>
+
+          ## Translators: This is the website name of plus.google.com. Please
+          ## translate this the way that Google+ advertises in your language.
+          <a href="${settings.SOCIAL_MEDIA_FOOTER_URLS.get('facebook', '#')}" class="sm-link external" title="${_("Google+")}" rel="noreferrer">
+            <span class="icon fa fa-weibo element-invisible"></span>
+          </a>
+
+          ## Translators: This is the website name of www.meetup.com. Please
+          ## translate this the way that Meetup advertises in your language.
+          <a href="${settings.SOCIAL_MEDIA_FOOTER_URLS.get('facebook', '#')}" class="sm-link external" title="${_("Meetup")}" rel="noreferrer">
+            <span class="icon fa fa-vk element-invisible"></span>
+          </a>
+        </div>
+
+        ## % if settings.FEATURES.get('ENABLE_FOOTER_MOBILE_APP_LINKS'):
+        <div class="mobile-app-links">
+          <a href="${settings.MOBILE_STORE_URLS.get('apple', '#')}" class="app-link external">
+            <img class="app-store" alt="${_("Apple app on Apple Store")}" src="${static.url('images/app/app_store_badge_135x40.svg')}">
+          </a>
+          <a href="${settings.MOBILE_STORE_URLS.get('google', '#')}" class="app-link external">
+            <img class="google-play" alt="${_("Android app on Google Play")}" src="${static.url('images/app/google_play_badge_45.png')}">
+          </a>
+        </div>
+        ## % endif
+    </div>
+</footer>
+
+<script type="text/javascript" src="/static/js/vendor/noreferrer.js" charset="utf-8"></script>
+<%block name="js_extra">
+    <%static:js group='footer_edx'/>
+</%block>

lms/templates/main.html

@@ -148,8 +148,10 @@ dir_rtl = 'rtl' if get_language_bidi() else 'ltr'
           <%
             if theme_enabled() and not is_microsite():
               footer_file = 'theme-footer.html'
+            elif settings.FEATURES.get('IS_EDX_DOMAIN', False) and  settings.FEATURES.get('ENABLE_FOOTER_V3', True) and not is_microsite():
+              footer_file = microsite.get_template_path('footer-edx-v3.html')
             elif settings.FEATURES.get('IS_EDX_DOMAIN', False) and not is_microsite():
-              footer_file = microsite.get_template_path('footer-edx-new.html')
+              footer_file = microsite.get_template_path('footer-edx-v2.html')
             else:
               footer_file = microsite.get_template_path('footer.html')
           %>

lms/templates/main_django.html

@@ -38,8 +38,10 @@
   </div>
   {% if IS_REQUEST_IN_MICROSITE %}
   {# For now we don't support overriden Django templates in microsites. Leave footer blank for now which is better than saying Edx.#}
-  {% elif IS_EDX_DOMAIN %}
-    {% include "footer-edx-new.html" %}
+  {% elif IS_EDX_DOMAIN and not ENABLE_FOOTER_V3 %}
+    {% include "footer-edx-v2.html" %}
+  {% elif IS_EDX_DOMAIN and ENABLE_FOOTER_V3 %}
+    {% include "footer-edx-v3.html" %}
   {% else %}
     {% include "footer.html" %}
   {% endif %}