tonyair
/
silverstripe-iframe
mirror of https://github.com/silverstripe/silverstripe-iframe
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #1 from silverstripe-droptables/ssexpress 

Refactor the IFramePage and add features.
This commit is contained in:
Mateusz U 2012-06-04 16:31:35 -07:00
parent 3f01e07af6 021e508ca9
commit d188d374fa
7 changed files with 145 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_config.php
View File

@ -1,5 +1,2 @@
<?php
?>

95
code/IFramePage.php
View File

@ -1,39 +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.Content.Main', 'Content');
$fields->addFieldToTab('Root.Content.Main', new TextField('IFrameUrl', 'IFrame URL'));
//$fields->addFieldToTab('Root.Content.Main', new CheckboxField('DynamicHeight', 'Dynamically resize the IFrame height (this doesn\'t work if IFrame URL is on a different domain)'));
$fields->addFieldToTab('Root.Content.Main', new NumericField('FixedHeight', 'Fixed Height (in pixels)'));
$fields->addFieldToTab('Root.Content.Main', new HtmlEditorField('Content', 'Content (appears above IFrame)'));
$fields->addFieldToTab('Root.Content.Main', new HtmlEditorField('BottomContent', 'Content (appears below IFrame)'));
$fields->addFieldToTab('Root.Content.Main', new HtmlEditorField('AlternateContent', 'Alternate Content (appears when user has IFrames disabled)'));
return $fields;
}
}
class IFramePage_Controller extends Page_Controller {
function Height() {
/*if($this->DynamicHeight) {
return 'class="iframeautosize"';
} else {*/
return 'style="height: ' . $this->FixedHeight . 'px;"';
//}
$fields->removeFieldFromTab('Root.Main', 'Content');
$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->IFrameURL) {
Requirements::javascript('iframe/javascript/iframe_page.js');
}
}
}

8
css/IFramePage.css
View File

@ -1,8 +0,0 @@
#IFramePageIFrame {
width: 100%;
border: none;
}
#IFramePage {
padding: 10px;
}

46
javascript/IFramePage.js
View File

@ -1,46 +0,0 @@
$(document).ready(function()
{
// Set specific variable to represent all iframe tags.
var iFrames = document.getElementsByTagName('iframe');
// Resize heights.
function iResize()
{
// Iterate through all iframes in the page.
for (var i = 0, j = iFrames.length; i < j; i++)
{
// Set inline style to equal the body height of the iframed content.
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
}
}
// Check if browser is Safari or Opera.
if (jquery.browser.safari || $.browser.opera)
{
// Start timer when loaded.
$('iframe').load(function()
{
setTimeout(iResize, 0);
}
);
// Safari and Opera need a kick-start.
for (var i = 0, j = iFrames.length; i < j; i++)
{
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
}
else
{
// For other good browsers.
$('iframe').load(function()
{
// Set inline style to equal the body height of the iframed content.
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
}
);
}
}
);

34
javascript/iframe_page.js Normal file
View 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);
}

11
templates/Layout/IFramePage.ss
View File

@ -1,13 +1,10 @@
<% require ThemedCSS(IFramePage) %>
<% require javascript(jsparty/jquery/jquery.js) %>
<% require javascript(iframe/javascript/IFramePage.js) %>
<div class="typography">
<h2>$Title</h2>
$Content
<iframe id="IFramePageIFrame" src="$IFrameUrl" $Height>
$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
View 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');
}
}