diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js
index 7008d0df66..be9bba5f0d 100644
--- a/scripts/system/html/js/entityProperties.js
+++ b/scripts/system/html/js/entityProperties.js
@@ -29,7 +29,7 @@ var ICON_FOR_TYPE = {
var EDITOR_TIMEOUT_DURATION = 1500;
var KEY_P = 80; // Key code for letter p used for Parenting hotkey.
-var colorPickers = [];
+var colorPickers = {};
var lastEntityID = null;
function debugPrint(message) {
@@ -69,8 +69,8 @@ function enableProperties() {
function disableProperties() {
disableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker");
disableChildren(document, ".colpick");
- for (var i = 0; i < colorPickers.length; i++) {
- colorPickers[i].colpickHide();
+ for (var pickKey in colorPickers) {
+ colorPickers[pickKey].colpickHide();
}
var elLocked = document.getElementById("property-locked");
@@ -83,7 +83,6 @@ function disableProperties() {
function showElements(els, show) {
for (var i = 0; i < els.length; i++) {
els[i].style.display = (show) ? 'table' : 'none';
-
}
}
@@ -1304,13 +1303,19 @@ function loaded() {
elColorRed.addEventListener('change', colorChangeFunction);
elColorGreen.addEventListener('change', colorChangeFunction);
elColorBlue.addEventListener('change', colorChangeFunction);
- colorPickers.push($('#property-color-control2').colpick({
+ colorPickers['#property-color-control2'] = $('#property-color-control2').colpick({
colorScheme: 'dark',
layout: 'hex',
color: '000000',
submit: false, // We don't want to have a submission button
onShow: function(colpick) {
$('#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) {
$('#property-color-control2').attr('active', 'false');
@@ -1319,7 +1324,7 @@ function loaded() {
$(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
}
- }));
+ });
elLightSpotLight.addEventListener('change', createEmitCheckedPropertyUpdateFunction('isSpotlight'));
@@ -1328,13 +1333,20 @@ function loaded() {
elLightColorRed.addEventListener('change', lightColorChangeFunction);
elLightColorGreen.addEventListener('change', lightColorChangeFunction);
elLightColorBlue.addEventListener('change', lightColorChangeFunction);
- colorPickers.push($('#property-light-color').colpick({
+ colorPickers['#property-light-color'] = $('#property-light-color').colpick({
colorScheme: 'dark',
layout: 'hex',
color: '000000',
submit: false, // We don't want to have a submission button
onShow: function(colpick) {
$('#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) {
$('#property-light-color').attr('active', 'false');
@@ -1343,7 +1355,7 @@ function loaded() {
$(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
}
- }));
+ });
elLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('intensity', 1));
elLightFalloffRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('falloffRadius', 1));
@@ -1383,13 +1395,20 @@ function loaded() {
elTextTextColorRed.addEventListener('change', textTextColorChangeFunction);
elTextTextColorGreen.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',
layout: 'hex',
color: '000000',
submit: false, // We don't want to have a submission button
onShow: function(colpick) {
$('#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) {
$('#property-text-text-color').attr('active', 'false');
@@ -1399,7 +1418,7 @@ function loaded() {
$(el).attr('active', 'false');
emitColorPropertyUpdate('textColor', rgb.r, rgb.g, rgb.b);
}
- }));
+ });
var textBackgroundColorChangeFunction = createEmitColorPropertyUpdateFunction(
'backgroundColor', elTextBackgroundColorRed, elTextBackgroundColorGreen, elTextBackgroundColorBlue);
@@ -1407,13 +1426,20 @@ function loaded() {
elTextBackgroundColorRed.addEventListener('change', textBackgroundColorChangeFunction);
elTextBackgroundColorGreen.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',
layout: 'hex',
color: '000000',
submit: false, // We don't want to have a submission button
onShow: function(colpick) {
$('#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) {
$('#property-text-background-color').attr('active', 'false');
@@ -1422,7 +1448,7 @@ function loaded() {
$(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('backgroundColor', rgb.r, rgb.g, rgb.b);
}
- }));
+ });
// Key light
var keyLightModeChanged = createZoneComponentModeChangedFunction('keyLightMode',
@@ -1432,13 +1458,20 @@ function loaded() {
elZoneKeyLightModeDisabled.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',
layout: 'hex',
color: '000000',
submit: false, // We don't want to have a submission button
onShow: function(colpick) {
$('#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) {
$('#property-zone-key-light-color').attr('active', 'false');
@@ -1447,7 +1480,7 @@ function loaded() {
$(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'keyLight');
}
- }));
+ });
var zoneKeyLightColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('keyLight', 'color',
elZoneKeyLightColorRed, elZoneKeyLightColorGreen, elZoneKeyLightColorBlue);
@@ -1501,13 +1534,20 @@ function loaded() {
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',
layout: 'hex',
color: '000000',
submit: false, // We don't want to have a submission button
onShow: function(colpick) {
$('#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) {
$('#property-zone-haze-color').attr('active', 'false');
@@ -1516,7 +1556,7 @@ function loaded() {
$(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('hazeColor', rgb.r, rgb.g, rgb.b, 'haze');
}
- }));
+ });
var zoneHazeColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('haze', 'hazeColor',
elZoneHazeColorRed,
elZoneHazeColorGreen,
@@ -1526,13 +1566,20 @@ function loaded() {
elZoneHazeColorGreen.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',
layout: 'hex',
color: '000000',
submit: false, // We don't want to have a submission button
onShow: function(colpick) {
$('#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) {
$('#property-zone-haze-glare-color').attr('active', 'false');
@@ -1541,7 +1588,7 @@ function loaded() {
$(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('hazeGlareColor', rgb.r, rgb.g, rgb.b, 'haze');
}
- }));
+ });
var zoneHazeGlareColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('haze', 'hazeGlareColor',
elZoneHazeGlareColorRed,
elZoneHazeGlareColorGreen,
@@ -1568,13 +1615,20 @@ function loaded() {
elZoneSkyboxColorRed.addEventListener('change', zoneSkyboxColorChangeFunction);
elZoneSkyboxColorGreen.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',
layout: 'hex',
color: '000000',
submit: false, // We don't want to have a submission button
onShow: function(colpick) {
$('#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) {
$('#property-zone-skybox-color').attr('active', 'false');
@@ -1583,7 +1637,7 @@ function loaded() {
$(el).css('background-color', '#' + hex);
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'skybox');
}
- }));
+ });
elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox', 'url'));