Toggle Switch

by AlexJsh02

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form class="form-horizontal" role="form" >
<!-- switch -->
<div class="row">
  <div class="container">
  
    <div class="form-group col-sm-6 switch">
        <label class="col-sm-6 control-label" for="switch1">Night Light</label>
        <div class="col-sm-5">
          <input type="checkbox" id="switch1" name="switch1"/>
          <div class="form-control circle" tabindex="0"></div>
          <label class="switch-text" data-indicators="Off,On">Off</label>
        </div>
    </div>
    
  </div>
</div>
<!-- https://jsfiddle.net/oriadam/ncb4n882/ -->
<!-- square checkbox -->
<div class="row">
  <div class="container">

  <div class="checkbox-group">
    <div class="checkbox-item no-checked">
      <input type="checkbox" id="checkbox1" name="checkbox1" tabindex="2" />
      <div class="checkbox-text">
        <label class="off" for="checkbox1"></label>
      </div>
    </div>
  </div>

</div>
</div>
</form>
<app-switch class="form-group col-sm-6 switch">
    <label class="col-sm-6 control-label" for="switch2">Night Light</label>
    <div class="col-sm-5">
      <input type="checkbox" id="switch2" name="switch2"/>
      <div class="form-control circle" tabindex="0"></div>
      <label class="switch-text" data-indicators="Off,On">Off</label>
    </div>
</app-switch>

CSS

.switch {
  margin : 0px 0px 10px 0px;
  line-height: 1.75em;
}
.switch .control-label {
  vertical-align: top;
}
.switch .switch-text {
  display: inline-block;
  vertical-align: bottom;
  padding-left: 10px;
}
.switch input {
    display: none;
}
.switch .circle {
    cursor: pointer;
    display: inline-block;
    border: 1px solid #000;
    border-radius: 11px;
    background-color: #FFF;
    width: 40px;
    height: 18px;
    position: relative;
    transition: all 0.2s;
    margin-top: 10px;
}
.switch .circle:after {
    content: '';
    background-color: #000;
    border: 1px solid #000;
    border-radius: 10px;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 2px;
    left: 3px;
    transition: all 0.2s;
}
.switch .circle:focus {
    outline: 1px dotted blue;
}
.switch input:checked + .circle {
    background-color: #3eafe9;
    border-color: #3eafe9;
}
.switch input:checked + .circle:after {
    left: 24px;
    border-color: #FFF;
    background-color: #FFF;
}

/* square checkbox */
.checkbox-group {
  display: inline-block;
  margin : 0px 0px 0px 6px;
  border: 4px solid #DCDCDC;
  width: 42px;
  min-width: 42px;
  padding: 1px;
  background-color: #8FBC8F;
}
.checkbox-group > .checkbox-item > input {
  display: none;
}
.checkbox-group > .checkbox-item {
  border: 4px solid #F8F8FF;
  padding: 0px;
  width: 12px;
  min-width: 12px;
  height: 12px;
  min-height: 12px;
  margin: 0px;
  background-color: #F8F8FF;
}
.checkbox-group > .checkbox-item.checked {
  float: left;
}
.checkbox-group > .checkbox-item.no-checked {
  float: right;
}
.checkbox-group > .checkbox-item > .checkbox-text {
  line-height: 0.9em;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 12pt;
  vertical-align: text-top;
  text-align: right;
  border: 0;
  color: #fff;
  font-weight: 600;
  margin: 0px;
  padding: 0px 0px 0px 22px;
}
.checkbox-group > .checkbox-item > .checkbox-text > label:before {
  content: "\221A";
}

JavaScript

/*
 * jQuery Switch Toogle Plugin v0.0.1
 *
 * Note: The jQuery plugin's parent element is assumed to be
 *       a div that will act as container for the child 
 *       UI elements
 *       The style sheet growler is provided as a separate file
 */
;const Switch = (function($, document) {
  'use strict';
	class SwitchComponent extends HTMLElement {
 		
  	constructor() {
    	super();
      // create shadow root
      const shadow = this.attachShadow({
      	mode: 'open'
      });
      const wrapper = document.createElement('span');
      
    }
  }
  
  customElements.define('app-switch', SwitchComponent);
  
}(window.jQuery, window.document));

/////// switch 
$(".circle").on("keyup click", function(event){
  let $checkbox = $(event.target).parent().find("input[type='checkbox']");
  let $switchText = $(event.target).parents(".switch").find(".switch-text");
  let indicators = $switchText.data("indicators").split(",");
  switch(event.type){
  	case 'keyup':
    	switch(event.which){
      	case 32:
        	toggleSwitch($checkbox, $switchText, undefined, indicators);
        	break;
      	case 37:
        	toggleSwitch($checkbox, $switchText, false, indicators);
        	break;
      	case 39:
        	toggleSwitch($checkbox, $switchText, true, indicators);
        	break;
      }
    	break;
    case 'click':
    	toggleSwitch($checkbox, $switchText, undefined, indicators);
    	break;
  }
});

function toggleSwitch($checkbox, $div, isChecked, indicators) {
	if($checkbox && $div && $checkbox.length > 0 && $div.length > 0) {
  	if (isChecked !== undefined) {
    		$checkbox.prop('checked', isChecked);
    } else {
    	$checkbox.prop('checked', !$checkbox.prop('checked'));
    }
    if (indicators){
    	$checkbox[0].checked != true ? $div.text(indicators[0]) : $div.text(indicators[1]);
    } else {
    	$checkbox[0].checked != true ? $div.text("No") : $div.text("Yes");
    }
  }
}