PHX-255 Launch LTI provider on modal window open

lti_consumer/static/js/xblock_lti_consumer.js

@@ -16,6 +16,9 @@ function LtiConsumerXBlock(runtime, element) {
                 return this.each(function () {
                     var o = options;
                     $(this).click(function (e) {
+                        var $modal = $(modal_id);
+                        // Set iframe src attribute to launch LTI provider
+                        $modal.find('iframe').attr('src', $modal.data('launch-url'));
                         $("#" + overlay_id).click(function () {
                             close_modal(modal_id)
                         });
@@ -56,10 +59,12 @@ function LtiConsumerXBlock(runtime, element) {
                     });
                 });
                 function close_modal(modal_id) {
+                    var $modal = $(modal_id);
                     $('select, input, textarea, button, a').off('focus');
                     $("#" + overlay_id).fadeOut(200);
-                    $(modal_id).css({"display": "none"});
-                    $(modal_id).attr('aria-hidden', true);
+                    $modal.css({"display": "none"});
+                    $modal.attr('aria-hidden', true);
+                    $modal.find('iframe').attr('src', '');
                     $('body').css('overflow', 'auto');
                     $trigger.focus();
                 }

lti_consumer/templates/html/lti_iframe.html

+<%page args="initial_launch_url" expression_filter="h"/>
 <iframe
     title="${display_name}"
     class="ltiLaunchFrame"
     name="ltiFrame-${element_id}"
-    src="${form_url}"
+    src="${initial_launch_url}"
     allowfullscreen="true"
     webkitallowfullscreen="true"
     mozallowfullscreen="true"

lti_consumer/templates/html/student.html

@@ -51,6 +51,7 @@
             class="modal lti-modal"
             aria-hidden="true"
             style="width:${modal_width}%; left:${modal_horizontal_offset}%; top:${modal_vertical_offset}%; bottom:${modal_vertical_offset}%;"
+            data-launch-url="${form_url}"
         >
             <div class="inner-wrapper" role="dialog">
                 <button class="close-modal">
@@ -58,14 +59,17 @@
                     <span class="sr">Close</span>
                 </button>
                 ## The result of the LTI launch form submit will be rendered here.
-                <%include file="templates/html/lti_iframe.html"/>
+                ## initial_launch_url is set to an empty string here because
+                ## in "modal" launch mode, we use javascript to set the src
+                ## attribute of the iframe when the modal window is opened.
+                <%include file="templates/html/lti_iframe.html" args="initial_launch_url=''"/>
             </div>
         </section>
     % endif
     % if launch_target == 'iframe':
         <div style="height:${inline_height}px;">
             ## The result of the LTI launch form submit will be rendered here.
-            <%include file="templates/html/lti_iframe.html"/>
+            <%include file="templates/html/lti_iframe.html" args="initial_launch_url=form_url"/>
         </div>
     % endif
 % elif not hide_launch: