60 lines
1.5 KiB
Svelte
60 lines
1.5 KiB
Svelte
|
<script>
|
||
|
|
import {scale} from "svelte/transition";
|
||
|
|
import {api, settings, settings_changed, strings, urls} from "../js/stores";
|
||
|
|
import Panel from "./Panel.svelte";
|
||
|
|
import PanelRow from "./PanelRow.svelte";
|
||
|
|
|
||
|
|
let parts = $urls.url_parts;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* When settings have changed, show their preview URL, otherwise show saved settings version.
|
||
|
|
*
|
||
|
|
* Note: This function **assigns** to the `example` and `parts` variables to defeat the reactive demons!
|
||
|
|
*
|
||
|
|
* @param {Object} urls
|
||
|
|
* @param {boolean} settingsChanged
|
||
|
|
* @param {Object} settings
|
||
|
|
*
|
||
|
|
* @returns boolean
|
||
|
|
*/
|
||
|
|
async function temporaryUrl( urls, settingsChanged, settings ) {
|
||
|
|
if ( settingsChanged ) {
|
||
|
|
const response = await api.post( "url-preview", {
|
||
|
|
"settings": settings
|
||
|
|
} );
|
||
|
|
|
||
|
|
// Use temporary URLs if available.
|
||
|
|
if ( response.hasOwnProperty( "url_parts" ) ) {
|
||
|
|
parts = response.url_parts;
|
||
|
|
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Reset back to saved URLs.
|
||
|
|
parts = urls.url_parts;
|
||
|
|
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
$: isTemporaryUrl = temporaryUrl( $urls, $settings_changed, $settings );
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if parts.length > 0}
|
||
|
|
<Panel name="url-preview" heading={$strings.url_preview_title}>
|
||
|
|
<PanelRow class="desc">
|
||
|
|
<p>{$strings.url_preview_desc}</p>
|
||
|
|
</PanelRow>
|
||
|
|
<PanelRow class="body flex-row">
|
||
|
|
<dl>
|
||
|
|
{#each parts as part (part.title)}
|
||
|
|
<div data-key={part.key} transition:scale>
|
||
|
|
<dt>{part.title}</dt>
|
||
|
|
<dd>{part.example}</dd>
|
||
|
|
</div>
|
||
|
|
{/each}
|
||
|
|
</dl>
|
||
|
|
</PanelRow>
|
||
|
|
</Panel>
|
||
|
|
{/if}
|