From 76b1b109e5fc332bd2fdb545f244c3b697accf7e Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Fri, 30 Sep 2016 23:26:22 -0400 Subject: [PATCH] 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 --- include/oembed.php | 41 ++++++++++++++++++++++++----------------- js/main.js | 13 +++++-------- view/global.css | 1 + 3 files changed, 30 insertions(+), 25 deletions(-) diff --git a/include/oembed.php b/include/oembed.php index c362ab45e..9c1b3d431 100755 --- 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 ''; - + $s = $a->get_baseurl() . '/oembed/'.base64url_encode($src); + return ''; } diff --git a/js/main.js b/js/main.js index aa6a48fcb..9f06a833e 100644 --- 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 8f0b06507..40919542d 100644 --- a/view/global.css +++ b/view/global.css @@ -115,6 +115,7 @@ span.connector { .embed_rich { display: block; + transition: height .75s; } /* Shared Messages */