/** * 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(); };