bf5bcd3f52
* Fix open editors getting carried over to different notetypes * Fix first field not getting automatically focused * Fix collapsibles not transitioning in reduced motion mode * Fix editor taking a longer time to start when reduced motion is enabled If we don't transition, the editor actually takes considerably longer to create all the fields. * Fix fields not collapsing when notetype is loaded
113 lines
3.0 KiB
Svelte
113 lines
3.0 KiB
Svelte
<!--
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
-->
|
|
<script lang="ts">
|
|
import { tick } from "svelte";
|
|
import { cubicIn, cubicOut } from "svelte/easing";
|
|
import { tweened } from "svelte/motion";
|
|
|
|
export let collapse = false;
|
|
export let toggleDisplay = false;
|
|
export let animated = !document.body.classList.contains("reduce-motion");
|
|
|
|
let contentHeight = 0;
|
|
|
|
function dynamicDuration(height: number): number {
|
|
return 100 + Math.pow(height, 1 / 4) * 25;
|
|
}
|
|
// If we don't transition, the editor actually takes considerably longer to create all
|
|
// the fields. Because of that, we're using an imperceptible duration for the animation
|
|
// when reduced motion is enabled.
|
|
$: duration = animated ? dynamicDuration(contentHeight) : 0.01;
|
|
|
|
const size = tweened<number>(0);
|
|
|
|
async function transition(collapse: boolean): Promise<void> {
|
|
// We need to ensure collapsibleElement still exists
|
|
if (!collapsibleElement) {
|
|
return;
|
|
}
|
|
|
|
if (collapse) {
|
|
contentHeight = collapsibleElement.clientHeight;
|
|
size.set(0, {
|
|
duration: duration,
|
|
easing: cubicOut,
|
|
});
|
|
} else {
|
|
/* Tell content to show and await response */
|
|
collapsed = false;
|
|
await tick();
|
|
/* Measure content height to tween to */
|
|
contentHeight = collapsibleElement.clientHeight;
|
|
size.set(1, {
|
|
duration: duration,
|
|
easing: cubicIn,
|
|
});
|
|
}
|
|
}
|
|
|
|
$: if (collapsibleElement) {
|
|
window.requestAnimationFrame(() => transition(collapse));
|
|
}
|
|
|
|
let collapsibleElement: HTMLElement;
|
|
|
|
$: collapsed = $size === 0;
|
|
$: expanded = $size === 1;
|
|
$: height = $size * contentHeight;
|
|
$: transitioning = $size > 0 && !(collapsed || expanded);
|
|
$: measuring = !(collapsed || transitioning || expanded);
|
|
|
|
let hidden = collapsed;
|
|
|
|
$: {
|
|
/* await changes dependent on collapsed state */
|
|
tick().then(() => (hidden = collapsed));
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
bind:this={collapsibleElement}
|
|
class="collapsible"
|
|
class:expanded
|
|
class:full-hide={toggleDisplay}
|
|
class:measuring
|
|
class:transitioning
|
|
class:hidden
|
|
style:--height="{height}px"
|
|
>
|
|
<slot {collapsed} />
|
|
</div>
|
|
|
|
{#if measuring}
|
|
<!-- Maintain document flow while collapsible height is measured -->
|
|
<div class="collapsible-placeholder" />
|
|
{/if}
|
|
|
|
<style lang="scss">
|
|
.collapsible {
|
|
&.measuring {
|
|
display: initial;
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
&.transitioning {
|
|
overflow: hidden;
|
|
height: var(--height);
|
|
&.expanded {
|
|
overflow: visible;
|
|
}
|
|
&.full-hide {
|
|
display: initial;
|
|
}
|
|
}
|
|
&.full-hide {
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|