forked from DMXStage/dmxconnect
121 lines
4.0 KiB
Svelte
121 lines
4.0 KiB
Svelte
<!-- Create a toggle button -->
|
|
|
|
<script lang=ts>
|
|
import { createEventDispatcher, onDestroy } from 'svelte';
|
|
import * as SoftwareVariables from '../stores.js';
|
|
import Tooltip from './Tooltip.svelte';
|
|
import { _ } from 'svelte-i18n'
|
|
|
|
export let icon = "" // The icon wanted
|
|
export let width = "10em" // The button width
|
|
export let height = "5em" // The button height
|
|
export let tooltip = "Default tooltip" // The description shown in the tooltip
|
|
export let checked
|
|
|
|
let tooltipMessage = tooltip
|
|
|
|
// Import the main colors from the store
|
|
let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor
|
|
const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
|
|
const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
|
|
const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
|
|
const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
|
|
const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
|
|
const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
|
|
|
|
$: cssVarStyles = `--thumb-background:${secondColor};--thumb-background-selected:${thirdColor};--thumb-color:${fourthColor}`;
|
|
|
|
// Emit a click event when the button is clicked
|
|
const dispatch = createEventDispatcher();
|
|
function emitClick(event) {
|
|
event.preventDefault();
|
|
event.target.blur();
|
|
dispatch('click', event);
|
|
}
|
|
|
|
// Show a tooltip on mouse hover
|
|
let tooltipShowing = false
|
|
function toggleTooltip(){
|
|
tooltipShowing = !tooltipShowing
|
|
}
|
|
|
|
// Unsubscribe for all variables used from the store
|
|
onDestroy(() => {
|
|
unsubscribeFirstColor();
|
|
unsubscribeSecondColor();
|
|
unsubscribeThirdColor();
|
|
unsubscribeFourthColor();
|
|
unsubscribeOkColor();
|
|
unsubscribeNokColor();
|
|
})
|
|
</script>
|
|
|
|
<div style="{cssVarStyles}">
|
|
<Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
|
|
<label class="customToggle"
|
|
on:mousedown={emitClick}
|
|
on:mouseenter={toggleTooltip}
|
|
on:mouseleave={toggleTooltip}
|
|
style="width:{width}; height:{height}; border-radius:{width}; background-color:{fourthColor};">
|
|
<input type="checkbox" {checked}>
|
|
<span class="checkmark" style="width: {height}; height: 100%; border-radius:{height};">
|
|
<i class='bx {icon}' style="font-size:{height};"/>
|
|
</span>
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
div{
|
|
display:inline-block;
|
|
}
|
|
|
|
.customToggle {
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
padding: 0.1em;
|
|
}
|
|
|
|
.customToggle:hover{
|
|
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
|
|
}
|
|
|
|
.customToggle input[type="checkbox"] {
|
|
opacity: 0;
|
|
position: absolute; /* Position absolue pour garder l'élément dans le flux */
|
|
cursor: pointer;
|
|
}
|
|
|
|
.customToggle input[type="checkbox"]:checked + .checkmark {
|
|
background-color: var(--thumb-background-selected); /* Couleur lorsque la case est cochée */
|
|
float: right;
|
|
animation: checkmark-slide-in 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
|
|
}
|
|
|
|
@keyframes checkmark-slide-in {
|
|
0% {
|
|
transform: translateX(-50px) scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: translateX(0) scale(1);
|
|
opacity: 1;
|
|
}
|
|
70% {
|
|
transform: translateX(-5px) scale(1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(0) scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.checkmark {
|
|
text-align:center;
|
|
float: left;
|
|
background-color: var(--thumb-background);
|
|
color: var(--thumb-color);
|
|
transition: opacity 0.3s, transform 0.3s;
|
|
}
|
|
</style> |