Skip to content

Instantly share code, notes, and snippets.

@kazzkiq
Last active October 21, 2015 21:28
Show Gist options
  • Save kazzkiq/777eb66b30c471a61edc to your computer and use it in GitHub Desktop.
Save kazzkiq/777eb66b30c471a61edc to your computer and use it in GitHub Desktop.
Switcher Riot Component
<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>
@kazzkiq
Copy link
Author

kazzkiq commented Oct 21, 2015

For usage:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment