Bug #20661
closed
[Feature] Add class for render HTML header/footer for BE and FE
0%
Description
This class renders all header- and footer-parts for a webpage. This class can be used for BE and FE, which makes it universal, and there is a central place where this stuff is handled.
some key features:- include javascript libs simple (which was the case for template.php)
- introduce a concatenate and compress feature
- add footer part, which is a missing feature. There is one flag which moves all javascript to end of the page
- add ExtCore as supported javascript library
The rendering is template based, you can use your own template.
The Javascript rendering is done with these blocks:
--JAVASCRIPT LIBRARIES--
--JAVASCRIPT FILES--
--JAVASCRIPT INLINE--
You have control at which position your JS should go, also you can choose between header part (between <head></head> and footer part (before </body>
The class is availabel in FE:
$GLOBALS['TSFE']->pageIncludes
and in BE:
$this->doc->pageIncludes
The render is compatible, so you don't have to change anything, but you can.
Here is example of usage in Typoscript. There are existing methods used, but with some extra parameters, also some new options
#include CSS files
page.stylesheet = fileadmin/css/page.stylesheet.css
page.includeCSS {
myCSS = fileadmin/css/myCss.css
myCSS {
#additional settings
alternate = 1
media = print
title = Print CSS
compressed = 0
forceOnTop = 1
import = 0
}
}
#include inline CSS (nothing new)
page.adminPanelStyles = 1
page.noLinkUnderline = 1
page.CSS_inlineStyle (
#div1 {margin:25px;}
)
- include javascript Libraries
page.javascriptLibs { # load prototype
Prototype = 0#load Scriptaculous with optional modules
Scriptaculous = 0
Scriptaculous {
modules = dragdrop,controls
}- load ExtCore
ExtCore = 0 - enable ExtCore debug
ExtCore.debug = 1
- load ExtJs
ExtJs = 1
ExtJs { # include ext-all.css
css = 1 # include default theme
theme = 1 # load specific adapter (jquery|prototype|yui)
adapter = jquery # enable debug
debug = 1
}
}
- load ExtCore
#include javascript files
page.includeJSlibs {
jquery = fileadmin/js/jquery-1.3.2.min.js
jquery {
type = text/javascript
forceOnTop = 1
footer = 1
compressed = 1
forceOnTop = 1
}
}
page.includeJS {
jquery-stations = fileadmin/js/stations.js
jquery-stations {
type = text/javascript
footer = 1
compressed = 0
forceOnTop = 0
}
}
#include inline javascript
page.JS_inlineCode (
var inlineVar1 = 555
)
page.JS_inlineFooterCode (
var inlineVar2 = 888
)
#Inline Handler
page.inlineJSHandler.ExtOnReady {
10 = TEXT
10.value = var myVar = 15;
20 = TEXT
20.value = var myVar2 = "Hello";
}
page.inlineJSHandler.DocumentOnLoad {
10 = TEXT
10.value = var myVar2 = 77;
20 = TEXT
20.dataWrap = var hClass = "{register:headerClass}";
}- additional options
config.moveJsFromHeaderToFooter = 1
#compress inline javascript
config.minifyJS = 1
#compress inline CSS
config.minifyCSS = 1
#concatenate files (works with external function only, TODO:implement own method)
config.concatenateJSandCSS = 1
#use own template file
page.pageHeaderFooterTemplateFile = fileadmin/templates/header_footer.html
(issue imported from #M11397)
Files
Updated by Steffen Kamper over 15 years ago
new improved and long time tested version v2. Anigif is for typo3/gfx and is used by Apploader (example: http://dev.sk-typo3.de/mvc/twitter-mes.html)
Updated by Stanislas Rolland about 15 years ago
This patch modified the behaviour of method addStyleSheet in class template causing the RTE to fail in quickedit mode. See issue #0011970