add support for multiColumnWizard

guavestudios · Feb 24, 2023 · 51bbcc2 · 51bbcc2
1 parent 347cfe1
commit 51bbcc2
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -38,6 +38,11 @@ guave_deepl:
       fields:
         - title
         - text
+      multiColumnFields:
+        category_grid:
+          fields:
+            - title
+            - text
 ```
 
 ## Register Custom ActiveLanguageResolver

diff --git a/src/Controller/Backend/DeeplButtons.php b/src/Controller/Backend/DeeplButtons.php
@@ -48,6 +48,10 @@ public function registerDeepl(DataContainer $dc)
             $GLOBALS['TL_DCA'][$dc->table]['fields'][$field]['xlabel'][] = [self::class, 'translateButton'];
         }
 
+        foreach ($this->tables[$dc->table]['multiColumnFields'] as $field => $fields) {
+            $GLOBALS['TL_DCA'][$dc->table]['fields'][$field]['xlabel'][] = [self::class, 'translateMultiColumnButton'];
+        }
+
         $GLOBALS['TL_DCA'][$dc->table]['edit']['buttons_callback'][] = [self::class, 'addTranslateAllButton'];
     }
 
@@ -56,12 +60,19 @@ public function translateButton(DataContainer $dc)
         $field = $dc->field;
         // inputUnit
         if ($GLOBALS['TL_DCA'][$dc->table]['fields'][$field]['inputType'] === 'inputUnit') {
-            $field.='[value]';
+            $field .= '[value]';
         }
-        
+
         return $this->getTranslateButton($field);
     }
 
+    public function translateMultiColumnButton(DataContainer $dc)
+    {
+        $field = $dc->field;
+
+        return $this->getMulticolumnTranslateButton($field, $this->tables[$dc->table]['multiColumnFields'][$field]['fields']);
+    }
+
     public function addTranslateAllButton($arrButtons)
     {
         $arrButtons['translateAll'] = sprintf(
@@ -93,6 +104,22 @@ public function getTranslateButton(string $field): string
         );
     }
 
+    public function getMulticolumnTranslateButton(string $field, array $fields): string
+    {
+        return sprintf(
+            '<span data-translate-multicol="%s" data-translate-fields="%s" data-translate-target-lang="%s">%s</span>',
+            $field,
+            implode(',', $fields),
+            $this->activeLang,
+            sprintf(
+                $GLOBALS['TL_LANG']['guave_deepl']['translate'][0],
+                $this->defaultLanguage,
+                $this->activeLang,
+                Image::getHtml('pasteinto.svg')
+            )
+        );
+    }
+
     protected function getActiveLang(DataContainer $dc): string
     {
         $language = null;

diff --git a/src/DependencyInjection/Configuration.php b/src/DependencyInjection/Configuration.php
@@ -23,7 +23,13 @@ public function getConfigTreeBuilder()
                 ->arrayNode('tables')
                     ->useAttributeAsKey('table')->arrayPrototype()
                         ->children()
-                            ->arrayNode('fields')->useAttributeAsKey('field')->scalarPrototype()
+                            ->arrayNode('fields')->useAttributeAsKey('field')->scalarPrototype()->end()->end()
+                            ->arrayNode('multiColumnFields')
+                                ->useAttributeAsKey('multiColumnField')->arrayPrototype()
+                                    ->children()
+                                        ->arrayNode('fields')->useAttributeAsKey('field')->scalarPrototype()->end()->end()
+                                    ->end()
+                            ->end()
                         ->end()
                 ->end()
             ->end()

diff --git a/src/Resources/public/assets/translate.js b/src/Resources/public/assets/translate.js
@@ -2,6 +2,7 @@
 	// setup some constants
 	const API_BASE = '/api/deepl/translate';
 	const FIELD_BUTTON_SELECTOR = '[data-translate-field]';
+	const MULTI_COLUMN_BUTTON_SELECTOR = '[data-translate-multicol]';
 	const ALL_BUTTON_SELECTOR = '[data-translate-all]';
 	const LOADER_CLASS = 'translate-loader';
 	const SHOW_LOADER_CLASS = 'show--translate-loader';
@@ -69,15 +70,22 @@
 
 			// check target selector / parents
 			let isFieldButton = target.matches(FIELD_BUTTON_SELECTOR);
+			let isMultiColumnButton = target.matches(MULTI_COLUMN_BUTTON_SELECTOR);
 			let isAllButton = target.matches(ALL_BUTTON_SELECTOR);
 			let closestFieldButton = target.closest(FIELD_BUTTON_SELECTOR);
+			let closestMutiColumnButton = target.closest(MULTI_COLUMN_BUTTON_SELECTOR);
 			let closestAllButton = target.closest(ALL_BUTTON_SELECTOR);
 
 			// if target is child of field button
 			if (!isFieldButton && closestFieldButton) {
 				button = closestFieldButton;
 				isFieldButton = true;
 			}
+			// if target is child of multi column button
+			else if (!isMultiColumnButton && closestMutiColumnButton) {
+				button = closestMutiColumnButton;
+				isMultiColumnButton = true;
+			}
 			// if target is child of all button
 			else if (!isAllButton && closestAllButton) {
 				button = closestAllButton;
@@ -92,17 +100,45 @@
 				translateFields([fieldName], targetLang);
 			}
 
+			if (isMultiColumnButton) {
+				e.preventDefault();
+				const fieldNames = getMultiColumnFields(button);
+				const targetLang = button.dataset.translateTargetLang;
+				translateFields(fieldNames, targetLang);
+			}
+
 			// translate all fields from all button
 			if (isAllButton) {
 				e.preventDefault();
-				const fields = Array.from(document.querySelectorAll('[data-translate-field]'));
-				const fieldNames = fields.map(field => field.dataset.translateField);
+				const fields = Array.from(document.querySelectorAll(FIELD_BUTTON_SELECTOR));
+				const multiColumns = Array.from(document.querySelectorAll(MULTI_COLUMN_BUTTON_SELECTOR));
+				const fieldNames = [
+					...fields.map(field => field.dataset.translateField),
+					...multiColumns.reduce((fields, button) => {
+						return [
+							...fields,
+							...getMultiColumnFields(button),
+						];
+					}, [])
+				];
 				const targetLang = button.dataset.translateTargetLang;
 				translateFields(fieldNames, targetLang);
 			}
 		});
 	});
 
+	function getMultiColumnFields(button) {
+		const multiColumnName = button.dataset.translateMulticol;
+		const widget = button.closest('.widget');
+		const rowIds = Array.from(widget.querySelectorAll('table tbody tr')).map(row => row.dataset.rowid);
+		const fieldNames = button.dataset.translateFields.split(/,\s?/).map(name => {
+			return rowIds.map(row => {
+				return `${multiColumnName}[${row}][${name}]`
+			})
+		}).flat();
+		return fieldNames;
+	}
+
 	async function translateFields(fieldNames = [], targetLang = sourceLang) {
 		// get fields
 		const fields = fieldNames.reduce((arr, name) => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,11 @@ guave_deepl: @@
           fields:
             - title
             - text
+          multiColumnFields:
+            category_grid:
+              fields:
+                - title
+                - text
     ```
     ## Register Custom ActiveLanguageResolver
@@ Expand Down @@