wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

handle dynamic query strings on framer

Browse source
This commit is contained in:
Jon McClure 2022-09-22 17:03:00 +01:00
parent a0a94d08ea
commit 47ae05dd97
1 changed files with 44 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
src/components/Framer/Framer.svelte
View file

@ -23,6 +23,7 @@
}; };
let activeEmbed = getDefaultEmbed(); let activeEmbed = getDefaultEmbed();
let activeEmbedIndex = embeds.indexOf(activeEmbed);
$: embedTitles = getUniqNames(embeds); $: embedTitles = getUniqNames(embeds);
@ -30,11 +31,17 @@
let pymParent; let pymParent;
const reframe = (embed) => { const reframe = (embed) => {
// Bit of hack for handling adding query strings dynamically to embeds.
// cf. also the value prop on the Typeahead component...
const activeEmbed =
embeds.indexOf(embed) > -1
? embed
: embeds[activeEmbedIndex] || embeds[0];
pymParent = new pym.Parent( pymParent = new pym.Parent(
'frame-parent', 'frame-parent',
/^http/.test(embed) /^http/.test(activeEmbed)
? embed ? activeEmbed
: urljoin(window.location.origin, embed, { trailingSlash: true }) : urljoin(window.location.origin, activeEmbed, { trailingSlash: true })
); );
}; };
@ -68,7 +75,9 @@
</div> </div>
<Typeahead <Typeahead
label="Select an embed" label="Select an embed"
value="{embedTitles[embeds.indexOf(activeEmbed)]}" value="{embedTitles[embeds.indexOf(activeEmbed)] ||
embedTitles[activeEmbedIndex] ||
embedTitles[0]}"
extract="{(d) => embedTitles[d.index]}" extract="{(d) => embedTitles[d.index]}"
data="{embeds.map((embed, index) => ({ index, embed }))}" data="{embeds.map((embed, index) => ({ index, embed }))}"
placeholder="{'Search'}" placeholder="{'Search'}"
@ -81,6 +90,7 @@
); );
} }
activeEmbed = detail.original.embed; activeEmbed = detail.original.embed;
activeEmbedIndex = detail.original.index;
}}" }}"
/> />
</div> </div>
@ -103,12 +113,9 @@
maxFrameWidth="{maxFrameWidth}" maxFrameWidth="{maxFrameWidth}"
/> />
<style lang="scss"> <style>
@import '../../scss/fonts/mixins';
header { header {
@include font-display; font-family: 'Knowledge', 'Source Sans Pro', Arial, sans-serif;
font-size: 50px; font-size: 50px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
@ -120,32 +127,32 @@
max-width: 660px; max-width: 660px;
margin: 0 auto 15px; margin: 0 auto 15px;
position: relative; position: relative;
div.embed-link { }
position: absolute; div#typeahead-container div.embed-link {
top: 0; position: absolute;
right: 0; top: 0;
display: inline-block; right: 0;
z-index: 2; display: inline-block;
a { z-index: 2;
@include font-display; }
color: #bbb; div#typeahead-container div.embed-link a {
font-size: 12px; font-family: 'Knowledge', 'Source Sans Pro', Arial, sans-serif;
text-decoration: none !important; color: #bbb;
&:hover { font-size: 12px;
color: #666; text-decoration: none !important;
} }
} div#typeahead-container div.embed-link a:hover {
} color: #666;
} }
div#preview-label { div#preview-label {
margin: 0 auto; margin: 0 auto;
p { }
@include font-display; div#preview-label p {
color: #aaa; font-family: 'Knowledge', 'Source Sans Pro', Arial, sans-serif;
font-size: 0.75rem; color: #aaa;
margin: 0 0 0.25rem; font-size: 0.75rem;
} margin: 0 0 0.25rem;
} }
#frame-parent { #frame-parent {
@ -159,11 +166,11 @@
bottom: 5px; bottom: 5px;
left: 10px; left: 10px;
font-size: 18px; font-size: 18px;
a { }
color: #ccc; div#home-link a {
&:hover { color: #ccc;
color: #666; }
} div#home-link a:hover {
} color: #666;
} }
</style> </style>