From 97266a5af8351fa600bfb8fdd7d10becf3dabea9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Andr=C3=A9?= Date: Fri, 26 Apr 2024 00:30:20 +0200 Subject: [PATCH] [Site] Refactor Translator page --- .../translator-demo-block-controller.js | 45 ++ .../controllers/translator-demo-controller.js | 158 ------- .../ux_packages/translator.html.twig | 399 +++++++----------- .../_translator_demo_block.html.twig | 33 ++ 4 files changed, 224 insertions(+), 411 deletions(-) create mode 100644 ux.symfony.com/assets/controllers/translator-demo-block-controller.js delete mode 100644 ux.symfony.com/assets/controllers/translator-demo-controller.js create mode 100644 ux.symfony.com/templates/ux_packages/translator/_translator_demo_block.html.twig diff --git a/ux.symfony.com/assets/controllers/translator-demo-block-controller.js b/ux.symfony.com/assets/controllers/translator-demo-block-controller.js new file mode 100644 index 00000000000..04ea34279c7 --- /dev/null +++ b/ux.symfony.com/assets/controllers/translator-demo-block-controller.js @@ -0,0 +1,45 @@ +import { Controller } from '@hotwired/stimulus'; + +import * as translator from '../translator.js'; + +/* stimulusFetch: 'lazy' */ +export default class extends Controller { + static targets = [ + 'code', + 'parameters', + 'outputs', + ] + + static values = { + message: String, + } + + connect() { + this.render(); + } + + render() { + const parameters = new Map(); + this.parametersTargets.forEach((target) => { + if (target.name.includes('date')) { + parameters.set(target.name, new Date(target.value)); + } else if (target.name.includes('progress')) { + parameters.set(target.name, Number(target.value) / 100); + } else { + parameters.set(target.name, target.value); + } + }); + parameters.forEach((value, name) => { + const code = this.codeTarget.querySelector(`span[data-code-parameter="${name}"]`); + if (value instanceof Date) { + code.innerText = value.toLocaleString(); + } else { + code.innerText = value.toString(); + } + }); + + this.outputsTargets.forEach((target) => { + target.textContent = translator.trans(translator[this.messageValue], Object.fromEntries(parameters), 'messages', target.dataset.locale); + }); + } +} diff --git a/ux.symfony.com/assets/controllers/translator-demo-controller.js b/ux.symfony.com/assets/controllers/translator-demo-controller.js deleted file mode 100644 index 342437c1f96..00000000000 --- a/ux.symfony.com/assets/controllers/translator-demo-controller.js +++ /dev/null @@ -1,158 +0,0 @@ -import { Controller } from '@hotwired/stimulus'; -import { - trans, - setLocale, - HELLO, - SAY_HELLO, - INVITATION_TITLE, - NUM_OF_APPLES, - FINISH_PLACE, - PUBLISHED_AT, - PROGRESS, - VALUE_OF_OBJECT -} from '../translator.js'; - -import hljs from 'highlight.js/lib/core'; -import javascript from 'highlight.js/lib/languages/javascript'; - -hljs.registerLanguage('javascript', javascript); - -function highlight({ code, language = 'javascript' }) { - return hljs.highlight(code, { language }).value; -} - -/* stimulusFetch: 'lazy' */ -export default class extends Controller { - static targets = [ - 'helloCode', - 'helloOutput', - - 'sayHelloNameInput', - 'sayHelloCode', - 'sayHelloOutput', - - 'invitationTitleOrganizationGenderInput', - 'invitationTitleOrganizationNameInput', - 'invitationTitleCode', - 'invitationTitleOutput', - - 'numOfApplesCountInput', - 'numOfApplesCode', - 'numOfApplesOutput', - - 'finishPlacePlaceInput', - 'finishPlaceCode', - 'finishPlaceOutput', - - 'publishedAtDateInput', - 'publishedAtCode', - 'publishedAtOutput', - - 'progressAtProgressInput', - 'progressAtCode', - 'progressAtOutput', - - 'valueOfObjectValueInput', - 'valueOfObjectCode', - 'valueOfObjectOutput', - ] - - connect() { - this.render(); - } - - setLocale(e) { - setLocale(e.target.value); - this.render(); - } - - render() { - this.helloCodeTarget.innerHTML = highlight({ code: `import { trans, HELLO } from '../translator'; - -trans(HELLO)` }); - this.helloOutputTarget.textContent = trans(HELLO); - - this.sayHelloCodeTarget.innerHTML = highlight({ - code: `import { trans, SAY_HELLO } from '../translator'; - -trans(SAY_HELLO, { - name: ${this.#quoteValue(this.sayHelloNameInputTarget.value)} -})` - }); - this.sayHelloOutputTarget.textContent = trans(SAY_HELLO, { - name: this.sayHelloNameInputTarget.value - }); - - this.invitationTitleCodeTarget.innerHTML = highlight({ - code: `import { trans, INVITATION_TITLE } from '../translator'; - -trans(INVITATION_TITLE, { - organizer_gender: ${this.#quoteValue(this.invitationTitleOrganizationGenderInputTarget.value)}, - organizer_name: ${this.#quoteValue(this.invitationTitleOrganizationNameInputTarget.value)}, -})` - }) ; - this.invitationTitleOutputTarget.textContent = trans(INVITATION_TITLE, { - organizer_gender: this.invitationTitleOrganizationGenderInputTarget.value, - organizer_name: this.invitationTitleOrganizationNameInputTarget.value - }); - - this.numOfApplesCodeTarget.innerHTML = highlight({ - code: `import { trans, NUM_OF_APPLES } from '../translator'; - -trans(NUM_OF_APPLES, { - apples: ${this.numOfApplesCountInputTarget.value} -})` - }); - this.numOfApplesOutputTarget.textContent = trans(NUM_OF_APPLES, { - apples: this.numOfApplesCountInputTarget.value - }) - - this.finishPlaceCodeTarget.innerHTML = highlight({ - code: `import { trans, FINISH_PLACE } from '../translator'; - -trans(FINISH_PLACE, { - place: ${this.finishPlacePlaceInputTarget.value} -})` - }); - this.finishPlaceOutputTarget.textContent = trans(FINISH_PLACE, { - place: this.finishPlacePlaceInputTarget.value, - }); - - this.publishedAtCodeTarget.innerHTML = highlight({ - code: `import { trans, PUBLISHED_AT } from '../translator'; - -trans(PUBLISHED_AT, { - publication_date: new Date('${this.publishedAtDateInputTarget.value}') -})` - }); - this.publishedAtOutputTarget.textContent = trans(PUBLISHED_AT, { - publication_date: new Date(this.publishedAtDateInputTarget.value), - }); - - this.progressAtCodeTarget.innerHTML = highlight({ - code: `import { trans, PROGRESS } from '../translator'; - -trans(PROGRESS, { - progress: ${this.progressAtProgressInputTarget.value / 100}, -})` - }); - this.progressAtOutputTarget.textContent = trans(PROGRESS, { - progress: this.progressAtProgressInputTarget.value / 100, - }); - - this.valueOfObjectCodeTarget.innerHTML = highlight({ - code: `import { trans, VALUE_OF_OBJECT } from '../translator'; - -trans(VALUE_OF_OBJECT, { - value: ${this.valueOfObjectValueInputTarget.value} -})` - }); - this.valueOfObjectOutputTarget.textContent = trans(VALUE_OF_OBJECT, { - value: this.valueOfObjectValueInputTarget.value - }); - } - - #quoteValue(value) { - return '\'' + value.replace('\'', '\\\'') + '\''; - } -} diff --git a/ux.symfony.com/templates/ux_packages/translator.html.twig b/ux.symfony.com/templates/ux_packages/translator.html.twig index 4a660a04557..797eb533607 100644 --- a/ux.symfony.com/templates/ux_packages/translator.html.twig +++ b/ux.symfony.com/templates/ux_packages/translator.html.twig @@ -16,268 +16,161 @@ {% endblock %} {% block code_block_left %} - + {% endblock %} {% block code_block_right %} - + {% endblock %} {% block demo_title %}UX Translator{% endblock %} {% block demo_content %} -
-
-
- -
- -
-
-
- -
-
-
Code
-
-
-
Result
-
-
-
Parameters
-
-
- -
-
-
-
- 

-                    

-                

-            

-            

-                
-            

-        

-
-        

-            

-                

-                    

-                        

-                    

-                

-            

-            

-                
-            

-            

-                

-                    
-                    

-                        
-                    

-                

-            

-        

-
-        

-            

-                

-                    

-                        

-                    

-                

-            

-            

-                
-            

-            

-                

-                    
-                    

-                        
-                    

-                

-
-                

-                    
-                    

-                        
-                    

-                

-            

-        

 
-        

-            

-                

-                    

-                        

-                    

-                

-            

-            

-                
-            

-            

-                

-                    
-                    

-                        
-                    

-                

-            

-        

-
-        

-            

-                

-                    

-                        

-                    

-                

-            

-            

-                
-            

-            

-                

-                    
-                    

-                        
-                    

-                

-            

-        

-
-        

-            

-                

-                    

-                        

-                    

-                

-            

-            

-                
-            

-            

-                

-                    
-                    

-                        
-                    

-                

-            

-        

-
-        

-            

-                

-                    

-                        

-                    

-                

-            

-            

-                
-            

-            

-                

-                    
-                    

-                        
-                    

+        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
+            message: 'HELLO',
+        } %}
+        {% endembed %}
+
+        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
+            message: 'SAY_HELLO',
+            parameters: {
+                name: 'Fabien'
+            },
+        } %}
+            {% block parameters %}
+                

+                    
+                    
+                

+            {% endblock %}
+        {% endembed %}
+
+        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
+            message: 'INVITATION_TITLE',
+            parameters: {
+                organizer_gender: 'Fabien',
+                organizer_name: 'Clara',
+            },
+        } %}
+            {% block parameters %}
+                

+                    
+                    
                 

-            

-        

+                

+                    
+                    
+                

+            {% endblock %}
+        {% endembed %}
+
+        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
+            message: 'NUM_OF_APPLES',
+            parameters: {
+                apples: 2
+            },
+        } %}
+            {% block parameters %}
+                

+                    
+                    
+                

+            {% endblock %}
+        {% endembed %}
+
+        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
+            message: 'FINISH_PLACE',
+            parameters: {
+                place: 2
+            },
+        } %}
+            {% block parameters %}
+                

+                    
+                    
+                

+            {% endblock %}
+        {% endembed %}
+
+        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
+            message: 'PUBLISHED_AT',
+            parameters: {
+                publication_date: '2023-04-27 08:12'
+            },
+        } %}
+            {% block parameters %}
+                

+                    
+                    
+                

+            {% endblock %}
+        {% endembed %}
+
+         {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
+            message: 'PROGRESS',
+            parameters: {
+                progress: 42
+            },
+        } %}
+            {% block parameters %}
+                

+                    
+                    
+                

+            {% endblock %}
+        {% endembed %}
+
+        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
+            message: 'VALUE_OF_OBJECT',
+            parameters: {
+                value: 30
+            },
+        } %}
+            {% block parameters %}
+                

+                    
+                    
+                

+            {% endblock %}
+        {% endembed %}
 
-        

-            

-                

-                    

-                        

-                    

-                

-            

-            

-                
-            

-            

-                

-                    
-                    

-                        
-                

-            

-        

-    

-

 {% endblock %}
diff --git a/ux.symfony.com/templates/ux_packages/translator/_translator_demo_block.html.twig b/ux.symfony.com/templates/ux_packages/translator/_translator_demo_block.html.twig
new file mode 100644
index 00000000000..7f9e923a89d
--- /dev/null
+++ b/ux.symfony.com/templates/ux_packages/translator/_translator_demo_block.html.twig
@@ -0,0 +1,33 @@
+{% set parameters = parameters ?? {} %}
+
+

+    

+        

+            

+                
+import { trans, {{ message }} } from '../translator';
+
+trans({{ message }}{% if parameters %}, {
+{% for name, value in parameters %} {% set isString = not (value matches '/^[\\d\\.]+$/') %}
+    {{ name }}: 
+{{- name ends with 'date' ? 'new Date(' }}{{- isString ? "'" }}{{ value }}{{ isString ? "'" }}{{ name ends with 'date' ? ')' }},
+{% endfor %}
+}}{% endif %})

+            

+        

+    

+    

+        {% block parameters %}{% endblock %}
+    

+    

+        

+            🇬🇧 
+        

+        

+            🇫🇷 
+        

+    

+