63 lines
2.5 KiB
Svelte
63 lines
2.5 KiB
Svelte
<!-- Originally from @ernane/svelte-star-rating. Wanted to give credit but could not use from the library without causing program crash. -->
|
|
|
|
<script>
|
|
import Star from './components/Star.svelte';
|
|
export let config = {
|
|
readOnly: false,
|
|
countStars: 5,
|
|
range: { min: 0, max: 5, step: 0.001 },
|
|
score: 0.0,
|
|
showScore: true,
|
|
name: "stars",
|
|
scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },
|
|
starConfig: {
|
|
size: 30,
|
|
fillColor: '#F9ED4F',
|
|
strokeColor: "#BB8511",
|
|
unfilledColor: '#FFF',
|
|
strokeUnfilledColor: '#000'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<section class="stars-container">
|
|
<div class="range-stars">
|
|
<div class="stars">
|
|
{#each Array(config.countStars) as star, id}
|
|
{#if Math.floor(config.score) === id}
|
|
<Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={config.score - Math.floor(config.score)}/>
|
|
{:else if Math.floor(config.score) > id}
|
|
<Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={1}/>
|
|
{:else}
|
|
<Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={0}/>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
<input name={config.name}
|
|
class="slider"
|
|
type="range"
|
|
min={config.readOnly ? config.score : config.range.min}
|
|
max={config.readOnly ? config.score : config.range.max}
|
|
step="{config.range.step}" bind:value={config.score}
|
|
on:change
|
|
on:click
|
|
>
|
|
</div>
|
|
{#if config.showScore}
|
|
<span class="show-score" style="font-size: {config.starConfig.size/2}px;">
|
|
{#if config.scoreFormat}
|
|
{config.scoreFormat()}
|
|
{:else}
|
|
({((config.score/config.countStars)*100).toFixed(2)}%)
|
|
{/if}
|
|
</span>
|
|
{/if}
|
|
</section>
|
|
|
|
<style>
|
|
.stars-container{ position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; }
|
|
.range-stars{ position: relative; }
|
|
.stars{ display: flex; align-items: center; justify-content: center; gap: .5rem; }
|
|
.slider{ opacity: 0; cursor: pointer; position: absolute; top: 0; left: 0; right: 0; height: 100%; }
|
|
.show-score{ user-select: none; color: #888 }
|
|
</style> |