[TASK] Streamline searchfield in language module

Releases: master
Resolves: #66999
Change-Id: I3f2d9ff945021ac0a6f9aac79033ff05c0f55db4
Reviewed-on: http://review.typo3.org/39588


Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Philipp Gampe <philipp.gampe@typo3.org>
Tested-by: Philipp Gampe <philipp.gampe@typo3.org>

typo3/sysext/lang/Resources/Private/Templates/Language/ListLanguages.html

@@ -21,6 +21,11 @@
 <f:section name="content">
 	<h1><f:translate key="header.languages" /></h1>
 	<f:flashMessages renderMode="div" />
+	<form class="form-inline">
+		<div class="form-group">
+			<f:form.textfield name="typo3-language-searchfield" placeholder="{f:translate(key:'table.search')}" id="typo3-language-searchfield" value="{search}" class="form-control t3js-language-searchfield" />
+		</div>
+	</form>
 	<table id="typo3-language-list" class="t3-table t3-datatable">
 		<thead>
 			<tr>

typo3/sysext/lang/Resources/Private/Templates/Language/ListTranslations.html

@@ -7,6 +7,11 @@
 <f:section name="content">
 	<h1><f:translate key="header.translations" /></h1>
 	<f:flashMessages renderMode="div" />
+	<form class="form-inline">
+		<div class="form-group">
+			<f:form.textfield name="typo3-language-searchfield" placeholder="{f:translate(key:'table.search')}" id="typo3-language-searchfield" value="{search}" class="form-control t3js-language-searchfield" />
+		</div>
+	</form>
 	<table id="typo3-translation-list" class="t3-table t3-datatable" data-language-count="{f:count(subject: languages)}">
 		<thead>
 			<tr>

typo3/sysext/lang/Resources/Public/JavaScript/LanguageModule.js

@@ -27,7 +27,7 @@ define('TYPO3/CMS/Lang/LanguageModule', ['jquery', 'moment', 'datatables', 'TYPO
 		icons: {},
 		labels: {},
 		identifiers: {
-			searchField: 'div.dataTables_filter input',
+			searchField: '.t3js-language-searchfield',
 			topMenu: 'div.menuItems',
 			activateIcon: 'span.activateIcon',
 			deactivateIcon: 'span.deactivateIcon',
@@ -244,6 +244,7 @@ define('TYPO3/CMS/Lang/LanguageModule', ['jquery', 'moment', 'datatables', 'TYPO
 	 */
 	LanguageModule.buildLanguageTable = function(tableElement) {
 		return $(tableElement).DataTable({
+			dom: 'lrtip',
 			serverSide: false,
 			stateSave: true,
 			paging: false,
@@ -292,6 +293,7 @@ define('TYPO3/CMS/Lang/LanguageModule', ['jquery', 'moment', 'datatables', 'TYPO
 		}
 
 		return $(tableElement).DataTable({
+			dom: 'lrtip',
 			serverSide: false,
 			stateSave: true,
 			paging: false,
@@ -313,13 +315,23 @@ define('TYPO3/CMS/Lang/LanguageModule', ['jquery', 'moment', 'datatables', 'TYPO
 	 * Initialize search field
 	 */
 	LanguageModule.initializeSearchField = function() {
-		$(LanguageModule.identifiers.searchField, LanguageModule.context).clearable({
-			onClear: function() {
-				if (LanguageModule.table !== null) {
-					LanguageModule.table.search('').draw();
+		var getVars = LanguageModule.getUrlVars();
+		var currentSearch = (getVars['search'] ? getVars['search'] : LanguageModule.table.search());
+		$(LanguageModule.identifiers.searchField)
+			.val(currentSearch)
+			.on('input', function() {
+				LanguageModule.table.search($(this).val()).draw();
+			})
+			.clearable({
+				onClear: function() {
+					if (LanguageModule.table !== null) {
+						LanguageModule.table.search('').draw();
+					}
 				}
-			}
-		});
+			})
+			.parents('form').on('submit', function() {
+				return false;
+			});
 	};
 
 	/**
@@ -550,6 +562,18 @@ define('TYPO3/CMS/Lang/LanguageModule', ['jquery', 'moment', 'datatables', 'TYPO
 		$text.text(Math.round(progress) + '%');
 	};
 
+	// Utility method to retrieve query parameters
+	LanguageModule.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;
+	};
+
 	return function() {
 		$(document).ready(function() {
 			if ($('div.typo3-module-lang #typo3-language-list').length) {