224 lines
4.3 KiB
JavaScript
224 lines
4.3 KiB
JavaScript
|
|
/**
|
|
* Switchery 0.1.1
|
|
* http://abpetkov.github.io/switchery/
|
|
*
|
|
* Authored by Alexander Petkov
|
|
* https://github.com/abpetkov
|
|
*
|
|
* Copyright 2013, Alexander Petkov
|
|
* License: The MIT License (MIT)
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* Expose `Switchery`.
|
|
*/
|
|
|
|
module.exports = Switchery;
|
|
|
|
/**
|
|
* Set Switchery default values.
|
|
*
|
|
* @api public
|
|
*/
|
|
|
|
var defaults = {
|
|
color : '#64bd63'
|
|
, className: 'switchery'
|
|
, disabled : false
|
|
, speed : '0.1s'
|
|
};
|
|
|
|
if (process.browser != null) {
|
|
require('./switchery.css');
|
|
}
|
|
|
|
/**
|
|
* Create Switchery object.
|
|
*
|
|
* @param {Object} element
|
|
* @param {Object} options
|
|
* @api public
|
|
*/
|
|
|
|
function Switchery(element, options) {
|
|
if (!(this instanceof Switchery)) return new Switchery(options);
|
|
|
|
this.element = element;
|
|
this.options = options || {};
|
|
|
|
for (var i in defaults) {
|
|
if (!(i in this.options)) {
|
|
this.options[i] = defaults[i];
|
|
}
|
|
}
|
|
|
|
if (this.element.type == 'checkbox') this.init();
|
|
}
|
|
|
|
/**
|
|
* Hide the target element.
|
|
*
|
|
* @api private
|
|
*/
|
|
|
|
Switchery.prototype.hide = function() {
|
|
this.element.style.display = 'none';
|
|
};
|
|
|
|
/**
|
|
* Show custom switch after the target element.
|
|
*
|
|
* @api private
|
|
*/
|
|
|
|
Switchery.prototype.show = function() {
|
|
var switcher = this.create();
|
|
this.element.parentNode.appendChild(switcher);
|
|
};
|
|
|
|
/**
|
|
* Create custom switch.
|
|
*
|
|
* @returns {Object} this.switcher
|
|
* @api private
|
|
*/
|
|
|
|
Switchery.prototype.create = function() {
|
|
this.switcher = document.createElement('span');
|
|
this.jack = document.createElement('small');
|
|
this.switcher.appendChild(this.jack);
|
|
this.switcher.className = this.options.className;
|
|
|
|
return this.switcher;
|
|
};
|
|
|
|
/**
|
|
* See if input is checked.
|
|
*
|
|
* @returns {Boolean}
|
|
* @api private
|
|
*/
|
|
|
|
Switchery.prototype.isChecked = function() {
|
|
return this.element.checked;
|
|
};
|
|
|
|
/**
|
|
* See if switcher should be disabled.
|
|
*
|
|
* @returns {Boolean}
|
|
* @api private
|
|
*/
|
|
|
|
Switchery.prototype.isDisabled = function() {
|
|
return this.options.disabled || this.element.disabled;
|
|
};
|
|
|
|
/**
|
|
* Set switch jack proper position.
|
|
*
|
|
* @param {Boolean} clicked - we need this in order to uncheck the input when the switch is clicked
|
|
* @api private
|
|
*/
|
|
|
|
Switchery.prototype.setPosition = function (clicked) {
|
|
var checked = this.isChecked()
|
|
, switcher = this.switcher
|
|
, jack = this.jack;
|
|
|
|
if (clicked && checked) checked = false;
|
|
else if (clicked && !checked) checked = true;
|
|
|
|
if (checked === true) {
|
|
this.element.checked = true;
|
|
|
|
if (window.getComputedStyle) jack.style.left = parseInt(window.getComputedStyle(switcher).width) - jack.offsetWidth + 'px';
|
|
else jack.style.left = parseInt(switcher.currentStyle['width']) - jack.offsetWidth + 'px';
|
|
|
|
if (this.options.color) this.colorize();
|
|
} else {
|
|
jack.style.left = '0';
|
|
this.element.checked = false;
|
|
this.switcher.style.backgroundColor = '';
|
|
this.switcher.style.borderColor = '';
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Set speed.
|
|
*
|
|
* @api private
|
|
*/
|
|
|
|
Switchery.prototype.setSpeed = function() {
|
|
this.switcher.style.transitionDuration = this.options.speed;
|
|
this.jack.style.transitionDuration = this.options.speed;
|
|
};
|
|
|
|
/**
|
|
* Copy the input name and id attributes.
|
|
*
|
|
* @api private
|
|
*/
|
|
|
|
Switchery.prototype.setAttributes = function() {
|
|
var id = this.element.getAttribute('id')
|
|
, name = this.element.getAttribute('name');
|
|
|
|
if (id) this.switcher.setAttribute('id', id);
|
|
if (name) this.switcher.setAttribute('name', name);
|
|
};
|
|
|
|
/**
|
|
* Set switch color.
|
|
*
|
|
* @api private
|
|
*/
|
|
|
|
Switchery.prototype.colorize = function() {
|
|
this.switcher.style.backgroundColor = this.options.color;
|
|
this.switcher.style.borderColor = this.options.color;
|
|
};
|
|
|
|
/**
|
|
* Handle the switch click event.
|
|
*
|
|
* @api private
|
|
*/
|
|
|
|
Switchery.prototype.handleClick = function() {
|
|
var $this = this
|
|
, switcher = this.switcher;
|
|
|
|
if (this.isDisabled() === false) {
|
|
if (switcher.addEventListener) {
|
|
switcher.addEventListener('click', function() {
|
|
$this.setPosition(true);
|
|
});
|
|
} else {
|
|
switcher.attachEvent('onclick', function() {
|
|
$this.setPosition(true);
|
|
});
|
|
}
|
|
} else {
|
|
this.element.disabled = true;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Initialize Switchery.
|
|
*
|
|
* @api private
|
|
*/
|
|
|
|
Switchery.prototype.init = function() {
|
|
this.hide();
|
|
this.show();
|
|
this.setSpeed();
|
|
this.setPosition();
|
|
this.setAttributes();
|
|
this.handleClick();
|
|
}; |