Switcher Riot Component

switcher.html

<ac-switch>

    <div class="ac-switch">
        <input name="switcher" type="checkbox" id="{ opts.id }" onchange="{ makeSwitch }" />
        <label for="{ opts.id }"></label>
        <span name="labelOn">{ opts.labelon }</span>
        <span name="labelOff">{ opts.labeloff }</span>
    </div>

    <style>
    ac-switch{
        display:inline-block;
        padding-left:55px;
        position:relative;
        margin-right:2rem;
        min-width:200px;
    }

    ac-switch label{
        display:inline-block;
        width:45px;
        height:21px;
        border-radius:41px;
        position:absolute;
        left:0;
        top:0;
        cursor:pointer;
        transition:all 0.2s linear;
        border:1px solid #ddd;
    }

    ac-switch label:before {
        content:'';
        position:absolute;
        top:3px;
        left:3px;
        width:13px;
        height:13px;
        border-radius:50%;
        border:1px solid #aaa;
        background:#aaa;
        transition: all 0.3s cubic-bezier(0,.88,.32,.92);
    }

    ac-switch input{
        display:none;
    }

    ac-switch input:checked + label:before{
        transform: translate3d(24px, 0, 0);
    }

    ac-switch span{
        font-size:15px;
    }
    
    .ac-hide{
        display:none;
    }
    </style>

    <script>

    var self = this;
    opts.id = "a" + (Math.random()*1000 + 1).toString(36).replace(".","");

    opts.default = opts.default || false;

    this.on('mount', function() {
        if(opts.default) {
            this.labelOff.classList.add('ac-hide');
            this.switcher.checked = true;
        }else {
            this.labelOn.classList.add('ac-hide');
            this.switcher.checked = false;
        }
    });

    makeSwitch(e) {
        if(e.target.checked) {
            this.labelOn.classList.remove('ac-hide');
            this.labelOff.classList.add('ac-hide');

            self.runSwitchOn();

        }else {
            this.labelOn.classList.add('ac-hide');
            this.labelOff.classList.remove('ac-hide');

            self.runSwitchOff();
        }
    }

    runSwitchOn() {
        var callback = opts.ontriggeron;

        if(callback != "" && typeof callback != "undefined") {
            eval(callback + "()"); // Never use eval, kids. Nuff said.
        }
    }

    runSwitchOff() {
        var callback = opts.ontriggeroff;

        if(callback != "" && typeof callback != "undefined") {
            eval(callback + "()"); // Never use eval, kids. Nuff said.
        }
    }


    </script>

</ac-switch>

For usage:

<ac-switch default="true" labelOn="I'm ON!" labelOff="I'm OFF!" onTriggerOn="someFuncHere" onTriggerOff="someFuncHere"></ac-switch>