diff --git a/r2/r2/public/static/js/embed.js b/r2/r2/public/static/js/embed.js index c78eb04cc..081599cfc 100644 --- a/r2/r2/public/static/js/embed.js +++ b/r2/r2/public/static/js/embed.js @@ -80,6 +80,39 @@ }, data); } + function serializeOptions(options) { + return JSON.stringify(_.pick(options, 'live', 'parent')); + } + + function initFrame(popup, options) { + var $preview = popup.$.find('#embed-preview'); + var serializedOptions = typeof options !== 'string' ? + serializeOptions(options) : options; + + window.rembeddit.init(function() { + var height = 0; + + var reflow = setInterval(function() { + var $next = $preview.find('iframe:last-child') + var newHeight = $next.height(); + + if (height !== newHeight) { + height = newHeight; + } else { + clearInterval(reflow); + + $preview.find('iframe') + .hide() + .last() + .show() + .attr('data-options', serializedOptions); + + $preview.css('height', 'auto'); + } + }, 100); + }); + } + $('body').on('click', '.embed-comment', function(e) { var $el = $(e.target); var data = $el.data(); @@ -104,17 +137,23 @@ var data = $el.data(); var options = getEmbedOptions(data); + var serializedOptions = serializeOptions(options); var html = options.html; var height = $preview.height(); $textarea.val(html + options.scripts); if ($option.data('rerender') !== false) { - $preview.height(height).html(html); + var selector = '[data-options="' + r.utils.escapeSelector(serializedOptions) + '"]'; + var $cached = $preview.find(selector); - window.rembeddit.init(function () { - $preview.css({height: 'auto'}); - }); + if ($cached.length) { + $cached.show().siblings().hide(); + } else { + $preview.height(height).append($(html).hide()); + + initFrame(popup, serializedOptions); + } } }); @@ -126,8 +165,12 @@ popup.$.remove(); }); + popup.on('show.r.popup', function() { + $preview.find('.reddit-embed').hide(); + }); + popup.on('opened.r.popup', function() { - window.rembeddit.init(); + initFrame(popup, embedOptions); }); popup.show(); diff --git a/r2/r2/public/static/js/embed/comment-embed.js b/r2/r2/public/static/js/embed/comment-embed.js index 636a46b5b..e0457318f 100644 --- a/r2/r2/public/static/js/embed/comment-embed.js +++ b/r2/r2/public/static/js/embed/comment-embed.js @@ -59,6 +59,7 @@ return; } + iframe.height = 0; iframe.width = '100%'; iframe.scrolling = 'no'; iframe.frameBorder = 0; @@ -68,6 +69,8 @@ App.receiveMessageOnce(iframe, 'loaded', function(e) { embed.parentNode.removeChild(embed); + iframe.style.display = 'block'; + callback && callback(e); }); @@ -79,7 +82,6 @@ } iframe.height = (e.detail + 'px'); - iframe.style.display = 'block'; }); diff --git a/r2/r2/public/static/js/utils.js b/r2/r2/public/static/js/utils.js index 107421461..eb817ce07 100644 --- a/r2/r2/public/static/js/utils.js +++ b/r2/r2/public/static/js/utils.js @@ -1,4 +1,9 @@ r.utils = { + + escapeSelector: function(str) { + return str.replace(/([ #;?%&,.+*~\':"!^$[\]()=>|\/@])/g,'\\$1'); + }, + clamp: function(val, min, max) { return Math.max(min, Math.min(max, val)) },