With this tutorial you can

• upload .js files to any TYPO3 template record
• create and edit .js files
• use [PAGE].includeJS like [PAGE].includeCSS

In times of AJAX and client side programming it is very important to manage JavaScript files along with your TYPO3 template. It is very simple to include CSS Stylesheets in any template, by uploading, creating and editing them in a template record. You can easily include Stylesheets via TypoScript with [PAGE].includeCSS. All of this is not possible with JavaScript. It is forbidden to upload .js files and you can not create nor edit them. There is no [PAGE].includeJS porperty. All of these issues are fixed with the following TYPO3 CORE changes. However, it is not possible to realize this with an extension, because some file limitations are hardcoded in the core. The following description refers to the TYPO3.8.0 Dummy package. I hope one of the core developers will transfer this to the new TYPO3 4.0 source, so let's hope it is not nescessary in the future. If you have (FTP) access to your typo3 installation the whole process will take about 15 minutes (or less - two are already gone)

First of all we need a new entry in the TYPO3 Configuration Array TCA. This is normaly done in an ext_tables.php file in any extension but we do it in one core file, that sets some default entrys in the TCA. We need to change $TCA["sys_template"]["columns"]["resources"]["config"] in

typo3/sysext/cms/tbl_cms.php line 681

modify the 'allowed'-line and insert a line with an 'textExtensions' entry (that was hardcoded in the next file)

				'allowed' => $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'].',html,htm,ttf,pfb,pfm,txt,css,tmpl,inc,ico,js',
				'textExtensions' => 'html,htm,txt,css,tmpl,inc,js',

Now it is possible to upload js files to a template record but not to create nor edit them. We need to go to the evil PHP file with the hardcoded list of allowed file extension.

typo3/ext/tstemplate/ts/index.php line 71

insert this line:

		$this->textExtensions = $TCA["sys_template"]["columns"]["resources"]["config"]["textExtensions"];

You may have a look at line 60, where the hardcoded extensions are placed. Now it is possible to upload, create and edit JS files in a template record.

Finaly we create a new property for the TypoScript Object PAGE. This is [PAGE].includeJS, what you can use similar to includeCSS. In example: page.includeJS.10 = helloworld*.js

Edit

tslib/class.tslib_pagegen.php line 511 (Typo3.8.1 line 523)

and the unused copy of this file (if you like)

(typo3/sysext/cms/tslib/class.tslib_pagegen.php line 511)

Paste the following code. You can have a look at the includeCSS code 20 lines above - it looks very similar.

		// JavaScripts (jovo)
		if (is_array($GLOBALS['TSFE']->pSetup['includeJS.'])) {
			reset($GLOBALS['TSFE']->pSetup['includeJS.']);
			while(list($k2,$iJSfile)=each($GLOBALS['TSFE']->pSetup['includeJS.']))	{
				if (!is_array($iJSfile))	{
					$ss = $GLOBALS['TSFE']->tmpl->getFileName($iJSfile);
					if ($ss) {
						 $GLOBALS['TSFE']->content.='
	<script src="'.htmlspecialchars($ss).'"'.
			($GLOBALS['TSFE']->pSetup['includeJS.'][$k2.'.']['type'] ? ' type="'.htmlspecialchars($GLOBALS['TSFE']->pSetup['includeJS.'][$k2.'.']['type']).'"' : ' type="text/javascript"').
			'></script>';
					}
				}
			}
		}

That's all. Now you can:

• upload .js files to any template record
• create and edit .js files in "Info/Modify"
• use [PAGE].includeJS like [PAGE].includeCSS (with jokers)
• change the MIME type of the generated Tag with [PAGE].includeJS.[array].type = text/javascript (in Example)