Feature #18106 » tree_collapse_expand.diff
| . (working copy) | ||
|---|---|---|
|
if ($this->resizable) {
|
||
|
$this->content.= '
|
||
|
<frameset cols="'.$width.',*"'.$onLoadHandler.'>
|
||
|
<frameset id="typo3-content-frameset" cols="'.$width.',*"'.$onLoadHandler.'>
|
||
|
<frame name="nav_frame" src="'.$URL_nav.'" marginwidth="0" marginheight="0" scrolling="auto" />
|
||
|
<frame name="list_frame" src="'.$URL_list.'" marginwidth="0" marginheight="0" scrolling="auto" />
|
||
|
</frameset>
|
||
| ... | ... | |
|
} else {
|
||
|
$this->content.= '
|
||
|
<frameset cols="'.$width.',8,*" framespacing="0" frameborder="0" border="0"'.$onLoadHandler.'>
|
||
|
<frameset id="typo3-content-frameset" cols="'.$width.',8,*" framespacing="0" frameborder="0" border="0"'.$onLoadHandler.'>
|
||
|
<frame name="nav_frame" src="'.$URL_nav.'" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" noresize="noresize" />
|
||
|
<frame name="border_frame" src="'.(isset($GLOBALS['TBE_STYLES']['border']) ? $GLOBALS['TBE_STYLES']['border'] : 'border.html').'" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" noresize="noresize" />
|
||
|
<frame name="list_frame" src="'.$URL_list.'" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" noresize="noresize" />
|
||
| . (working copy) | ||
|---|---|---|
|
<head>
|
||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
<title>Border between Navigation and List frame in TYPO3</title>
|
||
|
<style type="text/css">
|
||
|
/*<![CDATA[*/
|
||
|
body {
|
||
|
background-color: #edeeee;
|
||
|
}
|
||
|
#toggle-tree {
|
||
|
height: 500px;
|
||
|
background-position: 0px 250px;
|
||
|
cursor: pointer;
|
||
|
border-right: 1px solid #ddd;
|
||
|
}
|
||
|
.collapsed {
|
||
|
background-image: url("icons/border_expand.gif");
|
||
|
background-repeat: no-repeat;
|
||
|
}
|
||
|
.expanded {
|
||
|
background-image: url("icons/border_collapse.gif");
|
||
|
background-repeat: no-repeat;
|
||
|
border-left: 1px solid #ddd;
|
||
|
}
|
||
|
/*]]>*/
|
||
|
</style>
|
||
|
<script type="text/javascript" src="../../contrib/prototype/prototype.js"></script>
|
||
|
<script type="text/javascript">
|
||
|
/*<![CDATA[*/
|
||
|
var origColumns = 0;
|
||
|
var frameSet = null;
|
||
|
var collapseState = 'expanded';
|
||
|
Event.observe(document, 'dom:loaded', function() {
|
||
|
$('toggle-tree').observe('click', toggleTree);
|
||
|
frameSet = parent.document.body;
|
||
|
origColumns = Element.readAttribute(frameSet, 'cols');
|
||
|
});
|
||
|
Event.observe(window, 'load', resizeBorder);
|
||
|
Event.observe(window, 'resize', resizeBorder);
|
||
|
function toggleTree() {
|
||
|
var columns = origColumns.split(',');
|
||
|
if(collapseState == 'expanded') {
|
||
|
columns[0] = '0';
|
||
|
Element.writeAttribute(frameSet, 'cols', columns.join(','));
|
||
|
$('toggle-tree').removeClassName('expanded');
|
||
|
$('toggle-tree').addClassName('collapsed');
|
||
|
collapseState = 'collapsed';
|
||
|
} else {
|
||
|
Element.writeAttribute(frameSet, 'cols', origColumns);
|
||
|
$('toggle-tree').removeClassName('collapsed');
|
||
|
$('toggle-tree').addClassName('expanded');
|
||
|
collapseState = 'expanded';
|
||
|
}
|
||
|
}
|
||
|
function resizeBorder() {
|
||
|
var documentHeight = document.viewport.getHeight();
|
||
|
$('toggle-tree').setStyle({
|
||
|
height: documentHeight + 'px'
|
||
|
});
|
||
|
}
|
||
|
/*]]>*/
|
||
|
</script>
|
||
|
</head>
|
||
|
<body style="background-color:#EFEFF4;">
|
||
|
|
||
|
<body>
|
||
|
<div id="toggle-tree" class="expanded"> </div>
|
||
|
</body>
|
||
|
</html>
|
||
|
</html>
|
||
