minor changes
buildView - shortened devPicker - added colorPicker.css - IE7 fixes indec.js - IE8 imagePath support
@ -56,6 +56,7 @@ var myColorPicker = new ColorPicker({
|
||||
XYZReference: ..., // see Colors...
|
||||
grey: ..., // see Colors...
|
||||
luminance: ..., // see Colors...
|
||||
devPicker: false // uses existing HTML instead of internal template for developing
|
||||
renderCallback: // function(colors, mode){}, // callback on after rendering (for further rendering outside colorPicker)
|
||||
actionCallback: function(e, action){}, // callback on any action within colorPicker (buttons, sliders, ...)
|
||||
convertCallback: function(colors, type){}, // see Colors...
|
||||
|
@ -68,7 +68,8 @@
|
||||
CSSPrefix: 'cp-',
|
||||
allMixDetails: true,
|
||||
alphaBG: 'w',
|
||||
imagePath: '',
|
||||
imagePath: ''
|
||||
// devPicker: false // uses existing HTML for development...
|
||||
// noAlpha: true,
|
||||
// customBG: '#808080'
|
||||
// size: 0,
|
||||
@ -281,9 +282,23 @@
|
||||
|
||||
function buildView(THIS) {
|
||||
var app = document.createElement('div'),
|
||||
style,
|
||||
prefix = _options.CSSPrefix,
|
||||
urlData = 'data:image/png;base64,';
|
||||
urlData = 'data:image/png;base64,',
|
||||
addStyleSheet = function(cssText, id) {
|
||||
var style = document.createElement('style');
|
||||
|
||||
style.setAttribute('type', 'text/css');
|
||||
if (id) {
|
||||
style.setAttribute('id', id);
|
||||
}
|
||||
if (!style.styleSheet) {
|
||||
style.appendChild(document.createTextNode(cssText));
|
||||
}
|
||||
document.getElementsByTagName('head')[0].appendChild(style);
|
||||
if (style.styleSheet) { // IE compatible
|
||||
document.styleSheets[document.styleSheets.length-1].cssText = cssText;
|
||||
}
|
||||
};
|
||||
|
||||
// development mode
|
||||
if (_devMode) {
|
||||
@ -301,28 +316,15 @@
|
||||
// CSS
|
||||
if (!document.getElementById('colorPickerCSS')) { // only once needed
|
||||
// CSS - system
|
||||
style = document.createElement('style');
|
||||
style.setAttribute('type', 'text/css');
|
||||
style.setAttribute('id', 'colorPickerCSS');
|
||||
|
||||
_data._cssFunc = _data._cssFunc.
|
||||
replace(/§/g, prefix).
|
||||
replace('_patches.png', !_isIE ? urlData + _data._patchesPng : _options.imagePath + '_patches.png').
|
||||
replace('_vertical.png', !_isIE ? urlData + _data._verticalPng : _options.imagePath + '_vertical.png').
|
||||
replace('_horizontal.png', !_isIE ? urlData + _data._horizontalPng :
|
||||
_options.imagePath + '_horizontal.png');
|
||||
if (!style.styleSheet) {
|
||||
style.appendChild(document.createTextNode(_data._cssFunc));
|
||||
}
|
||||
document.getElementsByTagName('head')[0].appendChild(style);
|
||||
if (style.styleSheet) { // IE compatible
|
||||
document.styleSheets[document.styleSheets.length-1].cssText = _data._cssFunc;
|
||||
}
|
||||
|
||||
addStyleSheet(_data._cssFunc, 'colorPickerCSS');
|
||||
// CSS - main
|
||||
if (!_options.customCSS) {
|
||||
style = document.createElement('style');
|
||||
style.setAttribute('type', 'text/css');
|
||||
_data._cssMain = _data._cssMain.
|
||||
replace(/§/g, prefix).
|
||||
replace('_bgs.png', !_isIE ? urlData + _data._bgsPng : _options.imagePath + '_bgs.png').
|
||||
@ -330,20 +332,14 @@
|
||||
replace('_blank.png', !_isIE ? urlData + _data._blankPng : _options.imagePath + '_blank.cur').
|
||||
replace('"Courier New",', !_isIE ? '' : '"Courier New",');
|
||||
// style.appendChild(document.createTextNode(_data._cssFunc));
|
||||
if (!style.styleSheet) {
|
||||
style.appendChild(document.createTextNode(_data._cssMain));
|
||||
}
|
||||
document.getElementsByTagName('head')[0].appendChild(style);
|
||||
if (style.styleSheet) { // IE compatible
|
||||
document.styleSheets[document.styleSheets.length-1].cssText = _data._cssMain;
|
||||
}
|
||||
addStyleSheet(_data._cssMain);
|
||||
}
|
||||
for (var n in _data) { // almost 25k of memory ;o)
|
||||
_data[n] = null;
|
||||
}
|
||||
}
|
||||
|
||||
app.children[0].style.cssText = _options.initStyle || '';
|
||||
app.children[0].style.cssText = _options.initStyle || ''; // for initial hiding...
|
||||
|
||||
return (_options.appenTo || document.body).appendChild(app.children[0]);
|
||||
}
|
||||
|
BIN
developer/_bgs.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
developer/_blank.cur
Normal file
After Width: | Height: | Size: 102 B |
BIN
developer/_blank.png
Normal file
After Width: | Height: | Size: 70 B |
BIN
developer/_horizontal.png
Normal file
After Width: | Height: | Size: 392 B |
BIN
developer/_icons.png
Normal file
After Width: | Height: | Size: 594 B |
BIN
developer/_patches.png
Normal file
After Width: | Height: | Size: 3.0 KiB |
BIN
developer/_vertical.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
@ -328,7 +328,7 @@
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
width: 96px;
|
||||
width: 94px;
|
||||
background-color: #333;
|
||||
border: 1px solid;
|
||||
border-color: #222 #555 #555 #222;
|
||||
@ -429,11 +429,15 @@
|
||||
.cp-panel .hsl-mode {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0; /* IE 7 */
|
||||
height: 52px;
|
||||
top: 1px; /* IE 7 */
|
||||
height: 50px;
|
||||
}
|
||||
.cp-panel .hsv-mode,
|
||||
.cp-panel .hsl-mode {
|
||||
top: 2px; /* IE 7 */
|
||||
}
|
||||
.cp-panel .cmyk-mode {
|
||||
height: 70px;
|
||||
height: 68px;
|
||||
}
|
||||
.hsl-h .hsl-h-labl,
|
||||
.hsl-s .hsl-s-labl,
|
||||
@ -572,7 +576,7 @@
|
||||
border: 1px solid;
|
||||
border-color: #555 #222 #222 #555;
|
||||
float: left;
|
||||
width: 47px; width: 46px; /* IE7 */
|
||||
width: 47px; width: 45px; /* IE7 */
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
|
3
index.js
@ -4,6 +4,7 @@
|
||||
|
||||
if (1 === 2) { // to run ColorPicker on its own....
|
||||
myColor = window.myColor = new window.ColorPicker({
|
||||
imagePath: 'images/' // IE8-
|
||||
// customCSS: true
|
||||
});
|
||||
return;
|
||||
@ -423,7 +424,7 @@
|
||||
renderCallback = doRender,
|
||||
// finally the instance of either ColorPicker or Colors (export for debugging purposes)
|
||||
color_ColorPicker = new (ColorPicker || Colors)({
|
||||
customBG: '#808080',
|
||||
customBG: '#808080'
|
||||
// renderCallback: renderCallback, // doesn't work in Colors, but also doesn't matter
|
||||
// convertCallback: function(color, type){console.log(color, type)}
|
||||
// resizeCallback: function(e, value, scale, original){console.log(e, value, scale, original)}
|
||||
|