in web_tool/js/jscolor.js [1374:1653]
function drawPicker () {
// At this point, when drawing the picker, we know what the parent elements are
// and we can do all related DOM operations, such as registering events on them
// or checking their positioning
THIS._processParentElementsInDOM();
if (!jsc.picker) {
jsc.picker = {
owner: null,
wrap : document.createElement('div'),
box : document.createElement('div'),
boxS : document.createElement('div'), // shadow area
boxB : document.createElement('div'), // border
pad : document.createElement('div'),
padB : document.createElement('div'), // border
padM : document.createElement('div'), // mouse/touch area
padPal : jsc.createPalette(),
cross : document.createElement('div'),
crossBY : document.createElement('div'), // border Y
crossBX : document.createElement('div'), // border X
crossLY : document.createElement('div'), // line Y
crossLX : document.createElement('div'), // line X
sld : document.createElement('div'),
sldB : document.createElement('div'), // border
sldM : document.createElement('div'), // mouse/touch area
sldGrad : jsc.createSliderGradient(),
sldPtrS : document.createElement('div'), // slider pointer spacer
sldPtrIB : document.createElement('div'), // slider pointer inner border
sldPtrMB : document.createElement('div'), // slider pointer middle border
sldPtrOB : document.createElement('div'), // slider pointer outer border
btn : document.createElement('div'),
btnT : document.createElement('span') // text
};
jsc.picker.pad.appendChild(jsc.picker.padPal.elm);
jsc.picker.padB.appendChild(jsc.picker.pad);
jsc.picker.cross.appendChild(jsc.picker.crossBY);
jsc.picker.cross.appendChild(jsc.picker.crossBX);
jsc.picker.cross.appendChild(jsc.picker.crossLY);
jsc.picker.cross.appendChild(jsc.picker.crossLX);
jsc.picker.padB.appendChild(jsc.picker.cross);
jsc.picker.box.appendChild(jsc.picker.padB);
jsc.picker.box.appendChild(jsc.picker.padM);
jsc.picker.sld.appendChild(jsc.picker.sldGrad.elm);
jsc.picker.sldB.appendChild(jsc.picker.sld);
jsc.picker.sldB.appendChild(jsc.picker.sldPtrOB);
jsc.picker.sldPtrOB.appendChild(jsc.picker.sldPtrMB);
jsc.picker.sldPtrMB.appendChild(jsc.picker.sldPtrIB);
jsc.picker.sldPtrIB.appendChild(jsc.picker.sldPtrS);
jsc.picker.box.appendChild(jsc.picker.sldB);
jsc.picker.box.appendChild(jsc.picker.sldM);
jsc.picker.btn.appendChild(jsc.picker.btnT);
jsc.picker.box.appendChild(jsc.picker.btn);
jsc.picker.boxB.appendChild(jsc.picker.box);
jsc.picker.wrap.appendChild(jsc.picker.boxS);
jsc.picker.wrap.appendChild(jsc.picker.boxB);
}
var p = jsc.picker;
var displaySlider = !!jsc.getSliderComponent(THIS);
var dims = jsc.getPickerDims(THIS);
var crossOuterSize = (2 * THIS.pointerBorderWidth + THIS.pointerThickness + 2 * THIS.crossSize);
var padToSliderPadding = jsc.getPadToSliderPadding(THIS);
var borderRadius = Math.min(
THIS.borderRadius,
Math.round(THIS.padding * Math.PI)); // px
var padCursor = 'crosshair';
// wrap
p.wrap.style.clear = 'both';
p.wrap.style.width = (dims[0] + 2 * THIS.borderWidth) + 'px';
p.wrap.style.height = (dims[1] + 2 * THIS.borderWidth) + 'px';
p.wrap.style.zIndex = THIS.zIndex;
// picker
p.box.style.width = dims[0] + 'px';
p.box.style.height = dims[1] + 'px';
p.boxS.style.position = 'absolute';
p.boxS.style.left = '0';
p.boxS.style.top = '0';
p.boxS.style.width = '100%';
p.boxS.style.height = '100%';
jsc.setBorderRadius(p.boxS, borderRadius + 'px');
// picker border
p.boxB.style.position = 'relative';
p.boxB.style.border = THIS.borderWidth + 'px solid';
p.boxB.style.borderColor = THIS.borderColor;
p.boxB.style.background = THIS.backgroundColor;
jsc.setBorderRadius(p.boxB, borderRadius + 'px');
// IE hack:
// If the element is transparent, IE will trigger the event on the elements under it,
// e.g. on Canvas or on elements with border
p.padM.style.background =
p.sldM.style.background =
'#FFF';
jsc.setStyle(p.padM, 'opacity', '0');
jsc.setStyle(p.sldM, 'opacity', '0');
// pad
p.pad.style.position = 'relative';
p.pad.style.width = THIS.width + 'px';
p.pad.style.height = THIS.height + 'px';
// pad palettes (HSV and HVS)
p.padPal.draw(THIS.width, THIS.height, jsc.getPadYComponent(THIS));
// pad border
p.padB.style.position = 'absolute';
p.padB.style.left = THIS.padding + 'px';
p.padB.style.top = THIS.padding + 'px';
p.padB.style.border = THIS.insetWidth + 'px solid';
p.padB.style.borderColor = THIS.insetColor;
// pad mouse area
p.padM._jscInstance = THIS;
p.padM._jscControlName = 'pad';
p.padM.style.position = 'absolute';
p.padM.style.left = '0';
p.padM.style.top = '0';
p.padM.style.width = (THIS.padding + 2 * THIS.insetWidth + THIS.width + padToSliderPadding / 2) + 'px';
p.padM.style.height = dims[1] + 'px';
p.padM.style.cursor = padCursor;
// pad cross
p.cross.style.position = 'absolute';
p.cross.style.left =
p.cross.style.top =
'0';
p.cross.style.width =
p.cross.style.height =
crossOuterSize + 'px';
// pad cross border Y and X
p.crossBY.style.position =
p.crossBX.style.position =
'absolute';
p.crossBY.style.background =
p.crossBX.style.background =
THIS.pointerBorderColor;
p.crossBY.style.width =
p.crossBX.style.height =
(2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px';
p.crossBY.style.height =
p.crossBX.style.width =
crossOuterSize + 'px';
p.crossBY.style.left =
p.crossBX.style.top =
(Math.floor(crossOuterSize / 2) - Math.floor(THIS.pointerThickness / 2) - THIS.pointerBorderWidth) + 'px';
p.crossBY.style.top =
p.crossBX.style.left =
'0';
// pad cross line Y and X
p.crossLY.style.position =
p.crossLX.style.position =
'absolute';
p.crossLY.style.background =
p.crossLX.style.background =
THIS.pointerColor;
p.crossLY.style.height =
p.crossLX.style.width =
(crossOuterSize - 2 * THIS.pointerBorderWidth) + 'px';
p.crossLY.style.width =
p.crossLX.style.height =
THIS.pointerThickness + 'px';
p.crossLY.style.left =
p.crossLX.style.top =
(Math.floor(crossOuterSize / 2) - Math.floor(THIS.pointerThickness / 2)) + 'px';
p.crossLY.style.top =
p.crossLX.style.left =
THIS.pointerBorderWidth + 'px';
// slider
p.sld.style.overflow = 'hidden';
p.sld.style.width = THIS.sliderSize + 'px';
p.sld.style.height = THIS.height + 'px';
// slider gradient
p.sldGrad.draw(THIS.sliderSize, THIS.height, '#000', '#000');
// slider border
p.sldB.style.display = displaySlider ? 'block' : 'none';
p.sldB.style.position = 'absolute';
p.sldB.style.right = THIS.padding + 'px';
p.sldB.style.top = THIS.padding + 'px';
p.sldB.style.border = THIS.insetWidth + 'px solid';
p.sldB.style.borderColor = THIS.insetColor;
// slider mouse area
p.sldM._jscInstance = THIS;
p.sldM._jscControlName = 'sld';
p.sldM.style.display = displaySlider ? 'block' : 'none';
p.sldM.style.position = 'absolute';
p.sldM.style.right = '0';
p.sldM.style.top = '0';
p.sldM.style.width = (THIS.sliderSize + padToSliderPadding / 2 + THIS.padding + 2 * THIS.insetWidth) + 'px';
p.sldM.style.height = dims[1] + 'px';
p.sldM.style.cursor = 'default';
// slider pointer inner and outer border
p.sldPtrIB.style.border =
p.sldPtrOB.style.border =
THIS.pointerBorderWidth + 'px solid ' + THIS.pointerBorderColor;
// slider pointer outer border
p.sldPtrOB.style.position = 'absolute';
p.sldPtrOB.style.left = -(2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px';
p.sldPtrOB.style.top = '0';
// slider pointer middle border
p.sldPtrMB.style.border = THIS.pointerThickness + 'px solid ' + THIS.pointerColor;
// slider pointer spacer
p.sldPtrS.style.width = THIS.sliderSize + 'px';
p.sldPtrS.style.height = sliderPtrSpace + 'px';
// the Close button
function setBtnBorder () {
var insetColors = THIS.insetColor.split(/\s+/);
var outsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
p.btn.style.borderColor = outsetColor;
}
p.btn.style.display = THIS.closable ? 'block' : 'none';
p.btn.style.position = 'absolute';
p.btn.style.left = THIS.padding + 'px';
p.btn.style.bottom = THIS.padding + 'px';
p.btn.style.padding = '0 15px';
p.btn.style.height = THIS.buttonHeight + 'px';
p.btn.style.border = THIS.insetWidth + 'px solid';
setBtnBorder();
p.btn.style.color = THIS.buttonColor;
p.btn.style.font = '12px sans-serif';
p.btn.style.textAlign = 'center';
try {
p.btn.style.cursor = 'pointer';
} catch(eOldIE) {
p.btn.style.cursor = 'hand';
}
p.btn.onmousedown = function () {
THIS.hide();
};
p.btnT.style.lineHeight = THIS.buttonHeight + 'px';
p.btnT.innerHTML = '';
p.btnT.appendChild(document.createTextNode(THIS.closeText));
// place pointers
redrawPad();
redrawSld();
// If we are changing the owner without first closing the picker,
// make sure to first deal with the old owner
if (jsc.picker.owner && jsc.picker.owner !== THIS) {
jsc.unsetClass(jsc.picker.owner.targetElement, THIS.activeClass);
}
// Set the new picker owner
jsc.picker.owner = THIS;
// The redrawPosition() method needs picker.owner to be set, that's why we call it here,
// after setting the owner
if (jsc.isElementType(container, 'body')) {
jsc.redrawPosition();
} else {
jsc._drawPosition(THIS, 0, 0, 'relative', false);
}
if (p.wrap.parentNode != container) {
container.appendChild(p.wrap);
}
jsc.setClass(THIS.targetElement, THIS.activeClass);
}