diff --git a/_config.php b/_config.php index 64387dd..a4abe2d 100644 --- a/_config.php +++ b/_config.php @@ -1,5 +1,2 @@ diff --git a/code/IFramePage.php b/code/IFramePage.php index 4957a82..e2826d0 100644 --- a/code/IFramePage.php +++ b/code/IFramePage.php @@ -1,39 +1,86 @@ '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 (http://silverstripe.com) or relative to this site (about-us).'); + $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'); + } + } +} diff --git a/css/IFramePage.css b/css/IFramePage.css deleted file mode 100644 index ed08752..0000000 --- a/css/IFramePage.css +++ /dev/null @@ -1,8 +0,0 @@ -#IFramePageIFrame { - width: 100%; - border: none; -} - -#IFramePage { - padding: 10px; -} diff --git a/javascript/IFramePage.js b/javascript/IFramePage.js deleted file mode 100644 index 8026dfa..0000000 --- a/javascript/IFramePage.js +++ /dev/null @@ -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'; - } - ); - } - } -); diff --git a/javascript/iframe_page.js b/javascript/iframe_page.js new file mode 100644 index 0000000..aca41b5 --- /dev/null +++ b/javascript/iframe_page.js @@ -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); +} diff --git a/templates/Layout/IFramePage.ss b/templates/Layout/IFramePage.ss index 71c0010..1c3fbe5 100644 --- a/templates/Layout/IFramePage.ss +++ b/templates/Layout/IFramePage.ss @@ -1,13 +1,10 @@ -<% require ThemedCSS(IFramePage) %> -<% require javascript(jsparty/jquery/jquery.js) %> -<% require javascript(iframe/javascript/IFramePage.js) %> -

$Title

$Content - + <% if IFrameURL %> + + + <% end_if %> $BottomContent
diff --git a/tests/IFramePageTest.php b/tests/IFramePageTest.php new file mode 100644 index 0000000..9a407e9 --- /dev/null +++ b/tests/IFramePageTest.php @@ -0,0 +1,36 @@ +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'); + } +}