#3 Use translations (basic)

Author: alies-dev

dist/js/field.js

@@ -1,3 +1,3 @@
 {
-    "/js/field.js": "/js/field.js?id=a9e4b55019bad3275d91"
+    "/js/field.js": "/js/field.js?id=06b32463f59a0749766c"
 }

dist/mix-manifest.json

@@ -7,7 +7,7 @@
                         class="text-xs bg-90 hover:bg-black text-white font-semibold rounded-sm px-4 py-1 m-1 form-input-bordered"
                         @click="toggleFullscreen"
                         type="button">
-                    {{ fullscreenButtonText.on }}
+                    {{ __('Enter fullscreen') }}
                 </button>
             </div>
             <div :id=containerId :style="{height: field.height || '800px'}" class="form-input-bordered"></div>
@@ -26,13 +26,6 @@
 
         props: ['resourceName', 'resourceId', 'field'],
 
-        data: () => ({
-            fullscreenButtonText: {
-                on: '▶ Enter fullscreen',
-                off: '✖︎ Exit fullscreen',
-            },
-        }),
-
         created() {
             this.injectUnlayerScript(this.initEditor);
         },
@@ -56,9 +49,10 @@
                 controls.classList.toggle('stickyControls');
 
                 const toggleButton = controls.querySelector(`#fullscreenToggleButton`);
+                const trans = Nova.app.$options.methods.__;
                 unlayerEditorContainer.classList.contains('fullscreen')
-                    ? toggleButton.innerText = this.fullscreenButtonText.off
-                    : toggleButton.innerText = this.fullscreenButtonText.on;
+                    ? toggleButton.innerText = trans('Exit fullscreen')
+                    : toggleButton.innerText = trans('Enter fullscreen');
             },
 
             /**

resources/js/components/FormField.vue

@@ -0,0 +1,4 @@
+{
+  "Enter fullscreen": "▶ Enter fullscreen",
+  "Exit fullscreen": "✖︎ Exit fullscreen"
+}

resources/lang/en.json

@@ -13,5 +13,14 @@ public function boot(): void
         Nova::serving(function () {
             Nova::script('nova-unlayer-field', __DIR__.'/../dist/js/field.js');
         });
+
+        $this->registerTranslations();
+    }
+
+    protected function registerTranslations(): void
+    {
+        $currentLocale = app()->getLocale();
+
+        Nova::translations(__DIR__."/../resources/lang/$currentLocale.json");
     }
 }