[TASK] Rewrite JavaScript of ext:documentation to RequireJS

Due to a JavaScript error in the current situation the code
is now ported to RequireJS.

Resolves: #65557
Releases: master
Change-Id: I3dab5fa8ba95088e60acca5d28f3829f201ddf76
Reviewed-on: http://review.typo3.org/37578


Reviewed-by: Xavier Perseguers <xavier@typo3.org>
Tested-by: Xavier Perseguers <xavier@typo3.org>
Reviewed-by: Markus Klein <klein.t3@reelworx.at>
Tested-by: Markus Klein <klein.t3@reelworx.at>

typo3/sysext/documentation/Resources/Private/Layouts/Default.html

 {namespace doc=TYPO3\CMS\Documentation\ViewHelpers}
 
-<f:be.container pageTitle="{f:translate(key: 'documentation_manager')}" enableClickMenu="false" loadPrototype="false" loadScriptaculous="false" loadExtJs="false" loadExtJsTheme="true" loadJQuery="true"
+<f:be.container pageTitle="{f:translate(key: 'documentation_manager')}" enableClickMenu="false" loadPrototype="false" loadJQuery="true"
 
 	includeCssFiles="{
 		0:'{f:uri.resource(path:\'Css/main.css\')}'
 	}"
-	includeJsFiles="{
-		0:'contrib/jquery/jquery.dataTables.min.js',
-		1:'contrib/jquery/jquery.clearable.js',
-		2:'{f:uri.resource(path:\'JavaScript/main.js\')}',
-		3:'{f:uri.resource(path:\'JavaScript/configuration.js\')}'
+	includeRequireJsModules="{
+		0: 'TYPO3/CMS/Documentation/Main'
 	}">
 
 	<div id="typo3-docheader">
@@ -21,9 +18,7 @@
 				</doc:be.security.ifAdmin>
 			</f:be.menus.actionMenu>
 		</div>
-		<div class="typo3-docheader-buttons">
-			<f:render section="docheader-buttons" />
-		</div>
+		<div class="typo3-docheader-buttons"></div>
 	</div>
 	<div id="typo3-docbody">
 		<div id="typo3-inner-docbody" class="typo3-documentation">
@@ -32,4 +27,4 @@
 			<f:render section="Content" />
 		</div>
 	</div>
-</f:be.container>
+</f:be.container>
\ No newline at end of file

typo3/sysext/documentation/Resources/Private/Templates/Document/Download.html

 <f:layout name="Default"/>
 
-<f:section name="docheader-buttons">
-
-</f:section>
-
 <f:section name="module-headline">
 	<h1><f:translate key="downloadDocumentation">Download Documentation</f:translate></h1>
 </f:section>
@@ -41,5 +37,4 @@
 		</f:for>
 		</tbody>
 	</table>
-
-</f:section>
+</f:section>
\ No newline at end of file

typo3/sysext/documentation/Resources/Private/Templates/Document/List.html

@@ -2,10 +2,6 @@
 
 <f:layout name="Default" />
 
-<f:section name="docheader-buttons">
-
-</f:section>
-
 <f:section name="module-headline">
 	<h1><f:translate key="showDocumentation">Show Documentation</f:translate></h1>
 </f:section>

typo3/sysext/documentation/Resources/Public/JavaScript/main.js → typo3/sysext/documentation/Resources/Public/JavaScript/Main.js

-TYPO3.DocumentationApplication = {
-	datatable: null,
-	// Utility method to retrieve query parameters
-	getUrlVars: function getUrlVars() {
-		var vars = [], hash;
-		var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
-		for(var i = 0; i < hashes.length; i++) {
-			hash = hashes[i].split('=');
-			vars.push(hash[0]);
-			vars[hash[0]] = hash[1];
-		}
-		return vars;
-	},
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+/**
+ * JavaScript module for ext:documentation
+ */
+define('TYPO3/CMS/Documentation/Main', ['jquery', 'datatables', 'jquery/jquery.clearable'], function($) {
+
+	var Documentation = {
+		datatable: null
+	};
+
 	// Initializes the data table, depending on the current view
-	initializeView: function() {
-		var getVars = this.getUrlVars();
-		// getVars[1] contains the name of the action key
+	Documentation.initializeView = function() {
+		var getVars = Documentation.getUrlVars();
+		// getVars[2] contains the name of the action key
 		// List view is the default view
-		if (getVars[getVars[1]] == 'download') {
-			this.documentationDownloadView(getVars);
+		if (getVars[getVars[2]] === 'download') {
+			Documentation.documentationDownloadView(getVars);
 		} else {
-			this.documentationListView(getVars);
+			Documentation.documentationListView(getVars);
 		}
-	},
+	};
+
 	// Initializes the list view
-	documentationListView: function(getVars) {
-		this.datatable = jQuery('#typo3-documentation-list').DataTable({
+	Documentation.documentationListView = function(getVars) {
+		Documentation.datatable = $('#typo3-documentation-list').DataTable({
 			'paging': false,
 			'jQueryUI': true,
 			'lengthChange': false,
@@ -33,13 +43,14 @@ TYPO3.DocumentationApplication = {
 		});
 
 		// restore filter
-		if (this.datatable.length && getVars['search']) {
-			this.datatable.search(getVars['search']);
+		if (Documentation.datatable.length && getVars['search']) {
+			Documentation.datatable.search(getVars['search']);
 		}
-	},
+	};
+
 	// Initializes the download view
-	documentationDownloadView: function(getVars) {
-		this.datatable = jQuery('#typo3-documentation-download').DataTable({
+	Documentation.documentationDownloadView = function(getVars) {
+		Documentation.datatable = $('#typo3-documentation-download').DataTable({
 			'paging': false,
 			'jQueryUI': true,
 			'lengthChange': false,
@@ -49,24 +60,32 @@ TYPO3.DocumentationApplication = {
 		});
 
 		// restore filter
-		if (this.datatable.length && getVars['search']) {
-			this.datatable.search(getVars['search']);
+		if (Documentation.datatable.length && getVars['search']) {
+			Documentation.datatable.search(getVars['search']);
 		}
-	}
-};
+	};
 
-// IIFE for faster access to $ and save $ use
-(function ($) {
+	// Utility method to retrieve query parameters
+	Documentation.getUrlVars = function getUrlVars() {
+		var vars = [], hash;
+		var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+		for (var i = 0; i < hashes.length; i++) {
+			hash = hashes[i].split('=');
+			vars.push(hash[0]);
+			vars[hash[0]] = hash[1];
+		}
+		return vars;
+	};
 
 	$(document).ready(function() {
 		// Initialize the view
-		TYPO3.DocumentationApplication.initializeView();
+		Documentation.initializeView();
 
 		// Make the data table filter react to the clearing of the filter field
 		$('.dataTables_wrapper .dataTables_filter input').clearable({
 			onClear: function() {
-				TYPO3.DocumentationApplication.datatable.search('');
+				Documentation.datatable.search('');
 			}
 		});
 	});
-}(jQuery));
+});
\ No newline at end of file

typo3/sysext/documentation/Resources/Public/JavaScript/configuration.js

-// IIFE for faster access to $ and save $ use
-(function ($) {
-
-	$(document).ready(function() {
-		configurationFieldSupport();
-	});
-
-	function configurationFieldSupport() {
-		$('.offset').each(function() {
-			$(this).hide();
-			val = $(this).attr('value');
-			valArr = val.split(',');
-
-			$(this).wrap('<div class="offsetSelector"></div>');
-			$(this).parent().append('x: <input value="' + $.trim(valArr[0]) + '" class="tempOffset1 tempOffset">');
-			$(this).parent().append('<span>, </span>');
-			$(this).parent().append('y: <input value="' + $.trim(valArr[1]) + '" class="tempOffset2 tempOffset">');
-
-			$(this).siblings('.tempOffset').keyup(function() {
-				$(this).siblings('.offset').attr(
-					'value',
-					$(this).parent().children('.tempOffset1').attr('value') + ',' + $(this).parent().children('.tempOffset2').attr('value')
-				);
-			});
-		});
-
-		$('.wrap').each(function() {
-			$(this).hide();
-			val = $(this).attr('value');
-			valArr = val.split('|');
-
-			$(this).wrap('<div class="wrapSelector"></div>');
-			$(this).parent().append('<input value="' + $.trim(valArr[0]) + '" class="tempWrap1 tempWrap">');
-			$(this).parent().append('<span>|</span>');
-			$(this).parent().append('<input value="' + $.trim(valArr[1]) + '" class="tempWrap2 tempWrap">');
-
-			$(this).siblings('.tempWrap').keyup(function() {
-				$(this).siblings('.wrap').attr(
-					'value',
-					$(this).parent().children('.tempWrap1').attr('value') + '|' + $(this).parent().children('.tempWrap2').attr('value')
-				);
-			});
-		});
-	}
-}(jQuery));
\ No newline at end of file