Last round of prettier: npx prettier --write src/
This commit is contained in:
Scott Idem
@@ -1,120 +1,136 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* e_app_url_builder.svelte
|
||||
* URL Param Builder — lets admins construct and copy shareable URLs
|
||||
* with any combination of the supported URL params applied.
|
||||
*
|
||||
* Core params:
|
||||
* ?iframe=true|false — persist kiosk mode (stays in URL)
|
||||
* ?theme=<name> — set theme name on load (stripped after apply)
|
||||
* ?theme_mode=light|dark — set light/dark mode on load (stripped after apply)
|
||||
* ?key=<access_key> — site access key
|
||||
*
|
||||
* Launcher params (all stripped from URL after apply):
|
||||
* ?launcher_menu=hide|show
|
||||
* ?launcher_header=hide|show
|
||||
* ?launcher_footer=hide|show
|
||||
*/
|
||||
import { page } from '$app/stores';
|
||||
import { Copy, Check, Link } from '@lucide/svelte';
|
||||
/**
|
||||
* e_app_url_builder.svelte
|
||||
* URL Param Builder — lets admins construct and copy shareable URLs
|
||||
* with any combination of the supported URL params applied.
|
||||
*
|
||||
* Core params:
|
||||
* ?iframe=true|false — persist kiosk mode (stays in URL)
|
||||
* ?theme=<name> — set theme name on load (stripped after apply)
|
||||
* ?theme_mode=light|dark — set light/dark mode on load (stripped after apply)
|
||||
* ?key=<access_key> — site access key
|
||||
*
|
||||
* Launcher params (all stripped from URL after apply):
|
||||
* ?launcher_menu=hide|show
|
||||
* ?launcher_header=hide|show
|
||||
* ?launcher_footer=hide|show
|
||||
*/
|
||||
import { page } from '$app/stores';
|
||||
import { Copy, Check, Link } from '@lucide/svelte';
|
||||
|
||||
// --- Per-param: include this param in the output URL?
|
||||
let use_iframe = $state(false);
|
||||
let use_theme = $state(false);
|
||||
let use_theme_mode = $state(false);
|
||||
let use_key = $state(false);
|
||||
let use_launcher_menu = $state(false);
|
||||
let use_launcher_header = $state(false);
|
||||
let use_launcher_footer = $state(false);
|
||||
// --- Per-param: include this param in the output URL?
|
||||
let use_iframe = $state(false);
|
||||
let use_theme = $state(false);
|
||||
let use_theme_mode = $state(false);
|
||||
let use_key = $state(false);
|
||||
let use_launcher_menu = $state(false);
|
||||
let use_launcher_header = $state(false);
|
||||
let use_launcher_footer = $state(false);
|
||||
|
||||
// --- Param values
|
||||
let val_iframe = $state<'true' | 'false'>('true');
|
||||
let val_theme = $state('nouveau');
|
||||
let val_theme_mode = $state<'light' | 'dark'>('dark');
|
||||
let val_key = $state('');
|
||||
let val_launcher_menu = $state<'hide' | 'show'>('hide');
|
||||
let val_launcher_header = $state<'hide' | 'show'>('hide');
|
||||
let val_launcher_footer = $state<'hide' | 'show'>('hide');
|
||||
// --- Param values
|
||||
let val_iframe = $state<'true' | 'false'>('true');
|
||||
let val_theme = $state('nouveau');
|
||||
let val_theme_mode = $state<'light' | 'dark'>('dark');
|
||||
let val_key = $state('');
|
||||
let val_launcher_menu = $state<'hide' | 'show'>('hide');
|
||||
let val_launcher_header = $state<'hide' | 'show'>('hide');
|
||||
let val_launcher_footer = $state<'hide' | 'show'>('hide');
|
||||
|
||||
// Build the output URL reactively
|
||||
let built_url = $derived.by(() => {
|
||||
const base = $page.url;
|
||||
const u = new URL(base.pathname + base.search + base.hash, base.origin);
|
||||
// Build the output URL reactively
|
||||
let built_url = $derived.by(() => {
|
||||
const base = $page.url;
|
||||
const u = new URL(base.pathname + base.search + base.hash, base.origin);
|
||||
|
||||
// Remove all known params first so we start clean each time
|
||||
u.searchParams.delete('iframe');
|
||||
u.searchParams.delete('theme');
|
||||
u.searchParams.delete('theme_mode');
|
||||
u.searchParams.delete('key');
|
||||
u.searchParams.delete('launcher_menu');
|
||||
u.searchParams.delete('launcher_header');
|
||||
u.searchParams.delete('launcher_footer');
|
||||
// Remove all known params first so we start clean each time
|
||||
u.searchParams.delete('iframe');
|
||||
u.searchParams.delete('theme');
|
||||
u.searchParams.delete('theme_mode');
|
||||
u.searchParams.delete('key');
|
||||
u.searchParams.delete('launcher_menu');
|
||||
u.searchParams.delete('launcher_header');
|
||||
u.searchParams.delete('launcher_footer');
|
||||
|
||||
if (use_iframe) u.searchParams.set('iframe', val_iframe);
|
||||
if (use_theme) u.searchParams.set('theme', val_theme);
|
||||
if (use_theme_mode) u.searchParams.set('theme_mode', val_theme_mode);
|
||||
if (use_key && val_key.trim()) u.searchParams.set('key', val_key.trim());
|
||||
if (use_launcher_menu) u.searchParams.set('launcher_menu', val_launcher_menu);
|
||||
if (use_launcher_header) u.searchParams.set('launcher_header', val_launcher_header);
|
||||
if (use_launcher_footer) u.searchParams.set('launcher_footer', val_launcher_footer);
|
||||
if (use_iframe) u.searchParams.set('iframe', val_iframe);
|
||||
if (use_theme) u.searchParams.set('theme', val_theme);
|
||||
if (use_theme_mode) u.searchParams.set('theme_mode', val_theme_mode);
|
||||
if (use_key && val_key.trim()) u.searchParams.set('key', val_key.trim());
|
||||
if (use_launcher_menu)
|
||||
u.searchParams.set('launcher_menu', val_launcher_menu);
|
||||
if (use_launcher_header)
|
||||
u.searchParams.set('launcher_header', val_launcher_header);
|
||||
if (use_launcher_footer)
|
||||
u.searchParams.set('launcher_footer', val_launcher_footer);
|
||||
|
||||
return u.toString();
|
||||
return u.toString();
|
||||
});
|
||||
|
||||
// Output mode: full URL (default) or params-only string
|
||||
let params_only = $state(false);
|
||||
|
||||
let output = $derived.by(() => {
|
||||
if (!params_only) return built_url;
|
||||
const u = new URL(built_url);
|
||||
return u.search || '(no params set)';
|
||||
});
|
||||
|
||||
let copied = $state(false);
|
||||
|
||||
function copy_url() {
|
||||
navigator.clipboard.writeText(output).then(() => {
|
||||
copied = true;
|
||||
setTimeout(() => (copied = false), 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// Output mode: full URL (default) or params-only string
|
||||
let params_only = $state(false);
|
||||
|
||||
let output = $derived.by(() => {
|
||||
if (!params_only) return built_url;
|
||||
const u = new URL(built_url);
|
||||
return u.search || '(no params set)';
|
||||
});
|
||||
|
||||
let copied = $state(false);
|
||||
|
||||
function copy_url() {
|
||||
navigator.clipboard.writeText(output).then(() => {
|
||||
copied = true;
|
||||
setTimeout(() => copied = false, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
const theme_options = [
|
||||
{ value: 'cerberus', label: 'Cerberus' },
|
||||
{ value: 'concord', label: 'Concord' },
|
||||
{ value: 'crimson', label: 'Crimson' },
|
||||
{ value: 'hamlindigo', label: 'Hamlindigo' },
|
||||
{ value: 'modern', label: 'Modern' },
|
||||
{ value: 'nouveau', label: 'Nouveau' },
|
||||
{ value: 'rocket', label: 'Rocket' },
|
||||
{ value: 'terminus', label: 'Terminus' },
|
||||
{ value: 'vintage', label: 'Vintage' },
|
||||
{ value: 'wintry', label: 'Wintry' },
|
||||
{ value: 'AE_OSIT_default', label: 'OSIT' },
|
||||
{ value: 'AE_Firefly', label: 'Firefly ✦' },
|
||||
{ value: 'AE_Firefly_SteelBlue', label: 'Firefly SteelBlue ✦' },
|
||||
{ value: 'AE_Firefly_Indigo', label: 'Firefly Indigo ✦' },
|
||||
{ value: 'AE_Firefly_Rainbow', label: 'Firefly Rainbow ✨' },
|
||||
{ value: 'AE_c_IDAA_light', label: 'IDAA – light' },
|
||||
{ value: 'AE_c_LCI', label: 'LCI' },
|
||||
];
|
||||
const theme_options = [
|
||||
{ value: 'cerberus', label: 'Cerberus' },
|
||||
{ value: 'concord', label: 'Concord' },
|
||||
{ value: 'crimson', label: 'Crimson' },
|
||||
{ value: 'hamlindigo', label: 'Hamlindigo' },
|
||||
{ value: 'modern', label: 'Modern' },
|
||||
{ value: 'nouveau', label: 'Nouveau' },
|
||||
{ value: 'rocket', label: 'Rocket' },
|
||||
{ value: 'terminus', label: 'Terminus' },
|
||||
{ value: 'vintage', label: 'Vintage' },
|
||||
{ value: 'wintry', label: 'Wintry' },
|
||||
{ value: 'AE_OSIT_default', label: 'OSIT' },
|
||||
{ value: 'AE_Firefly', label: 'Firefly ✦' },
|
||||
{ value: 'AE_Firefly_SteelBlue', label: 'Firefly SteelBlue ✦' },
|
||||
{ value: 'AE_Firefly_Indigo', label: 'Firefly Indigo ✦' },
|
||||
{ value: 'AE_Firefly_Rainbow', label: 'Firefly Rainbow ✨' },
|
||||
{ value: 'AE_c_IDAA_light', label: 'IDAA – light' },
|
||||
{ value: 'AE_c_LCI', label: 'LCI' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<section class="space-y-3 text-sm">
|
||||
|
||||
<h2 class="text-xs font-semibold uppercase tracking-widest text-surface-500 dark:text-surface-400 flex items-center gap-1">
|
||||
<h2
|
||||
class="text-surface-500 dark:text-surface-400 flex items-center gap-1 text-xs font-semibold tracking-widest uppercase">
|
||||
<Link size="0.9em" /> URL Param Builder
|
||||
</h2>
|
||||
|
||||
<!-- ── Core params ─────────────────────────────────────────────────── -->
|
||||
<div class="space-y-1.5">
|
||||
<p class="text-[9px] font-bold uppercase tracking-widest opacity-40 ml-0.5">Core</p>
|
||||
<p
|
||||
class="ml-0.5 text-[9px] font-bold tracking-widest uppercase opacity-40">
|
||||
Core
|
||||
</p>
|
||||
|
||||
<!-- iframe -->
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="ubld_iframe" type="checkbox" class="checkbox checkbox-sm shrink-0" bind:checked={use_iframe} />
|
||||
<label for="ubld_iframe" class="w-24 text-xs font-mono cursor-pointer select-none" class:opacity-35={!use_iframe}>iframe</label>
|
||||
<select bind:value={val_iframe} disabled={!use_iframe} class="select select-sm text-xs flex-1 disabled:opacity-40">
|
||||
<input
|
||||
id="ubld_iframe"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-sm shrink-0"
|
||||
bind:checked={use_iframe} />
|
||||
<label
|
||||
for="ubld_iframe"
|
||||
class="w-24 cursor-pointer font-mono text-xs select-none"
|
||||
class:opacity-35={!use_iframe}>iframe</label>
|
||||
<select
|
||||
bind:value={val_iframe}
|
||||
disabled={!use_iframe}
|
||||
class="select select-sm flex-1 text-xs disabled:opacity-40">
|
||||
<option value="true">true</option>
|
||||
<option value="false">false</option>
|
||||
</select>
|
||||
@@ -122,9 +138,19 @@
|
||||
|
||||
<!-- theme -->
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="ubld_theme" type="checkbox" class="checkbox checkbox-sm shrink-0" bind:checked={use_theme} />
|
||||
<label for="ubld_theme" class="w-24 text-xs font-mono cursor-pointer select-none" class:opacity-35={!use_theme}>theme</label>
|
||||
<select bind:value={val_theme} disabled={!use_theme} class="select select-sm text-xs flex-1 disabled:opacity-40">
|
||||
<input
|
||||
id="ubld_theme"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-sm shrink-0"
|
||||
bind:checked={use_theme} />
|
||||
<label
|
||||
for="ubld_theme"
|
||||
class="w-24 cursor-pointer font-mono text-xs select-none"
|
||||
class:opacity-35={!use_theme}>theme</label>
|
||||
<select
|
||||
bind:value={val_theme}
|
||||
disabled={!use_theme}
|
||||
class="select select-sm flex-1 text-xs disabled:opacity-40">
|
||||
{#each theme_options as opt}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
@@ -133,9 +159,19 @@
|
||||
|
||||
<!-- theme_mode -->
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="ubld_theme_mode" type="checkbox" class="checkbox checkbox-sm shrink-0" bind:checked={use_theme_mode} />
|
||||
<label for="ubld_theme_mode" class="w-24 text-xs font-mono cursor-pointer select-none" class:opacity-35={!use_theme_mode}>theme_mode</label>
|
||||
<select bind:value={val_theme_mode} disabled={!use_theme_mode} class="select select-sm text-xs flex-1 disabled:opacity-40">
|
||||
<input
|
||||
id="ubld_theme_mode"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-sm shrink-0"
|
||||
bind:checked={use_theme_mode} />
|
||||
<label
|
||||
for="ubld_theme_mode"
|
||||
class="w-24 cursor-pointer font-mono text-xs select-none"
|
||||
class:opacity-35={!use_theme_mode}>theme_mode</label>
|
||||
<select
|
||||
bind:value={val_theme_mode}
|
||||
disabled={!use_theme_mode}
|
||||
class="select select-sm flex-1 text-xs disabled:opacity-40">
|
||||
<option value="light">light</option>
|
||||
<option value="dark">dark</option>
|
||||
</select>
|
||||
@@ -143,27 +179,46 @@
|
||||
|
||||
<!-- key -->
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="ubld_key" type="checkbox" class="checkbox checkbox-sm shrink-0" bind:checked={use_key} />
|
||||
<label for="ubld_key" class="w-24 text-xs font-mono cursor-pointer select-none" class:opacity-35={!use_key}>key</label>
|
||||
<input
|
||||
id="ubld_key"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-sm shrink-0"
|
||||
bind:checked={use_key} />
|
||||
<label
|
||||
for="ubld_key"
|
||||
class="w-24 cursor-pointer font-mono text-xs select-none"
|
||||
class:opacity-35={!use_key}>key</label>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={val_key}
|
||||
disabled={!use_key}
|
||||
placeholder="access key"
|
||||
class="input input-sm text-xs font-mono flex-1 disabled:opacity-40"
|
||||
/>
|
||||
class="input input-sm flex-1 font-mono text-xs disabled:opacity-40" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Launcher params ─────────────────────────────────────────────── -->
|
||||
<div class="space-y-1.5 border-t border-surface-500/20 pt-2.5">
|
||||
<p class="text-[9px] font-bold uppercase tracking-widest opacity-40 ml-0.5">Launcher</p>
|
||||
<div class="border-surface-500/20 space-y-1.5 border-t pt-2.5">
|
||||
<p
|
||||
class="ml-0.5 text-[9px] font-bold tracking-widest uppercase opacity-40">
|
||||
Launcher
|
||||
</p>
|
||||
|
||||
<!-- launcher_menu -->
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="ubld_launcher_menu" type="checkbox" class="checkbox checkbox-sm shrink-0" bind:checked={use_launcher_menu} />
|
||||
<label for="ubld_launcher_menu" class="w-24 text-xs font-mono cursor-pointer select-none" class:opacity-35={!use_launcher_menu}>menu</label>
|
||||
<select bind:value={val_launcher_menu} disabled={!use_launcher_menu} class="select select-sm text-xs flex-1 disabled:opacity-40">
|
||||
<input
|
||||
id="ubld_launcher_menu"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-sm shrink-0"
|
||||
bind:checked={use_launcher_menu} />
|
||||
<label
|
||||
for="ubld_launcher_menu"
|
||||
class="w-24 cursor-pointer font-mono text-xs select-none"
|
||||
class:opacity-35={!use_launcher_menu}>menu</label>
|
||||
<select
|
||||
bind:value={val_launcher_menu}
|
||||
disabled={!use_launcher_menu}
|
||||
class="select select-sm flex-1 text-xs disabled:opacity-40">
|
||||
<option value="hide">hide</option>
|
||||
<option value="show">show</option>
|
||||
</select>
|
||||
@@ -171,9 +226,19 @@
|
||||
|
||||
<!-- launcher_header -->
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="ubld_launcher_header" type="checkbox" class="checkbox checkbox-sm shrink-0" bind:checked={use_launcher_header} />
|
||||
<label for="ubld_launcher_header" class="w-24 text-xs font-mono cursor-pointer select-none" class:opacity-35={!use_launcher_header}>header</label>
|
||||
<select bind:value={val_launcher_header} disabled={!use_launcher_header} class="select select-sm text-xs flex-1 disabled:opacity-40">
|
||||
<input
|
||||
id="ubld_launcher_header"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-sm shrink-0"
|
||||
bind:checked={use_launcher_header} />
|
||||
<label
|
||||
for="ubld_launcher_header"
|
||||
class="w-24 cursor-pointer font-mono text-xs select-none"
|
||||
class:opacity-35={!use_launcher_header}>header</label>
|
||||
<select
|
||||
bind:value={val_launcher_header}
|
||||
disabled={!use_launcher_header}
|
||||
class="select select-sm flex-1 text-xs disabled:opacity-40">
|
||||
<option value="hide">hide</option>
|
||||
<option value="show">show</option>
|
||||
</select>
|
||||
@@ -181,9 +246,19 @@
|
||||
|
||||
<!-- launcher_footer -->
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="ubld_launcher_footer" type="checkbox" class="checkbox checkbox-sm shrink-0" bind:checked={use_launcher_footer} />
|
||||
<label for="ubld_launcher_footer" class="w-24 text-xs font-mono cursor-pointer select-none" class:opacity-35={!use_launcher_footer}>footer</label>
|
||||
<select bind:value={val_launcher_footer} disabled={!use_launcher_footer} class="select select-sm text-xs flex-1 disabled:opacity-40">
|
||||
<input
|
||||
id="ubld_launcher_footer"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-sm shrink-0"
|
||||
bind:checked={use_launcher_footer} />
|
||||
<label
|
||||
for="ubld_launcher_footer"
|
||||
class="w-24 cursor-pointer font-mono text-xs select-none"
|
||||
class:opacity-35={!use_launcher_footer}>footer</label>
|
||||
<select
|
||||
bind:value={val_launcher_footer}
|
||||
disabled={!use_launcher_footer}
|
||||
class="select select-sm flex-1 text-xs disabled:opacity-40">
|
||||
<option value="hide">hide</option>
|
||||
<option value="show">show</option>
|
||||
</select>
|
||||
@@ -191,26 +266,33 @@
|
||||
</div>
|
||||
|
||||
<!-- ── Output ──────────────────────────────────────────────────────── -->
|
||||
<div class="border-t border-surface-500/20 pt-2.5 space-y-1.5">
|
||||
<div class="border-surface-500/20 space-y-1.5 border-t pt-2.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="ubld_params_only" type="checkbox" class="checkbox checkbox-sm shrink-0" bind:checked={params_only} />
|
||||
<label for="ubld_params_only" class="text-xs cursor-pointer select-none" class:opacity-35={!params_only}>Params only</label>
|
||||
<input
|
||||
id="ubld_params_only"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-sm shrink-0"
|
||||
bind:checked={params_only} />
|
||||
<label
|
||||
for="ubld_params_only"
|
||||
class="cursor-pointer text-xs select-none"
|
||||
class:opacity-35={!params_only}>Params only</label>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-1 items-stretch">
|
||||
<div class="flex items-stretch gap-1">
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
value={output}
|
||||
class="input input-sm text-xs font-mono flex-1 bg-surface-50/50 dark:bg-surface-700/50 cursor-text"
|
||||
class="input input-sm bg-surface-50/50 dark:bg-surface-700/50 flex-1 cursor-text font-mono text-xs"
|
||||
onclick={(e) => (e.target as HTMLInputElement).select()}
|
||||
title="Click to select all"
|
||||
/>
|
||||
title="Click to select all" />
|
||||
<button
|
||||
class="btn btn-sm {copied ? 'preset-filled-success' : 'preset-tonal-primary'} shrink-0 transition-all"
|
||||
class="btn btn-sm {copied
|
||||
? 'preset-filled-success'
|
||||
: 'preset-tonal-primary'} shrink-0 transition-all"
|
||||
onclick={copy_url}
|
||||
title="Copy URL to clipboard"
|
||||
>
|
||||
title="Copy URL to clipboard">
|
||||
{#if copied}
|
||||
<Check size="1em" />
|
||||
{:else}
|
||||
@@ -219,5 +301,4 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user