Internationalization: Extract JS-set strings

knuckleswtf · Apr 22, 2023 · 55eb9a5 · 55eb9a5
1 parent 4fd2a26
commit 55eb9a5
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 33 deletions.
diff --git a/lang/en.json b/lang/en.json
@@ -25,8 +25,10 @@
   "scribe::try_it_out.open": "Try it out ⚡",
   "scribe::try_it_out.cancel": "Cancel 🛑",
   "scribe::try_it_out.send": "Send Request 💥",
+  "scribe::try_it_out.loading": "⏱ Sending...",
   "scribe::try_it_out.received_response": "Received response",
   "scribe::try_it_out.request_failed": "Request failed with error",
+  "scribe::try_it_out.error_help": "Tip: Check that you're properly connected to the network.\nIf you're a maintainer of ths API, verify that your API is running and you've enabled CORS.\nYou can check the Dev Tools console for debugging information.",
   "scribe::links.postman": "View Postman collection",
   "scribe::links.openapi": "View OpenAPI spec"
 }
diff --git a/resources/js/tryitout.js b/resources/js/tryitout.js
@@ -64,7 +64,7 @@ function cancelTryOut(endpointId) {
     document.querySelector(`#btn-tryout-${endpointId}`).hidden = false;
     const executeBtn = document.querySelector(`#btn-executetryout-${endpointId}`);
     executeBtn.hidden = true;
-    executeBtn.textContent = "Send Request 💥";
+    executeBtn.textContent = executeBtn.dataset.initialText;
     document.querySelector(`#btn-canceltryout-${endpointId}`).hidden = true;
     // Hide inputs
     document.querySelectorAll(`input[data-endpoint=${endpointId}],label[data-endpoint=${endpointId}]`)
@@ -89,7 +89,7 @@ function makeAPICall(method, path, body = {}, query = {}, headers = {}, endpoint
         body = JSON.stringify(body)
     }
 
-    const url = new URL(window.baseUrl + '/' + path.replace(/^\//, ''));
+    const url = new URL(window.tryItOutBaseUrl + '/' + path.replace(/^\//, ''));
 
     // We need this function because if you try to set an array or object directly to a URLSearchParams object,
     // you'll get [object Object] or the array.toString()
@@ -119,7 +119,7 @@ function makeAPICall(method, path, body = {}, query = {}, headers = {}, endpoint
         headers,
         body: method === 'GET' ? undefined : body,
         signal: window.abortControllers[endpointId].signal,
-        referrer: window.baseUrl,
+        referrer: window.tryItOutBaseUrl,
         mode: 'cors',
         credentials: 'same-origin',
     })
@@ -150,7 +150,7 @@ function handleResponse(endpointId, response, status, headers) {
     } catch (e) {
 
     }
-    responseContentEl.textContent = response === '' ? '<Empty response>' : response;
+    responseContentEl.textContent = response === '' ? responseContentEl.dataset.emptyResponseText : response;
     isJson && window.hljs.highlightElement(responseContentEl);
     const statusEl = document.querySelector('#execution-response-status-' + endpointId);
     statusEl.textContent = ` (${status})`;
@@ -165,10 +165,8 @@ function handleError(endpointId, err) {
 
     // Show error views
     let errorMessage = err.message || err;
-    errorMessage += "\n\nTip: Check that you're properly connected to the network.";
-    errorMessage += "\nIf you're a maintainer of ths API, verify that your API is running and you've enabled CORS.";
-    errorMessage += "\nYou can check the Dev Tools console for debugging information.";
-    document.querySelector('#execution-error-message-' + endpointId).textContent = errorMessage;
+    const $errorMessageEl = document.querySelector('#execution-error-message-' + endpointId);
+    $errorMessageEl.textContent = errorMessage + $errorMessageEl.textContent;
     const errorEl = document.querySelector('#execution-error-' + endpointId);
     errorEl.hidden = false;
     errorEl.scrollIntoView({behavior: "smooth", block: "center"});
@@ -177,7 +175,7 @@ function handleError(endpointId, err) {
 
 async function executeTryOut(endpointId, form) {
     const executeBtn = document.querySelector(`#btn-executetryout-${endpointId}`);
-    executeBtn.textContent = "⏱ Sending...";
+    executeBtn.textContent = executeBtn.dataset.loadingText;
     executeBtn.disabled = true;
     executeBtn.scrollIntoView({behavior: "smooth", block: "center"});
 
@@ -269,6 +267,6 @@ async function executeTryOut(endpointId, form) {
         })
         .finally(() => {
             executeBtn.disabled = false;
-            executeBtn.textContent = "Send Request 💥";
+            executeBtn.textContent = executeBtn.dataset.initialText;
         });
 }
diff --git a/resources/views/themes/default/endpoint.blade.php b/resources/views/themes/default/endpoint.blade.php
@@ -54,11 +54,12 @@
     <blockquote>{{ __("scribe::try_it_out.received_response") }}<span
                 id="execution-response-status-{{ $endpoint->endpointId() }}"></span>:
     </blockquote>
-    <pre class="json"><code id="execution-response-content-{{ $endpoint->endpointId() }}" style="max-height: 400px;"></code></pre>
+    <pre class="json"><code id="execution-response-content-{{ $endpoint->endpointId() }}"
+      data-empty-response-text="<{{ __("scribe::example_response.empty") }}>" style="max-height: 400px;"></code></pre>
 </span>
 <span id="execution-error-{{ $endpoint->endpointId() }}" hidden>
     <blockquote>{{ __("scribe::try_it_out.request_failed") }}:</blockquote>
-    <pre><code id="execution-error-message-{{ $endpoint->endpointId() }}"></code></pre>
+    <pre><code id="execution-error-message-{{ $endpoint->endpointId() }}">{{ "\n\n".__("scribe::try_it_out.error_help") }}</code></pre>
 </span>
 <form id="form-{{ $endpoint->endpointId() }}" data-method="{{ $endpoint->httpMethods[0] }}"
       data-path="{{ $endpoint->uri }}"
@@ -82,7 +83,10 @@
             </button>&nbsp;&nbsp;
             <button type="submit"
                     style="background-color: #6ac174; padding: 5px 10px; border-radius: 5px; border-width: thin;"
-                    id="btn-executetryout-{{ $endpoint->endpointId() }}" hidden>{{ __("scribe::try_it_out.send") }}
+                    id="btn-executetryout-{{ $endpoint->endpointId() }}"
+                    data-initial-text="{{ __("scribe::try_it_out.send") }}"
+                    data-loading-text="{{ __("scribe::try_it_out.loading") }}"
+                    hidden>{{ __("scribe::try_it_out.send") }}
             </button>
         @endif
     </h3>

diff --git a/resources/views/themes/default/index.blade.php b/resources/views/themes/default/index.blade.php
@@ -33,7 +33,7 @@
 
 @if($tryItOut['enabled'] ?? true)
     <script>
-        var baseUrl = "{{ $tryItOut['base_url'] ?? config('app.url') }}";
+        var tryItOutBaseUrl = "{{ $tryItOut['base_url'] ?? config('app.url') }}";
         var useCsrf = Boolean({{ $tryItOut['use_csrf'] ?? null }});
         var csrfUrl = "{{ $tryItOut['csrf_url'] ?? null }}";
     </script>

diff --git a/resources/views/themes/elements/index.blade.php b/resources/views/themes/elements/index.blade.php
@@ -27,7 +27,7 @@
 
     @if($tryItOut['enabled'] ?? true)
         <script>
-            var baseUrl = "{{ $tryItOut['base_url'] ?? config('app.url') }}";
+            var tryItOutBaseUrl = "{{ $tryItOut['base_url'] ?? config('app.url') }}";
             var useCsrf = Boolean({{ $tryItOut['use_csrf'] ?? null }});
             var csrfUrl = "{{ $tryItOut['csrf_url'] ?? null }}";
         </script>
@@ -75,9 +75,9 @@ function tryItOut(btnElement) {
                 responsePanel.hidden = true;
 
                 let form = btnElement.form;
-                let { method, path, hasjsonbody } = form.dataset;
+                let { method, path, hasjsonbody: hasJsonBody} = form.dataset;
                 let body = {};
-                if (hasjsonbody === "1") {
+                if (hasJsonBody === "1") {
                     body = form.querySelector('.code-editor').textContent;
                 } else if (form.dataset.hasfiles === "1") {
                     body = new FormData();
@@ -118,7 +118,7 @@ function tryItOut(btnElement) {
 
                         let contentEl = responsePanel.querySelector(`.response-content`);
                         if (responseContent === '') {
-                            contentEl.textContent = '<Empty response>'
+                            contentEl.textContent = contentEl.dataset.emptyResponseText;
                             return;
                         }
 

diff --git a/resources/views/themes/elements/try_it_out.blade.php b/resources/views/themes/elements/try_it_out.blade.php
@@ -279,23 +279,13 @@ class="svg-inline--fa fa-caret-down fa-fw sl-icon" role="img"
                                       d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path>
                             </svg>
                         </div>
-                        Error
+                        {{ __("scribe::try_it_out.request_failed") }}
                     </div>
                 </div>
                 <div class="sl-panel__content-wrapper sl-bg-canvas-100 children" role="region">
                     <div class="sl-panel__content sl-p-4">
-                        <p class="sl-pb-2"><strong
-                                    class="error-message"></strong></p>
-                        <p class="sl-pb-2">1. Double check that your computer is connected to
-                            the internet.</p>
-                        <p class="sl-pb-2">2. Make sure the API is actually running and
-                            available under the specified URL.</p>
-                        <p>3. If you've checked all of the above and still experiencing issues,
-                            check if the API supports <a target="_blank"
-                                                         rel="noopener noreferrer"
-                                                         href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS"
-                                                         class="sl-link sl-font-semibold">CORS</a>.
-                        </p>
+                        <p class="sl-pb-2"><strong class="error-message"></strong></p>
+                        <p class="sl-pb-2">{{ __("scribe::try_it_out.error_help") }}</p>
                     </div>
                 </div>
             </div>
@@ -314,13 +304,15 @@ class="svg-inline--fa fa-caret-down fa-fw sl-icon" role="img"
                                           d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"></path>
                                 </svg>
                             </div>
-                            Response
+                            {{ __("scribe::try_it_out.received_response") }}
                         </div>
                     </div>
                     <div class="sl-panel__content-wrapper sl-bg-canvas-100 children" role="region">
                         <div class="sl-panel__content sl-p-4">
                             <p class="sl-pb-2 response-status"></p>
-                            <pre><code class="sl-pb-2 response-content language-json" style="max-height: 300px;"></code></pre>
+                            <pre><code class="sl-pb-2 response-content language-json"
+                                       data-empty-response-text="<{{ __("scribe::example_response.empty") }}>"
+                                       style="max-height: 300px;"></code></pre>
                         </div>
                     </div>
                 </div>