diff --git a/lang/en.json b/lang/en.json index 2765e705..2a8afc8e 100644 --- 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 index 21ee28e7..a3feb1bd 100644 --- 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 === '' ? '' : 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 index d6874602..faff5037 100644 --- a/resources/views/themes/default/endpoint.blade.php +++ b/resources/views/themes/default/endpoint.blade.php @@ -54,11 +54,12 @@
{{ __("scribe::try_it_out.received_response") }}:
-
+
" style="max-height: 400px;">
   @endif diff --git a/resources/views/themes/default/index.blade.php b/resources/views/themes/default/index.blade.php index ef73219e..d0f46344 100644 --- a/resources/views/themes/default/index.blade.php +++ b/resources/views/themes/default/index.blade.php @@ -33,7 +33,7 @@ @if($tryItOut['enabled'] ?? true) diff --git a/resources/views/themes/elements/index.blade.php b/resources/views/themes/elements/index.blade.php index 68b74b24..bc1ba060 100644 --- a/resources/views/themes/elements/index.blade.php +++ b/resources/views/themes/elements/index.blade.php @@ -27,7 +27,7 @@ @if($tryItOut['enabled'] ?? true) @@ -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 = '' + 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 index 284ec2d9..6033c677 100644 --- 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"> - Error + {{ __("scribe::try_it_out.request_failed") }}
-

-

1. Double check that your computer is connected to - the internet.

-

2. Make sure the API is actually running and - available under the specified URL.

-

3. If you've checked all of the above and still experiencing issues, - check if the API supports CORS. -

+

+

{{ __("scribe::try_it_out.error_help") }}

@@ -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"> - Response + {{ __("scribe::try_it_out.received_response") }}

-
+
"
+                                       style="max-height: 300px;">