ENHANCEMENT: add auto-sizing iframes, cleanup
This commit is contained in:
Mateusz Uzdowski
parent
3f01e07af6
commit
70cc4427d0
|
|
@ -1,5 +1,2 @@
|
|||
<?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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
#IFramePageIFrame {
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#IFramePage {
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -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';
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue