TYPO3 Core

$this->doc->loadJavascriptLib('contrib/scriptaculous/scriptaculous.js?load=effects');

'.($this->cMR?"jumpTo(top.fsMod.recentIds['web'],'');":'').

(!$GLOBALS['BE_USER']->getTSConfigVal('options.pageTree.hideFilter') ? 'var TYPO3PageTreeFilter = new PageTreeFilter();' : '') . '

$hasFilterBox = !$GLOBALS['BE_USER']->getTSConfigVal('options.pageTree.hideFilter');

//prepare onclick links

$onclickNewPageWizard = 'top.content.list_frame.location.href=top.TS.PATH_typo3+\'db_new.php?id=1&pagesOnly=1\';"';

<div id="treeOptions">

<div id="treeOptionButtons">

<div class="caption">'.

// CSH icon:

t3lib_BEfunc::cshItem('xMOD_csh_corebe', 'pagetree', $GLOBALS['BACK_PATH']).

($hasFilterBox ? '

<a href="#" id="toggleTreeFilter">

<img'.t3lib_iconWorks::skinImg('',$GLOBALS['BE_USER']->uc['moduleData']['pageTree']['filterBox'] ? 'gfx/arrowright.gif' : 'gfx/arrowdown.gif','width="16" height="16"').' title="show filter" alt="" />

<span>'.$LANG->sL('LLL:EXT:lang/locallang_misc.xml:pageTree_search_filter',1).'</span>

</a>' : '') . '

</div>

<div class="options">'.

// build the toolbar icons

'<a href="'.htmlspecialchars(t3lib_div::getIndpEnv('REQUEST_URI')).'"><img'.t3lib_iconWorks::skinImg('','gfx/refresh_n.gif','width="14" height="14"').' title="'.$LANG->sL('LLL:EXT:lang/locallang_core.php:labels.refresh',1).'" alt="" /></a>

<a href="#" onclick="'.$onclickNewPageWizard.'"><img'.t3lib_iconWorks::skinImg('','gfx/new_page.gif','width="14" height="14"').' title="'.$LANG->sL('LLL:EXT:lang/locallang_core.php:labels.new',1).'" alt="" /></a>

</div>

<br class="clearboth" />

</div>';

if ($hasFilterBox) {

<div id="treeFilterBox"'.($GLOBALS['BE_USER']->uc['moduleData']['pageTree']['filterBox'] ? ' style="display:none;"' : '').'>'

.'<input type="text" value="" name="treeFilter" id="treeFilter" />

$this->content .= '<div id="PageTreeDiv">'.$tree.'</div>';

var effectDuration = 0.5;

?>

$menu .= '<li id="'.$moduleKey.'" class="menuSection" title="'.$moduleData['description'].'"><div class="'.($menuState ? 'collapsed' : 'expanded').'">'.$menustate.' '.$moduleLabel.'</div>';

?>

/* - - - - - - - - - - - - - - - - - - - - -

Title : TYPO3 backend styles

Author : Ingo Renner <ingo@typo3.org>

URL : http://typo3.org

Description : styles the TYPO3 backend

$Id$

- - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - - - - - - - - - - - -

TYPO3 backend scaffolding

- - - - - - - - - - - - - - - - - - - - - */

body#typo3-backend-php {

margin: 0px;

padding: 0px;

}

#typo3-backend {

width: 100%;

}

#typo3-logo,

#typo3-side-menu {

float: left;

width: 139px;

}

#typo3-top-container {

height: 25px;

/* background-color: #9ba1a8; */

}

#typo3-main-container {

clear: both;

}

#typo3-top,

#typo3-content {

margin-left: 140px;

}

#typo3-side-menu {

overflow: hidden;

border-right: 1px solid #ddd;

background:#edeeee;

}

iframe {

width: 100%;

}

#typo3-content,

#typo3-main-container,

#typo3-main-container * iframe {

height: 660px;

z-index: 1;

}

/* - - - - - - - - - - - - - - - - - - - - -

Title : TYPO3 backend vertical menu styles

Author : Ingo Renner <ingo@typo3.org>

URL : http://typo3.org

Description : styles the TYPO3 backend

$Id$

- - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - - - - - - - - - - - -

TYPO3 backend menu - vertical

- - - - - - - - - - - - - - - - - - - - - */

#typo3-menu,

#typo3-menu ul {

list-style: none;

padding: 0px;

margin: 0px;

}

#typo3-menu {

padding-top: 2px;

padding-left: 1px;

/*background:#d1d7e2;*/

}

#typo3-menu li {

clear: both;

}

#typo3-menu li div.collapsed {

background: url(../gfx/arrowright.gif) 0 0 no-repeat;

}

#typo3-menu li div.expanded {

background: url(../gfx/arrowdown.gif) 0 0 no-repeat;

}

#typo3-menu li div {

cursor:pointer;

font-size:11px;

font-weight:bold;

padding: 2px 0 4px 16px;

color:#505d6d;

margin:8px 0 2px 4px;

}

#typo3-menu li ul {

padding-left:20px;

}

#typo3-menu li div img {

vertical-align:top;

margin-right:2px;

}

#typo3-menu li ul li {

font-weight: normal;

width: 118px;

padding: 2px 0px 4px 20px;

margin-left: -20px;

margin-bottom: 1px;

cursor: pointer;

}

#typo3-menu li ul li a {

text-decoration: none;

display: block;

}

#typo3-menu li ul li a img {

float: left;

margin-right:2px;

}

#typo3-menu li.menuSection li:hover,

#typo3-menu li.highlighted {

background-color: #fff;

}

#typo3-menu li.highlighted {

font-weight: bold;

}

Effect.BlindUp(subModulesMenu, {duration : effectDuration});

$(mainModuleHeader).removeClassName('expanded');

$(mainModuleHeader).addClassName('collapsed');

Effect.BlindDown(subModulesMenu, {duration : effectDuration});

$(mainModuleHeader).removeClassName('collapsed');

$(mainModuleHeader).addClassName('expanded');

/***************************************************************

*

* javascript functions regarding the page & folder tree

* relies on the javascript library "prototype"

*

*

* Copyright notice

*

* (c) 2006 Benjamin Mack <www.xnos.org>

* All rights reserved

*

* This script is part of the TYPO3 t3lib/ library provided by

* Kasper Skaarhoj <kasper@typo3.com> together with TYPO3

*

* Released under GNU/GPL (see license file in tslib/)

*

* This script is distributed in the hope that it will be useful,

* but WITHOUT ANY WARRANTY; without even the implied warranty of

* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

*

* This copyright notice MUST APPEAR in all copies of this script

*

* TYPO3 SVN ID: $Id: tree.js 2911 2008-01-15 22:49:57Z ingorenner $

*

***************************************************************/

var Tree = {

thisScript: 'ajax.php',

ajaxID: 'SC_alt_db_navframe::expandCollapse', // has to be either "SC_alt_db_navframe::expandCollapse" or "SC_alt_file_navframe::expandCollapse"

frameSetModule: null,

activateDragDrop: true,

highlightClass: 'active',

// reloads a part of the page tree (useful when "expand" / "collapse")

load: function(params, isExpand, obj) {

// fallback if AJAX is not possible (e.g. IE < 6)

if (typeof Ajax.getTransport() != 'object') {

window.location.href = this.thisScript + '?ajaxID=' + this.ajaxID + '&PM=' + params;

return;

}

// immediately collapse the subtree and change the plus to a minus when collapsing

// without waiting for the response

if (!isExpand) {

var ul = obj.parentNode.getElementsByTagName('ul')[0];

obj.parentNode.removeChild(ul); // no remove() directly because of IE 5.5

var pm = Selector.findChildElements(obj.parentNode, ['.pm'])[0]; // Getting pm object by CSS selector (because document.getElementsByClassName() doesn't seem to work on Konqueror)

if (pm) {

pm.onclick = null;

Element.cleanWhitespace(pm);

pm.firstChild.src = pm.firstChild.src.replace('minus', 'plus');

}

} else {

obj.style.cursor = 'wait';

}

new Ajax.Request(this.thisScript, {

method: 'get',

parameters: 'ajaxID=' + this.ajaxID + '&PM=' + params,

onComplete: function(xhr) {

// the parent node needs to be overwritten, not the object

$(obj.parentNode).replace(xhr.responseText);

this.registerDragDropHandlers();

this.reSelectActiveItem();

filter($('_livesearch').value);

}.bind(this),

onT3Error: function(xhr) {

// if this is not a valid ajax response, the whole page gets refreshed

this.refresh();

}.bind(this)

});

},

// does the complete page refresh (previously known as "_refresh_nav()")

refresh: function() {

var r = new Date();

// randNum is useful so pagetree does not get cached in browser cache when refreshing

window.location.href = '?randNum=' + r.getTime();

},

// attaches the events to the elements needed for the drag and drop (for the titles and the icons)

registerDragDropHandlers: function() {

if (!this.activateDragDrop) return;

this._registerDragDropHandlers('dragTitle');

this._registerDragDropHandlers('dragIcon');

},

_registerDragDropHandlers: function(className) {

var elements = Selector.findChildElements($('tree'), ['.'+className]); // using Selector because document.getElementsByClassName() doesn't seem to work on Konqueror

for (var i = 0; i < elements.length; i++) {

Event.observe(elements[i], 'mousedown', function(event) { DragDrop.dragElement(event); }, true);

Event.observe(elements[i], 'dragstart', function(event) { DragDrop.dragElement(event); }, false);

Event.observe(elements[i], 'mouseup', function(event) { DragDrop.dropElement(event); }, false);

}

},

// selects the activated item again, in case it collapsed and got expanded again

reSelectActiveItem: function() {

obj = $(top.fsMod.navFrameHighlightedID[this.frameSetModule]);

if (obj) Element.addClassName(obj, this.highlightClass);

},

// highlights an active list item in the page tree and registers it to the top-frame

// used when loading the page for the first time

highlightActiveItem: function(frameSetModule, highlightID) {

this.frameSetModule = frameSetModule;

// Remove all items that are already highlighted

obj = $(top.fsMod.navFrameHighlightedID[frameSetModule]);

if (obj) {

var classes = $w(this.highlightClass);

for (var i = 0; i < classes.length; i++)

Element.removeClassName(obj, classes[i]);

}

// Set the new item

top.fsMod.navFrameHighlightedID[frameSetModule] = highlightID;

if ($(highlightID)) Element.addClassName(highlightID, this.highlightClass);

}

};

// new object-oriented drag and drop - code,

// tested in IE 6, Firefox 2, Opera 9

var DragDrop = {

dragID: null,

// options needed for doing the changes when dropping

table: null, // can be "pages" or "folders"

changeURL: null,

backPath: null,

dragElement: function(event, elementID) {

Event.stop(event); // stop bubbling

this.dragID = this.getIdFromEvent(event);

if (this.dragID == 0) return false;

if (!elementID) elementID = this.dragID;

if (!$('dragIcon')) this.addDragIcon();

$('dragIcon').innerHTML = $('dragIconID_'+elementID).innerHTML

+ $('dragTitleID_'+elementID).firstChild.innerHTML;

document.onmouseup = function(event) { DragDrop.cancelDragEvent(event); };

document.onmousemove = function(event) { DragDrop.mouseMoveEvent(event); };

return false;

},

dropElement: function(event) {

var dropID = this.getIdFromEvent(event);

if ((this.dragID) && (this.dragID != dropID)) {

var url = this.changeURL

+ '?dragDrop=' + this.table

+ '&srcId=' + this.dragID

+ '&dstId=' + dropID;

+ '&backPath=' + this.backPath;

showClickmenu_raw(url);

}

this.cancelDragEvent();

return false;

},

cancelDragEvent: function(event) {

this.dragID = null;

if ($('dragIcon') && $('dragIcon').style.visibility == 'visible') {

$('dragIcon').style.visibility = 'hidden';

}

document.onmouseup = null;

document.onmousemove = null;

},

mouseMoveEvent: function(event) {

if (!event) {

event = window.event;

}

$('dragIcon').style.left = (Event.pointerX(event) + 5) + 'px';

$('dragIcon').style.top = (Event.pointerY(event) - 5) + 'px';

$('dragIcon').style.visibility = 'visible';

return false;

},

// -- helper functions --

getIdFromEvent: function(event) {

var obj = Event.element(event);

while (obj.id == false && obj.parentNode) { obj = obj.parentNode; }

return obj.id.substring(obj.id.indexOf('_')+1);

},

// dynamically manipulates the DOM to add the div needed for drag&drop at the bottom of the <body>-tag

addDragIcon: function() {

var code = '<div id="dragIcon" style="visibility: hidden;">&nbsp;</div>';

new Insertion.Bottom(document.getElementsByTagName('body')[0], code);

}

};

/**

*

* @author Ingo Renner <ingo@typo3.org>

**/

var PageTreeFilter = Class.create({

field: 'treeFilter',

resetfield: 'treeFilterReset',

togglelink: 'toggleTreeFilter',

/**

* constructor with event listener

*/

initialize: function() {

// event listener

Event.observe(document, 'dom:loaded', function(){

Event.observe(this.field, "keyup", this.filter.bindAsEventListener(this));

Event.observe(this.resetfield, "click", this.resetSearchField.bindAsEventListener(this) );

this.toggleFilterBoxIcon = $$('#toggleTreeFilter img')[0];

Event.observe(this.togglelink, "click", this.toggleFilter.bindAsEventListener(this) );

}.bind(this));

},

/**

* Toggles visability of the filter box

*/

toggleFilter: function() {

var filterBox = $('treeFilterBox');

var state = filterBox.visible();

// save state

new Ajax.Request('ajax.php', {

parameters : 'ajaxID=SC_alt_db_navframe::saveFilterboxStatus&state=' + state,

});

if (state) {

Effect.BlindUp(filterBox, {duration : 0.5});

this.toggleFilterBoxIcon.src = 'gfx/arrowright.gif';

this.resetSearchField();

} else {

Effect.BlindDown(filterBox, {duration : 0.5});

this.toggleFilterBoxIcon.src = 'gfx/arrowdown.gif';

}

},

/**

* Filters the tree by setting a class on items not matching search input string

* tested in FF2, S3, IE6, IE7

*/

filter: function() {

var searchString = $F(this.field).toLowerCase();

/*

new Ajax.Updater('PageTreeDiv', 'ajax.php', {

parameters : 'ajaxID=SC_alt_db_navframe::searchPage&sword=' + searchString

});

*/

var pages = $$('#treeRoot .dragTitle a');

pages.each(function(el) {

if (el.innerHTML.toLowerCase().include(searchString)) {

el.up().removeClassName('not-found');

} else {

el.up().addClassName('not-found');

}

});

this.toggleReset();

},

/**

* toggles the visibility of the reset button

*/

toggleReset: function() {

var searchFieldContent = $F(this.field);

var resetButton = $(this.resetfield);

if (searchFieldContent != '' && resetButton.getStyle('visibility') == 'hidden') {

resetButton.setStyle({ visibility: 'visible'} );

} else if (searchFieldContent == '' && resetButton.getStyle('visibility') == 'visible') {

resetButton.setStyle( {visibility: 'hidden'} );

}

},

/**

* resets the search field

*/

resetSearchField: function() {

if ($(this.resetfield).getStyle('visibility') == 'visible') {

$(this.field).value = '';

this.filter('');

}

}

});

// Call this function, refresh_nav(), from another script in the backend if you want

// to refresh the navigation frame (eg. after having changed a page title or moved pages etc.)

// See t3lib_BEfunc::getSetUpdateSignal()

// please use the function in the "Tree" object for future implementations

function refresh_nav() {

window.setTimeout('Tree.refresh();',0);

}

// Deprecated since 4.1.

// Another JS function, for highlighting rows in the page tree, kept alive for backwards

// compatibility. Please use the function in the "Tree" object for future implementations.

function hilight_row(frameSetModule, highLightID) {

Tree.highlightActiveItem(frameSetModule, highlightID);

}

DIV.typo3-noDoc H2 { margin-top: 5px; width: 740px; }

DIV.typo3-mediumDoc { margin-top: 5px; width: 470px; }

DIV.typo3-smallDoc { margin-top: 5px; width: 350px; }

div.typo3-fullDoc { margin-top: 5px; width: 100%; height: 100%; }

BODY#typo3-pagetree { margin: 0; padding: 0;}

div#treeOptions div.caption { float: left; }

div#treeOptions div.options { float: right; }

div#treeOptions { width: 240px; padding: 11px 4px 0 5px; border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;background:#edeeee; }

div#treeFilterBox { width: 158px; margin-top: 2px; height: 22px; background: url('gfx/search_bubble.png') no-repeat 8px 0; padding-left: 10px;font-size:10px; }

input#treeFilter { clear:right;height: 12px; width: 120px; margin: 3px 0 0 17px; border: 0; }

#toggleTreeFilter { cursor:pointer;font-size:11px;font-weight:bold;padding: 2px 0 4px 16px;color:#505d6d;margin:8px 0 2px 4px; }

#toggleTreeFilter img { vertical-align:middle; }

div#treeOptionButtons br.clearboth { clear:both; }

div#PageTreeDiv {padding-top:8px;}

div#typo3-content {padding-top:0;}

div#typo3-docheader-row2 { background: #fff; height: 27px; line-height: 27px; border-bottom: 1px solid #000; }

<label index="pageTree_search_filter">Search / Filter</label>

</T3locallang>

/* - - - - - - - - - - - - - - - - - - - - -

Title : TYPO3 backend vertical menu styles

Author : Ingo Renner <ingo@typo3.org> ,Steffen Kamper <>, ben van 't ende <ben@netcreators.com>

URL : http://typo3.org

Description : overwrites core styles for the module menu

$Id$

- - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - - - - - - - - - - - -

TYPO3 backend menu - vertical

- - - - - - - - - - - - - - - - - - - - - */

#typo3-menu li ul li {

/*padding-bottom: 3px;*/

}

#typo3-menu li img {

vertical-align: baseline;

}

#typo3-menu li span {

margin-top: 1px;

display: block;

}

#typo3-menu li.menuSection li:hover,

#typo3-menu li.highlighted {

background-color: #d7dbe2;

}

#typo3-menu li div {

width: 114px;

}

#typo3-menu li a {

display: block;

}

#typo3-menu li ul {

margin-bottom: 5px;

}

#typo3-menu div.expanded,

#typo3-menu div.collapsed {

border-bottom: 1px solid #DDD;

width: 100%;

}

$this->loadJavascriptLib('js/tree.js');