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

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

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

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

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