Add Paragon Implementation to Wiki

a990e1fe · Gregory Martin · 9a9ef198 · a990e1fe · a990e1fe · a990e1fe
Commit a990e1fe authored Nov 02, 2017 by Gregory Martin
Showing with 64 additions and 12 deletions

lms/static/js/accessible_components/StatusBarAlert.jsx
+43 -0

lms/templates/main_django.html
+2 -2

lms/templates/wiki/base.html
+12 -4

package.json
+5 -5

webpack.common.config.js
+2 -1

No files found.
--- a/lms/static/js/accessible_components/StatusBarAlert.jsx
+++ b/lms/static/js/accessible_components/StatusBarAlert.jsx
+/*
+Wrapper for React/Paragon accessible status bar
+*/
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import StatusAlert from '@edx/paragon/src/StatusAlert/index.jsx';
+
+export class StatusAlertRenderer {
+  constructor(message, selector, afterselector) {
+    this.shiftFocus = this.shiftFocus.bind(this);
+    const element = document.querySelector(selector);
+
+    if (element) {
+      /*
+      These props match the defaults mostly in the paragon lib:
+      https://github.com/edx/paragon/tree/master/src/StatusAlert
+      but are made explicit in the case of a upstream change to defaults
+      */
+      ReactDOM.render(
+        <StatusAlert
+          alertType='warning'
+          dismissible={true}
+          open={true}
+          dialog={message}
+          dismissable={true}
+          onClose={() => this.shiftFocus(afterselector)}
+        />,
+        document.querySelector(selector)
+      );
+    }
+  }
+
+  shiftFocus(afterselector) {
+    const afterelement = document.querySelector(afterselector);
+    /*
+    Optional generic function to shift 'next' focusable element for keyboard users
+    */
+    if (afterelement) {
+      afterelement.focus();
+    }
+  }
+}
--- a/lms/templates/main_django.html
+++ b/lms/templates/main_django.html
@@ -26,6 +26,8 @@
 </head>

 <body class="{% block bodyclass %}{% endblock %} lang_{{LANGUAGE_CODE}}">
+    {% load render_bundle from webpack_loader %}
+    {% render_bundle "commons" %}
  <div class="window-wrap" dir="{{LANGUAGE_BIDI|yesno:'rtl,ltr'}}">
    <a class="nav-skip" href="#main">{% trans "Skip to main content" %}</a>
    {% with course=request.course %}
@@ -40,8 +42,6 @@
    {% endwith %}

  </div>
-    {% load render_bundle from webpack_loader %}
-    {% render_bundle "commons" %}

    {% javascript 'base_application' %}


--- a/lms/templates/wiki/base.html
+++ b/lms/templates/wiki/base.html
@@ -59,6 +59,9 @@
  {% endif %}

 <div class="container">
+    {% load render_bundle from webpack_loader %}
+    {% render_bundle "AlertStatusBar" %}
+
  <div class="wiki-wrapper">
    <main id="main" aria-label="Content" tabindex="-1">
          <section class="wiki {{ selected_tab }}" id="wiki-content"
@@ -72,10 +75,15 @@

          {% if messages %}
            {% for message in messages %}
-              <div class="alert alert-{{ message.tags }}">
-                <a class="close" data-dismiss="alert" href="#">&times;</a>
-                {{ message }}
-              </div>
+              <div id="alert_stat_bar"></div>
+              <script type="text/javascript">
+                new StatusAlertRenderer(
+                  "{{ message }}",
+                  "#alert_stat_bar",
+                  ".nav nav-tabs"
+                );
+              </script>
+
            {% endfor %}
          {% endif %}


--- a/package.json
+++ b/package.json
@@ -2,6 +2,9 @@
  "name": "edx",
  "version": "0.1.0",
  "dependencies": {
+    "@edx/edx-bootstrap": "^0.4.1",
+    "@edx/paragon": "^0.2.0",
+    "@edx/studio-frontend": "^0.3.0",
    "babel-core": "^6.23.0",
    "babel-loader": "^6.4.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
@@ -14,9 +17,6 @@
    "coffee-loader": "^0.7.3",
    "coffee-script": "1.6.1",
    "css-loader": "^0.28.5",
-    "@edx/edx-bootstrap": "^0.4.1",
-    "@edx/paragon": "^0.2.0",
-    "@edx/studio-frontend": "^0.3.0",
    "edx-pattern-library": "0.18.1",
    "edx-ui-toolkit": "1.5.2",
    "exports-loader": "^0.6.4",
@@ -40,14 +40,14 @@
    "requirejs": "~2.3.2",
    "rtlcss": "^2.2.0",
    "sass-loader": "^6.0.6",
-    "style-loader": "^0.18.2",
    "string-replace-webpack-plugin": "^0.1.3",
+    "style-loader": "^0.18.2",
    "uglify-js": "2.7.0",
    "underscore": "~1.8.3",
    "underscore.string": "~3.3.4",
    "webpack": "^2.2.1",
-    "webpack-merge": "^4.1.0",
    "webpack-bundle-tracker": "^0.2.0",
+    "webpack-merge": "^4.1.0",
    "which-country": "1.0.0"
  },
  "devDependencies": {

--- a/webpack.common.config.js
+++ b/webpack.common.config.js
@@ -21,8 +21,9 @@ module.exports = {
        Import: './cms/static/js/features/import/factories/import.js',
        StudioIndex: './cms/static/js/features_jsx/studio/index.jsx',

-        // LMS: single support form
+        // LMS
        SingleSupportForm: './lms/static/support/jsx/single_support_form.jsx',
+        AlertStatusBar: './lms/static/js/accessible_components/StatusBarAlert.jsx',

        // Features
        CourseGoals: './openedx/features/course_experience/static/course_experience/js/CourseGoals.js',