Browse Source

Minor updates / color2text method

- fixed positioning (appendTo different then document.body)
- added method color2text()
- minor optimizations
pull/43/head
peterd 5 years ago
parent
commit
0d55e45be6
  1. 1
      README.md
  2. 6
      color.all.min.js
  3. 2
      colorPicker.js.map
  4. 30
      colors.js
  5. 9
      index.js
  6. 1
      jQuery_implementation/index.html
  7. 6
      jQuery_implementation/jQueryColorPicker.min.js
  8. 30
      jQuery_implementation/jqColor.js
  9. 174
      javascript_implementation/_temp.js
  10. 3
      javascript_implementation/index.html
  11. 11
      javascript_implementation/jsColor.js
  12. 6
      javascript_implementation/jsColorPicker.min.js

1
README.md

@ -59,6 +59,7 @@ var myColors = new Colors({ // all options have a default value...
valueRanges: {rgb: {r: [0, 255], g: [0, 255], b: [0, 255]}, hsv:...}, // skip ranges if no conversion required
customBG: '#808080' // the solid bgColor behind the chosen bgColor (saved color)
convertCallback: function(colors, type){}, // callback function after color convertion for further calculations...
toString: function('rgb' || 'hsl' || 'hex' || '' -> 'rgb', forceAlpha) {},
allMixDetails: false // if set to true, Colors deliveres some more mixed layer informations for all color layers
});
```

6
color.all.min.js
File diff suppressed because it is too large
View File

2
colorPicker.js.map
File diff suppressed because it is too large
View File

30
colors.js

@ -155,6 +155,11 @@
return color;
};
Colors.prototype.toString = function(colorMode, forceAlpha) {
return ColorConverter.color2text((colorMode || 'rgb').toLowerCase(), this.colors, forceAlpha);
};
// ------------------------------------------------------ //
// ---------- Color calculation related stuff ---------- //
// -------------------------------------------------------//
@ -366,6 +371,23 @@
return color;
},
color2text: function(colorMode, colors, forceAlpha) {
var alpha = forceAlpha !== false && _math.round(colors.alpha * 100) / 100,
hasAlpha = typeof alpha === 'number' &&
forceAlpha !== false && (forceAlpha || alpha !== 1),
RGB = colors.RND.rgb,
HSL = colors.RND.hsl,
shouldBeHex = colorMode === 'hex' && hasAlpha,
isHex = colorMode === 'hex' && !shouldBeHex,
isRgb = colorMode === 'rgb' || shouldBeHex,
innerText = isRgb ? RGB.r + ', ' + RGB.g + ', ' + RGB.b :
!isHex ? HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' :
'#' + colors.HEX;
return isHex ? innerText : (shouldBeHex ? 'rgb' : colorMode) +
(hasAlpha ? 'a' : '') + '(' + innerText + (hasAlpha ? ', ' + alpha : '') + ')';
},
RGB2HEX: function(RGB) {
return (
(RGB.r < 16 ? '0' : '') + RGB.r.toString(16) +
@ -375,13 +397,11 @@
},
HEX2rgb: function(HEX) {
var _parseInt = _parseint;
HEX = HEX.split(''); // IE7
return {
r: _parseInt(HEX[0] + HEX[HEX[3] ? 1 : 0], 16) / 255,
g: _parseInt(HEX[HEX[3] ? 2 : 1] + (HEX[3] || HEX[1]), 16) / 255,
b: _parseInt((HEX[4] || HEX[2]) + (HEX[5] || HEX[2]), 16) / 255
r: +('0x' + HEX[0] + HEX[HEX[3] ? 1 : 0]) / 255,
g: +('0x' + HEX[HEX[3] ? 2 : 1] + (HEX[3] || HEX[1])) / 255,
b: +('0x' + (HEX[4] || HEX[2]) + (HEX[5] || HEX[2])) / 255
};
},

9
index.js

@ -25,9 +25,8 @@
var testPatch = document.getElementById('testPatch'),
renderTestPatch = function(color) { // used in renderCallback of 'new ColorPicker'
var RGB = color.RND.rgb;
testPatch.style.cssText =
'background-color: rgba(' + RGB.r + ',' + RGB.g + ',' + RGB.b + ',' + color.alpha + ');' +
'background-color: ' + (myColor.color || myColor).toString() + ';' +
'color: ' + (color.rgbaMixBlack.luminance > 0.22 ? '#222' : '#ddd');
testPatch.firstChild.data = '#' + color.HEX;
};
@ -58,7 +57,7 @@
Math.round(cBGColor.r * 255) + ',' +
Math.round(cBGColor.g * 255) + ',' +
Math.round(cBGColor.b * 255) + ');' +
'color: ' + 'rgba(' + RGB.r + ',' + RGB.g + ',' + RGB.b + ',' + color.alpha + ');';
'color: ' + (myColor.color || myColor).toString();
backGround.style.cssText =
'background-color: rgba(' +
bgColor.r + ',' +
@ -77,9 +76,9 @@
var RND = color.RND;
colorValues.firstChild.data =
'rgba(' + RND.rgb.r + ',' + RND.rgb.g + ',' + RND.rgb.b + ',' + color.alpha + ')' + "\n" +
(myColor.color || myColor).toString('rgb', true).replace(/, /g, ',') + "\n" +
'hsva(' + RND.hsv.h + ',' + RND.hsv.s + ',' + RND.hsv.v + ',' + color.alpha + ')' + "\n" +
'hsla(' + RND.hsl.h + ',' + RND.hsl.s + ',' + RND.hsl.l + ',' + color.alpha + ')' + "\n" +
(myColor.color || myColor).toString('hsl', true).replace(/, /g, ',') + "\n" +
'CMYK(' + RND.cmyk.c + ',' + RND.cmyk.m + ',' + RND.cmyk.y + ',' + RND.cmyk.k + ')' + "\n" +
'CMY(' + RND.cmy.c + ',' + RND.cmy.m + ',' + RND.cmy.y + ')' + "\n" +
'Lab(' + RND.Lab.L + ',' + RND.Lab.a + ',' + RND.Lab.b + ')'; // + "\n" +

1
jQuery_implementation/index.html

@ -54,6 +54,7 @@ var memoryColors = [
elm.style.backgroundColor = elm.value;
elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
},
// appendTo: document.querySelector('.the-paragraph')
// renderCallback: function(colors, mode) {
// console.log(mode);
// }

6
jQuery_implementation/jQueryColorPicker.min.js
File diff suppressed because it is too large
View File

30
jQuery_implementation/jqColor.js

@ -9,23 +9,20 @@
HSL = colors.RND.hsl,
AHEX = options.isIE8 ? (colors.alpha < 0.16 ? '0' : '') +
(Math.round(colors.alpha * 100)).toString(16).toUpperCase() + colors.HEX : '',
RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
RGBAText = 'rgba(' + RGBInnerText + ', ' + colors.alpha + ')',
isAlpha = colors.alpha !== 1 && !options.isIE8,
colorMode = $input.data('colorMode');
if (!options._instance) return;
$patch.css({
'color': (colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd'), // Black...???
'background-color': RGBAText,
'background-color': options._instance.toString(),
'filter' : (options.isIE8 ? 'progid:DXImageTransform.Microsoft.gradient(' + // IE<9
'startColorstr=#' + AHEX + ',' + 'endColorstr=#' + AHEX + ')' : '')
});
$input.val(colorMode === 'HEX' && !isAlpha ? '#' + (options.isIE8 ? AHEX : colors.HEX) :
colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
(!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) :
('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' +
(isAlpha ? ', ' + colors.alpha : '') + ')')
options._instance.toString(colorMode, options.forceAlpha)
);
if (options.displayCallback) {
@ -85,16 +82,20 @@
// return config.noAlpha ?
// colors.replace(/\,\d*\.*\d*\)/g, ',1)') : colors;
// })($.docCookies('colorPickerMemos'), config || {}),
// forceAlpha: true,
memoryColors: $.docCookies('colorPickerMemos' + ((config || {}).noAlpha ? 'NoAlpha' : '')),
size: $.docCookies('colorPickerSize') || 1,
renderCallback: renderCallback,
actionCallback: actionCallback
};
},
instance;
for (var n in config) {
initConfig[n] = config[n];
}
return new initConfig.klass(initConfig);
instance = new initConfig.klass(initConfig);
instance.color.options._instance = instance.color;
return instance;
},
doEventListeners = function(elm, multiple, off) {
var onOff = off ? 'off' : 'on';
@ -109,13 +110,16 @@
$colorPicker = $.ui && options.draggable ?
$(colorPicker.nodes.colorPicker).draggable(
{cancel: '.' + options.CSSPrefix + 'app div'}
) : $(colorPicker.nodes.colorPicker);
) : $(colorPicker.nodes.colorPicker),
$appendTo = $(options.appendTo || document.body),
isStatic = /static/.test($appendTo.css('position')),
atrect = isStatic ? {left: 0, top: 0} : $appendTo[0].getBoundingClientRect();
options.color = extractValue(elm); // brings color to default on reset
$colorPicker.css({
'position': 'absolute',
'left': position.left + options.margin.left,
'top': position.top + $input.outerHeight(true) + options.margin.top
'left': position.left + options.margin.left - atrect.left,
'top': position.top + $input.outerHeight(true) + options.margin.top - atrect.top
});
if (!multiple) {
options.input = elm;
@ -124,7 +128,7 @@
colorPicker.saveAsBackground();
}
colorPickers.current = colorPickers[index];
$(options.appendTo || document.body).append($colorPicker);
$appendTo.append($colorPicker);
setTimeout(function() { // compensating late style on onload in colorPicker
$colorPicker.show(colorPicker.color.options.animationSpeed);
}, 0);

174
javascript_implementation/_temp.js

@ -0,0 +1,174 @@
/**
* [kolor-picker]{@link https://github.com/emn178/kolor-picker}
*
* @version 0.2.0
* @author Yi-Cyuan Chen [emn178@gmail.com]
* @copyright Yi-Cyuan Chen 2015-2016
* @license MIT
*/
(function ($) {
'use strict';
var KEY = 'kolor-picker';
var wrapper;
function Wrapper(element, colorPicker) {
this.element = element;
this.colorPicker = colorPicker;
this.previewElement = $('<div class="kolor-picker"><div class="sampler"></div><div class="preview-block"><input type="text"/><div class="preview-wrapper"><div class="preview" /></div></div></div>');
this.element.append(this.previewElement);
var elements = {
preview: this.previewElement.find('.preview'),
input: this.previewElement.find('input'),
sampler: this.previewElement.find('.sampler'),
alpha: this.element.find('.cp-alpha')
};
this.elements = elements;
elements.sampler.click(this.enableSampler.bind(this));
this.sampling = false;
this.lastToggled = false;
}
Wrapper.prototype.enableSampler = function () {
if (!this.kolorPicker.canvas) {
return;
}
this.kolorPicker.canvas.colorSampler('enable');
this.sampling = true;
this.colorPicker.toggle(false);
};
Wrapper.prototype.setKolorPicker = function (kolorPicker) {
this.kolorPicker = kolorPicker;
this.element.attr('data-theme', kolorPicker.theme);
this.elements.sampler.toggle(!!kolorPicker.canvas);
this.elements.alpha.toggle(kolorPicker.options.opacity !== false);
if (kolorPicker.options.doRender === undefined) {
this.colorPicker.color.options.doRender = true;
} else {
this.colorPicker.color.options.doRender = kolorPicker.options.doRender;
}
};
Wrapper.prototype.getColor = function () {
return this.color.toString();
// var rgb = this.colorPicker.color.colors.rgb;
// return 'rgba(' + [parseInt(rgb.r * 255), parseInt(rgb.g * 255), parseInt(rgb.b * 255), this.colorPicker.color.colors.alpha.toFixed(2)].join(',') + ')';
};
Wrapper.prototype.updateColor = function () {
var color = this.getColor();
this.elements.preview.css('background-color', color);
this.elements.input.val(color);
this.kolorPicker.changeColor(color);
};
Wrapper.prototype.render = function (toggled) {
if (toggled === undefined) {
this.updateColor();
} else if (this.lastToggled === toggled) {
return;
}
this.lastToggled = toggled;
if (toggled === false) {
if (!this.sampling) {
var color = this.getColor();
this.kolorPicker.selectColor(color);
}
} else {
this.updateColor();
}
};
function KolorPicker(element, options) {
this.element = element;
this.options = options || {};
this.canvas = this.options.canvas;
this.theme = this.options.theme || $.kolorPicker.theme;
if (this.canvas) {
this.canvas = $(this.canvas);
this.canvas.colorSampler().colorSampler('disable')
.bind('sampler:preview', this.onSamplerPreview.bind(this))
.bind('sampler:select', this.onSamplerSelect.bind(this));
}
}
KolorPicker.prototype.onSamplerSelect = function (e, color) {
if (wrapper.kolorPicker != this) {
return;
}
wrapper.sampling = false;
this.canvas.colorSampler('disable');
this.setColor(color);
color = wrapper.getColor();
this.selectColor(color);
};
KolorPicker.prototype.onSamplerPreview = function (e, color) {
if (wrapper.kolorPicker != this) {
return;
}
this.element.css('background-color', color);
color = wrapper.getColor();
this.changeColor(color);
};
KolorPicker.prototype.selectColor = function (color) {
if ($.isFunction(this.options.onSelect)) {
this.options.onSelect.call(this.element, color);
}
};
KolorPicker.prototype.changeColor = function (color) {
if ($.isFunction(this.options.onChange)) {
this.options.onChange.call(this.element, color);
}
};
KolorPicker.prototype.setColor = function (color) {
wrapper.colorPicker.color.setColor(color);
wrapper.colorPicker.render();
};
var KolorPickerOptions = {
buildCallback: function (element) {
wrapper = new Wrapper(element, this);
},
renderCallback: function (element, toggled) {
wrapper.setKolorPicker($(element).data(KEY));
wrapper.render(toggled);
}
};
var PublicMethods = ['setColor'];
$.fn.kolorPicker = function (options) {
if (typeof (options) == 'string') {
if ($.inArray(options, PublicMethods) != -1) {
var args = Array.prototype.splice.call(arguments, 1);
this.each(function () {
var kolorPicker = $(this).data(KEY);
if (kolorPicker) {
return kolorPicker[options].apply(kolorPicker, args);
}
});
}
} else {
this.each(function () {
var element = $(this);
if (!element.data(KEY)) {
return element.data(KEY, new KolorPicker(element, options))
.colorPicker($.extend({ cssAddon: $.kolorPicker.css }, options, KolorPickerOptions));
}
});
}
return this;
};
$.kolorPicker = {
theme: ''
};
})(jQuery);

3
javascript_implementation/index.html

@ -41,7 +41,8 @@ Calling the colorPicker on all inputs with the calssName 'color': <pre>jsColorPi
init: function(elm, colors) { // colors is a different instance (not connected to colorPicker)
elm.style.backgroundColor = elm.value;
elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
}
},
// appendTo: document.querySelector('.samples')
});
</script>
</body>

11
javascript_implementation/jsColor.js

@ -103,13 +103,16 @@
colorPicker = colorPickers[index] ||
(colorPickers[index] = createInstance(this, config)),
options = colorPicker.color.options,
colorPickerUI = colorPicker.nodes.colorPicker;
colorPickerUI = colorPicker.nodes.colorPicker,
appendTo = (options.appendTo || document.body),
isStatic = /static/.test(window.getComputedStyle(appendTo).position),
atrect = isStatic ? {left: 0, top: 0} : appendTo.getBoundingClientRect();
options.color = extractValue(elm); // brings color to default on reset
colorPickerUI.style.cssText =
'position: absolute;' +
'left:' + (position.left + options.margin.left) + 'px;' +
'top:' + (position.top + +input.offsetHeight + options.margin.top) + 'px;';
'left:' + (position.left + options.margin.left - atrect.left) + 'px;' +
'top:' + (position.top + +input.offsetHeight + options.margin.top - atrect.top) + 'px;';
if (!multiple) {
options.input = elm;
@ -118,7 +121,7 @@
colorPicker.saveAsBackground();
}
colorPickers.current = colorPickers[index];
(options.appendTo || document.body).appendChild(colorPickerUI);
appendTo.appendChild(colorPickerUI);
setTimeout(function() { // compensating late style on onload in colorPicker
colorPickerUI.style.display = 'block';
}, 0);

6
javascript_implementation/jsColorPicker.min.js
File diff suppressed because it is too large
View File

Loading…
Cancel
Save