dmxconnect_ci_testing/frontend/src/components/Toggle.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>