diff --git a/lti_consumer/static/css/student.css b/lti_consumer/static/css/student.css
index 474434ad15be6a56edf684be61f6d704b94866a4..68a24f9b0516bd09e1e2c30db0717afcaac259f0 100644
--- a/lti_consumer/static/css/student.css
+++ b/lti_consumer/static/css/student.css
@@ -1 +1 @@
-.xblock-student_view.xblock-student_view-lti_consumer h2.problem-header{display:inline-block}.xblock-student_view.xblock-student_view-lti_consumer div.problem-progress{display:inline-block;padding-left:5px;color:#666;font-weight:100;font-size:1em}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer{margin:0 auto}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link{font-size:14px;background-color:#f6f6f6;padding:20px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link .lti-link{margin-bottom:0;text-align:right}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link .lti-link button{font-size:13px;line-height:20.72px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal{top:80px !important}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal .inner-wrapper{height:100%;padding:0 0 0 0}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer form.ltiLaunchForm{display:none}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer iframe.ltiLaunchFrame{width:100%;height:100%;display:block;border:0px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer h4.problem-feedback-label{font-weight:100;font-size:1em;font-family:"Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer div.problem-feedback{margin-top:5px;margin-bottom:5px}
+.xblock-student_view.xblock-student_view-lti_consumer h2.problem-header{display:inline-block}.xblock-student_view.xblock-student_view-lti_consumer div.problem-progress{display:inline-block;padding-left:5px;color:#666;font-weight:100;font-size:1em}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer{margin:0 auto}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link{font-size:14px;background-color:#f6f6f6;padding:20px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link .lti-link{margin-bottom:0;text-align:right}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link .lti-link button{font-size:13px;line-height:20.72px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal{top:80px !important}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal .inner-wrapper{height:100%;padding:0 0 0 0}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer form.ltiLaunchForm{display:none}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer iframe.ltiLaunchFrame{width:100%;height:100%;display:block;border:0px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer h4.problem-feedback-label{font-weight:100;font-size:1em;font-family:"Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer div.problem-feedback{margin-top:5px;margin-bottom:5px}.lean-overlay{background:transparent;background-image:radial-gradient(circle at 50% 30%, rgba(0,0,0,0.4), rgba(0,0,0,0.6));display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:100}
diff --git a/lti_consumer/static/js/xblock_lti_consumer.js b/lti_consumer/static/js/xblock_lti_consumer.js
index e31446c8c07f4362fa3a013914068d107af98d05..041343561f15eb681036374a41e7d2d236c3a9a4 100644
--- a/lti_consumer/static/js/xblock_lti_consumer.js
+++ b/lti_consumer/static/js/xblock_lti_consumer.js
@@ -7,15 +7,16 @@ function LtiConsumerXBlock(runtime, element) {
$.fn.extend({
iframeModal: function (options) {
var $trigger = $(this);
+ var modal_id = $trigger.data("target");
var defaults = {top: 100, overlay: 0.5, closeButton: null};
- var overlay = $("<div id='lean_overlay'></div>");
+ var overlay_id = (modal_id + '_lean-overlay').replace('#', '');
+ var overlay = $("<div id='" + overlay_id + "' class='lean-overlay'></div>");
$("body").append(overlay);
options = $.extend(defaults, options);
return this.each(function () {
var o = options;
$(this).click(function (e) {
- var modal_id = $(this).data("target");
- $("#lean_overlay").click(function () {
+ $("#" + overlay_id).click(function () {
close_modal(modal_id)
});
$(o.closeButton).click(function () {
@@ -23,8 +24,8 @@ function LtiConsumerXBlock(runtime, element) {
});
var modal_height = $(modal_id).outerHeight();
var modal_width = $(modal_id).outerWidth();
- $("#lean_overlay").css({"display": "block", opacity: 0});
- $("#lean_overlay").fadeTo(200, o.overlay);
+ $("#" + overlay_id).css({"display": "block", opacity: 0});
+ $("#" + overlay_id).fadeTo(200, o.overlay);
$(modal_id).css({
"display": "block",
"position": "fixed",
@@ -35,11 +36,11 @@ function LtiConsumerXBlock(runtime, element) {
"top": o.top + "px"
});
$(modal_id).fadeTo(200, 1);
+ $(modal_id).attr('aria-hidden', false);
+
e.preventDefault();
/* Manage focus for modal dialog */
- var iframe = $(modal_id).find('iframe')[0].contentWindow;
-
/* Set focus on close button */
$(o.closeButton).focus();
@@ -61,8 +62,9 @@ function LtiConsumerXBlock(runtime, element) {
});
function close_modal(modal_id) {
$('select, input, textarea, button, a').off('focus');
- $("#lean_overlay").fadeOut(200);
- $(modal_id).css({"display": "none"})
+ $("#" + overlay_id).fadeOut(200);
+ $(modal_id).css({"display": "none"});
+ $(modal_id).attr('aria-hidden', true);
$trigger.focus();
}
}
diff --git a/lti_consumer/static/sass/student.scss b/lti_consumer/static/sass/student.scss
index a56877ecb495657a66017ce429fbed10ee352830..0d96c38bf819f2b782927b0a59421f68a1b488a4 100644
--- a/lti_consumer/static/sass/student.scss
+++ b/lti_consumer/static/sass/student.scss
@@ -62,3 +62,15 @@
}
}
}
+
+.lean-overlay {
+ background: transparent;
+ background-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,0.4), rgba(0,0,0,0.6));
+ display: none;
+ height: 100%;
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 100;
+}
diff --git a/lti_consumer/templates/html/lti_iframe.html b/lti_consumer/templates/html/lti_iframe.html
index 865476cc681ead58063ff7a1392fa2ccc4f7b5d6..76841fce6725823933dac70bf238057aff235ba6 100644
--- a/lti_consumer/templates/html/lti_iframe.html
+++ b/lti_consumer/templates/html/lti_iframe.html
@@ -1,5 +1,5 @@
<iframe
- title="External Tool Content"
+ title="${display_name}"
class="ltiLaunchFrame"
name="ltiFrame-${element_id}"
src="${form_url}"
diff --git a/lti_consumer/templates/html/student.html b/lti_consumer/templates/html/student.html
index 6c5070be1d272e923df33f35f588d8e7cb29d3f1..11a67995b3bd9c4f81ece446e9e85feeda8f0b67 100644
--- a/lti_consumer/templates/html/student.html
+++ b/lti_consumer/templates/html/student.html
@@ -52,8 +52,8 @@
aria-hidden="true"
style="width:${modal_width}px; height:${modal_height}px;"
>
- <div class="inner-wrapper" role="dialog" aria-labelledby="lti-modal-title">
- <button class="close-modal" tabindex="1">
+ <div class="inner-wrapper" role="dialog">
+ <button class="close-modal">
<i class="icon fa fa-remove"></i>
<span class="sr">Close</span>
</button>
diff --git a/setup.py b/setup.py
index 52fca39327a4730f3f7775a4b2fcb7e3ca935591..5c4a75679a9dbbb7ba4b46d9eeeef85203b32ba3 100644
--- a/setup.py
+++ b/setup.py
@@ -22,7 +22,7 @@ def package_data(pkg, roots):
setup(
name='lti_consumer-xblock',
- version='v1.0.0',
+ version='1.0.1',
description='This XBlock implements the consumer side of the LTI specification.',
packages=[
'lti_consumer',