Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-16 21:02:17 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

[Case 4315] Fixes black color preview for color pickers (details below).

Browse source 
The original/starting color preview in the picker was black as opposed to
reflecting the entity's color upon clicking the color picker.

Known Issue(s)/TODO(s):

* Color preview restore color functionality isn't working.
    * Clicking the initial color preview doesn't restore the color.
    * The original color preview isn't being visually retained when the user
      changes the color via the picker.

Tested HMD & Desktop Modes.

Changes Committed:
    modified:   scripts/system/html/js/entityProperties.js
This commit is contained in:
LaShonda Hopper 2018-01-23 14:41:46 -05:00
parent 047d24fe5e
commit 2fc954909b
1 changed files with 74 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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'));