bootstrap-colorpicker
Version:
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4.
1,773 lines (1,530 loc) • 166 kB
JavaScript
/*!
* Bootstrap Colorpicker - Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4.
* @package bootstrap-colorpicker
* @version v3.4.0
* @license MIT
* @link https://itsjavi.com/bootstrap-colorpicker/
* @link https://github.com/itsjavi/bootstrap-colorpicker.git
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("jquery"));
else if(typeof define === 'function' && define.amd)
define("bootstrap-colorpicker", ["jquery"], factory);
else if(typeof exports === 'object')
exports["bootstrap-colorpicker"] = factory(require("jquery"));
else
root["bootstrap-colorpicker"] = factory(root["jQuery"]);
})(window, function(__WEBPACK_EXTERNAL_MODULE__0__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 7);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__0__;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _jquery = __webpack_require__(0);
var _jquery2 = _interopRequireDefault(_jquery);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* Colorpicker extension class.
*/
var Extension = function () {
/**
* @param {Colorpicker} colorpicker
* @param {Object} options
*/
function Extension(colorpicker) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_classCallCheck(this, Extension);
/**
* The colorpicker instance
* @type {Colorpicker}
*/
this.colorpicker = colorpicker;
/**
* Extension options
*
* @type {Object}
*/
this.options = options;
if (!(this.colorpicker.element && this.colorpicker.element.length)) {
throw new Error('Extension: this.colorpicker.element is not valid');
}
this.colorpicker.element.on('colorpickerCreate.colorpicker-ext', _jquery2.default.proxy(this.onCreate, this));
this.colorpicker.element.on('colorpickerDestroy.colorpicker-ext', _jquery2.default.proxy(this.onDestroy, this));
this.colorpicker.element.on('colorpickerUpdate.colorpicker-ext', _jquery2.default.proxy(this.onUpdate, this));
this.colorpicker.element.on('colorpickerChange.colorpicker-ext', _jquery2.default.proxy(this.onChange, this));
this.colorpicker.element.on('colorpickerInvalid.colorpicker-ext', _jquery2.default.proxy(this.onInvalid, this));
this.colorpicker.element.on('colorpickerShow.colorpicker-ext', _jquery2.default.proxy(this.onShow, this));
this.colorpicker.element.on('colorpickerHide.colorpicker-ext', _jquery2.default.proxy(this.onHide, this));
this.colorpicker.element.on('colorpickerEnable.colorpicker-ext', _jquery2.default.proxy(this.onEnable, this));
this.colorpicker.element.on('colorpickerDisable.colorpicker-ext', _jquery2.default.proxy(this.onDisable, this));
}
/**
* Function called every time a new color needs to be created.
* Return false to skip this resolver and continue with other extensions' ones
* or return anything else to consider the color resolved.
*
* @param {ColorItem|String|*} color
* @param {boolean} realColor if true, the color should resolve into a real (not named) color code
* @return {ColorItem|String|*}
*/
_createClass(Extension, [{
key: 'resolveColor',
value: function resolveColor(color) {
var realColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
return false;
}
/**
* Method called after the colorpicker is created
*
* @listens Colorpicker#colorpickerCreate
* @param {Event} event
*/
}, {
key: 'onCreate',
value: function onCreate(event) {}
// to be extended
/**
* Method called after the colorpicker is destroyed
*
* @listens Colorpicker#colorpickerDestroy
* @param {Event} event
*/
}, {
key: 'onDestroy',
value: function onDestroy(event) {
this.colorpicker.element.off('.colorpicker-ext');
}
/**
* Method called after the colorpicker is updated
*
* @listens Colorpicker#colorpickerUpdate
* @param {Event} event
*/
}, {
key: 'onUpdate',
value: function onUpdate(event) {}
// to be extended
/**
* Method called after the colorpicker color is changed
*
* @listens Colorpicker#colorpickerChange
* @param {Event} event
*/
}, {
key: 'onChange',
value: function onChange(event) {}
// to be extended
/**
* Method called when the colorpicker color is invalid
*
* @listens Colorpicker#colorpickerInvalid
* @param {Event} event
*/
}, {
key: 'onInvalid',
value: function onInvalid(event) {}
// to be extended
/**
* Method called after the colorpicker is hidden
*
* @listens Colorpicker#colorpickerHide
* @param {Event} event
*/
}, {
key: 'onHide',
value: function onHide(event) {}
// to be extended
/**
* Method called after the colorpicker is shown
*
* @listens Colorpicker#colorpickerShow
* @param {Event} event
*/
}, {
key: 'onShow',
value: function onShow(event) {}
// to be extended
/**
* Method called after the colorpicker is disabled
*
* @listens Colorpicker#colorpickerDisable
* @param {Event} event
*/
}, {
key: 'onDisable',
value: function onDisable(event) {}
// to be extended
/**
* Method called after the colorpicker is enabled
*
* @listens Colorpicker#colorpickerEnable
* @param {Event} event
*/
}, {
key: 'onEnable',
value: function onEnable(event) {
// to be extended
}
}]);
return Extension;
}();
exports.default = Extension;
module.exports = exports.default;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ColorItem = exports.HSVAColor = undefined;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /**
* Color manipulation class, specific for Bootstrap Colorpicker
*/
var _color = __webpack_require__(16);
var _color2 = _interopRequireDefault(_color);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* HSVA color data class, containing the hue, saturation, value and alpha
* information.
*/
var HSVAColor = function () {
/**
* @param {number|int} h
* @param {number|int} s
* @param {number|int} v
* @param {number|int} a
*/
function HSVAColor(h, s, v, a) {
_classCallCheck(this, HSVAColor);
this.h = isNaN(h) ? 0 : h;
this.s = isNaN(s) ? 0 : s;
this.v = isNaN(v) ? 0 : v;
this.a = isNaN(h) ? 1 : a;
}
_createClass(HSVAColor, [{
key: 'toString',
value: function toString() {
return this.h + ', ' + this.s + '%, ' + this.v + '%, ' + this.a;
}
}]);
return HSVAColor;
}();
/**
* HSVA color manipulation
*/
var ColorItem = function () {
_createClass(ColorItem, [{
key: 'api',
/**
* Applies a method of the QixColor API and returns a new Color object or
* the return value of the method call.
*
* If no argument is provided, the internal QixColor object is returned.
*
* @param {String} fn QixColor function name
* @param args QixColor function arguments
* @example let darkerColor = color.api('darken', 0.25);
* @example let luminosity = color.api('luminosity');
* @example color = color.api('negate');
* @example let qColor = color.api().negate();
* @returns {ColorItem|QixColor|*}
*/
value: function api(fn) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
if (arguments.length === 0) {
return this._color;
}
var result = this._color[fn].apply(this._color, args);
if (!(result instanceof _color2.default)) {
// return result of the method call
return result;
}
return new ColorItem(result, this.format);
}
/**
* Returns the original ColorItem constructor data,
* plus a 'valid' flag to know if it's valid or not.
*
* @returns {{color: *, format: String, valid: boolean}}
*/
}, {
key: 'original',
get: function get() {
return this._original;
}
/**
* @param {ColorItem|HSVAColor|QixColor|String|*|null} color Color data
* @param {String|null} format Color model to convert to by default. Supported: 'rgb', 'hsl', 'hex'.
* @param {boolean} disableHexInputFallback Disable fixing hex3 format
*/
}], [{
key: 'HSVAColor',
/**
* Returns the HSVAColor class
*
* @static
* @example let colorData = new ColorItem.HSVAColor(360, 100, 100, 1);
* @returns {HSVAColor}
*/
get: function get() {
return HSVAColor;
}
}]);
function ColorItem() {
var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var disableHexInputFallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
_classCallCheck(this, ColorItem);
this.replace(color, format, disableHexInputFallback);
}
/**
* Replaces the internal QixColor object with a new one.
* This also replaces the internal original color data.
*
* @param {ColorItem|HSVAColor|QixColor|String|*|null} color Color data to be parsed (if needed)
* @param {String|null} format Color model to convert to by default. Supported: 'rgb', 'hsl', 'hex'.
* @param {boolean} disableHexInputFallback Disable fixing hex3 format
* @example color.replace('rgb(255,0,0)', 'hsl');
* @example color.replace(hsvaColorData);
*/
_createClass(ColorItem, [{
key: 'replace',
value: function replace(color) {
var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var disableHexInputFallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
format = ColorItem.sanitizeFormat(format);
/**
* @type {{color: *, format: String}}
* @private
*/
this._original = {
color: color,
format: format,
valid: true
};
/**
* @type {QixColor}
* @private
*/
this._color = ColorItem.parse(color, disableHexInputFallback);
if (this._color === null) {
this._color = (0, _color2.default)();
this._original.valid = false;
return;
}
/**
* @type {*|string}
* @private
*/
this._format = format ? format : ColorItem.isHex(color) ? 'hex' : this._color.model;
}
/**
* Parses the color returning a Qix Color object or null if cannot be
* parsed.
*
* @param {ColorItem|HSVAColor|QixColor|String|*|null} color Color data
* @param {boolean} disableHexInputFallback Disable fixing hex3 format
* @example let qColor = ColorItem.parse('rgb(255,0,0)');
* @static
* @returns {QixColor|null}
*/
}, {
key: 'isValid',
/**
* Returns true if the color is valid, false if not.
*
* @returns {boolean}
*/
value: function isValid() {
return this._original.valid === true;
}
/**
* Hue value from 0 to 360
*
* @returns {int}
*/
}, {
key: 'setHueRatio',
/**
* Sets the hue ratio, where 1.0 is 0, 0.5 is 180 and 0.0 is 360.
*
* @ignore
* @param {number} h Ratio from 1.0 to 0.0
*/
value: function setHueRatio(h) {
this.hue = (1 - h) * 360;
}
/**
* Sets the saturation value
*
* @param {int} value Integer from 0 to 100
*/
}, {
key: 'setSaturationRatio',
/**
* Sets the saturation ratio, where 1.0 is 100 and 0.0 is 0.
*
* @ignore
* @param {number} s Ratio from 0.0 to 1.0
*/
value: function setSaturationRatio(s) {
this.saturation = s * 100;
}
/**
* Sets the 'value' channel value
*
* @param {int} value Integer from 0 to 100
*/
}, {
key: 'setValueRatio',
/**
* Sets the value ratio, where 1.0 is 0 and 0.0 is 100.
*
* @ignore
* @param {number} v Ratio from 1.0 to 0.0
*/
value: function setValueRatio(v) {
this.value = (1 - v) * 100;
}
/**
* Sets the alpha value. It will be rounded to 2 decimals.
*
* @param {int} value Float from 0.0 to 1.0
*/
}, {
key: 'setAlphaRatio',
/**
* Sets the alpha ratio, where 1.0 is 0.0 and 0.0 is 1.0.
*
* @ignore
* @param {number} a Ratio from 1.0 to 0.0
*/
value: function setAlphaRatio(a) {
this.alpha = 1 - a;
}
/**
* Sets the default color format
*
* @param {String} value Supported: 'rgb', 'hsl', 'hex'
*/
}, {
key: 'isDesaturated',
/**
* Returns true if the saturation value is zero, false otherwise
*
* @returns {boolean}
*/
value: function isDesaturated() {
return this.saturation === 0;
}
/**
* Returns true if the alpha value is zero, false otherwise
*
* @returns {boolean}
*/
}, {
key: 'isTransparent',
value: function isTransparent() {
return this.alpha === 0;
}
/**
* Returns true if the alpha value is numeric and less than 1, false otherwise
*
* @returns {boolean}
*/
}, {
key: 'hasTransparency',
value: function hasTransparency() {
return this.hasAlpha() && this.alpha < 1;
}
/**
* Returns true if the alpha value is numeric, false otherwise
*
* @returns {boolean}
*/
}, {
key: 'hasAlpha',
value: function hasAlpha() {
return !isNaN(this.alpha);
}
/**
* Returns a new HSVAColor object, based on the current color
*
* @returns {HSVAColor}
*/
}, {
key: 'toObject',
value: function toObject() {
return new HSVAColor(this.hue, this.saturation, this.value, this.alpha);
}
/**
* Alias of toObject()
*
* @returns {HSVAColor}
*/
}, {
key: 'toHsva',
value: function toHsva() {
return this.toObject();
}
/**
* Returns a new HSVAColor object with the ratio values (from 0.0 to 1.0),
* based on the current color.
*
* @ignore
* @returns {HSVAColor}
*/
}, {
key: 'toHsvaRatio',
value: function toHsvaRatio() {
return new HSVAColor(this.hue / 360, this.saturation / 100, this.value / 100, this.alpha);
}
/**
* Converts the current color to its string representation,
* using the internal format of this instance.
*
* @returns {String}
*/
}, {
key: 'toString',
value: function toString() {
return this.string();
}
/**
* Converts the current color to its string representation,
* using the given format.
*
* @param {String|null} format Format to convert to. If empty or null, the internal format will be used.
* @returns {String}
*/
}, {
key: 'string',
value: function string() {
var format = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
format = ColorItem.sanitizeFormat(format ? format : this.format);
if (!format) {
return this._color.round().string();
}
if (this._color[format] === undefined) {
throw new Error('Unsupported color format: \'' + format + '\'');
}
var str = this._color[format]();
return str.round ? str.round().string() : str;
}
/**
* Returns true if the given color values equals this one, false otherwise.
* The format is not compared.
* If any of the colors is invalid, the result will be false.
*
* @param {ColorItem|HSVAColor|QixColor|String|*|null} color Color data
*
* @returns {boolean}
*/
}, {
key: 'equals',
value: function equals(color) {
color = color instanceof ColorItem ? color : new ColorItem(color);
if (!color.isValid() || !this.isValid()) {
return false;
}
return this.hue === color.hue && this.saturation === color.saturation && this.value === color.value && this.alpha === color.alpha;
}
/**
* Creates a copy of this instance
*
* @returns {ColorItem}
*/
}, {
key: 'getClone',
value: function getClone() {
return new ColorItem(this._color, this.format);
}
/**
* Creates a copy of this instance, only copying the hue value,
* and setting the others to its max value.
*
* @returns {ColorItem}
*/
}, {
key: 'getCloneHueOnly',
value: function getCloneHueOnly() {
return new ColorItem([this.hue, 100, 100, 1], this.format);
}
/**
* Creates a copy of this instance setting the alpha to the max.
*
* @returns {ColorItem}
*/
}, {
key: 'getCloneOpaque',
value: function getCloneOpaque() {
return new ColorItem(this._color.alpha(1), this.format);
}
/**
* Converts the color to a RGB string
*
* @returns {String}
*/
}, {
key: 'toRgbString',
value: function toRgbString() {
return this.string('rgb');
}
/**
* Converts the color to a Hexadecimal string
*
* @returns {String}
*/
}, {
key: 'toHexString',
value: function toHexString() {
return this.string('hex');
}
/**
* Converts the color to a HSL string
*
* @returns {String}
*/
}, {
key: 'toHslString',
value: function toHslString() {
return this.string('hsl');
}
/**
* Returns true if the color is dark, false otherwhise.
* This is useful to decide a text color.
*
* @returns {boolean}
*/
}, {
key: 'isDark',
value: function isDark() {
return this._color.isDark();
}
/**
* Returns true if the color is light, false otherwhise.
* This is useful to decide a text color.
*
* @returns {boolean}
*/
}, {
key: 'isLight',
value: function isLight() {
return this._color.isLight();
}
/**
* Generates a list of colors using the given hue-based formula or the given array of hue values.
* Hue formulas can be extended using ColorItem.colorFormulas static property.
*
* @param {String|Number[]} formula Examples: 'complementary', 'triad', 'tetrad', 'splitcomplement', [180, 270]
* @example let colors = color.generate('triad');
* @example let colors = color.generate([45, 80, 112, 200]);
* @returns {ColorItem[]}
*/
}, {
key: 'generate',
value: function generate(formula) {
var hues = [];
if (Array.isArray(formula)) {
hues = formula;
} else if (!ColorItem.colorFormulas.hasOwnProperty(formula)) {
throw new Error('No color formula found with the name \'' + formula + '\'.');
} else {
hues = ColorItem.colorFormulas[formula];
}
var colors = [],
mainColor = this._color,
format = this.format;
hues.forEach(function (hue) {
var levels = [hue ? (mainColor.hue() + hue) % 360 : mainColor.hue(), mainColor.saturationv(), mainColor.value(), mainColor.alpha()];
colors.push(new ColorItem(levels, format));
});
return colors;
}
}, {
key: 'hue',
get: function get() {
return this._color.hue();
}
/**
* Saturation value from 0 to 100
*
* @returns {int}
*/
,
/**
* Sets the hue value
*
* @param {int} value Integer from 0 to 360
*/
set: function set(value) {
this._color = this._color.hue(value);
}
}, {
key: 'saturation',
get: function get() {
return this._color.saturationv();
}
/**
* Value channel value from 0 to 100
*
* @returns {int}
*/
,
set: function set(value) {
this._color = this._color.saturationv(value);
}
}, {
key: 'value',
get: function get() {
return this._color.value();
}
/**
* Alpha value from 0.0 to 1.0
*
* @returns {number}
*/
,
set: function set(value) {
this._color = this._color.value(value);
}
}, {
key: 'alpha',
get: function get() {
var a = this._color.alpha();
return isNaN(a) ? 1 : a;
}
/**
* Default color format to convert to when calling toString() or string()
*
* @returns {String} 'rgb', 'hsl', 'hex' or ''
*/
,
set: function set(value) {
// 2 decimals max
this._color = this._color.alpha(Math.round(value * 100) / 100);
}
}, {
key: 'format',
get: function get() {
return this._format ? this._format : this._color.model;
},
set: function set(value) {
this._format = ColorItem.sanitizeFormat(value);
}
}], [{
key: 'parse',
value: function parse(color) {
var disableHexInputFallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (color instanceof _color2.default) {
return color;
}
if (color instanceof ColorItem) {
return color._color;
}
var format = null;
if (color instanceof HSVAColor) {
color = [color.h, color.s, color.v, isNaN(color.a) ? 1 : color.a];
} else {
color = ColorItem.sanitizeString(color);
}
if (color === null) {
return null;
}
if (Array.isArray(color)) {
format = 'hsv';
}
if (ColorItem.isHex(color) && color.length !== 6 && color.length !== 7 && disableHexInputFallback) {
return null;
}
try {
return (0, _color2.default)(color, format);
} catch (e) {
return null;
}
}
/**
* Sanitizes a color string, adding missing hash to hexadecimal colors
* and converting 'transparent' to a color code.
*
* @param {String|*} str Color string
* @example let colorStr = ColorItem.sanitizeString('ffaa00');
* @static
* @returns {String|*}
*/
}, {
key: 'sanitizeString',
value: function sanitizeString(str) {
if (!(typeof str === 'string' || str instanceof String)) {
return str;
}
if (str.match(/^[0-9a-f]{2,}$/i)) {
return '#' + str;
}
if (str.toLowerCase() === 'transparent') {
return '#FFFFFF00';
}
return str;
}
/**
* Detects if a value is a string and a color in hexadecimal format (in any variant).
*
* @param {String} str
* @example ColorItem.isHex('rgba(0,0,0)'); // false
* @example ColorItem.isHex('ffaa00'); // true
* @example ColorItem.isHex('#ffaa00'); // true
* @static
* @returns {boolean}
*/
}, {
key: 'isHex',
value: function isHex(str) {
if (!(typeof str === 'string' || str instanceof String)) {
return false;
}
return !!str.match(/^#?[0-9a-f]{2,}$/i);
}
/**
* Sanitizes a color format to one supported by web browsers.
* Returns an empty string of the format can't be recognised.
*
* @param {String|*} format
* @example ColorItem.sanitizeFormat('rgba'); // 'rgb'
* @example ColorItem.isHex('hex8'); // 'hex'
* @example ColorItem.isHex('invalid'); // ''
* @static
* @returns {String} 'rgb', 'hsl', 'hex' or ''.
*/
}, {
key: 'sanitizeFormat',
value: function sanitizeFormat(format) {
switch (format) {
case 'hex':
case 'hex3':
case 'hex4':
case 'hex6':
case 'hex8':
return 'hex';
case 'rgb':
case 'rgba':
case 'keyword':
case 'name':
return 'rgb';
case 'hsl':
case 'hsla':
case 'hsv':
case 'hsva':
case 'hwb': // HWB this is supported by Qix Color, but not by browsers
case 'hwba':
return 'hsl';
default:
return '';
}
}
}]);
return ColorItem;
}();
/**
* List of hue-based color formulas used by ColorItem.prototype.generate()
*
* @static
* @type {{complementary: number[], triad: number[], tetrad: number[], splitcomplement: number[]}}
*/
ColorItem.colorFormulas = {
complementary: [180],
triad: [0, 120, 240],
tetrad: [0, 90, 180, 270],
splitcomplement: [0, 72, 216]
};
exports.default = ColorItem;
exports.HSVAColor = HSVAColor;
exports.ColorItem = ColorItem;
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/**
* @module
*/
// adjust these values accordingly to the sass vars
Object.defineProperty(exports, "__esModule", {
value: true
});
var sassVars = {
'bar_size_short': 16,
'base_margin': 6,
'columns': 6
};
var sliderSize = sassVars.bar_size_short * sassVars.columns + sassVars.base_margin * (sassVars.columns - 1);
/**
* Colorpicker default options
*/
exports.default = {
/**
* Custom class to be added to the `.colorpicker-element` element
*
* @type {String|null}
* @default null
*/
customClass: null,
/**
* Sets a initial color, ignoring the one from the element/input value or the data-color attribute.
*
* @type {(String|ColorItem|boolean)}
* @default false
*/
color: false,
/**
* Fallback color to use when the given color is invalid.
* If false, the latest valid color will be used as a fallback.
*
* @type {String|ColorItem|boolean}
* @default false
*/
fallbackColor: false,
/**
* Forces an specific color format. If 'auto', it will be automatically detected the first time only,
* but if null it will be always recalculated.
*
* Note that the ending 'a' of the format meaning "alpha" has currently no effect, meaning that rgb is the same as
* rgba excepting if the alpha channel is disabled (see useAlpha).
*
* @type {('rgb'|'hex'|'hsl'|'auto'|null)}
* @default 'auto'
*/
format: 'auto',
/**
* Horizontal mode layout.
*
* If true, the hue and alpha channel bars will be rendered horizontally, above the saturation selector.
*
* @type {boolean}
* @default false
*/
horizontal: false,
/**
* Forces to show the colorpicker as an inline element.
*
* Note that if there is no container specified, the inline element
* will be added to the body, so you may want to set the container option.
*
* @type {boolean}
* @default false
*/
inline: false,
/**
* Container where the colorpicker is appended to in the DOM.
*
* If is a string (CSS selector), the colorpicker will be placed inside this container.
* If true, the `.colorpicker-element` element itself will be used as the container.
* If false, the document body is used as the container, unless it is a popover (in this case it is appended to the
* popover body instead).
*
* @type {String|boolean}
* @default false
*/
container: false,
/**
* Bootstrap Popover options.
* The trigger, content and html options are always ignored.
*
* @type {boolean}
* @default Object
*/
popover: {
animation: true,
placement: 'bottom',
fallbackPlacement: 'flip'
},
/**
* If true, loads the 'debugger' extension automatically, which logs the events in the console
* @type {boolean}
* @default false
*/
debug: false,
/**
* Child CSS selector for the colorpicker input.
*
* @type {String}
* @default 'input'
*/
input: 'input',
/**
* Child CSS selector for the colorpicker addon.
* If it exists, the child <i> element background will be changed on color change.
*
* @type {String}
* @default '.colorpicker-trigger, .colorpicker-input-addon'
*/
addon: '.colorpicker-input-addon',
/**
* If true, the input content will be replaced always with a valid color,
* if false, the invalid color will be left in the input,
* while the internal color object will still resolve into a valid one.
*
* @type {boolean}
* @default true
*/
autoInputFallback: true,
/**
* If true, valid HEX3 colors will be converted to HEX6, even with
* autoInputFallback set to false
* if false, HEX3 colors will not be converted to HEX6, when autoInputFallback is false
* (this has been an issue, when using HEX6 colors with
* autoInputFallback set to false, HEX3 colors were
* automatically converting to HEX6)
*
* @type {boolean}
* @default false
*/
autoHexInputFallback: true,
/**
* If true a hash will be prepended to hexadecimal colors.
* If false, the hash will be removed.
* This only affects the input values in hexadecimal format.
*
* @type {boolean}
* @default true
*/
useHashPrefix: true,
/**
* If true, the alpha channel bar will be displayed no matter what.
*
* If false, it will be always hidden and alpha channel will be disabled also programmatically, meaning that
* the selected or typed color will be always opaque.
*
* If null, the alpha channel will be automatically disabled/enabled depending if the initial color format supports
* alpha or not.
*
* @type {boolean}
* @default true
*/
useAlpha: true,
/**
* Colorpicker widget template
* @type {String}
* @example
* <!-- This is the default template: -->
* <div class="colorpicker">
* <div class="colorpicker-saturation"><i class="colorpicker-guide"></i></div>
* <div class="colorpicker-hue"><i class="colorpicker-guide"></i></div>
* <div class="colorpicker-alpha">
* <div class="colorpicker-alpha-color"></div>
* <i class="colorpicker-guide"></i>
* </div>
* </div>
*/
template: '<div class="colorpicker">\n <div class="colorpicker-saturation"><i class="colorpicker-guide"></i></div>\n <div class="colorpicker-hue"><i class="colorpicker-guide"></i></div>\n <div class="colorpicker-alpha">\n <div class="colorpicker-alpha-color"></div>\n <i class="colorpicker-guide"></i>\n </div>\n </div>',
/**
*
* Associative object with the extension class name and its config.
* Colorpicker comes with many bundled extensions: debugger, palette, preview and swatches (a superset of palette).
*
* @type {Object[]}
* @example
* extensions: [
* {
* name: 'swatches'
* options: {
* colors: {
* 'primary': '#337ab7',
* 'success': '#5cb85c',
* 'info': '#5bc0de',
* 'warning': '#f0ad4e',
* 'danger': '#d9534f'
* },
* namesAsValues: true
* }
* }
* ]
*/
extensions: [{
name: 'preview',
options: {
showText: true
}
}],
/**
* Vertical sliders configuration
* @type {Object}
*/
sliders: {
saturation: {
selector: '.colorpicker-saturation',
maxLeft: sliderSize,
maxTop: sliderSize,
callLeft: 'setSaturationRatio',
callTop: 'setValueRatio'
},
hue: {
selector: '.colorpicker-hue',
maxLeft: 0,
maxTop: sliderSize,
callLeft: false,
callTop: 'setHueRatio'
},
alpha: {
selector: '.colorpicker-alpha',
childSelector: '.colorpicker-alpha-color',
maxLeft: 0,
maxTop: sliderSize,
callLeft: false,
callTop: 'setAlphaRatio'
}
},
/**
* Horizontal sliders configuration
* @type {Object}
*/
slidersHorz: {
saturation: {
selector: '.colorpicker-saturation',
maxLeft: sliderSize,
maxTop: sliderSize,
callLeft: 'setSaturationRatio',
callTop: 'setValueRatio'
},
hue: {
selector: '.colorpicker-hue',
maxLeft: sliderSize,
maxTop: 0,
callLeft: 'setHueRatio',
callTop: false
},
alpha: {
selector: '.colorpicker-alpha',
childSelector: '.colorpicker-alpha-color',
maxLeft: sliderSize,
maxTop: 0,
callLeft: 'setAlphaRatio',
callTop: false
}
}
};
module.exports = exports.default;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _Extension2 = __webpack_require__(1);
var _Extension3 = _interopRequireDefault(_Extension2);
var _jquery = __webpack_require__(0);
var _jquery2 = _interopRequireDefault(_jquery);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var defaults = {
/**
* Key-value pairs defining a color alias and its CSS color representation.
*
* They can also be just an array of values. In that case, no special names are used, only the real colors.
*
* @type {Object|Array}
* @default null
* @example
* {
* 'black': '#000000',
* 'white': '#ffffff',
* 'red': '#FF0000',
* 'default': '#777777',
* 'primary': '#337ab7',
* 'success': '#5cb85c',
* 'info': '#5bc0de',
* 'warning': '#f0ad4e',
* 'danger': '#d9534f'
* }
*
* @example ['#f0ad4e', '#337ab7', '#5cb85c']
*/
colors: null,
/**
* If true, when a color swatch is selected the name (alias) will be used as input value,
* otherwise the swatch real color value will be used.
*
* @type {boolean}
* @default true
*/
namesAsValues: true
};
/**
* Palette extension
* @ignore
*/
var Palette = function (_Extension) {
_inherits(Palette, _Extension);
_createClass(Palette, [{
key: 'colors',
/**
* @returns {Object|Array}
*/
get: function get() {
return this.options.colors;
}
}]);
function Palette(colorpicker) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_classCallCheck(this, Palette);
var _this = _possibleConstructorReturn(this, (Palette.__proto__ || Object.getPrototypeOf(Palette)).call(this, colorpicker, _jquery2.default.extend(true, {}, defaults, options)));
if (!Array.isArray(_this.options.colors) && _typeof(_this.options.colors) !== 'object') {
_this.options.colors = null;
}
return _this;
}
/**
* @returns {int}
*/
_createClass(Palette, [{
key: 'getLength',
value: function getLength() {
if (!this.options.colors) {
return 0;
}
if (Array.isArray(this.options.colors)) {
return this.options.colors.length;
}
if (_typeof(this.options.colors) === 'object') {
return Object.keys(this.options.colors).length;
}
return 0;
}
}, {
key: 'resolveColor',
value: function resolveColor(color) {
var realColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
if (this.getLength() <= 0) {
return false;
}
// Array of colors
if (Array.isArray(this.options.colors)) {
if (this.options.colors.indexOf(color) >= 0) {
return color;
}
if (this.options.colors.indexOf(color.toUpperCase()) >= 0) {
return color.toUpperCase();
}
if (this.options.colors.indexOf(color.toLowerCase()) >= 0) {
return color.toLowerCase();
}
return false;
}
if (_typeof(this.options.colors) !== 'object') {
return false;
}
// Map of objects
if (!this.options.namesAsValues || realColor) {
return this.getValue(color, false);
}
return this.getName(color, this.getName('#' + color));
}
/**
* Given a color value, returns the corresponding color name or defaultValue.
*
* @param {String} value
* @param {*} defaultValue
* @returns {*}
*/
}, {
key: 'getName',
value: function getName(value) {
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (!(typeof value === 'string') || !this.options.colors) {
return defaultValue;
}
for (var name in this.options.colors) {
if (!this.options.colors.hasOwnProperty(name)) {
continue;
}
if (this.options.colors[name].toLowerCase() === value.toLowerCase()) {
return name;
}
}
return defaultValue;
}
/**
* Given a color name, returns the corresponding color value or defaultValue.
*
* @param {String} name
* @param {*} defaultValue
* @returns {*}
*/
}, {
key: 'getValue',
value: function getValue(name) {
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (!(typeof name === 'string') || !this.options.colors) {
return defaultValue;
}
if (this.options.colors.hasOwnProperty(name)) {
return this.options.colors[name];
}
return defaultValue;
}
}]);
return Palette;
}(_Extension3.default);
exports.default = Palette;
module.exports = exports.default;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = {
"aliceblue": [240, 248, 255],
"antiquewhite": [250, 235, 215],
"aqua": [0, 255, 255],
"aquamarine": [127, 255, 212],
"azure": [240, 255, 255],
"beige": [245, 245, 220],
"bisque": [255, 228, 196],
"black": [0, 0, 0],
"blanchedalmond": [255, 235, 205],
"blue": [0, 0, 255],
"blueviolet": [138, 43, 226],
"brown": [165, 42, 42],
"burlywood": [222, 184, 135],
"cadetblue": [95, 158, 160],
"chartreuse": [127, 255, 0],
"chocolate": [210, 105, 30],
"coral": [255, 127, 80],
"cornflowerblue": [100, 149, 237],
"cornsilk": [255, 248, 220],
"crimson": [220, 20, 60],
"cyan": [0, 255, 255],
"darkblue": [0, 0, 139],
"darkcyan": [0, 139, 139],
"darkgoldenrod": [184, 134, 11],
"darkgray": [169, 169, 169],
"darkgreen": [0, 100, 0],
"darkgrey": [169, 169, 169],
"darkkhaki": [189, 183, 107],
"darkmagenta": [139, 0, 139],
"darkolivegreen": [85, 107, 47],
"darkorange": [255, 140, 0],
"darkorchid": [153, 50, 204],
"darkred": [139, 0, 0],
"darksalmon": [233, 150, 122],
"darkseagreen": [143, 188, 143],
"darkslateblue": [72, 61, 139],
"darkslategray": [47, 79, 79],
"darkslategrey": [47, 79, 79],
"darkturquoise": [0, 206, 209],
"darkviolet": [148, 0, 211],
"deeppink": [255, 20, 147],
"deepskyblue": [0, 191, 255],
"dimgray": [105, 105, 105],
"dimgrey": [105, 105, 105],
"dodgerblue": [30, 144, 255],
"firebrick": [178, 34, 34],
"floralwhite": [255, 250, 240],
"forestgreen": [34, 139, 34],
"fuchsia": [255, 0, 255],
"gainsboro": [220, 220, 220],
"ghostwhite": [248, 248, 255],
"gold": [255, 215, 0],
"goldenrod": [218, 165, 32],
"gray": [128, 128, 128],
"green": [0, 128, 0],
"greenyellow": [173, 255, 47],
"grey": [128, 128, 128],
"honeydew": [240, 255, 240],
"hotpink": [255, 105, 180],
"indianred": [205, 92, 92],
"indigo": [75, 0, 130],
"ivory": [255, 255, 240],
"khaki": [240, 230, 140],
"lavender": [230, 230, 250],
"lavenderblush": [255, 240, 245],
"lawngreen": [124, 252, 0],
"lemonchiffon": [255, 250, 205],
"lightblue": [173, 216, 230],
"lightcoral": [240, 128, 128],
"lightcyan": [224, 255, 255],
"lightgoldenrodyellow": [250, 250, 210],
"lightgray": [211, 211, 211],
"lightgreen": [144, 238, 144],
"lightgrey": [211, 211, 211],
"lightpink": [255, 182, 193],
"lightsalmon": [255, 160, 122],
"lightseagreen": [32, 178, 170],
"lightskyblue": [135, 206, 250],
"lightslategray": [119, 136, 153],
"lightslategrey": [119, 136, 153],
"lightsteelblue": [176, 196, 222],
"lightyellow": [255, 255, 224],
"lime": [0, 255, 0],
"limegreen": [50, 205, 50],
"linen": [250, 240, 230],
"magenta": [255, 0, 255],
"maroon": [128, 0, 0],
"mediumaquamarine": [102, 205, 170],
"mediumblue": [0, 0, 205],
"mediumorchid": [186, 85, 211],
"mediumpurple": [147, 112, 219],
"mediumseagreen": [60, 179, 113],
"mediumslateblue": [123, 104, 238],
"mediumspringgreen": [0, 250, 154],
"mediumturquoise": [72, 209, 204],
"mediumvioletred": [199, 21, 133],
"midnightblue": [25, 25, 112],
"mintcream": [245, 255, 250],
"mistyrose": [255, 228, 225],
"moccasin": [255, 228, 181],
"navajowhite": [255, 222, 173],
"navy": [0, 0, 128],
"oldlace": [253, 245, 230],
"olive": [128, 128, 0],
"olivedrab": [107, 142, 35],
"orange": [255, 165, 0],
"orangered": [255, 69, 0],
"orchid": [218, 112, 214],
"palegoldenrod": [238, 232, 170],
"palegreen": [152, 251, 152],
"paleturquoise": [175, 238, 238],
"palevioletred": [219, 112, 147],
"papayawhip": [255, 239, 213],
"peachpuff": [255, 218, 185],
"peru": [205, 133, 63],
"pink": [255, 192, 203],
"plum": [221, 160, 221],
"powderblue": [176, 224, 230],
"purple": [128, 0, 128],
"rebeccapurple": [102, 51, 153],
"red": [255, 0, 0],
"rosybrown": [188, 143, 143],
"royalblue": [65, 105, 225],
"saddlebrown": [139, 69, 19],
"salmon": [250, 128, 114],
"sandybrown": [244, 164, 96],
"seagreen": [46, 139, 87],
"seashell": [255, 245, 238],
"sienna": [160, 82, 45],
"silver": [192, 192, 192],
"skyblue": [135, 206, 235],
"slateblue": [106, 90, 205],
"slategray": [112, 128, 144],
"slategrey": [112, 128, 144],
"snow": [255, 250, 250],
"springgreen": [0, 255, 127],
"steelblue": [70, 130, 180],
"tan": [210, 180, 140],
"teal": [0, 128, 128],
"thistle": [216, 191, 216],
"tomato": [255, 99, 71],
"turquoise": [64, 224, 208],
"violet": [238, 130, 238],
"wheat": [245, 222, 179],
"white": [255, 255, 255],
"whitesmoke": [245, 245, 245],
"yellow": [255, 255, 0],
"yellowgreen": [154, 205, 50]
};
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
/* MIT license */
var cssKeywo