Skip to content

Commit

Permalink
vertical slider work
Browse files Browse the repository at this point in the history
  • Loading branch information
@jadiehm
jadiehm committed Jan 30, 2025
1 parent 4d46682 commit cb33d88
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 56 deletions.
8 changes: 4 additions & 4 deletions src/components/Index.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,10 @@
<!-- <WIP /> -->
<!-- <Demo /> -->
<!-- <Footer /> -->
<!-- <Intro /> -->
<Explore />
<Intro />
<!-- <Explore /> -->

<div class="white">
<!-- <div class="white">
<div class="selects">
<Select options={optionsAnimal} id={"id-animalSelect"}/>
<Select options={optionsMetric} id={"id-metricSelect"}/>
Expand All @@ -111,7 +111,7 @@
<Distribution data={dataSet} />
{/key}
{/if}
</div>
</div> -->

<style>
.white {
Expand Down
49 changes: 33 additions & 16 deletions src/components/Intro.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import { quintOut } from 'svelte/easing';
import SpinningBottle from "$components/SpinningBottle.svelte";
import Scrolly from "$components/helpers/Scrolly.svelte";
import Range from "$components/helpers/Range.svelte";
import Icon from "$components/helpers/Icon.svelte";
import * as d3 from 'd3';
Expand All @@ -28,9 +29,12 @@

<section id='intro'>
<div class="sticky">
<div class="slider-container">
<Range max=700 min=0 showTicks=true />
</div>
<div class="bg-text-container">
<div class="bg-text" style={parent_style}>
<h1 use:fit={{min_size: 12, max_size:400 }}>The pour-gin of species</h1>
<h1 use:fit={{min_size: 12, max_size:400 }}>The pour-gin<br> of species</h1>
</div>
</div>
{#if scrollIndex >= 1}
Expand All @@ -43,34 +47,38 @@
<SpinningBottle bottlePos="right" {scrollIndex}/>
{/if}
<div class="text-container">
{#each copy.intro.slice(0,4) as text, i}
{#each copy.intro.slice(0,2) as text, i}
{#if textFade && scrollIndex == undefined}
<p
id="intro-text-{i}"
in:fly={{ delay: 500*i, duration: 1000, y: 100, opacity: 0, easing: quintOut }}
in:fly={{ delay: 1000*i, duration: 1000, y: 100, opacity: 0, easing: quintOut }}
out:fade
>{text.value}
{#if i == 3}
{#if i == 1}
<span><Icon name="arrow-down" /></span>
{/if}
</p>
{/if}
{/each}
{#if textFade && scrollIndex == 0}
<p
id="intro-text-4"
in:fly={{ delay: 500, duration: 1000, y: 100, opacity: 0, easing: quintOut }}
out:fade
>{copy.intro[4].value}
</p>
{#each copy.intro.slice(2,4) as text, i}
<p
id="intro-text-{i}"
in:fly={{ delay: 500*i, duration: 1000, y: 100, opacity: 0, easing: quintOut }}
out:fade
>{text.value}
</p>
{/each}
{/if}
{#if textFade && scrollIndex == 1}
<p
id="intro-text-5"
in:fly={{ delay: 500, duration: 1000, y: 100, opacity: 0, easing: quintOut }}
{#each copy.intro.slice(4,6) as text, i}
<p
id="intro-text-{i}"
in:fly={{ delay: 500*i, duration: 1000, y: 100, opacity: 0, easing: quintOut }}
out:fade
>{copy.intro[5].value}
</p>
>{text.value}
</p>
{/each}
{/if}
{#if textFade && scrollIndex >= 2}
<p
Expand All @@ -95,6 +103,14 @@
width: 100%;
position: relative;
}
.slider-container {
position: absolute;
right: 2rem;
top: 50%;
transform: translate(0, -50%);
height: 100svh;
z-index: 1000;
}
.sticky {
width: 100%;
height: 100svh;
Expand Down Expand Up @@ -122,6 +138,7 @@
.bg-text-container {
height: 80svh;
width: 100%;
padding: 6rem;
display: flex;
align-items: center;
justify-content: center;
Expand Down Expand Up @@ -159,7 +176,7 @@
}
.text-container p {
font-size: var(--20px);
font-size: var(--24px);
max-width: 300px;
position: absolute;
color: var(--wine-tan);
Expand Down
115 changes: 80 additions & 35 deletions src/components/helpers/Range.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,54 @@
<script>
import { onMount } from "svelte";
import { range, format } from "d3";
export let min = 0;
export let max = 100;
export let max = 700;
export let step = 1;
export let showTicks = false;
export let value = min;
export let label = "";
let rangeInput;
let labelElement;
let thumbOffset = 0;
const getDecimalCount = (value) => {
if (Math.floor(value) === value) return 0;
return value.toString().split(".")[1].length || 0;
};
$: decimals = getDecimalCount(step);
$: ticks = showTicks ? range(min, max + step, step) : [];
$: ticks = showTicks ? range(min, max + step, 100).filter(d => d <= max) : [];
function updateThumbOffset(value) {
if (rangeInput && labelElement) {
const percent = (value - min) / (max - min);
const thumbPosition = percent * rangeInput.offsetHeight;
console.log(percent)
thumbOffset = -thumbPosition;
}
}
onMount(() => {
updateThumbOffset(value);
});
$: updateThumbOffset(value);
</script>

<div class="range">
<div class="ticks">
{#each ticks as tick}
<span class="tick">{format(`.${decimals}f`)(tick)}</span>
<span class="tick">${format(`.${decimals}f`)(tick)}</span>
{/each}
</div>
<input type="range" aria-label={label} {min} {max} {step} bind:value />
<input type="range" aria-label={label} {min} {max} {step} bind:value bind:this={rangeInput} />
<div class="thumb-label" bind:this={labelElement} style="transform: translateY({thumbOffset}px)">
<p>${value}</p>
<p>Bionic Frog</p>
</div>
</div>

<style>
Expand All @@ -33,16 +59,40 @@
margin-bottom: calc(var(--thumb-width) * 2);
}
.thumb-label {
position: absolute;
right: 50%;
transform: translateX(-50%);
color: var(--wine-tan);
border-radius: 4px;
font-size: var(--20px);
font-family: var(--sans);
font-weight: bold;
margin-right: 1rem;
text-align: right;
text-shadow: -2px -2px 0 var(--wine-black), 2px -2px 0 var(--wine-black), -2px 2px 0 var(--wine-black), 2px 2px 0 var(--wine-black);
pointer-events: none; /* Prevents interactions */
/* transition: transform 0.1s ease-out; */
}
.thumb-label p {
margin: 0;
line-height: 1;
min-width: 200px;
}
input[type="range"] {
display: block;
width: 100%;
height: 80svh;
appearance: none;
cursor: pointer;
padding: 0;
margin: 0;
background: transparent;
position: relative;
outline: none;
writing-mode: vertical-lr;
direction: rtl;
}
input[type="range"]:focus {
Expand All @@ -56,29 +106,28 @@
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: calc(var(--thumb-width) / 4);
background: var(--color-gray-300);
border-radius: 4px;
height: 100%;
width: 2px;
background: var(--wine-med-gray);
}
input[type="range"]::-webkit-slider-thumb {
height: var(--thumb-width);
width: var(--thumb-width);
height: var(--thumb-width);
border-radius: 50%;
background: var(--color-gray-900);
background: var(--wine-tan);
appearance: none;
margin-top: calc(var(--thumb-width) / -3);
margin-left: calc(var(--thumb-width) / -2.25);
}
input[type="range"]:focus::-webkit-slider-runnable-track {
background: var(--color-gray-300);
background: var(--wine-med-gray);
}
input[type="range"]::-moz-range-track {
width: 100%;
height: calc(var(--thumb-width) / 4);
background: var(--color-gray-300);
height: 100%;
width: 2px;
background: var(--wine-med-gray);
border-radius: 4px;
}
Expand All @@ -87,12 +136,12 @@
height: var(--thumb-width);
width: var(--thumb-width);
border-radius: 50%;
background: var(--color-gray-900);
background: var(--wine-tan);
}
input[type="range"]::-ms-track {
width: 100%;
height: calc(var(--thumb-width) / 4);
width: 2px;
height: 100%;
background: transparent;
border-color: transparent;
border-width: 16px 0;
Expand All @@ -111,7 +160,7 @@
height: var(--thumb-width);
width: var(--thumb-width);
border-radius: 50%;
background: var(--color-gray-900);
background: var(--wine-tan);
}
input[type="range"]:focus::-ms-fill-lower,
Expand All @@ -120,29 +169,26 @@
}
.ticks {
width: 100%;
height: 100%;
width: auto;
display: flex;
justify-content: space-between;
padding: 0 calc(var(--thumb-width) / 2);
margin: 0;
user-select: none;
flex-direction: column-reverse;
justify-content: space-between; /* This evenly spaces them */
align-items: flex-end; /* Align to the left */
position: absolute;
left: 0;
bottom: 0;
transform: translate(0, 100%);
left: calc(var(--thumb-width) * -1.5);
}
.tick {
display: flex;
justify-content: center;
align-items: center;
font-size: var(--tick-font-size);
line-height: 1;
text-align: center;
width: 1px;
background: transparent;
color: var(--color-gray);
padding-top: calc(var(--thumb-width) / 2);
text-align: right;
color: var(--wine-tan);
position: relative;
width: auto;
font-family: var(--sans);
}
.tick:before {
Expand All @@ -153,7 +199,6 @@
left: 0;
width: 100%;
height: calc(var(--thumb-width) / 3);
background: var(--color-gray-300);
}
.tick:first-of-type {
Expand Down
2 changes: 1 addition & 1 deletion src/data/copy.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"intro":[{"type":"text","value":"You’re on the hunt for a cheap bottle of wine."},{"type":"text","value":"This label with the gilded lion crest catches your eye."},{"type":"text","value":"It looks fancy, so it’s probably expensive."},{"type":"text","value":"But is it?"},{"type":"text","value":"What about this one with the frog?"},{"type":"text","value":"One this one with the song bird?"},{"type":"text","value":"Go ahead, use the sliders to guess the price."}]}
{"intro":[{"type":"text","value":"It’s a simple question: can you predict the price of a bottle of wine based on the animal on the label?"},{"type":"text","value":"Go ahead, try it. Use the slider to price this wine with a frog."},{"type":"text","value":"What about this wine with a songbird?"},{"type":"text","value":"What’s its price? Use the slider."},{"type":"text","value":"Last one."},{"type":"text","value":"How much does this wine with the heraldic lions cost?"}]}
3 changes: 3 additions & 0 deletions src/data/test.csv
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
name,value
test,2
more,3

0 comments on commit cb33d88

Please sign in to comment.