Fix Issue #2823 - Ugly scrollbars in oembed iframes and broken resizing

- Fix _resizeIframe function, shorten the timeout between calls
- Simplify the oembed iframe generation code and reduce the minimum
iframe height to 200px
- Add smooth CSS transition for iframe resizing

diff --git a/include/oembed.php b/include/oembed.php
index c362ab45e6516fd31c9a0078a9067a6f5c12f6f0..9c1b3d431f798071e4c94edb904e142d7fe77cc8 100755 (executable)
--- a/include/oembed.php
+++ b/include/oembed.php
@@ -209,25 +209,32 @@ function oembed_format_object($j){
        return mb_convert_encoding($ret, 'HTML-ENTITIES', mb_detect_encoding($ret));
 }
 
-function oembed_iframe($src,$width,$height) {
-
-       if(! $width || strstr($width,'%'))
-               $width = '640';
-       if(! $height || strstr($height,'%')) {
-               $height = '300';
-               $resize = 'onload="resizeIframe(this);"';
-       } else
-               $resize = '';
-
-       // try and leave some room for the description line.
-       $height = intval($height) + 80;
-       $width  = intval($width) + 40;
+/**
+ * Generates the iframe HTML for an oembed attachment. Width and height are given
+ * by the remote, and are regularly too small for the generated iframe.
+ *
+ * The width is entirely discarded for the actual width of the post, while fixed
+ * height is used as a starting point before the inevitable resizing.
+ *
+ * Since the iframe is automatically resized on load, there are no need for ugly
+ * and impractical scrollbars.
+ *
+ * @param string $src Original remote URL to embed
+ * @param string $width
+ * @param string $height
+ * @return string
+ *
+ * @see oembed_format_object()
+ */
+function oembed_iframe($src, $width, $height) {
+       if (!$height || strstr($height,'%')) {
+               $height = '200';
+       }
+       $width = '100%';
 
        $a = get_app();
-
-       $s = $a->get_baseurl()."/oembed/".base64url_encode($src);
-       return '<iframe '.$resize.' class="embed_rich" height="'.$height.'" width="'.$width.'" src="'.$s.'" frameborder="no">'.t('Embedded content').'</iframe>';
-
+       $s = $a->get_baseurl() . '/oembed/'.base64url_encode($src);
+       return '<iframe onload="resizeIframe(this);" class="embed_rich" height="' . $height . '" width="' . $width . '" src="' . $s . '" scrolling="no" frameborder="no">' . t('Embedded content') . '</iframe>';
 }
 
 

diff --git a/js/main.js b/js/main.js
index aa6a48fcb64e9c79c558aefee48ac2e229005d5f..9f06a833e06faedba0274d46a2b74ad76e09d093 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -5,17 +5,14 @@
 
        function _resizeIframe(obj, desth) {
                var h = obj.style.height;
-               var ch = obj.contentWindow.document.body.scrollHeight + 'px';
-               if (h==ch) {
+               var ch = obj.contentWindow.document.body.scrollHeight;
+               if (h == (ch + 'px')) {
                        return;
                }
-               //console.log("_resizeIframe", obj, desth, ch);
-               if (desth!=ch) {
-                       setTimeout(_resizeIframe, 500, obj, ch);
-               } else {
-                       if (ch>0) obj.style.height  = ch;
-                       setTimeout(_resizeIframe, 1000, obj, ch);
+               if (desth == ch && ch>0) {
+                       obj.style.height  = ch + 'px';
                }
+               setTimeout(_resizeIframe, 100, obj, ch);
        }
 
        function openClose(theID) {

diff --git a/view/global.css b/view/global.css
index 8f0b06507c4b79be4266842d2d9abae0d62677b5..40919542de8233d4bd43769462bb4be8914c81b0 100644 (file)
--- a/view/global.css
+++ b/view/global.css
@@ -115,6 +115,7 @@ span.connector {
 
 .embed_rich {
   display: block;
+  transition: height .75s;
 }
 
 /* Shared Messages */