Skip to content

E
edx-platform
Commit a990e1fe by Gregory Martin
Options

Add Paragon Implementation to Wiki

parent 9a9ef198
Showing with 64 additions and 12 deletions
lms/static/js/accessible_components/StatusBarAlert.jsx 0 → 100644
/*
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();
}
}
}
lms/templates/main_django.html
...@@ -26,6 +26,8 @@ ...@@ -26,6 +26,8 @@
</head> </head>
<body class="{% block bodyclass %}{% endblock %} lang_{{LANGUAGE_CODE}}"> <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'}}"> <div class="window-wrap" dir="{{LANGUAGE_BIDI|yesno:'rtl,ltr'}}">
<a class="nav-skip" href="#main">{% trans "Skip to main content" %}</a> <a class="nav-skip" href="#main">{% trans "Skip to main content" %}</a>
{% with course=request.course %} {% with course=request.course %}
...@@ -40,8 +42,6 @@ ...@@ -40,8 +42,6 @@
{% endwith %} {% endwith %}
</div> </div>
{% load render_bundle from webpack_loader %}
{% render_bundle "commons" %}
{% javascript 'base_application' %} {% javascript 'base_application' %}
......
lms/templates/wiki/base.html
...@@ -59,6 +59,9 @@ ...@@ -59,6 +59,9 @@
{% endif %} {% endif %}
<div class="container"> <div class="container">
{% load render_bundle from webpack_loader %}
{% render_bundle "AlertStatusBar" %}
<div class="wiki-wrapper"> <div class="wiki-wrapper">
<main id="main" aria-label="Content" tabindex="-1"> <main id="main" aria-label="Content" tabindex="-1">
<section class="wiki {{ selected_tab }}" id="wiki-content" <section class="wiki {{ selected_tab }}" id="wiki-content"
...@@ -72,10 +75,15 @@ ...@@ -72,10 +75,15 @@
{% if messages %} {% if messages %}
{% for message in messages %} {% for message in messages %}
<div class="alert alert-{{ message.tags }}"> <div id="alert_stat_bar"></div>
<a class="close" data-dismiss="alert" href="#">&times;</a> <script type="text/javascript">
{{ message }} new StatusAlertRenderer(
</div> "{{ message }}",
"#alert_stat_bar",
".nav nav-tabs"
);
</script>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
......
package.json
...@@ -2,6 +2,9 @@ ...@@ -2,6 +2,9 @@
"name": "edx", "name": "edx",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@edx/edx-bootstrap": "^0.4.1",
"@edx/paragon": "^0.2.0",
"@edx/studio-frontend": "^0.3.0",
"babel-core": "^6.23.0", "babel-core": "^6.23.0",
"babel-loader": "^6.4.0", "babel-loader": "^6.4.0",
"babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-class-properties": "^6.24.1",
...@@ -14,9 +17,6 @@ ...@@ -14,9 +17,6 @@
"coffee-loader": "^0.7.3", "coffee-loader": "^0.7.3",
"coffee-script": "1.6.1", "coffee-script": "1.6.1",
"css-loader": "^0.28.5", "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-pattern-library": "0.18.1",
"edx-ui-toolkit": "1.5.2", "edx-ui-toolkit": "1.5.2",
"exports-loader": "^0.6.4", "exports-loader": "^0.6.4",
...@@ -40,14 +40,14 @@ ...@@ -40,14 +40,14 @@
"requirejs": "~2.3.2", "requirejs": "~2.3.2",
"rtlcss": "^2.2.0", "rtlcss": "^2.2.0",
"sass-loader": "^6.0.6", "sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"string-replace-webpack-plugin": "^0.1.3", "string-replace-webpack-plugin": "^0.1.3",
"style-loader": "^0.18.2",
"uglify-js": "2.7.0", "uglify-js": "2.7.0",
"underscore": "~1.8.3", "underscore": "~1.8.3",
"underscore.string": "~3.3.4", "underscore.string": "~3.3.4",
"webpack": "^2.2.1", "webpack": "^2.2.1",
"webpack-merge": "^4.1.0",
"webpack-bundle-tracker": "^0.2.0", "webpack-bundle-tracker": "^0.2.0",
"webpack-merge": "^4.1.0",
"which-country": "1.0.0" "which-country": "1.0.0"
}, },
"devDependencies": { "devDependencies": {
......
webpack.common.config.js
...@@ -21,8 +21,9 @@ module.exports = { ...@@ -21,8 +21,9 @@ module.exports = {
Import: './cms/static/js/features/import/factories/import.js', Import: './cms/static/js/features/import/factories/import.js',
StudioIndex: './cms/static/js/features_jsx/studio/index.jsx', StudioIndex: './cms/static/js/features_jsx/studio/index.jsx',
// LMS: single support form // LMS
SingleSupportForm: './lms/static/support/jsx/single_support_form.jsx', SingleSupportForm: './lms/static/support/jsx/single_support_form.jsx',
AlertStatusBar: './lms/static/js/accessible_components/StatusBarAlert.jsx',
// Features // Features
CourseGoals: './openedx/features/course_experience/static/course_experience/js/CourseGoals.js', CourseGoals: './openedx/features/course_experience/static/course_experience/js/CourseGoals.js',
......
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