ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make link placeholders respect iframe style attributes 

closes CNVS-38624

Test Plan:
  - Add a page to a course
  - Use the HTML editor to put in an iframe specifying width
    and height in a style tag. Something like:
        <iframe style="width: 800px; height: 600px;" src="https://google.com">
        </iframe>
  - Save the page
  - Edit the page, notice that the placeholder for the iframe has the same
    dimensions you specified previously.

Change-Id: I0ba0f7fb4fcf49a9ca8bd66e77148c94fce2baa4
Reviewed-on: https://gerrit.instructure.com/128233
Tested-by: Jenkins
Reviewed-by: brian kirkby <bkirkby@instructure.com>
QA-Review: Tucker McKnight <tmcknight@instructure.com>
Product-Review: Brent Burgoyne <bburgoyne@instructure.com>
This commit is contained in:
Clay Diffrient 2017-10-03 10:39:38 -06:00
parent 68d04c6a0b
commit 92213f0911
2 changed files with 47 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
public/javascripts/tinymce_plugins/instructure_links/links.js
View File

@ -352,19 +352,23 @@ import YouTubeApi from './youtube_api'
$(ed.getBody()).find("iframe").each(function() {
var $frame = $(this);
var $link = $("<img/>");
var $parent = $frame.parent();
$link.addClass('iframe_placeholder');
$link.attr('rel', $frame.attr('src'));
$link.attr('style', $frame.attr('style'));
$link.attr('style', $frame.attr('style') || $parent.attr('style'));
$link.css('display', 'block');
$link.attr('_iframe_style', $frame.attr('style'));
$link.attr('_iframe_style', $frame.attr('style') || $parent.attr('style'));
var width = ($frame.attr('width') || $frame.css('width'));
if(width == 'auto') { width = null; }
if ($frame.attr('style') || $parent.attr('style')) {
width = $frame[0].style.width || $parent[0].style.width || width
}
if(!width || width == '100%' || width == 'auto') {
var edWidth = $(ed.contentAreaContainer).width();
$link.attr('width', edWidth - 15);
$link.css('width', edWidth - 15);
$link.addClass('fullWidth');
} else {
} else if (!$link[0].style.width) {
$link.attr('width', width);
$link.css('width', width);
}
@ -385,10 +389,13 @@ import YouTubeApi from './youtube_api'
$link.attr('title', "This frame will embed the url:\r\n" + split.join("\r\n"));
var height = $frame.attr('height') || $frame.css('height');
if(height == 'auto') { height = null; }
if ($frame.attr('style') || $parent.attr('style')) {
height = $frame[0].style.height || $parent[0].style.height || height
}
if(!height) {
$link.attr('height', 300);
$link.css('height', 300);
} else {
} else if (!$link[0].style.height) {
$link.attr('height', height);
$link.css('height', height);
}
@ -432,10 +439,14 @@ import YouTubeApi from './youtube_api'
$holder.css('width', width);
$frame.attr('src', $holder.attr('rel'));
$frame.attr('style', $holder.attr('_iframe_style'));
$frame.attr('height', height);
$frame.css('height', height);
$frame.attr('width', width);
$frame.css('width', width);
if (!$frame[0].style.height.length) {
$frame.attr('height', height);
$frame.css('height', height);
}
if (!$frame[0].style.width.length) {
$frame.attr('width', width);
$frame.css('width', width);
}
$(this).after($frame);
$(this).remove();
});

28
spec/coffeescripts/tinymce_plugins/instructure_links/linkable_editorSpec.coffee
View File

@ -108,3 +108,31 @@ define [
equal($iframe.attr('width'), 300)
equal($iframe.attr('height'), 600)
test "links initEditor PreProcess event doesn't use width/height attributes if style is present and contains those items", ->
$('#fixtures').html('<div id="some_editor" data-value="42"><img class="iframe_placeholder" _iframe_style="height: 500px; width: 800px;" src="some_img.png" style="height: 500px; width: 800px;"></div>')
$editor = $(new LinkableEditor(rawEditor))
links.initEditor($editor)
event = $.Event('PreProcess')
event.node = $('#fixtures')[0]
$editor.trigger(event)
$iframe = $('#fixtures').find('iframe')
equal($iframe.attr('style'), "height: 500px; width: 800px;")
ok(!$iframe.attr('width'))
ok(!$iframe.attr('height'))
QUnit.module "updateLinks",
setup: ->
$('#fixtures').html('<div id="some_editor" data-value="42"><p><span contenteditable="false" data-mce-object="iframe" class="mce-preview-object mce-object-iframe" data-mce-p-src="//simplydiffrient.com"><iframe style="width: 800px; height: 600px;" src="//simplydiffrient.com" frameborder="0"></iframe><span class="mce-shim"></span></span></p></div>')
teardown: ->
$("#fixtures").empty()
test "it sets up the placeholder with attributes from the iframe's style property if it exists", ->
$editor = $(new LinkableEditor(rawEditor))
links.initEditor($editor)
mockEditor =
contentAreaContainer: $('<span>')
getBody: ->
$('#fixtures')[0]
links.updateLinks(mockEditor)
equal($('.iframe_placeholder').height(), 600, 'Height should be correct')
equal($('.iframe_placeholder').width(), 800, 'Width should be correct')