mirror of https://github.com/sveltejs/svelte
Puru Vijay
3 years ago
parent
9b439393e6
commit
4a288a5e33
@ -0,0 +1,67 @@
|
||||
<script>
|
||||
import { tick } from 'svelte';
|
||||
|
||||
export let html = '';
|
||||
export let x = 0;
|
||||
export let y = 0;
|
||||
|
||||
let width = 1;
|
||||
let tooltip;
|
||||
|
||||
// bit of a gross hack but it works — this prevents the
|
||||
// tooltip from disappearing off the side of the screen
|
||||
$: if (html && tooltip) {
|
||||
tick().then(() => {
|
||||
width = tooltip.getBoundingClientRect().width;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
class="tooltip-container"
|
||||
style="left: {x}px; top: {y}px; --offset: {Math.min(-10, window.innerWidth - (x + width + 10))}px"
|
||||
>
|
||||
<div bind:this={tooltip} class="tooltip">
|
||||
<span>{@html html}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tooltip-container {
|
||||
--bg: var(--sk-theme-2);
|
||||
--arrow-size: 0.4rem;
|
||||
position: absolute;
|
||||
transform: translate(var(--offset), calc(2rem + var(--arrow-size)));
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
margin: 0 2rem 0 0;
|
||||
background-color: var(--bg);
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: var(--sk-border-radius);
|
||||
font-family: var(--sk-font-mono);
|
||||
font-size: 1.2rem;
|
||||
white-space: pre-wrap;
|
||||
z-index: 100;
|
||||
filter: drop-shadow(2px 4px 6px #67677866);
|
||||
}
|
||||
|
||||
.tooltip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: calc(-1 * var(--offset) - var(--arrow-size));
|
||||
top: calc(-2 * var(--arrow-size));
|
||||
border: var(--arrow-size) solid transparent;
|
||||
border-bottom-color: var(--bg);
|
||||
}
|
||||
|
||||
.tooltip :global(a) {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
import { onMount } from 'svelte';
|
||||
import Tooltip from './Tooltip.svelte';
|
||||
|
||||
export function setup() {
|
||||
onMount(() => {
|
||||
let tooltip;
|
||||
let timeout;
|
||||
|
||||
function over(event) {
|
||||
if (event.target.tagName === 'DATA-LSP') {
|
||||
clearTimeout(timeout);
|
||||
|
||||
if (!tooltip) {
|
||||
tooltip = new Tooltip({
|
||||
target: document.body
|
||||
});
|
||||
|
||||
tooltip.$on('mouseenter', () => {
|
||||
clearTimeout(timeout);
|
||||
});
|
||||
|
||||
tooltip.$on('mouseleave', () => {
|
||||
clearTimeout(timeout);
|
||||
tooltip.$destroy();
|
||||
tooltip = null;
|
||||
});
|
||||
}
|
||||
|
||||
const rect = event.target.getBoundingClientRect();
|
||||
const html = event.target.getAttribute('lsp');
|
||||
|
||||
const x = (rect.left + rect.right) / 2 + window.scrollX;
|
||||
const y = rect.top + window.scrollY;
|
||||
|
||||
tooltip.$set({
|
||||
html,
|
||||
x,
|
||||
y
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function out(event) {
|
||||
if (event.target.tagName === 'DATA-LSP') {
|
||||
timeout = setTimeout(() => {
|
||||
tooltip.$destroy();
|
||||
tooltip = null;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('mouseover', over);
|
||||
window.addEventListener('mouseout', out);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('mouseover', over);
|
||||
window.removeEventListener('mouseout', out);
|
||||
};
|
||||
});
|
||||
}
|
||||
@ -1,15 +1,75 @@
|
||||
<script>
|
||||
import { page } from '$app/stores';
|
||||
import OnThisPage from './OnThisPage.svelte';
|
||||
import * as hovers from '$lib/utils/hovers';
|
||||
|
||||
export let data;
|
||||
|
||||
$: pages = data.sections.flatMap((section) => section.pages);
|
||||
$: index = pages.findIndex(({ path }) => path === $page.url.pathname);
|
||||
$: prev = pages[index - 1];
|
||||
$: next = pages[index + 1];
|
||||
|
||||
hovers.setup();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{data.page.title} - Svelte</title>
|
||||
<title>{data.page.title} • Docs • SvelteKit</title>
|
||||
|
||||
<meta name="twitter:title" content="SvelteKit docs" />
|
||||
<meta name="twitter:description" content="{data.page.title} • SvelteKit documentation" />
|
||||
<meta name="Description" content="{data.page.title} • SvelteKit documentation" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="text">
|
||||
{@html data.page.content}
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div>
|
||||
<span class:faded={!prev}>previous</span>
|
||||
{#if prev}
|
||||
<a href={prev.path}>{prev.title}</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class:faded={!next}>next</span>
|
||||
{#if next}
|
||||
<a href={next.path}>{next.title}</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<OnThisPage details={data.page} />
|
||||
|
||||
<style>
|
||||
.controls {
|
||||
max-width: calc(var(--sk-line-max-width) + 1rem);
|
||||
border-top: 1px solid var(--sk-back-4);
|
||||
padding: 1rem 0 0 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin: 6rem 0 0 0;
|
||||
}
|
||||
|
||||
.controls > :first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.controls > :last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.controls span {
|
||||
display: block;
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: var(--sk-text-3);
|
||||
}
|
||||
|
||||
.controls span.faded {
|
||||
opacity: 0.4;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue