Merge pull request #14501 from thoys/fix/create/userDataErrorMessagePopupInfiniteLoopFix

MS19567 [CreateApp]: userData error message continues popup fix
This commit is contained in:
John Conklin II 2018-12-07 10:59:34 -08:00 committed by GitHub
commit 55f59a720f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 100 additions and 54 deletions

View file

@ -1673,3 +1673,27 @@ input.number-slider {
.collapse-icon { .collapse-icon {
cursor: pointer; cursor: pointer;
} }
#property-userData-editor.error {
border: 2px solid red;
}
#property-userData-editorStatus {
color: white;
background-color: red;
padding: 5px;
display: none;
cursor: pointer;
}
#property-materialData-editor.error {
border: 2px solid red;
}
#property-materialData-editorStatus {
color: white;
background-color: red;
padding: 5px;
display: none;
cursor: pointer;
}

View file

@ -1431,13 +1431,13 @@ const TEXTURE_ELEMENTS = {
const JSON_EDITOR_ROW_DIV_INDEX = 2; const JSON_EDITOR_ROW_DIV_INDEX = 2;
var elGroups = {}; let elGroups = {};
var properties = {}; let properties = {};
var colorPickers = {}; let colorPickers = {};
var particlePropertyUpdates = {}; let particlePropertyUpdates = {};
var selectedEntityProperties; let selectedEntityProperties;
var lastEntityID = null; let lastEntityID = null;
var createAppTooltip = new CreateAppTooltip(); let createAppTooltip = new CreateAppTooltip();
let currentSpaceMode = PROPERTY_SPACE_MODE.LOCAL; let currentSpaceMode = PROPERTY_SPACE_MODE.LOCAL;
function createElementFromHTML(htmlString) { function createElementFromHTML(htmlString) {
@ -1691,7 +1691,7 @@ function updateProperty(originalPropertyName, propertyValue, isParticleProperty)
} }
} }
var particleSyncDebounce = _.debounce(function () { let particleSyncDebounce = _.debounce(function () {
updateProperties(particlePropertyUpdates); updateProperties(particlePropertyUpdates);
particlePropertyUpdates = {}; particlePropertyUpdates = {};
}, DEBOUNCE_TIMEOUT); }, DEBOUNCE_TIMEOUT);
@ -1825,7 +1825,7 @@ function createStringProperty(property, elProperty) {
type="text" type="text"
${propertyData.placeholder ? 'placeholder="' + propertyData.placeholder + '"' : ''} ${propertyData.placeholder ? 'placeholder="' + propertyData.placeholder + '"' : ''}
${propertyData.readOnly ? 'readonly' : ''}></input> ${propertyData.readOnly ? 'readonly' : ''}></input>
`) `);
elInput.addEventListener('change', createEmitTextPropertyUpdateFunction(property)); elInput.addEventListener('change', createEmitTextPropertyUpdateFunction(property));
@ -2362,31 +2362,41 @@ function saveUserData() {
saveJSONUserData(true); saveJSONUserData(true);
} }
function setJSONError(property, isError) {
$("#property-"+ property + "-editor").toggleClass('error', isError);
let $propertyUserDataEditorStatus = $("#property-"+ property + "-editorStatus");
$propertyUserDataEditorStatus.css('display', isError ? 'block' : 'none');
$propertyUserDataEditorStatus.text(isError ? 'Invalid JSON code - look for red X in your code' : '');
}
function setUserDataFromEditor(noUpdate) { function setUserDataFromEditor(noUpdate) {
let json = null; let json = null;
let errorFound = false;
try { try {
json = editor.get(); json = editor.get();
} catch (e) { } catch (e) {
alert('Invalid JSON code - look for red X in your code ', +e); errorFound = true;
} }
if (json === null) {
setJSONError('userData', errorFound);
if (errorFound) {
return; return;
}
let text = editor.getText();
if (noUpdate) {
EventBridge.emitWebEvent(
JSON.stringify({
id: lastEntityID,
type: "saveUserData",
properties: {
userData: text
}
})
);
} else { } else {
let text = editor.getText(); updateProperty('userData', text, false);
if (noUpdate === true) {
EventBridge.emitWebEvent(
JSON.stringify({
id: lastEntityID,
type: "saveUserData",
properties: {
userData: text
}
})
);
return;
} else {
updateProperty('userData', text, false);
}
} }
} }
@ -2445,7 +2455,7 @@ function multiDataUpdater(groupName, updateKeyPair, userDataElement, defaults, r
updateProperties(propertyUpdate, false); updateProperties(propertyUpdate, false);
} }
var editor = null; let editor = null;
function createJSONEditor() { function createJSONEditor() {
let container = document.getElementById("property-userData-editor"); let container = document.getElementById("property-userData-editor");
@ -2508,9 +2518,10 @@ function hideUserDataSaved() {
function showStaticUserData() { function showStaticUserData() {
if (editor !== null) { if (editor !== null) {
$('#property-userData-static').show(); let $propertyUserDataStatic = $('#property-userData-static');
$('#property-userData-static').css('height', $('#property-userData-editor').height()); $propertyUserDataStatic.show();
$('#property-userData-static').text(editor.getText()); $propertyUserDataStatic.css('height', $('#property-userData-editor').height());
$propertyUserDataStatic.text(editor.getText());
} }
} }
@ -2531,12 +2542,13 @@ function getEditorJSON() {
function deleteJSONEditor() { function deleteJSONEditor() {
if (editor !== null) { if (editor !== null) {
setJSONError('userData', false);
editor.destroy(); editor.destroy();
editor = null; editor = null;
} }
} }
var savedJSONTimer = null; let savedJSONTimer = null;
function saveJSONUserData(noUpdate) { function saveJSONUserData(noUpdate) {
setUserDataFromEditor(noUpdate); setUserDataFromEditor(noUpdate);
@ -2581,33 +2593,35 @@ function saveMaterialData() {
function setMaterialDataFromEditor(noUpdate) { function setMaterialDataFromEditor(noUpdate) {
let json = null; let json = null;
let errorFound = false;
try { try {
json = materialEditor.get(); json = materialEditor.get();
} catch (e) { } catch (e) {
alert('Invalid JSON code - look for red X in your code ', +e); errorFound = true;
} }
if (json === null) {
setJSONError('materialData', errorFound);
if (errorFound) {
return; return;
}
let text = materialEditor.getText();
if (noUpdate) {
EventBridge.emitWebEvent(
JSON.stringify({
id: lastEntityID,
type: "saveMaterialData",
properties: {
materialData: text
}
})
);
} else { } else {
let text = materialEditor.getText(); updateProperty('materialData', text, false);
if (noUpdate === true) {
EventBridge.emitWebEvent(
JSON.stringify({
id: lastEntityID,
type: "saveMaterialData",
properties: {
materialData: text
}
})
);
return;
} else {
updateProperty('materialData', text, false);
}
} }
} }
var materialEditor = null; let materialEditor = null;
function createJSONMaterialEditor() { function createJSONMaterialEditor() {
let container = document.getElementById("property-materialData-editor"); let container = document.getElementById("property-materialData-editor");
@ -2670,9 +2684,10 @@ function hideMaterialDataSaved() {
function showStaticMaterialData() { function showStaticMaterialData() {
if (materialEditor !== null) { if (materialEditor !== null) {
$('#property-materialData-static').show(); let $propertyMaterialDataStatic = $('#property-materialData-static');
$('#property-materialData-static').css('height', $('#property-materialData-editor').height()); $propertyMaterialDataStatic.show();
$('#property-materialData-static').text(materialEditor.getText()); $propertyMaterialDataStatic.css('height', $('#property-materialData-editor').height());
$propertyMaterialDataStatic.text(materialEditor.getText());
} }
} }
@ -2693,12 +2708,13 @@ function getMaterialEditorJSON() {
function deleteJSONMaterialEditor() { function deleteJSONMaterialEditor() {
if (materialEditor !== null) { if (materialEditor !== null) {
setJSONError('materialData', false);
materialEditor.destroy(); materialEditor.destroy();
materialEditor = null; materialEditor = null;
} }
} }
var savedMaterialJSONTimer = null; let savedMaterialJSONTimer = null;
function saveJSONMaterialData(noUpdate) { function saveJSONMaterialData(noUpdate) {
setMaterialDataFromEditor(noUpdate); setMaterialDataFromEditor(noUpdate);
@ -2958,7 +2974,7 @@ function loaded() {
let elServerScriptError = document.getElementById("property-serverScripts-error"); let elServerScriptError = document.getElementById("property-serverScripts-error");
let elServerScriptStatus = document.getElementById("property-serverScripts-status"); let elServerScriptStatus = document.getElementById("property-serverScripts-status");
elServerScriptError.value = data.errorInfo; elServerScriptError.value = data.errorInfo;
// If we just set elServerScriptError's diplay to block or none, we still end up with // If we just set elServerScriptError's display to block or none, we still end up with
// it's parent contributing 21px bottom padding even when elServerScriptError is display:none. // it's parent contributing 21px bottom padding even when elServerScriptError is display:none.
// So set it's parent to block or none // So set it's parent to block or none
elServerScriptError.parentElement.style.display = data.errorInfo ? "block" : "none"; elServerScriptError.parentElement.style.display = data.errorInfo ? "block" : "none";
@ -3317,12 +3333,15 @@ function loaded() {
elStaticUserData.setAttribute("id", userDataElementID + "-static"); elStaticUserData.setAttribute("id", userDataElementID + "-static");
let elUserDataEditor = document.createElement('div'); let elUserDataEditor = document.createElement('div');
elUserDataEditor.setAttribute("id", userDataElementID + "-editor"); elUserDataEditor.setAttribute("id", userDataElementID + "-editor");
let elUserDataEditorStatus = document.createElement('div');
elUserDataEditorStatus.setAttribute("id", userDataElementID + "-editorStatus");
let elUserDataSaved = document.createElement('span'); let elUserDataSaved = document.createElement('span');
elUserDataSaved.setAttribute("id", userDataElementID + "-saved"); elUserDataSaved.setAttribute("id", userDataElementID + "-saved");
elUserDataSaved.innerText = "Saved!"; elUserDataSaved.innerText = "Saved!";
elDiv.childNodes[JSON_EDITOR_ROW_DIV_INDEX].appendChild(elUserDataSaved); elDiv.childNodes[JSON_EDITOR_ROW_DIV_INDEX].appendChild(elUserDataSaved);
elDiv.insertBefore(elStaticUserData, elUserData); elDiv.insertBefore(elStaticUserData, elUserData);
elDiv.insertBefore(elUserDataEditor, elUserData); elDiv.insertBefore(elUserDataEditor, elUserData);
elDiv.insertBefore(elUserDataEditorStatus, elUserData);
// Material Data // Material Data
let materialDataProperty = properties["materialData"]; let materialDataProperty = properties["materialData"];
@ -3333,12 +3352,15 @@ function loaded() {
elStaticMaterialData.setAttribute("id", materialDataElementID + "-static"); elStaticMaterialData.setAttribute("id", materialDataElementID + "-static");
let elMaterialDataEditor = document.createElement('div'); let elMaterialDataEditor = document.createElement('div');
elMaterialDataEditor.setAttribute("id", materialDataElementID + "-editor"); elMaterialDataEditor.setAttribute("id", materialDataElementID + "-editor");
let elMaterialDataEditorStatus = document.createElement('div');
elMaterialDataEditorStatus.setAttribute("id", materialDataElementID + "-editorStatus");
let elMaterialDataSaved = document.createElement('span'); let elMaterialDataSaved = document.createElement('span');
elMaterialDataSaved.setAttribute("id", materialDataElementID + "-saved"); elMaterialDataSaved.setAttribute("id", materialDataElementID + "-saved");
elMaterialDataSaved.innerText = "Saved!"; elMaterialDataSaved.innerText = "Saved!";
elDiv.childNodes[JSON_EDITOR_ROW_DIV_INDEX].appendChild(elMaterialDataSaved); elDiv.childNodes[JSON_EDITOR_ROW_DIV_INDEX].appendChild(elMaterialDataSaved);
elDiv.insertBefore(elStaticMaterialData, elMaterialData); elDiv.insertBefore(elStaticMaterialData, elMaterialData);
elDiv.insertBefore(elMaterialDataEditor, elMaterialData); elDiv.insertBefore(elMaterialDataEditor, elMaterialData);
elDiv.insertBefore(elMaterialDataEditorStatus, elMaterialData);
// Special Property Callbacks // Special Property Callbacks
let elParentMaterialNameString = getPropertyInputElement("materialNameToReplace"); let elParentMaterialNameString = getPropertyInputElement("materialNameToReplace");