flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[wip] Add width, speed and pane options for Globe

Browse Source
This commit is contained in:
Félix Péault
2022-08-29 18:36:51 +02:00
parent eec3049a2c
commit ea6cfa2ee2
3 changed files with 53 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/organisms/InteractiveGlobe2.svelte
View File

@@ -13,6 +13,9 @@
export let type: string = undefined
export let enableMarkers: boolean = true
export let speed: number = 0.003
export let pane: boolean = import.meta.env.DEV
export let width: number = undefined
let innerWidth: number
let globeParentEl: HTMLElement, globeEl: HTMLElement
@@ -42,11 +45,11 @@
mapFile: `/images/globe-map-${globeResolution}.png`,
dpr: Math.min(Math.round(window.devicePixelRatio), 2),
autoRotate: true,
speed: 0.003,
speed,
rotationStart: randomContinent.rotation,
enableMarkers,
markers,
pane: import.meta.env.DEV,
pane,
})
// TODO: Define cluster locations and position it
@@ -112,54 +115,57 @@
<div class="globe" bind:this={globeParentEl}
class:is-cropped={type === 'cropped'}
style:--width="{width}px"
>
<div class="globe__inner">
<div class="globe__canvas" bind:this={globeEl} />
</div>
<ul class="globe__markers">
{#each markers as { name, slug, country, lat, lng }}
<li class="globe__marker" data-location={slug} data-lat={lat} data-lng={lng}>
<a href="/{country.slug}/{slug}" sveltekit:noscroll>
<dl>
<dt class="title-small">{name}</dt>
<dd class="text-label text-label--small">{country.name}</dd>
</dl>
</a>
{#if enableMarkers}
<ul class="globe__markers">
{#each markers as { name, slug, country, lat, lng }}
<li class="globe__marker" data-location={slug} data-lat={lat} data-lng={lng}>
<a href="/{country.slug}/{slug}" sveltekit:noscroll>
<dl>
<dt class="title-small">{name}</dt>
<dd class="text-label text-label--small">{country.name}</dd>
</dl>
</a>
</li>
{/each}
<li class="globe__cluster">
<button on:click={() => popinOpen = !popinOpen} aria-label="{popinOpen ? 'Close' : 'Open'} cluster" />
</li>
{/each}
</ul>
<li class="globe__cluster">
<button on:click={() => popinOpen = !popinOpen} aria-label="{popinOpen ? 'Close' : 'Open'} cluster" />
</li>
</ul>
{#if popinOpen}
<div class="globe__popin" transition:fly={{ y: 16, duration: 500, easing: quartOut }}>
<ul>
{#each clusterLocations as { name, slug, country }}
<li>
<a href="/{country.slug}/{slug}" sveltekit:noscroll tabindex="0">
<Image
class="flag"
id={country.flag.id}
sizeKey="square-small"
width={32} height={32}
alt="Flag of {country.name}"
/>
<dl>
<dt class="title-small">{name}</dt>
<dd class="text-label text-label--small">{country.name}</dd>
</dl>
</a>
</li>
{/each}
</ul>
<button class="close" aria-label="Close" on:click={() => popinOpen = false}>
<svg width="9" height="9">
<use xlink:href="#cross" />
</svg>
</button>
</div>
{#if popinOpen}
<div class="globe__popin" transition:fly={{ y: 16, duration: 500, easing: quartOut }}>
<ul>
{#each clusterLocations as { name, slug, country }}
<li>
<a href="/{country.slug}/{slug}" sveltekit:noscroll tabindex="0">
<Image
class="flag"
id={country.flag.id}
sizeKey="square-small"
width={32} height={32}
alt="Flag of {country.name}"
/>
<dl>
<dt class="title-small">{name}</dt>
<dd class="text-label text-label--small">{country.name}</dd>
</dl>
</a>
</li>
{/each}
</ul>
<button class="close" aria-label="Close" on:click={() => popinOpen = false}>
<svg width="9" height="9">
<use xlink:href="#cross" />
</svg>
</button>
</div>
{/if}
{/if}
</div>

2
src/modules/globe2/index.ts
View File

@@ -125,7 +125,7 @@ export class Globe {
this.addEvents()
// Setup markers
if (this.markers) {
if (this.enableMarkers && this.markers) {
this.setupMarkers()
}
}

4
src/style/modules/_globe2.scss
View File

@@ -1,14 +1,14 @@
// Globe
.globe {
--width: clamp(700px, 100vw, 1315px);
position: relative;
z-index: 10;
user-select: none;
// Inner
&__inner {
position: relative;
width: clamp(700px, 100vw, 1315px);
width: var(--width);
margin-left: auto;
margin-right: auto;