Mirrors/overte-Armored-Dragon
3
0
Fork 0
mirror of https://github.com/Armored-Dragon/overte.git synced 2025-03-11 16:13:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #12391 from 1P-Cusack/FogBugz/Case_4315_colorpreview_final

Browse source 
[Case 4315] Fixes ColorPicker Color Preview functionality
This commit is contained in:
tapalisa 2018-02-21 16:09:47 -08:00 committed by GitHub
commit 1f958c247f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 258 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
scripts/system/html/css/colpick.css
View file

@ -279,7 +279,7 @@ colpick Color Picker / colpick.com
} }
/*full layout with no submit button*/ /*full layout with no submit button*/
.colpick_full_ns .colpick_submit, .colpick_full_ns .colpick_current_color{ .colpick_full_ns .colpick_submit {
display:none; display:none;
} }
.colpick_full_ns .colpick_new_color { .colpick_full_ns .colpick_new_color {
@ -320,11 +320,11 @@ colpick Color Picker / colpick.com
} }
/*rgbhex layout, no submit button*/ /*rgbhex layout, no submit button*/
.colpick_rgbhex_ns .colpick_submit, .colpick_rgbhex_ns .colpick_current_color{ .colpick_rgbhex_ns .colpick_submit {
display:none; display:none;
} }
.colpick_rgbhex_ns .colpick_new_color{ .colpick_rgbhex_ns .colpick_new_color{
width:68px; width:34px;
border: 1px solid #8f8f8f; border: 1px solid #8f8f8f;
} }
.colpick_rgbhex_ns .colpick_rgb_r { .colpick_rgbhex_ns .colpick_rgb_r {
@ -379,7 +379,7 @@ colpick Color Picker / colpick.com
} }
/*hex layout, no submit button*/ /*hex layout, no submit button*/
.colpick_hex_ns .colpick_submit, .colpick_hex_ns .colpick_current_color { .colpick_hex_ns .colpick_submit {
display:none; display:none;
} }
.colpick_hex_ns .colpick_hex_field { .colpick_hex_ns .colpick_hex_field {

276
scripts/system/html/js/colpick.js
View file

@ -1,14 +1,41 @@
/* /*
colpick Color Picker colpick Color Picker
Copyright 2013 Jose Vargas. Licensed under GPL license. Based on Stefan Petre's Color Picker www.eyecon.ro, dual licensed under the MIT and GPL licenses Copyright 2013 Jose Vargas. Licensed under GPL license. Based on Stefan Petre's Color Picker www.eyecon.ro, dual licensed
under the MIT and GPL licenses
For usage and examples: colpick.com/plugin For usage and examples: colpick.com/plugin
*/ */
/* global console, document, Element, EventBridge, jQuery, navigator, window, _ $ */
(function ($) { (function ($) {
var colpick = function () { var colpick = function () {
var var
tpl = '<div class="colpick"><div class="colpick_color"><div class="colpick_color_overlay1"><div class="colpick_color_overlay2"><div class="colpick_selector_outer"><div class="colpick_selector_inner"></div></div></div></div></div><div class="colpick_hue"><div class="colpick_hue_arrs"><div class="colpick_hue_larr"></div><div class="colpick_hue_rarr"></div></div></div><div class="colpick_new_color"></div><div class="colpick_current_color"></div><div class="colpick_hex_field"><div class="colpick_field_letter">#</div><input type="text" maxlength="6" size="6" /></div><div class="colpick_rgb_r colpick_field"><div class="colpick_field_letter">R</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_g colpick_field"><div class="colpick_field_letter">G</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_h colpick_field"><div class="colpick_field_letter">H</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_s colpick_field"><div class="colpick_field_letter">S</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_submit"></div></div>', tpl = '<div class="colpick"><div class="colpick_color"><div class="colpick_color_overlay1">' +
'<div class="colpick_color_overlay2"><div class="colpick_selector_outer"><div class="colpick_selector_inner">' +
'</div></div></div></div></div><div class="colpick_hue"><div class="colpick_hue_arrs">' +
'<div class="colpick_hue_larr"></div><div class="colpick_hue_rarr"></div></div></div>' +
'<div class="colpick_new_color"></div><div class="colpick_current_color"></div>' +
'<div class="colpick_hex_field"><div class="colpick_field_letter">#</div>' +
'<input type="text" maxlength="6" size="6" /></div><div class="colpick_rgb_r colpick_field">' +
'<div class="colpick_field_letter">R</div><input type="text" maxlength="3" size="3" />' +
'<div class="colpick_field_arrs"><div class="colpick_field_uarr"></div>' +
'<div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_g colpick_field">' +
'<div class="colpick_field_letter">G</div><input type="text" maxlength="3" size="3" />' +
'<div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div>' +
'</div></div><div class="colpick_rgb_b colpick_field"><div class="colpick_field_letter">B</div>' +
'<input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs">' +
'<div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div>' +
'<div class="colpick_hsb_h colpick_field"><div class="colpick_field_letter">H</div>' +
'<input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs">' +
'<div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div>' +
'<div class="colpick_hsb_s colpick_field"><div class="colpick_field_letter">S</div>' +
'<input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs">' +
'<div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div>' +
'<div class="colpick_hsb_b colpick_field"><div class="colpick_field_letter">B</div>' +
'<input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs">' +
'<div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div>' +
'<div class="colpick_submit"></div></div>',
defaults = { defaults = {
showEvent: 'click', showEvent: 'click',
onShow: function () {}, onShow: function () {},
@ -25,15 +52,15 @@ For usage and examples: colpick.com/plugin
submitText: 'OK', submitText: 'OK',
height: 156 height: 156
}, },
//Fill the inputs of the plugin // Fill the inputs of the plugin
fillRGBFields = function (hsb, cal) { fillRGBFields = function (hsb, cal) {
var rgb = hsbToRgb(hsb); var rgb = hsbToRgb(hsb);
$(cal).data('colpick').fields $(cal).data('colpick').fields
.eq(1).val(rgb.r).end() .eq(1).val(rgb.r).end()
.eq(2).val(rgb.g).end() .eq(2).val(rgb.g).end()
.eq(3).val(rgb.b).end(); .eq(3).val(rgb.b).end();
}, },
fillHSBFields = function (hsb, cal) { fillHSBFields = function (hsb, cal) {
$(cal).data('colpick').fields $(cal).data('colpick').fields
.eq(4).val(Math.round(hsb.h)).end() .eq(4).val(Math.round(hsb.h)).end()
.eq(5).val(Math.round(hsb.s)).end() .eq(5).val(Math.round(hsb.s)).end()
@ -42,7 +69,7 @@ For usage and examples: colpick.com/plugin
fillHexFields = function (hsb, cal) { fillHexFields = function (hsb, cal) {
$(cal).data('colpick').fields.eq(0).val(hsbToHex(hsb)); $(cal).data('colpick').fields.eq(0).val(hsbToHex(hsb));
}, },
//Set the round selector position // Set the round selector position
setSelector = function (hsb, cal) { setSelector = function (hsb, cal) {
$(cal).data('colpick').selector.css('backgroundColor', '#' + hsbToHex({h: hsb.h, s: 100, b: 100})); $(cal).data('colpick').selector.css('backgroundColor', '#' + hsbToHex({h: hsb.h, s: 100, b: 100}));
$(cal).data('colpick').selectorIndic.css({ $(cal).data('colpick').selectorIndic.css({
@ -50,18 +77,19 @@ For usage and examples: colpick.com/plugin
top: parseInt($(cal).data('colpick').height * (100-hsb.b)/100, 10) top: parseInt($(cal).data('colpick').height * (100-hsb.b)/100, 10)
}); });
}, },
//Set the hue selector position // Set the hue selector position
setHue = function (hsb, cal) { setHue = function (hsb, cal) {
$(cal).data('colpick').hue.css('top', parseInt($(cal).data('colpick').height - $(cal).data('colpick').height * hsb.h/360, 10)); $(cal).data('colpick').hue.css('top',
parseInt($(cal).data('colpick').height - $(cal).data('colpick').height * hsb.h / 360, 10));
}, },
//Set current and new colors // Set current and new colors
setCurrentColor = function (hsb, cal) { setCurrentColor = function (hsb, cal) {
$(cal).data('colpick').currentColor.css('backgroundColor', '#' + hsbToHex(hsb)); $(cal).data('colpick').currentColor.css('backgroundColor', '#' + hsbToHex(hsb));
}, },
setNewColor = function (hsb, cal) { setNewColor = function (hsb, cal) {
$(cal).data('colpick').newColor.css('backgroundColor', '#' + hsbToHex(hsb)); $(cal).data('colpick').newColor.css('backgroundColor', '#' + hsbToHex(hsb));
}, },
//Called when the new color is changed // Called when the new color is changed
change = function (ev) { change = function (ev) {
var cal = $(this).parent().parent(), col; var cal = $(this).parent().parent(), col;
if (this.parentNode.className.indexOf('_hex') > 0) { if (this.parentNode.className.indexOf('_hex') > 0) {
@ -91,9 +119,10 @@ For usage and examples: colpick.com/plugin
setSelector(col, cal.get(0)); setSelector(col, cal.get(0));
setHue(col, cal.get(0)); setHue(col, cal.get(0));
setNewColor(col, cal.get(0)); setNewColor(col, cal.get(0));
cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 0]); cal.data('colpick').onChange.apply(cal.parent(),
[col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 0]);
}, },
//Change style on blur and on focus of inputs // Change style on blur and on focus of inputs
blur = function (ev) { blur = function (ev) {
$(this).parent().removeClass('colpick_focus'); $(this).parent().removeClass('colpick_focus');
}, },
@ -101,13 +130,14 @@ For usage and examples: colpick.com/plugin
$(this).parent().parent().data('colpick').fields.parent().removeClass('colpick_focus'); $(this).parent().parent().data('colpick').fields.parent().removeClass('colpick_focus');
$(this).parent().addClass('colpick_focus'); $(this).parent().addClass('colpick_focus');
}, },
//Increment/decrement arrows functions // Increment/decrement arrows functions
downIncrement = function (ev) { downIncrement = function (ev) {
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
var field = $(this).parent().find('input').focus(); var field = $(this).parent().find('input').focus();
var current = { var current = {
el: $(this).parent().addClass('colpick_slider'), el: $(this).parent().addClass('colpick_slider'),
max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255), max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 :
(this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
y: ev.pageY, y: ev.pageY,
field: field, field: field,
val: parseInt(field.val(), 10), val: parseInt(field.val(), 10),
@ -130,7 +160,7 @@ For usage and examples: colpick.com/plugin
$(document).off('mousemove', moveIncrement); $(document).off('mousemove', moveIncrement);
return false; return false;
}, },
//Hue slider functions // Hue slider functions
downHue = function (ev) { downHue = function (ev) {
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
var current = { var current = {
@ -140,20 +170,23 @@ For usage and examples: colpick.com/plugin
$(document).on('mouseup touchend',current,upHue); $(document).on('mouseup touchend',current,upHue);
$(document).on('mousemove touchmove',current,moveHue); $(document).on('mousemove touchmove',current,moveHue);
var pageY = ((ev.type == 'touchstart') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY ); var pageY = ((ev.type === 'touchstart') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
change.apply( change.apply(
current.cal.data('colpick') current.cal.data('colpick')
.fields.eq(4).val(parseInt(360*(current.cal.data('colpick').height - (pageY - current.y))/current.cal.data('colpick').height, 10)) .fields.eq(4).val(parseInt(360 * (current.cal.data('colpick').height -
(pageY - current.y)) / current.cal.data('colpick').height, 10))
.get(0), .get(0),
[current.cal.data('colpick').livePreview] [current.cal.data('colpick').livePreview]
); );
return false; return false;
}, },
moveHue = function (ev) { moveHue = function (ev) {
var pageY = ((ev.type == 'touchmove') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY ); var pageY = ((ev.type === 'touchmove') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
change.apply( change.apply(
ev.data.cal.data('colpick') ev.data.cal.data('colpick')
.fields.eq(4).val(parseInt(360*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.y))))/ev.data.cal.data('colpick').height, 10)) .fields.eq(4).val(parseInt(360 * (ev.data.cal.data('colpick').height -
Math.max(0, Math.min(ev.data.cal.data('colpick').height, (pageY - ev.data.y)))) /
ev.data.cal.data('colpick').height, 10))
.get(0), .get(0),
[ev.data.preview] [ev.data.preview]
); );
@ -166,7 +199,7 @@ For usage and examples: colpick.com/plugin
$(document).off('mousemove touchmove',moveHue); $(document).off('mousemove touchmove',moveHue);
return false; return false;
}, },
//Color selector functions // Color selector functions
downSelector = function (ev) { downSelector = function (ev) {
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
var current = { var current = {
@ -178,8 +211,8 @@ For usage and examples: colpick.com/plugin
$(document).on('mouseup touchend',current,upSelector); $(document).on('mouseup touchend',current,upSelector);
$(document).on('mousemove touchmove',current,moveSelector); $(document).on('mousemove touchmove',current,moveSelector);
var payeX,pageY; var pageX,pageY;
if(ev.type == 'touchstart') { if (ev.type === 'touchstart') {
pageX = ev.originalEvent.changedTouches[0].pageX, pageX = ev.originalEvent.changedTouches[0].pageX,
pageY = ev.originalEvent.changedTouches[0].pageY; pageY = ev.originalEvent.changedTouches[0].pageY;
} else { } else {
@ -189,16 +222,17 @@ For usage and examples: colpick.com/plugin
change.apply( change.apply(
current.cal.data('colpick').fields current.cal.data('colpick').fields
.eq(6).val(parseInt(100*(current.cal.data('colpick').height - (pageY - current.pos.top))/current.cal.data('colpick').height, 10)).end() .eq(6).val(parseInt(100 * (current.cal.data('colpick').height - (pageY - current.pos.top)) /
.eq(5).val(parseInt(100*(pageX - current.pos.left)/current.cal.data('colpick').height, 10)) current.cal.data('colpick').height, 10)).end()
.get(0), .eq(5).val(parseInt(100*(pageX - current.pos.left)/current.cal.data('colpick').height, 10))
.get(0),
[current.preview] [current.preview]
); );
return false; return false;
}, },
moveSelector = function (ev) { moveSelector = function (ev) {
var payeX,pageY; var pageX,pageY;
if(ev.type == 'touchmove') { if (ev.type === 'touchmove') {
pageX = ev.originalEvent.changedTouches[0].pageX, pageX = ev.originalEvent.changedTouches[0].pageX,
pageY = ev.originalEvent.changedTouches[0].pageY; pageY = ev.originalEvent.changedTouches[0].pageY;
} else { } else {
@ -208,9 +242,12 @@ For usage and examples: colpick.com/plugin
change.apply( change.apply(
ev.data.cal.data('colpick').fields ev.data.cal.data('colpick').fields
.eq(6).val(parseInt(100*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.pos.top))))/ev.data.cal.data('colpick').height, 10)).end() .eq(6).val(parseInt(100 * (ev.data.cal.data('colpick').height -
.eq(5).val(parseInt(100*(Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageX - ev.data.pos.left))))/ev.data.cal.data('colpick').height, 10)) Math.max(0, Math.min(ev.data.cal.data('colpick').height, (pageY - ev.data.pos.top)))) /
.get(0), ev.data.cal.data('colpick').height, 10)).end()
.eq(5).val(parseInt(100 * (Math.max(0, Math.min(ev.data.cal.data('colpick').height,
(pageX - ev.data.pos.left)))) / ev.data.cal.data('colpick').height, 10))
.get(0),
[ev.data.preview] [ev.data.preview]
); );
return false; return false;
@ -222,7 +259,7 @@ For usage and examples: colpick.com/plugin
$(document).off('mousemove touchmove',moveSelector); $(document).off('mousemove touchmove',moveSelector);
return false; return false;
}, },
//Submit button // Submit button
clickSubmit = function (ev) { clickSubmit = function (ev) {
var cal = $(this).parent(); var cal = $(this).parent();
var col = cal.data('colpick').color; var col = cal.data('colpick').color;
@ -230,7 +267,7 @@ For usage and examples: colpick.com/plugin
setCurrentColor(col, cal.get(0)); setCurrentColor(col, cal.get(0));
cal.data('colpick').onSubmit(col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el); cal.data('colpick').onSubmit(col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el);
}, },
//Show/hide the color picker // Show/hide the color picker
show = function (ev) { show = function (ev) {
// Prevent the trigger of any direct parent // Prevent the trigger of any direct parent
ev.stopPropagation(); ev.stopPropagation();
@ -245,27 +282,29 @@ For usage and examples: colpick.com/plugin
left -= calW; left -= calW;
} }
cal.css({left: left + 'px', top: top + 'px'}); cal.css({left: left + 'px', top: top + 'px'});
if (cal.data('colpick').onShow.apply(this, [cal.get(0)]) != false) { if (cal.data('colpick').onShow.apply(this, [cal.get(0)]) !== false) {
cal.show(); cal.show();
} }
//Hide when user clicks outside // Hide when user clicks outside
$('html').mousedown({cal:cal}, hide); $('html').mousedown({cal:cal}, hide);
cal.mousedown(function(ev){ev.stopPropagation();}) cal.mousedown(function(ev){
ev.stopPropagation();
});
}, },
hide = function (ev) { hide = function (ev) {
if (ev.data.cal.data('colpick').onHide.apply(this, [ev.data.cal.get(0)]) != false) { if (ev.data.cal.data('colpick').onHide.apply(this, [ev.data.cal.get(0)]) !== false) {
ev.data.cal.hide(); ev.data.cal.hide();
} }
$('html').off('mousedown', hide); $('html').off('mousedown', hide);
}, },
getViewport = function () { getViewport = function () {
var m = document.compatMode == 'CSS1Compat'; var m = document.compatMode === 'CSS1Compat';
return { return {
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft), l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth) w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth)
}; };
}, },
//Fix the values if the user enters a negative or high value // Fix the values if the user enters a negative or high value
fixHSB = function (hsb) { fixHSB = function (hsb) {
return { return {
h: Math.min(360, Math.max(0, hsb.h)), h: Math.min(360, Math.max(0, hsb.h)),
@ -302,70 +341,85 @@ For usage and examples: colpick.com/plugin
setSelector(col, cal.get(0)); setSelector(col, cal.get(0));
setHue(col, cal.get(0)); setHue(col, cal.get(0));
setNewColor(col, cal.get(0)); setNewColor(col, cal.get(0));
// If the user triggered this behavior, then any prior color change should be negated.
cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col),
hsbToRgb(col), cal.data('colpick').el, 0]);
}; };
return { return {
init: function (opt) { init: function (opt) {
opt = $.extend({}, defaults, opt||{}); opt = $.extend({}, defaults, opt||{});
//Set color // Set color
if (typeof opt.color == 'string') { if (typeof opt.color === 'string') {
opt.color = hexToHsb(opt.color); opt.color = hexToHsb(opt.color);
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) { } else if (opt.color.r !== undefined && opt.color.g !== undefined && opt.color.b !== undefined) {
opt.color = rgbToHsb(opt.color); opt.color = rgbToHsb(opt.color);
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) { } else if (opt.color.h !== undefined && opt.color.s !== undefined && opt.color.b !== undefined) {
opt.color = fixHSB(opt.color); opt.color = fixHSB(opt.color);
} else { } else {
return this; return this;
} }
//For each selected DOM element // For each selected DOM element
return this.each(function () { return this.each(function () {
//If the element does not have an ID // If the element does not have an ID
if (!$(this).data('colpickId')) { if (!$(this).data('colpickId')) {
var options = $.extend({}, opt); var options = $.extend({}, opt);
options.origColor = opt.color; options.origColor = opt.color;
//Generate and assign a random ID // Generate and assign a random ID
var id = 'collorpicker_' + parseInt(Math.random() * 1000); var id = 'collorpicker_' + parseInt(Math.random() * 1000);
$(this).data('colpickId', id); $(this).data('colpickId', id);
//Set the tpl's ID and get the HTML // Set the tpl's ID and get the HTML
var cal = $(tpl).attr('id', id); var cal = $(tpl).attr('id', id);
//Add class according to layout // Add class according to layout
cal.addClass('colpick_'+options.layout+(options.submit?'':' colpick_'+options.layout+'_ns')); cal.addClass('colpick_'+options.layout+(options.submit?'':' colpick_'+options.layout+'_ns'));
//Add class if the color scheme is not default // Add class if the color scheme is not default
if(options.colorScheme != 'light') { if (options.colorScheme !== 'light') {
cal.addClass('colpick_'+options.colorScheme); cal.addClass('colpick_'+options.colorScheme);
} }
//Setup submit button // Setup submit button
cal.find('div.colpick_submit').html(options.submitText).click(clickSubmit); cal.find('div.colpick_submit').html(options.submitText).click(clickSubmit);
//Setup input fields // Setup input fields
options.fields = cal.find('input').change(change).blur(blur).focus(focus); options.fields = cal.find('input').change(change).blur(blur).focus(focus);
cal.find('div.colpick_field_arrs').mousedown(downIncrement).end().find('div.colpick_current_color').click(restoreOriginal); cal.find('div.colpick_field_arrs').mousedown(downIncrement);
//Setup hue selector cal.find('div.colpick_current_color').click(restoreOriginal);
// Setup hue selector
options.selector = cal.find('div.colpick_color').on('mousedown touchstart',downSelector); options.selector = cal.find('div.colpick_color').on('mousedown touchstart',downSelector);
options.selectorIndic = options.selector.find('div.colpick_selector_outer'); options.selectorIndic = options.selector.find('div.colpick_selector_outer');
//Store parts of the plugin // Store parts of the plugin
options.el = this; options.el = this;
options.hue = cal.find('div.colpick_hue_arrs'); options.hue = cal.find('div.colpick_hue_arrs');
huebar = options.hue.parent(); var huebar = options.hue.parent();
//Paint the hue bar // Paint the hue bar
var UA = navigator.userAgent.toLowerCase(); var UA = navigator.userAgent.toLowerCase();
var isIE = navigator.appName === 'Microsoft Internet Explorer'; var isIE = navigator.appName === 'Microsoft Internet Explorer';
var IEver = isIE ? parseFloat( UA.match( /msie ([0-9]{1,}[\.0-9]{0,})/ )[1] ) : 0; var IEver = isIE ? parseFloat( UA.match( /msie ([0-9]{1,}[.0-9]{0,})/ )[1] ) : 0;
var ngIE = ( isIE && IEver < 10 ); var ngIE = ( isIE && IEver < 10 );
var stops = ['#ff0000','#ff0080','#ff00ff','#8000ff','#0000ff','#0080ff','#00ffff','#00ff80','#00ff00','#80ff00','#ffff00','#ff8000','#ff0000']; var stops = ['#ff0000', '#ff0080', '#ff00ff', '#8000ff', '#0000ff', '#0080ff', '#00ffff', '#00ff80',
if(ngIE) { '#00ff00', '#80ff00', '#ffff00', '#ff8000', '#ff0000'];
if (ngIE) {
var i, div; var i, div;
for(i=0; i<=11; i++) { for (i=0; i<=11; i++) {
div = $('<div></div>').attr('style','height:8.333333%; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+')";'); div = $('<div></div>').attr('style',
'height:8.333333%; filter:progid:' +
'DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=' + stops[i] +
', endColorstr=' + stops[i + 1] +
'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=' +
stops[i] + ', endColorstr=' + stops[i + 1] + ')";');
huebar.append(div); huebar.append(div);
} }
} else { } else {
stopList = stops.join(','); var stopList = stops.join(',');
huebar.attr('style','background:-webkit-linear-gradient(top,'+stopList+'); background: -o-linear-gradient(top,'+stopList+'); background: -ms-linear-gradient(top,'+stopList+'); background:-moz-linear-gradient(top,'+stopList+'); -webkit-linear-gradient(top,'+stopList+'); background:linear-gradient(to bottom,'+stopList+'); '); huebar.attr('style', 'background:-webkit-linear-gradient(top,' + stopList +
'); background: -o-linear-gradient(top,' + stopList +
'); background: -ms-linear-gradient(top,' + stopList +
'); background:-moz-linear-gradient(top,' + stopList +
'); -webkit-linear-gradient(top,' + stopList +
'); background:linear-gradient(to bottom,' + stopList + '); ');
} }
cal.find('div.colpick_hue').on('mousedown touchstart',downHue); cal.find('div.colpick_hue').on('mousedown touchstart',downHue);
options.newColor = cal.find('div.colpick_new_color'); options.newColor = cal.find('div.colpick_new_color');
options.currentColor = cal.find('div.colpick_current_color'); options.currentColor = cal.find('div.colpick_current_color');
//Store options and fill with default color // Store options and fill with default color
cal.data('colpick', options); cal.data('colpick', options);
fillRGBFields(options.color, cal.get(0)); fillRGBFields(options.color, cal.get(0));
fillHSBFields(options.color, cal.get(0)); fillHSBFields(options.color, cal.get(0));
@ -374,7 +428,7 @@ For usage and examples: colpick.com/plugin
setSelector(options.color, cal.get(0)); setSelector(options.color, cal.get(0));
setCurrentColor(options.color, cal.get(0)); setCurrentColor(options.color, cal.get(0));
setNewColor(options.color, cal.get(0)); setNewColor(options.color, cal.get(0));
//Append to body if flat=false, else show in place // Append to body if flat=false, else show in place
if (options.flat) { if (options.flat) {
cal.appendTo(this).show(); cal.appendTo(this).show();
cal.css({ cal.css({
@ -391,7 +445,7 @@ For usage and examples: colpick.com/plugin
} }
}); });
}, },
//Shows the picker // Shows the picker
showPicker: function() { showPicker: function() {
return this.each( function () { return this.each( function () {
if ($(this).data('colpickId')) { if ($(this).data('colpickId')) {
@ -399,7 +453,7 @@ For usage and examples: colpick.com/plugin
} }
}); });
}, },
//Hides the picker // Hides the picker
hidePicker: function() { hidePicker: function() {
return this.each( function () { return this.each( function () {
if ($(this).data('colpickId')) { if ($(this).data('colpickId')) {
@ -407,14 +461,14 @@ For usage and examples: colpick.com/plugin
} }
}); });
}, },
//Sets a color as new and current (default) // Sets a color as new and current (default)
setColor: function(col, setCurrent) { setColor: function(col, setCurrent) {
setCurrent = (typeof setCurrent === "undefined") ? 1 : setCurrent; setCurrent = (typeof setCurrent === "undefined") ? 1 : setCurrent;
if (typeof col == 'string') { if (typeof col === 'string') {
col = hexToHsb(col); col = hexToHsb(col);
} else if (col.r != undefined && col.g != undefined && col.b != undefined) { } else if (col.r !== undefined && col.g !== undefined && col.b !== undefined) {
col = rgbToHsb(col); col = rgbToHsb(col);
} else if (col.h != undefined && col.s != undefined && col.b != undefined) { } else if (col.h !== undefined && col.s !== undefined && col.b !== undefined) {
col = fixHSB(col); col = fixHSB(col);
} else { } else {
return this; return this;
@ -431,8 +485,9 @@ For usage and examples: colpick.com/plugin
setSelector(col, cal.get(0)); setSelector(col, cal.get(0));
setNewColor(col, cal.get(0)); setNewColor(col, cal.get(0));
cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 1]); cal.data('colpick').onChange.apply(cal.parent(),
if(setCurrent) { [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 1]);
if (setCurrent) {
setCurrentColor(col, cal.get(0)); setCurrentColor(col, cal.get(0));
} }
} }
@ -440,13 +495,23 @@ For usage and examples: colpick.com/plugin
} }
}; };
}(); }();
//Color space convertions // Color space convertions
var hexToRgb = function (hex) { var hexToRgb = function (hexString) {
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16); if (typeof hexString !== "string") {
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)}; print("Error - ColPick.js::hexToRgb expects string object.");
return;
}
var hexNumber = parseInt(((hexString.indexOf('#') > -1) ? hexString.substring(1) : hexString), 16);
return { r: hexNumber >> 16, g: (hexNumber & 0x00FF00) >> 8, b: (hexNumber & 0x0000FF)};
}; };
var hexToHsb = function (hex) { var hexToHsb = function (hexString) {
return rgbToHsb(hexToRgb(hex)); if (typeof hexString !== "string") {
print("Error - ColPick.js::hexToHsb expects string object.");
return;
}
return rgbToHsb(hexToRgb(hexString));
}; };
var rgbToHsb = function (rgb) { var rgbToHsb = function (rgb) {
var hsb = {h: 0, s: 0, b: 0}; var hsb = {h: 0, s: 0, b: 0};
@ -454,14 +519,22 @@ For usage and examples: colpick.com/plugin
var max = Math.max(rgb.r, rgb.g, rgb.b); var max = Math.max(rgb.r, rgb.g, rgb.b);
var delta = max - min; var delta = max - min;
hsb.b = max; hsb.b = max;
hsb.s = max != 0 ? 255 * delta / max : 0; hsb.s = max != 0 ? 255 * delta / max : 0; // eslint-disable-line eqeqeq
if (hsb.s != 0) { if (hsb.s != 0) { // eslint-disable-line eqeqeq
if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta; if (rgb.r == max) { // eslint-disable-line eqeqeq
else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta; hsb.h = (rgb.g - rgb.b) / delta;
else hsb.h = 4 + (rgb.r - rgb.g) / delta; } else if (rgb.g == max) { // eslint-disable-line eqeqeq
} else hsb.h = -1; hsb.h = 2 + (rgb.b - rgb.r) / delta;
} else {
hsb.h = 4 + (rgb.r - rgb.g) / delta;
}
} else {
hsb.h = -1;
}
hsb.h *= 60; hsb.h *= 60;
if (hsb.h < 0) hsb.h += 360; if (hsb.h < 0) {
hsb.h += 360;
}
hsb.s *= 100/255; hsb.s *= 100/255;
hsb.b *= 100/255; hsb.b *= 100/255;
return hsb; return hsb;
@ -471,20 +544,30 @@ For usage and examples: colpick.com/plugin
var h = hsb.h; var h = hsb.h;
var s = hsb.s*255/100; var s = hsb.s*255/100;
var v = hsb.b*255/100; var v = hsb.b*255/100;
if(s == 0) { if (s == 0) { // eslint-disable-line eqeqeq
rgb.r = rgb.g = rgb.b = v; rgb.r = rgb.g = rgb.b = v;
} else { } else {
var t1 = v; var t1 = v;
var t2 = (255-s)*v/255; var t2 = (255-s)*v/255;
var t3 = (t1-t2)*(h%60)/60; var t3 = (t1-t2)*(h%60)/60;
if(h==360) h = 0; if (h==360) { // eslint-disable-line eqeqeq
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3} h = 0;
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3} }
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3} if (h<60) {
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3} rgb.r=t1; rgb.b=t2; rgb.g=t2+t3;
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3} } else if (h<120) {
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3} rgb.g=t1; rgb.b=t2; rgb.r=t1-t3;
else {rgb.r=0; rgb.g=0; rgb.b=0} } else if (h<180) {
rgb.g=t1; rgb.r=t2; rgb.b=t2+t3;
} else if (h<240) {
rgb.b=t1; rgb.r=t2; rgb.g=t1-t3;
} else if (h<300) {
rgb.b=t1; rgb.g=t2; rgb.r=t2+t3;
} else if (h<360) {
rgb.r=t1; rgb.g=t2; rgb.b=t1-t3;
} else {
rgb.r=0; rgb.g=0; rgb.b=0;
}
} }
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)}; return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
}; };
@ -495,7 +578,7 @@ For usage and examples: colpick.com/plugin
rgb.b.toString(16) rgb.b.toString(16)
]; ];
$.each(hex, function (nr, val) { $.each(hex, function (nr, val) {
if (val.length == 1) { if (val.length == 1) { // eslint-disable-line eqeqeq
hex[nr] = '0' + val; hex[nr] = '0' + val;
} }
}); });
@ -521,3 +604,4 @@ For usage and examples: colpick.com/plugin
} }
}); });
})(jQuery); })(jQuery);

94
scripts/system/html/js/entityProperties.js
View file

@ -31,7 +31,7 @@ var ICON_FOR_TYPE = {
var EDITOR_TIMEOUT_DURATION = 1500; var EDITOR_TIMEOUT_DURATION = 1500;
var KEY_P = 80; // Key code for letter p used for Parenting hotkey. var KEY_P = 80; // Key code for letter p used for Parenting hotkey.
var colorPickers = []; var colorPickers = {};
var lastEntityID = null; var lastEntityID = null;
var MATERIAL_PREFIX_STRING = "mat::"; var MATERIAL_PREFIX_STRING = "mat::";
@ -73,8 +73,8 @@ function enableProperties() {
function disableProperties() { function disableProperties() {
disableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker"); disableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker");
disableChildren(document, ".colpick"); disableChildren(document, ".colpick");
for (var i = 0; i < colorPickers.length; i++) { for (var pickKey in colorPickers) {
colorPickers[i].colpickHide(); colorPickers[pickKey].colpickHide();
} }
var elLocked = document.getElementById("property-locked"); var elLocked = document.getElementById("property-locked");
@ -86,7 +86,6 @@ function disableProperties() {
function showElements(els, show) { function showElements(els, show) {
for (var i = 0; i < els.length; i++) { for (var i = 0; i < els.length; i++) {
els[i].style.display = (show) ? 'table' : 'none'; els[i].style.display = (show) ? 'table' : 'none';
} }
} }
@ -1372,13 +1371,19 @@ function loaded() {
elColorRed.addEventListener('change', colorChangeFunction); elColorRed.addEventListener('change', colorChangeFunction);
elColorGreen.addEventListener('change', colorChangeFunction); elColorGreen.addEventListener('change', colorChangeFunction);
elColorBlue.addEventListener('change', colorChangeFunction); elColorBlue.addEventListener('change', colorChangeFunction);
colorPickers.push($('#property-color-control2').colpick({ colorPickers['#property-color-control2'] = $('#property-color-control2').colpick({
colorScheme: 'dark', colorScheme: 'dark',
layout: 'hex', layout: 'hex',
color: '000000', color: '000000',
submit: false, // We don't want to have a submission button submit: false, // We don't want to have a submission button
onShow: function(colpick) { onShow: function(colpick) {
$('#property-color-control2').attr('active', 'true'); $('#property-color-control2').attr('active', 'true');
// The original color preview within the picker needs to be updated on show because
// prior to the picker being shown we don't have access to the selections' starting color.
colorPickers['#property-color-control2'].colpickSetColor({
"r": elColorRed.value,
"g": elColorGreen.value,
"b": elColorBlue.value});
}, },
onHide: function(colpick) { onHide: function(colpick) {
$('#property-color-control2').attr('active', 'false'); $('#property-color-control2').attr('active', 'false');
@ -1387,7 +1392,7 @@ function loaded() {
$(el).css('background-color', '#' + hex); $(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
} }
})); });
elLightSpotLight.addEventListener('change', createEmitCheckedPropertyUpdateFunction('isSpotlight')); elLightSpotLight.addEventListener('change', createEmitCheckedPropertyUpdateFunction('isSpotlight'));
@ -1396,13 +1401,20 @@ function loaded() {
elLightColorRed.addEventListener('change', lightColorChangeFunction); elLightColorRed.addEventListener('change', lightColorChangeFunction);
elLightColorGreen.addEventListener('change', lightColorChangeFunction); elLightColorGreen.addEventListener('change', lightColorChangeFunction);
elLightColorBlue.addEventListener('change', lightColorChangeFunction); elLightColorBlue.addEventListener('change', lightColorChangeFunction);
colorPickers.push($('#property-light-color').colpick({ colorPickers['#property-light-color'] = $('#property-light-color').colpick({
colorScheme: 'dark', colorScheme: 'dark',
layout: 'hex', layout: 'hex',
color: '000000', color: '000000',
submit: false, // We don't want to have a submission button submit: false, // We don't want to have a submission button
onShow: function(colpick) { onShow: function(colpick) {
$('#property-light-color').attr('active', 'true'); $('#property-light-color').attr('active', 'true');
// The original color preview within the picker needs to be updated on show because
// prior to the picker being shown we don't have access to the selections' starting color.
colorPickers['#property-light-color'].colpickSetColor({
"r": elLightColorRed.value,
"g": elLightColorGreen.value,
"b": elLightColorBlue.value
});
}, },
onHide: function(colpick) { onHide: function(colpick) {
$('#property-light-color').attr('active', 'false'); $('#property-light-color').attr('active', 'false');
@ -1411,7 +1423,7 @@ function loaded() {
$(el).css('background-color', '#' + hex); $(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
} }
})); });
elLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('intensity', 1)); elLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('intensity', 1));
elLightFalloffRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('falloffRadius', 1)); elLightFalloffRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('falloffRadius', 1));
@ -1477,13 +1489,20 @@ function loaded() {
elTextTextColorRed.addEventListener('change', textTextColorChangeFunction); elTextTextColorRed.addEventListener('change', textTextColorChangeFunction);
elTextTextColorGreen.addEventListener('change', textTextColorChangeFunction); elTextTextColorGreen.addEventListener('change', textTextColorChangeFunction);
elTextTextColorBlue.addEventListener('change', textTextColorChangeFunction); elTextTextColorBlue.addEventListener('change', textTextColorChangeFunction);
colorPickers.push($('#property-text-text-color').colpick({ colorPickers['#property-text-text-color'] = $('#property-text-text-color').colpick({
colorScheme: 'dark', colorScheme: 'dark',
layout: 'hex', layout: 'hex',
color: '000000', color: '000000',
submit: false, // We don't want to have a submission button submit: false, // We don't want to have a submission button
onShow: function(colpick) { onShow: function(colpick) {
$('#property-text-text-color').attr('active', 'true'); $('#property-text-text-color').attr('active', 'true');
// The original color preview within the picker needs to be updated on show because
// prior to the picker being shown we don't have access to the selections' starting color.
colorPickers['#property-text-text-color'].colpickSetColor({
"r": elTextTextColorRed.value,
"g": elTextTextColorGreen.value,
"b": elTextTextColorBlue.value
});
}, },
onHide: function(colpick) { onHide: function(colpick) {
$('#property-text-text-color').attr('active', 'false'); $('#property-text-text-color').attr('active', 'false');
@ -1493,7 +1512,7 @@ function loaded() {
$(el).attr('active', 'false'); $(el).attr('active', 'false');
emitColorPropertyUpdate('textColor', rgb.r, rgb.g, rgb.b); emitColorPropertyUpdate('textColor', rgb.r, rgb.g, rgb.b);
} }
})); });
var textBackgroundColorChangeFunction = createEmitColorPropertyUpdateFunction( var textBackgroundColorChangeFunction = createEmitColorPropertyUpdateFunction(
'backgroundColor', elTextBackgroundColorRed, elTextBackgroundColorGreen, elTextBackgroundColorBlue); 'backgroundColor', elTextBackgroundColorRed, elTextBackgroundColorGreen, elTextBackgroundColorBlue);
@ -1501,13 +1520,20 @@ function loaded() {
elTextBackgroundColorRed.addEventListener('change', textBackgroundColorChangeFunction); elTextBackgroundColorRed.addEventListener('change', textBackgroundColorChangeFunction);
elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction); elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction);
elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction); elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction);
colorPickers.push($('#property-text-background-color').colpick({ colorPickers['#property-text-background-color'] = $('#property-text-background-color').colpick({
colorScheme: 'dark', colorScheme: 'dark',
layout: 'hex', layout: 'hex',
color: '000000', color: '000000',
submit: false, // We don't want to have a submission button submit: false, // We don't want to have a submission button
onShow: function(colpick) { onShow: function(colpick) {
$('#property-text-background-color').attr('active', 'true'); $('#property-text-background-color').attr('active', 'true');
// The original color preview within the picker needs to be updated on show because
// prior to the picker being shown we don't have access to the selections' starting color.
colorPickers['#property-text-background-color'].colpickSetColor({
"r": elTextBackgroundColorRed.value,
"g": elTextBackgroundColorGreen.value,
"b": elTextBackgroundColorBlue.value
});
}, },
onHide: function(colpick) { onHide: function(colpick) {
$('#property-text-background-color').attr('active', 'false'); $('#property-text-background-color').attr('active', 'false');
@ -1516,7 +1542,7 @@ function loaded() {
$(el).css('background-color', '#' + hex); $(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('backgroundColor', rgb.r, rgb.g, rgb.b); emitColorPropertyUpdate('backgroundColor', rgb.r, rgb.g, rgb.b);
} }
})); });
// Key light // Key light
var keyLightModeChanged = createZoneComponentModeChangedFunction('keyLightMode', var keyLightModeChanged = createZoneComponentModeChangedFunction('keyLightMode',
@ -1526,13 +1552,20 @@ function loaded() {
elZoneKeyLightModeDisabled.addEventListener('change', keyLightModeChanged); elZoneKeyLightModeDisabled.addEventListener('change', keyLightModeChanged);
elZoneKeyLightModeEnabled.addEventListener('change', keyLightModeChanged); elZoneKeyLightModeEnabled.addEventListener('change', keyLightModeChanged);
colorPickers.push($('#property-zone-key-light-color').colpick({ colorPickers['#property-zone-key-light-color'] = $('#property-zone-key-light-color').colpick({
colorScheme: 'dark', colorScheme: 'dark',
layout: 'hex', layout: 'hex',
color: '000000', color: '000000',
submit: false, // We don't want to have a submission button submit: false, // We don't want to have a submission button
onShow: function(colpick) { onShow: function(colpick) {
$('#property-zone-key-light-color').attr('active', 'true'); $('#property-zone-key-light-color').attr('active', 'true');
// The original color preview within the picker needs to be updated on show because
// prior to the picker being shown we don't have access to the selections' starting color.
colorPickers['#property-zone-key-light-color'].colpickSetColor({
"r": elZoneKeyLightColorRed.value,
"g": elZoneKeyLightColorGreen.value,
"b": elZoneKeyLightColorBlue.value
});
}, },
onHide: function(colpick) { onHide: function(colpick) {
$('#property-zone-key-light-color').attr('active', 'false'); $('#property-zone-key-light-color').attr('active', 'false');
@ -1541,7 +1574,7 @@ function loaded() {
$(el).css('background-color', '#' + hex); $(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'keyLight'); emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'keyLight');
} }
})); });
var zoneKeyLightColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('keyLight', 'color', var zoneKeyLightColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('keyLight', 'color',
elZoneKeyLightColorRed, elZoneKeyLightColorGreen, elZoneKeyLightColorBlue); elZoneKeyLightColorRed, elZoneKeyLightColorGreen, elZoneKeyLightColorBlue);
@ -1595,13 +1628,20 @@ function loaded() {
elZoneHazeRange.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeRange')); elZoneHazeRange.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeRange'));
colorPickers.push($('#property-zone-haze-color').colpick({ colorPickers['#property-zone-haze-color'] = $('#property-zone-haze-color').colpick({
colorScheme: 'dark', colorScheme: 'dark',
layout: 'hex', layout: 'hex',
color: '000000', color: '000000',
submit: false, // We don't want to have a submission button submit: false, // We don't want to have a submission button
onShow: function(colpick) { onShow: function(colpick) {
$('#property-zone-haze-color').attr('active', 'true'); $('#property-zone-haze-color').attr('active', 'true');
// The original color preview within the picker needs to be updated on show because
// prior to the picker being shown we don't have access to the selections' starting color.
colorPickers['#property-zone-haze-color'].colpickSetColor({
"r": elZoneHazeColorRed.value,
"g": elZoneHazeColorGreen.value,
"b": elZoneHazeColorBlue.value
});
}, },
onHide: function(colpick) { onHide: function(colpick) {
$('#property-zone-haze-color').attr('active', 'false'); $('#property-zone-haze-color').attr('active', 'false');
@ -1610,7 +1650,7 @@ function loaded() {
$(el).css('background-color', '#' + hex); $(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('hazeColor', rgb.r, rgb.g, rgb.b, 'haze'); emitColorPropertyUpdate('hazeColor', rgb.r, rgb.g, rgb.b, 'haze');
} }
})); });
var zoneHazeColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('haze', 'hazeColor', var zoneHazeColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('haze', 'hazeColor',
elZoneHazeColorRed, elZoneHazeColorRed,
elZoneHazeColorGreen, elZoneHazeColorGreen,
@ -1620,13 +1660,20 @@ function loaded() {
elZoneHazeColorGreen.addEventListener('change', zoneHazeColorChangeFunction); elZoneHazeColorGreen.addEventListener('change', zoneHazeColorChangeFunction);
elZoneHazeColorBlue.addEventListener('change', zoneHazeColorChangeFunction); elZoneHazeColorBlue.addEventListener('change', zoneHazeColorChangeFunction);
colorPickers.push($('#property-zone-haze-glare-color').colpick({ colorPickers['#property-zone-haze-glare-color'] = $('#property-zone-haze-glare-color').colpick({
colorScheme: 'dark', colorScheme: 'dark',
layout: 'hex', layout: 'hex',
color: '000000', color: '000000',
submit: false, // We don't want to have a submission button submit: false, // We don't want to have a submission button
onShow: function(colpick) { onShow: function(colpick) {
$('#property-zone-haze-glare-color').attr('active', 'true'); $('#property-zone-haze-glare-color').attr('active', 'true');
// The original color preview within the picker needs to be updated on show because
// prior to the picker being shown we don't have access to the selections' starting color.
colorPickers['#property-zone-haze-glare-color'].colpickSetColor({
"r": elZoneHazeGlareColorRed.value,
"g": elZoneHazeGlareColorGreen.value,
"b": elZoneHazeGlareColorBlue.value
});
}, },
onHide: function(colpick) { onHide: function(colpick) {
$('#property-zone-haze-glare-color').attr('active', 'false'); $('#property-zone-haze-glare-color').attr('active', 'false');
@ -1635,7 +1682,7 @@ function loaded() {
$(el).css('background-color', '#' + hex); $(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('hazeGlareColor', rgb.r, rgb.g, rgb.b, 'haze'); emitColorPropertyUpdate('hazeGlareColor', rgb.r, rgb.g, rgb.b, 'haze');
} }
})); });
var zoneHazeGlareColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('haze', 'hazeGlareColor', var zoneHazeGlareColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('haze', 'hazeGlareColor',
elZoneHazeGlareColorRed, elZoneHazeGlareColorRed,
elZoneHazeGlareColorGreen, elZoneHazeGlareColorGreen,
@ -1662,13 +1709,20 @@ function loaded() {
elZoneSkyboxColorRed.addEventListener('change', zoneSkyboxColorChangeFunction); elZoneSkyboxColorRed.addEventListener('change', zoneSkyboxColorChangeFunction);
elZoneSkyboxColorGreen.addEventListener('change', zoneSkyboxColorChangeFunction); elZoneSkyboxColorGreen.addEventListener('change', zoneSkyboxColorChangeFunction);
elZoneSkyboxColorBlue.addEventListener('change', zoneSkyboxColorChangeFunction); elZoneSkyboxColorBlue.addEventListener('change', zoneSkyboxColorChangeFunction);
colorPickers.push($('#property-zone-skybox-color').colpick({ colorPickers['#property-zone-skybox-color'] = $('#property-zone-skybox-color').colpick({
colorScheme: 'dark', colorScheme: 'dark',
layout: 'hex', layout: 'hex',
color: '000000', color: '000000',
submit: false, // We don't want to have a submission button submit: false, // We don't want to have a submission button
onShow: function(colpick) { onShow: function(colpick) {
$('#property-zone-skybox-color').attr('active', 'true'); $('#property-zone-skybox-color').attr('active', 'true');
// The original color preview within the picker needs to be updated on show because
// prior to the picker being shown we don't have access to the selections' starting color.
colorPickers['#property-zone-skybox-color'].colpickSetColor({
"r": elZoneSkyboxColorRed.value,
"g": elZoneSkyboxColorGreen.value,
"b": elZoneSkyboxColorBlue.value
});
}, },
onHide: function(colpick) { onHide: function(colpick) {
$('#property-zone-skybox-color').attr('active', 'false'); $('#property-zone-skybox-color').attr('active', 'false');
@ -1677,7 +1731,7 @@ function loaded() {
$(el).css('background-color', '#' + hex); $(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'skybox'); emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'skybox');
} }
})); });
elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox', 'url')); elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox', 'url'));