[LON-CAPA-cvs] cvs: rat / lonwrapper.pm

[raeburn]

raeburn		Tue Oct 22 23:13:54 2013 EDT

  Modified files:              
    /rat	lonwrapper.pm 
  Log:
  - Prevent truncation of content in external resources by using 
    "overflow:scroll; -webkit-overflow-scrolling:touch" style for div wrapped
    around iframe used to contain external URL, when mobile device (e.g.,
    iPad, iPhone etc.).
  
  
Index: rat/lonwrapper.pm
diff -u rat/lonwrapper.pm:1.45 rat/lonwrapper.pm:1.46
--- rat/lonwrapper.pm:1.45	Tue Oct 15 10:17:19 2013
+++ rat/lonwrapper.pm	Tue Oct 22 23:13:54 2013
@@ -1,7 +1,7 @@
 # The LearningOnline Network with CAPA
 # Wrapper for external and binary files as standalone resources
 #
-# $Id: lonwrapper.pm,v 1.45 2013/10/15 10:17:19 raeburn Exp $
+# $Id: lonwrapper.pm,v 1.46 2013/10/22 23:13:54 raeburn Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -47,6 +47,12 @@
         $forcereg = 1;
     }
 
+    my %lt = &Apache::lonlocal::texthash(
+                                          'noif' => 'No iframe support.',
+                                          'show' => 'Show content in pop-up window',
+                                        );
+
+    my $noiframe = &Apache::loncommon::modal_link($url,$lt{'show'},500,400);
     my $args = {'bgcolor' => '#FFFFFF'};
     if ($forcereg) {
         $args->{'force_register'} = $forcereg;
@@ -58,44 +64,55 @@
         $args->{'use_absolute'} = $absolute; 
     }
 
-    my $startpage =  Apache::loncommon::start_page('Menu',undef,$args);
-    my $endpage =  Apache::loncommon::end_page();
+    my $startpage = &Apache::loncommon::start_page('Menu',undef,$args);
+    my $endpage = &Apache::loncommon::end_page();
 
-    my $script = Apache::lonhtmlcommon::scripttag(<<SCRIPT );
-    \$(document).ready( function() {
-        \$(window).unbind('resize').resize(function(){
-            var header;
-            var offset = 5;
-            var height = 0;
-            var hdrtop = 0;
-            if (\$('div.LC_head_subbox:first').length) {
-                header = \$('div.LC_head_subbox:first');
-                offset = 9;
-            } else {
-                if (\$('#LC_breadcrumbs').length) {
-                    header = \$('#LC_breadcrumbs');
+    if ($env{'browser.mobile'}) {
+        return <<ENDFRAME;
+        $startpage
+        <div style="overflow:scroll; -webkit-overflow-scrolling:touch;">
+        <iframe src="$url" height="100%" width="100%" frameborder="0">
+            $lt{'noif'} $noiframe
+        </iframe>
+        </div>
+        $endpage
+ENDFRAME
+    } else {
+        my $script = &Apache::lonhtmlcommon::scripttag(<<SCRIPT);
+        \$(document).ready( function() {
+            \$(window).unbind('resize').resize(function(){
+                var header;
+                var offset = 5;
+                var height = 0;
+                var hdrtop = 0;
+                if (\$('div.LC_head_subbox:first').length) {
+                    header = \$('div.LC_head_subbox:first');
+                    offset = 9;
+                } else {
+                    if (\$('#LC_breadcrumbs').length) {
+                        header = \$('#LC_breadcrumbs');
+                    }
                 }
-            }
-            if (header.length) {
-                height = header.height();
-                hdrtop = header.position().top;
-            }
-            var pos = height + hdrtop + offset;
-            \$('.LC_iframecontainer').css('top', pos);
+                if (header.length) {
+                    height = header.height();
+                    hdrtop = header.position().top;
+                }
+                var pos = height + hdrtop + offset;
+                \$('.LC_iframecontainer').css('top', pos);
+            });
         });
-    });
-    window.onload = function(){  \$(window).trigger('resize') }; 
+        window.onload = function(){  \$(window).trigger('resize') };
 SCRIPT
-
-    # javascript will position the iframe if window was resized (or zoomed)
-    return <<ENDFRAME;
-    $startpage
-    $script
-    <div class="LC_iframecontainer">
-        <iframe src="$url">No iframe support!</iframe>
-    </div>
-    $endpage
+        # javascript will position the iframe if window was resized (or zoomed)
+        return <<ENDFRAME;
+        $startpage
+        $script
+        <div class="LC_iframecontainer">
+            <iframe src="$url">$lt{'noif'} $noiframe</iframe>
+        </div>
+        $endpage
 ENDFRAME
+    }
 }
 
 sub handler {
@@ -203,8 +220,8 @@
 
 =over
 
-=item $url 
- 
+=item $url
+
 url to display by including in an iframe within a
 LON-CAPA page which has a standard LON-CAPA inline menu.
 
@@ -213,7 +230,7 @@
 breadcrumbs for unregistered urls
 (i.e., external resources in Supplemental Content).
 
-=item $absolute 
+=item $absolute
 
 contains protocol (http or https) followed by
 the hostname, if menu items in the standard LON-CAPA
@@ -224,7 +241,7 @@
 That will be the case where an external resource has been 
 served from port 80, when the server customarily serves
 requests using Apache/SSL (i.e., port 443). mod_rewrite 
-is used to switch requests for external resources  
+is used to switch requests for external resources 
 from https:// to http:// where the the URL of the remote site 
 specified in the resource itself is http://.
 
@@ -245,9 +262,3 @@
 
 =cut
 
-
-
-
-
-
-