Merge pull request #1252 from AleziaKurdis/CreateApp_RenderWithZoneVR

Make Zone Selector for "renderWithZones" in "Create" app HMD Compliant.
This commit is contained in:
Kalila 2021-06-26 14:31:35 -04:00 committed by GitHub
commit 64a9b32206
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 83 additions and 12 deletions

View file

@ -3695,20 +3695,20 @@ function requestZoneList() {
}));
}
function addZoneToZonesSelection(propertyId) {
function addZoneToZonesSelection(propertyId, id) {
let hiddenField = document.getElementById(propertyId);
if (JSON.stringify(hiddenField.value) === '"undefined"') {
hiddenField.value = "[]";
}
let selectedZones = JSON.parse(hiddenField.value);
let zoneToAdd = document.getElementById("zones-select-" + propertyId).value;
if (!selectedZones.includes(zoneToAdd)) {
selectedZones.push(zoneToAdd);
if (!selectedZones.includes(id)) {
selectedZones.push(id);
}
hiddenField.value = JSON.stringify(selectedZones);
displaySelectedZones(propertyId, true);
let propertyName = propertyId.replace("property-", "");
updateProperty(propertyName, selectedZones, false);
document.getElementById("zones-select-selector-list-panel-" + propertyId).style.display = "none";
}
function removeZoneFromZonesSelection(propertyId, zoneId) {
@ -3798,7 +3798,12 @@ function createZonesSelection(property, elProperty) {
function setZonesSelectionData(element, isEditable) {
let zoneSelectorContainer = document.getElementById("zones-selector-" + element.id);
let zoneSelector = "<div class='multiZoneSelToolbar' id='multiZoneSelTools-" + element.id + "'><select class = 'zoneSelect' id='zones-select-" + element.id + "' >";
let zoneSelector = "<div class='multiZoneSelToolbar' id='multiZoneSelTools-" + element.id + "'>";
zoneSelector += "<input type='button' value = 'Add a Zone' id='zones-select-add-" + element.id + "' onClick='document.getElementById(";
zoneSelector += '"' + "zones-select-selector-list-panel-" + element.id + '"' + ").style.display = " + '"' + "block" + '"' + ";'>";
zoneSelector += "<div class = 'zoneSelectorListPanel' id='zones-select-selector-list-panel-" + element.id + "'>";
zoneSelector += "<div class='zoneSelectListHeader'>Select the Zone to add: </div>";
zoneSelector += "<div class='zoneSelectList' id = 'zones-select-selector-list-" + element.id + "'>";
let i, name;
for (i = 0; i < zonesList.length; i++) {
if (zonesList[i].name === "") {
@ -3806,28 +3811,34 @@ function setZonesSelectionData(element, isEditable) {
} else {
name = zonesList[i].name;
}
zoneSelector += "<option value='" + zonesList[i].id + "'>" + name + "</option>";
zoneSelector += "<button class='menu-button' onClick='addZoneToZonesSelection(";
zoneSelector += '"' + element.id + '"' + ", " + '"' + zonesList[i].id + '"' + ");'>" + name + "</button><br>";
}
zoneSelector += "</select>&nbsp;<a href='#' id='zones-select-add-" + element.id + "' onClick='addZoneToZonesSelection(" + '"' + element.id + '"' + ");' >";
zoneSelector += "<img style='vertical-align:top' src='../../../html/css/img/add_icon.png'></a></div>";
zoneSelector += "</div>";
zoneSelector += "<div class='zoneSelectListFooter'>";
zoneSelector += "<input type='button' value = 'Cancel' id='zones-select-cancel-" + element.id + "' onClick='document.getElementById(";
zoneSelector += '"' + "zones-select-selector-list-panel-" + element.id + '"' + ").style.display = " + '"' + "none" + '"' + ";'>";
zoneSelector += "</div></div></div>";
zoneSelector += "<div class='selected-zone-container' id='selected-zones-" + element.id + "'></div>";
zoneSelectorContainer.innerHTML = zoneSelector;
displaySelectedZones(element.id, isEditable);
}
function updateAllZoneSelect() {
let allZoneSelects = document.querySelectorAll(".zoneSelect");
let i, j, name, propId;
let allZoneSelects = document.querySelectorAll(".zoneSelectList");
let i, j, name, propId, btnList;
for (i = 0; i < allZoneSelects.length; i++) {
allZoneSelects[i].options.length = 0;
btnList = "";
for (j = 0; j < zonesList.length; j++) {
if (zonesList[j].name === "") {
name = zonesList[j].id;
} else {
name = zonesList[j].name;
}
allZoneSelects[i].options[j] = new Option(name, zonesList[j].id, false , false);
btnList += "<button class='menu-button' onClick='addZoneToZonesSelection(";
btnList += '"' + element.id + '"' + ", " + '"' + zonesList[j].id + '"' + ");'>" + name + "</button><br>";
}
allZoneSelects[i].innerHTML = btnList;
propId = allZoneSelects[i].id.replace("zones-select-", "");
if (document.getElementById("multiZoneSelTools-" + propId).style.display === "block") {
displaySelectedZones(propId, true);
@ -4500,6 +4511,7 @@ function loaded() {
});
updateVisibleSpaceModeProperties();
requestZoneList();
if (window.EventBridge !== undefined) {
EventBridge.scriptEventReceived.connect(function(data) {

View file

@ -1955,6 +1955,65 @@ div.multiZoneSelToolbar {
padding: 0px;
}
div.zoneSelectorListPanel {
position: absolute;
display: none;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-width: 0px;
background-color: #666666;
color: #dddddd;
padding: 0% 2% 0% 2%;
z-index: 2;
cursor: pointer;
}
div.zoneSelectListHeader {
position: static;
width: 96%;
height: 6%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
padding-top: 4px;
cursor: pointer;
border-width: 0px;
}
div.zoneSelectList {
position: static;
width: 96%;
height: 86%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-width: 0px;
background-color: #c0c0c0;
overflow-y: auto;
padding: 0px;
cursor: pointer;
}
div.zoneSelectListFooter {
position: static;
width: 96%;
height: auto;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
padding: 2px;
cursor: pointer;
border-width: 0px;
text-align: right;
}
#menuBackgroundOverlay{
background-color:transparent;
position:fixed;