mirror of
https://github.com/silverstripe/silverstripe-iframe
synced 2024-10-22 11:05:51 +02:00
ENHANCEMENT: refactor the IFramePage, add tests
This commit is contained in:
Mateusz Uzdowski
parent
70cc4427d0
commit
021e508ca9
@ -1,49 +1,86 @@
|
||||
<?php
|
||||
/**
|
||||
* Iframe page type embeds an iframe of URL of choice into the page.
|
||||
* CMS editor can choose width, height, or set it to attempt automatic size configuration.
|
||||
*/
|
||||
|
||||
class IFramePage extends Page {
|
||||
static $db = array(
|
||||
'IFrameUrl' => 'Text',
|
||||
'DynamicHeight' => 'Boolean',
|
||||
'FixedHeight' => 'Int',
|
||||
'IFrameURL' => 'Text',
|
||||
'AutoHeight' => 'Boolean(1)',
|
||||
'AutoWidth' => 'Boolean(1)',
|
||||
'FixedHeight' => 'Int(500)',
|
||||
'FixedWidth' => 'Int(0)',
|
||||
'AlternateContent' => 'HTMLText',
|
||||
'BottomContent' => 'HTMLText'
|
||||
);
|
||||
|
||||
static $defaults = array(
|
||||
'AutoHeight' => '1',
|
||||
'AutoWidth' => '1',
|
||||
'FixedHeight' => '500',
|
||||
'FixedWidth' => '0'
|
||||
);
|
||||
|
||||
static $description = 'Embeds an iframe into the body of the page.';
|
||||
|
||||
function getCMSFields() {
|
||||
$fields = parent::getCMSFields();
|
||||
|
||||
$fields->removeFieldFromTab('Root.Main', 'Content');
|
||||
$fields->addFieldToTab('Root.Main', new TextField('IFrameUrl', 'IFrame URL'));
|
||||
$fields->addFieldToTab('Root.Main', new CheckboxField('DynamicHeight', 'Dynamically resize the IFrame height (this doesn\'t work if IFrame URL is on a different domain)'));
|
||||
$fields->addFieldToTab('Root.Main', new NumericField('FixedHeight', 'Fixed Height (in pixels)'));
|
||||
$fields->addFieldToTab('Root.Main', new HtmlEditorField('Content', 'Content (appears above IFrame)'));
|
||||
$fields->addFieldToTab('Root.Main', new HtmlEditorField('BottomContent', 'Content (appears below IFrame)'));
|
||||
$fields->addFieldToTab('Root.Main', new HtmlEditorField('AlternateContent', 'Alternate Content (appears when user has IFrames disabled)'));
|
||||
$fields->addFieldToTab('Root.Main', $url = new TextField('IFrameURL', 'Iframe URL'));
|
||||
$url->setRightTitle('Can be absolute (<em>http://silverstripe.com</em>) or relative to this site (<em>about-us</em>).');
|
||||
$fields->addFieldToTab('Root.Main', new CheckboxField('AutoHeight', 'Auto height (only works with same domain URLs)'));
|
||||
$fields->addFieldToTab('Root.Main', new CheckboxField('AutoWidth', 'Auto width (100% of the available space)'));
|
||||
$fields->addFieldToTab('Root.Main', new NumericField('FixedHeight', 'Fixed height (in pixels)'));
|
||||
$fields->addFieldToTab('Root.Main', new NumericField('FixedWidth', 'Fixed width (in pixels)'));
|
||||
$fields->addFieldToTab('Root.Main', new HtmlEditorField('Content', 'Content (appears above iframe)'));
|
||||
$fields->addFieldToTab('Root.Main', new HtmlEditorField('BottomContent', 'Content (appears below iframe)'));
|
||||
$fields->addFieldToTab('Root.Main', new HtmlEditorField('AlternateContent', 'Alternate Content (appears when user has iframes disabled)'));
|
||||
|
||||
return $fields;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute class from the size parameters.
|
||||
*/
|
||||
function getClass() {
|
||||
$class = '';
|
||||
if ($this->AutoHeight) {
|
||||
$class .= 'iframepage-height-auto';
|
||||
}
|
||||
|
||||
return $class;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute style from the size parameters.
|
||||
*/
|
||||
function getStyle() {
|
||||
$style = '';
|
||||
|
||||
// Always add fixed height as a fallback if autosetting or JS fails.
|
||||
$height = $this->FixedHeight;
|
||||
if (!$height) $height = 800;
|
||||
$style .= "height: {$height}px; ";
|
||||
|
||||
if ($this->AutoWidth) {
|
||||
$style .= "width: 100%; ";
|
||||
}
|
||||
else if ($this->FixedWidth) {
|
||||
$style .= "width: {$this->FixedWidth}px; ";
|
||||
}
|
||||
|
||||
return $style;
|
||||
}
|
||||
}
|
||||
|
||||
class IFramePage_Controller extends Page_Controller {
|
||||
function init() {
|
||||
parent::init();
|
||||
|
||||
if ($this->DynamicHeight) {
|
||||
Requirements::customScript(<<<SCRIPT
|
||||
|
||||
if (typeof jQuery!=='undefined') {
|
||||
jQuery(function($) {
|
||||
var iframe = $('iframe.iframeautosize');
|
||||
iframe.load(function() {
|
||||
var iframeSize = $(iframe[0].contentWindow.document.body).height();
|
||||
iframeSize = (parseInt(iframeSize)+100)+'px';
|
||||
iframe.attr('height', iframeSize);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
SCRIPT
|
||||
);
|
||||
if ($this->IFrameURL) {
|
||||
Requirements::javascript('iframe/javascript/iframe_page.js');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
34
javascript/iframe_page.js
Normal file
34
javascript/iframe_page.js
Normal file
@ -0,0 +1,34 @@
|
||||
if (typeof jQuery!=='undefined') {
|
||||
(function($) {
|
||||
var iframe = $('#Iframepage-iframe');
|
||||
var loading = $('#Iframepage-loading');
|
||||
|
||||
// Add not-ready marker for third party use.
|
||||
iframe.addClass('iframepage-not-ready');
|
||||
// Show loading message
|
||||
iframe.hide();
|
||||
loading.show();
|
||||
|
||||
$(function() {
|
||||
iframe.load(function() {
|
||||
// Iframe content has been loaded
|
||||
loading.hide();
|
||||
iframe.show();
|
||||
|
||||
if (iframe.hasClass('iframepage-height-auto')===true) {
|
||||
// Try to set the height to the height of the iframe content (only possible if it is the same domain)
|
||||
try {
|
||||
var iframeInsideSize = $(iframe[0].contentWindow.document.body).height();
|
||||
iframe.css('height', (parseInt(iframeInsideSize)+100)+'px');
|
||||
}
|
||||
catch(e) {
|
||||
// Failed to set the height, we fall back to default css height.
|
||||
}
|
||||
}
|
||||
|
||||
// Finally, remove the marker
|
||||
iframe.removeClass('iframepage-not-ready');
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
}
|
||||
@ -2,10 +2,9 @@
|
||||
<h2>$Title</h2>
|
||||
|
||||
$Content
|
||||
<% if DynamicHeight %>
|
||||
<iframe src="$IFrameUrl" class="iframeautosize" style="width: 100%;">$AlternateContent</iframe>
|
||||
<% else %>
|
||||
<iframe src="$IFrameUrl" style="width: 100%; height: {$FixedHeight}px;">$AlternateContent</iframe>
|
||||
<% if IFrameURL %>
|
||||
<span id="Iframepage-loading" style="display: none;">External content is loading...</span>
|
||||
<iframe id="Iframepage-iframe" style="$Style" src="$IFrameURL" class="$Class">$AlternateContent</iframe>
|
||||
<% end_if %>
|
||||
$BottomContent
|
||||
</div>
|
||||
|
||||
36
tests/IFramePageTest.php
Normal file
36
tests/IFramePageTest.php
Normal file
@ -0,0 +1,36 @@
|
||||
<?php
|
||||
|
||||
class IFramePageTest extends SapphireTest {
|
||||
function testGetClass() {
|
||||
$iframe = new IFramePage();
|
||||
$iframe->AutoHeight = 1;
|
||||
$iframe->getClass();
|
||||
|
||||
$this->assertContains('iframepage-height-auto', $iframe->getClass());
|
||||
|
||||
$iframe->AutoHeight = 0;
|
||||
$iframe->getClass();
|
||||
|
||||
$this->assertNotContains('iframepage-height-auto', $iframe->getClass());
|
||||
}
|
||||
|
||||
function testGetStyle() {
|
||||
$iframe = new IFramePage();
|
||||
|
||||
$iframe->FixedHeight = 0;
|
||||
$iframe->getStyle();
|
||||
$this->assertContains('height: 800px', $iframe->getStyle(), 'Height defaults to 800 if not set.');
|
||||
|
||||
$iframe->FixedHeight = 100;
|
||||
$iframe->getStyle();
|
||||
$this->assertContains('height: 100px', $iframe->getStyle(), 'Fixed height is settable');
|
||||
|
||||
$iframe->AutoWidth = 1;
|
||||
$iframe->FixedWidth = '200';
|
||||
$this->assertContains('width: 100%', $iframe->getStyle(), 'Auto width overrides fixed width');
|
||||
|
||||
$iframe->AutoWidth = 0;
|
||||
$iframe->FixedWidth = '200';
|
||||
$this->assertContains('width: 200px', $iframe->getStyle(), 'Fixed width is settable');
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user