admin_dashboard/static/plugins/switchery/css/switchery.js

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