⚡️(iframe) precalculate iframe height to improve user visual feeling

As iframeResizer may take a few seconds to initialize and set correct iframe height, we calculate probable height regarding available width and configuration given ratio. We also use more comprehensive settings and drop deprecated XBlock.fragment library in favor of web_fragment.fragment
openfun · Feb 7, 2019 · 7b7b373 · 7b7b373
1 parent 97c1e4f
commit 7b7b373
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -67,6 +67,8 @@ LTI_XBLOCK_CONFIGURATIONS = [
         "oauth_consumer_key": "InsecureOauthConsumerKey",
         "shared_secret": "InsecureSharedSecret",
         "is_launch_url_regex": True,
+        "automatic_resizing": True,
+        "automatic_resizing_initialization_ratio": 0.5625,
         "hidden_fields": [
             "lti_id",
             "description",
@@ -94,7 +96,7 @@ LTI_XBLOCK_CONFIGURATIONS = [
             "hide_launch": False,
             "launch_target": "iframe",
             "modal_width": 80,
-            "launch_url": "https://marsha\.education/lti/videos/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}",
+            "launch_url": "https://marsha\\.education/lti/videos/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}",
             "lti_id": "marsha",
         },
     },
@@ -107,6 +109,7 @@ LTI_XBLOCK_CONFIGURATIONS = [
         "display_name": "LTI consumer",
         "pattern": ".*",
         "hidden_fields": ["ask_to_send_username", "ask_to_send_email"],
+        "automatic_resizing": False,
         "defaults": {
             "ask_to_send_email": True,
             "launch_target": "new_window",

diff --git a/config/settings.yml.dist b/config/settings.yml.dist
@@ -4,6 +4,8 @@ LTI_XBLOCK_CONFIGURATIONS:
     oauth_consumer_key: InsecureOauthConsumerKey
     shared_secret: InsecureSharedSecret
     is_launch_url_regex: true
+    automatic_resizing: true
+    automatic_resizing_initialization_ratio: 0.5625
     defaults:
       lti_id: marsha
       launch_target: iframe

diff --git a/configurable_lti_consumer/configurable_lti_consumer.py b/configurable_lti_consumer/configurable_lti_consumer.py
@@ -4,7 +4,7 @@
 
 import exrex
 from lti_consumer import LtiConsumerXBlock
-from xblock.fragment import Fragment
+from web_fragments.fragment import Fragment
 from xblockutils.resources import ResourceLoader
 
 from .exceptions import ConfigurableLTIConsumerException
@@ -143,14 +143,17 @@ def student_view(self, context):
         Arguments:
             context (dict): XBlock context
         Returns:
-            xblock.fragment.Fragment: XBlock HTML fragment
+            web_fragment.fragment.Fragment: XBlock HTML fragment
         """
         fragment = Fragment()
         configurable_lti_consumer_loader = ResourceLoader(__name__)
         lti_consumer_loader = ResourceLoader(
             "lti_consumer"
         )  # ressource loader of inherited lti_consumer
         context.update(self._get_context_for_template())
+        configuration = self.get_configuration(self.launch_url)
+        context["automatic_resizing"] = configuration.get("automatic_resizing", False)
+        context["automatic_resizing_initialization_ratio"] = configuration.get("automatic_resizing_initialization_ratio", 0.5625)  # common amazon ratio
         fragment.add_content(
             configurable_lti_consumer_loader.render_mako_template(
                 "/templates/html/student.html", context
@@ -161,19 +164,20 @@ def student_view(self, context):
             lti_consumer_loader.load_unicode("static/js/xblock_lti_consumer.js")
         )
 
-        if context["inline_height"]:
-            fragment.initialize_js("LtiConsumerXBlock")
-        else:  # iframe height will be set by iframeResizer lib
+        if context["automatic_resizing"]:  # iframe height will be set by iframeResizer lib
             fragment.add_javascript(
                 configurable_lti_consumer_loader.load_unicode(
-                    "static/js/vendor/iframeResizer.min.js"
+                    "static/js/vendor/iframeResizer.js"
                 )
             )
             fragment.add_javascript(
                 configurable_lti_consumer_loader.load_unicode(
                     "static/js/configurable_xblock_lti_consumer.js"
                 )
             )
-            fragment.initialize_js("configurableLTIConsumerXblockIframeResizerInit")
+            json_args = {"element_id": context["element_id"]}
+            fragment.initialize_js("configurableLTIConsumerXblockIframeResizerInit", json_args=json_args)
+        else:
+            fragment.initialize_js("LtiConsumerXBlock")
 
         return fragment
diff --git a/configurable_lti_consumer/static/js/configurable_xblock_lti_consumer.js b/configurable_lti_consumer/static/js/configurable_xblock_lti_consumer.js
@@ -1,9 +1,14 @@
-function configurableLTIConsumerXblockIframeResizerInit() {
-    $(function ($) {
-        LtiConsumerXBlock();  // call inherited lti_consumer javascript initialization
-        $('.ltiLaunchFrame').iFrameResize({ // Initialize IframeResizer on lti_consumer iframe class
-            checkOrigin: false,
-            log: false
-        })
-    });
+function configurableLTIConsumerXblockIframeResizerInit(runtime, element, json_args) {
+    var $element = $("#" + json_args["element_id"]);
+    LtiConsumerXBlock();  // call inherited lti_consumer javascript initialization
+    // Estimate LTI consumer xblock height regarding available width using given ratio
+    // to presize iframe before iframeResizer initialization
+    var ratio = parseFloat($element.find("div").data('ratio'));
+    var $iframe = $element.find('iframe');
+    var width = $('.content-primary,.vert-mod').width();
+    var probable_height = width * ratio;
+    $iframe.iFrameResize({ // Initialize IframeResizer on lti_consumer iframe class
+        checkOrigin: false,
+        log: false
+    }).height(probable_height);
 };
diff --git a/configurable_lti_consumer/templates/html/student.html b/configurable_lti_consumer/templates/html/student.html
@@ -63,14 +63,13 @@
         </section>
     % endif
     % if launch_target == 'iframe':
-        % if inline_height:
-            <div style="height: ${inline_height}px;">
+        % if automatic_resizing:
+            <div data-ratio="${automatic_resizing_initialization_ratio}">
         % else:
-            ## iframeResizer will automaticaly set iframe height
-            <div>
+            <div style="height: ${inline_height}px;">
         % endif
-            ## The result of the LTI launch form submit will be rendered here.
-            <%include file="templates/html/lti_iframe.html" args="initial_launch_url=form_url"/>
+        ## The result of the LTI launch form submit will be rendered here.
+        <%include file="templates/html/lti_iframe.html" args="initial_launch_url=form_url"/>
         </div>
     % endif
 % elif not hide_launch: