From 70cc4427d06feca09481406a435f3bd40050cf63 Mon Sep 17 00:00:00 2001
From: Mateusz Uzdowski <mateusz@silverstripe.com>
Date: Fri, 1 Jun 2012 17:21:05 +1200
Subject: [PATCH 1/2] ENHANCEMENT: add auto-sizing iframes, cleanup

---
 _config.php                    |  3 --
 code/IFramePage.php            | 52 ++++++++++++++++++++--------------
 css/IFramePage.css             |  8 ------
 javascript/IFramePage.js       | 46 ------------------------------
 templates/Layout/IFramePage.ss | 12 ++++----
 5 files changed, 36 insertions(+), 85 deletions(-)
 delete mode 100644 css/IFramePage.css
 delete mode 100644 javascript/IFramePage.js

diff --git a/_config.php b/_config.php
index 64387dd..a4abe2d 100644
--- a/_config.php
+++ b/_config.php
@@ -1,5 +1,2 @@
 <?php
 
-
-
-?>
diff --git a/code/IFramePage.php b/code/IFramePage.php
index 4957a82..36a30ff 100644
--- a/code/IFramePage.php
+++ b/code/IFramePage.php
@@ -11,29 +11,39 @@ class IFramePage extends 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', 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)'));
+
+		return $fields;
 	}
 }
 
+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
+			);
+		}
+	}
+}
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/templates/Layout/IFramePage.ss b/templates/Layout/IFramePage.ss
index 71c0010..201c749 100644
--- a/templates/Layout/IFramePage.ss
+++ b/templates/Layout/IFramePage.ss
@@ -1,13 +1,11 @@
-<% 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 DynamicHeight %>
+		<iframe src="$IFrameUrl" class="iframeautosize" style="width: 100%;">$AlternateContent</iframe>
+	<% else %>
+		<iframe src="$IFrameUrl" style="width: 100%; height: {$FixedHeight}px;">$AlternateContent</iframe>
+	<% end_if %>
 	$BottomContent
 </div>

From 021e508ca957a258f10ce13721164f4446c136a9 Mon Sep 17 00:00:00 2001
From: Mateusz Uzdowski <mateusz@silverstripe.com>
Date: Tue, 5 Jun 2012 11:30:13 +1200
Subject: [PATCH 2/2] ENHANCEMENT: refactor the IFramePage, add tests

---
 code/IFramePage.php            | 87 ++++++++++++++++++++++++----------
 javascript/iframe_page.js      | 34 +++++++++++++
 templates/Layout/IFramePage.ss |  7 ++-
 tests/IFramePageTest.php       | 36 ++++++++++++++
 4 files changed, 135 insertions(+), 29 deletions(-)
 create mode 100644 javascript/iframe_page.js
 create mode 100644 tests/IFramePageTest.php

diff --git a/code/IFramePage.php b/code/IFramePage.php
index 36a30ff..e2826d0 100644
--- a/code/IFramePage.php
+++ b/code/IFramePage.php
@@ -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');
 		}
 	}
 }
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 201c749..1c3fbe5 100644
--- a/templates/Layout/IFramePage.ss
+++ b/templates/Layout/IFramePage.ss
@@ -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>
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 @@
+<?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');
+	}
+}