toggle._hs

behavior toggle

    init
        add .toggle-container to me
        add [@tabIndex=0] to me

        append `<span class="toggle"><span class="marker"></span></span>` to my innerHTML
        append `<input type="hidden" name="${my @name}" value=""/>` to my innerHTML

        if (my [@true-text] != "") or (my [@false-text] != "") then
            append `<label></label>` to my innerHTML
        end
        
        send recalculate
        wait a tick
        set my *transition to "background-color 0.1s ease-in-out, border-color 0.1s ease-in-out"

    on mousedown or touchstart
        halt the event
        send toggle

    on keypress[code=="Space"]
        halt the event
        send toggle

    on toggle

        if my @value == "true" then
            set my @value to "false"
        else 
            set my @value to "true"
        end

        send recalculate
        send change

    on recalculate

        set hidden to first <input[type=hidden]/> in me

        if my @value == "true" then
            set hidden's @value to "true"
            set text to my [@true-text]
            
        else 
            set hidden's @value to "false"
            set text to my [@false-text]
        end

        set label to the first <label/> in me

        if the label is not null then
            set the label's innerHTML to the text
        end
end
end