From 6965fb05206dfb8463ba435446f1fe96eefec461 Mon Sep 17 00:00:00 2001 From: Zach Pomerantz Date: Tue, 9 Aug 2016 14:15:06 -0700 Subject: [PATCH 1/2] refactor system html to split js/css --- scripts/system/html/{ => css}/edit-style.css | 46 +- scripts/system/html/entityList.html | 314 +--- scripts/system/html/entityProperties.html | 1322 +---------------- scripts/system/html/entityProperties.js | 1317 ++++++++++++++++ scripts/system/html/gridControls.html | 142 +- scripts/system/html/{ => js}/colpick.js | 0 scripts/system/html/js/entityList.js | 310 ++++ scripts/system/html/js/entityProperties.js | 1317 ++++++++++++++++ .../system/html/{ => js}/eventBridgeLoader.js | 0 scripts/system/html/js/gridControls.js | 138 ++ .../system/html/{ => js}/jquery-2.1.4.min.js | 0 scripts/system/html/{ => js}/list.min.js | 0 scripts/system/html/{ => js}/spinButtons.js | 0 13 files changed, 3121 insertions(+), 1785 deletions(-) rename scripts/system/html/{ => css}/edit-style.css (94%) create mode 100644 scripts/system/html/entityProperties.js rename scripts/system/html/{ => js}/colpick.js (100%) create mode 100644 scripts/system/html/js/entityList.js create mode 100644 scripts/system/html/js/entityProperties.js rename scripts/system/html/{ => js}/eventBridgeLoader.js (100%) create mode 100644 scripts/system/html/js/gridControls.js rename scripts/system/html/{ => js}/jquery-2.1.4.min.js (100%) rename scripts/system/html/{ => js}/list.min.js (100%) rename scripts/system/html/{ => js}/spinButtons.js (100%) diff --git a/scripts/system/html/edit-style.css b/scripts/system/html/css/edit-style.css similarity index 94% rename from scripts/system/html/edit-style.css rename to scripts/system/html/css/edit-style.css index 19d1cd95a9..0b58cf22ac 100644 --- a/scripts/system/html/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -10,51 +10,51 @@ @font-face { font-family: Raleway-Regular; - src: url(../../../resources/fonts/Raleway-Regular.ttf), /* Windows production */ - url(../../../fonts/Raleway-Regular.ttf), /* OSX production */ - url(../../../interface/resources/fonts/Raleway-Regular.ttf); /* Development, running script in /HiFi/examples */ + src: url(../../../../resources/fonts/Raleway-Regular.ttf), /* Windows production */ + url(../../../../fonts/Raleway-Regular.ttf), /* OSX production */ + url(../../../../interface/resources/fonts/Raleway-Regular.ttf); /* Development, running script in /HiFi/examples */ } @font-face { font-family: Raleway-Light; - src: url(../../../resources/fonts/Raleway-Light.ttf), - url(../../../fonts/Raleway-Light.ttf), - url(../../../interface/resources/fonts/Raleway-Light.ttf); + src: url(../../../../resources/fonts/Raleway-Light.ttf), + url(../../../../fonts/Raleway-Light.ttf), + url(../../../../interface/resources/fonts/Raleway-Light.ttf); } @font-face { font-family: Raleway-Bold; - src: url(../../../resources/fonts/Raleway-Bold.ttf), - url(../../../fonts/Raleway-Bold.ttf), - url(../../../interface/resources/fonts/Raleway-Bold.ttf); + src: url(../../../../resources/fonts/Raleway-Bold.ttf), + url(../../../../fonts/Raleway-Bold.ttf), + url(../../../../interface/resources/fonts/Raleway-Bold.ttf); } @font-face { font-family: Raleway-SemiBold; - src: url(../../../resources/fonts/Raleway-SemiBold.ttf), - url(../../../fonts/Raleway-SemiBold.ttf), - url(../../../interface/resources/fonts/Raleway-SemiBold.ttf); + src: url(../../../../resources/fonts/Raleway-SemiBold.ttf), + url(../../../../fonts/Raleway-SemiBold.ttf), + url(../../../../interface/resources/fonts/Raleway-SemiBold.ttf); } @font-face { font-family: FiraSans-SemiBold; - src: url(../../../resources/fonts/FiraSans-SemiBold.ttf), - url(../../../fonts/FiraSans-SemiBold.ttf), - url(../../../interface/resources/fonts/FiraSans-SemiBold.ttf); + src: url(../../../../resources/fonts/FiraSans-SemiBold.ttf), + url(../../../../fonts/FiraSans-SemiBold.ttf), + url(../../../../interface/resources/fonts/FiraSans-SemiBold.ttf); } @font-face { font-family: AnonymousPro-Regular; - src: url(../../../resources/fonts/AnonymousPro-Regular.ttf), - url(../../../fonts/AnonymousPro-Regular.ttf), - url(../../../interface/resources/fonts/AnonymousPro-Regular.ttf); + src: url(../../../../resources/fonts/AnonymousPro-Regular.ttf), + url(../../../../fonts/AnonymousPro-Regular.ttf), + url(../../../../interface/resources/fonts/AnonymousPro-Regular.ttf); } @font-face { font-family: HiFi-Glyphs; - src: url(../../../resources/fonts/hifi-glyphs.ttf), - url(../../../fonts/hifi-glyphs.ttf), - url(../../../interface/resources/fonts/hifi-glyphs.ttf); + src: url(../../../../resources/fonts/hifi-glyphs.ttf), + url(../../../../fonts/hifi-glyphs.ttf), + url(../../../../interface/resources/fonts/hifi-glyphs.ttf); } * { @@ -1077,10 +1077,6 @@ input#dimension-rescale-button { input#reset-to-natural-dimensions { margin-right: 0; } -input#preview-camera-button { - margin-left: 1px; - margin-right: 0; -} #animation-fps { margin-top: 48px; diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html index dbc224e9fb..2088898613 100644 --- a/scripts/system/html/entityList.html +++ b/scripts/system/html/entityList.html @@ -10,314 +10,12 @@ - - + + - - - + + +
@@ -378,4 +76,4 @@
- \ No newline at end of file + diff --git a/scripts/system/html/entityProperties.html b/scripts/system/html/entityProperties.html index 424795981d..01826b8e10 100644 --- a/scripts/system/html/entityProperties.html +++ b/scripts/system/html/entityProperties.html @@ -11,1325 +11,15 @@ Properties - + - - + + - - - + + + -
diff --git a/scripts/system/html/entityProperties.js b/scripts/system/html/entityProperties.js new file mode 100644 index 0000000000..490579e909 --- /dev/null +++ b/scripts/system/html/entityProperties.js @@ -0,0 +1,1317 @@ +// entityProperties.js +// +// Created by Ryan Huffman on 13 Nov 2014 +// Copyright 2014 High Fidelity, Inc. +// +// Distributed under the Apache License, Version 2.0. +// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html + +var PI = 3.14159265358979; +var DEGREES_TO_RADIANS = PI / 180.0; +var RADIANS_TO_DEGREES = 180.0 / PI; +var ICON_FOR_TYPE = { + Box: "V", + Sphere: "n", + Shape: "n", + ParticleEffect: "", + Model: "", + Web: "q", + Text: "l", + Light: "p", + Zone: "o", + PolyVox: "", + Multiple: "" +} + +var colorPickers = []; + +debugPrint = function(message) { + EventBridge.emitWebEvent( + JSON.stringify({ + type:"print", + message: message + }) + ); +}; + +function enableChildren(el, selector) { + els = el.querySelectorAll(selector); + for (var i = 0; i < els.length; i++) { + els[i].removeAttribute('disabled'); + } +} +function disableChildren(el, selector) { + els = el.querySelectorAll(selector); + for (var i = 0; i < els.length; i++) { + els[i].setAttribute('disabled', 'disabled'); + } +} + +function enableProperties() { + enableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker"); + enableChildren(document, ".colpick"); +} + +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(); + } +} + +function showElements(els, show) { + for (var i = 0; i < els.length; i++) { + els[i].style.display = (show) ? 'table' : 'none'; + } +} + +function createEmitCheckedPropertyUpdateFunction(propertyName) { + return function() { + EventBridge.emitWebEvent( + '{ "type":"update", "properties":{"' + propertyName + '":' + this.checked + '}}' + ); + }; +} + +function createEmitCheckedToStringPropertyUpdateFunction(checkboxElement, name, propertyName) { + var newString = ""; + if (checkboxElement.checked) { + newString += name + ""; + } else { + + } + +} + +function createEmitGroupCheckedPropertyUpdateFunction(group, propertyName) { + return function () { + var properties = {}; + properties[group] = {}; + properties[group][propertyName] = this.checked; + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: properties + }) + ); + }; +} + +function createEmitNumberPropertyUpdateFunction(propertyName, decimals) { + decimals = decimals == undefined ? 4 : decimals; + return function() { + var value = parseFloat(this.value).toFixed(decimals); + + EventBridge.emitWebEvent( + '{ "type":"update", "properties":{"' + propertyName + '":' + value + '}}' + ); + }; +} +function createEmitGroupNumberPropertyUpdateFunction(group, propertyName) { + return function() { + var properties = {}; + properties[group] = {}; + properties[group][propertyName] = this.value; + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: properties, + }) + ); + }; +} + + +function createEmitTextPropertyUpdateFunction(propertyName) { + return function() { + var properties = {}; + properties[propertyName] = this.value; + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: properties, + }) + ); + }; +} + +function createEmitGroupTextPropertyUpdateFunction(group,propertyName) { + return function() { + var properties = {}; + properties[group] = {}; + properties[group][propertyName] = this.value; + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: properties, + }) + ); + }; +} + +function createEmitVec3PropertyUpdateFunction(property, elX, elY, elZ) { + return function() { + var data = { + type: "update", + properties: { + } + }; + data.properties[property] = { + x: elX.value, + y: elY.value, + z: elZ.value, + }; + EventBridge.emitWebEvent(JSON.stringify(data)); + } +}; + +function createEmitGroupVec3PropertyUpdateFunction(group, property, elX, elY, elZ) { + return function() { + var data = { + type: "update", + properties: { + } + }; + data.properties[group] = { }; + data.properties[group][property] = { + x: elX.value, + y: elY.value, + z: elZ ? elZ.value : 0, + }; + EventBridge.emitWebEvent(JSON.stringify(data)); + } +}; + +function createEmitVec3PropertyUpdateFunctionWithMultiplier(property, elX, elY, elZ, multiplier) { + return function() { + var data = { + type: "update", + properties: { + } + }; + data.properties[property] = { + x: elX.value * multiplier, + y: elY.value * multiplier, + z: elZ.value * multiplier, + }; + EventBridge.emitWebEvent(JSON.stringify(data)); + } +}; + +function createEmitColorPropertyUpdateFunction(property, elRed, elGreen, elBlue) { + return function() { + emitColorPropertyUpdate(property, elRed.value, elGreen.value, elBlue.value); + } +}; + +function emitColorPropertyUpdate(property, red, green, blue, group) { + var data = { + type: "update", + properties: { + } + }; + if (group) { + data.properties[group] = { }; + data.properties[group][property] = { + red: red, + green: green, + blue: blue, + }; + } else { + data.properties[property] = { + red: red, + green: green, + blue: blue, + }; + } + EventBridge.emitWebEvent(JSON.stringify(data)); +}; + + +function createEmitGroupColorPropertyUpdateFunction(group, property, elRed, elGreen, elBlue) { + return function() { + var data = { + type: "update", + properties: { + } + }; + data.properties[group] = { }; + + data.properties[group][property] = { + red: elRed.value, + green: elGreen.value, + blue: elBlue.value, + }; + EventBridge.emitWebEvent(JSON.stringify(data)); + } +}; + +function updateCheckedSubProperty(propertyName, propertyValue, subPropertyElement, subPropertyString) { + if (subPropertyElement.checked) { + if (propertyValue.indexOf(subPropertyString)) { + propertyValue += subPropertyString + ','; + } + } else { + // We've unchecked, so remove + propertyValue = propertyValue.replace(subPropertyString + ",", ""); + } + + var _properties ={} + _properties[propertyName] = propertyValue; + + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: _properties + }) + ); + +} + +function userDataChanger(groupName, keyName, checkBoxElement, userDataElement, defaultValue) { + var properties = {}; + var parsedData = {}; + try { + parsedData = JSON.parse(userDataElement.value); + } catch(e) {} + + if (!(groupName in parsedData)) { + parsedData[groupName] = {} + } + delete parsedData[groupName][keyName]; + if (checkBoxElement.checked !== defaultValue) { + parsedData[groupName][keyName] = checkBoxElement.checked; + } + + if (Object.keys(parsedData[groupName]).length == 0) { + delete parsedData[groupName]; + } + if (Object.keys(parsedData).length > 0) { + properties['userData'] = JSON.stringify(parsedData); + } else { + properties['userData'] = ''; + } + + userDataElement.value = properties['userData']; + + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: properties, + }) + ); +}; + +function setTextareaScrolling(element) { + var isScrolling = element.scrollHeight > element.offsetHeight; + element.setAttribute("scrolling", isScrolling ? "true" : "false"); +} + +function loaded() { + openEventBridge(function() { + var allSections = []; + var elID = document.getElementById("property-id"); + var elType = document.getElementById("property-type"); + var elTypeIcon = document.getElementById("type-icon"); + var elName = document.getElementById("property-name"); + var elLocked = document.getElementById("property-locked"); + var elVisible = document.getElementById("property-visible"); + var elPositionX = document.getElementById("property-pos-x"); + var elPositionY = document.getElementById("property-pos-y"); + var elPositionZ = document.getElementById("property-pos-z"); + var elMoveSelectionToGrid = document.getElementById("move-selection-to-grid"); + var elMoveAllToGrid = document.getElementById("move-all-to-grid"); + + var elDimensionsX = document.getElementById("property-dim-x"); + var elDimensionsY = document.getElementById("property-dim-y"); + var elDimensionsZ = document.getElementById("property-dim-z"); + var elResetToNaturalDimensions = document.getElementById("reset-to-natural-dimensions"); + var elRescaleDimensionsPct = document.getElementById("dimension-rescale-pct"); + var elRescaleDimensionsButton = document.getElementById("dimension-rescale-button"); + + var elParentID = document.getElementById("property-parent-id"); + var elParentJointIndex = document.getElementById("property-parent-joint-index"); + + var elRegistrationX = document.getElementById("property-reg-x"); + var elRegistrationY = document.getElementById("property-reg-y"); + var elRegistrationZ = document.getElementById("property-reg-z"); + + var elRotationX = document.getElementById("property-rot-x"); + var elRotationY = document.getElementById("property-rot-y"); + var elRotationZ = document.getElementById("property-rot-z"); + + var elLinearVelocityX = document.getElementById("property-lvel-x"); + var elLinearVelocityY = document.getElementById("property-lvel-y"); + var elLinearVelocityZ = document.getElementById("property-lvel-z"); + var elLinearDamping = document.getElementById("property-ldamping"); + + var elAngularVelocityX = document.getElementById("property-avel-x"); + var elAngularVelocityY = document.getElementById("property-avel-y"); + var elAngularVelocityZ = document.getElementById("property-avel-z"); + var elAngularDamping = document.getElementById("property-adamping"); + + var elRestitution = document.getElementById("property-restitution"); + var elFriction = document.getElementById("property-friction"); + + var elGravityX = document.getElementById("property-grav-x"); + var elGravityY = document.getElementById("property-grav-y"); + var elGravityZ = document.getElementById("property-grav-z"); + + var elAccelerationX = document.getElementById("property-lacc-x"); + var elAccelerationY = document.getElementById("property-lacc-y"); + var elAccelerationZ = document.getElementById("property-lacc-z"); + + var elDensity = document.getElementById("property-density"); + var elCollisionless = document.getElementById("property-collisionless"); + var elDynamic = document.getElementById("property-dynamic" ); + var elCollideStatic = document.getElementById("property-collide-static"); + var elCollideDynamic = document.getElementById("property-collide-dynamic"); + var elCollideKinematic = document.getElementById("property-collide-kinematic"); + var elCollideMyAvatar = document.getElementById("property-collide-myAvatar"); + var elCollideOtherAvatar = document.getElementById("property-collide-otherAvatar"); + var elCollisionSoundURL = document.getElementById("property-collision-sound-url"); + + var elGrabbable = document.getElementById("property-grabbable"); + var elWantsTrigger = document.getElementById("property-wants-trigger"); + var elIgnoreIK = document.getElementById("property-ignore-ik"); + + var elLifetime = document.getElementById("property-lifetime"); + var elScriptURL = document.getElementById("property-script-url"); + /* + FIXME: See FIXME for property-script-url. + var elScriptTimestamp = document.getElementById("property-script-timestamp"); + */ + var elReloadScriptButton = document.getElementById("reload-script-button"); + var elUserData = document.getElementById("property-user-data"); + + var elColorSections = document.querySelectorAll(".color-section"); + var elColor = document.getElementById("property-color"); + var elColorRed = document.getElementById("property-color-red"); + var elColorGreen = document.getElementById("property-color-green"); + var elColorBlue = document.getElementById("property-color-blue"); + + var elShapeSections = document.querySelectorAll(".shape-section"); + allSections.push(elShapeSections); + var elShape = document.getElementById("property-shape"); + + var elLightSections = document.querySelectorAll(".light-section"); + allSections.push(elLightSections); + var elLightSpotLight = document.getElementById("property-light-spot-light"); + var elLightColor = document.getElementById("property-light-color"); + var elLightColorRed = document.getElementById("property-light-color-red"); + var elLightColorGreen = document.getElementById("property-light-color-green"); + var elLightColorBlue = document.getElementById("property-light-color-blue"); + + var elLightIntensity = document.getElementById("property-light-intensity"); + var elLightFalloffRadius = document.getElementById("property-light-falloff-radius"); + var elLightExponent = document.getElementById("property-light-exponent"); + var elLightCutoff = document.getElementById("property-light-cutoff"); + + var elModelSections = document.querySelectorAll(".model-section"); + allSections.push(elModelSections); + var elModelURL = document.getElementById("property-model-url"); + var elShapeType = document.getElementById("property-shape-type"); + var elCompoundShapeURL = document.getElementById("property-compound-shape-url"); + var elModelAnimationURL = document.getElementById("property-model-animation-url"); + var elModelAnimationPlaying = document.getElementById("property-model-animation-playing"); + var elModelAnimationFPS = document.getElementById("property-model-animation-fps"); + var elModelAnimationFrame = document.getElementById("property-model-animation-frame"); + var elModelAnimationFirstFrame = document.getElementById("property-model-animation-first-frame"); + var elModelAnimationLastFrame = document.getElementById("property-model-animation-last-frame"); + var elModelAnimationLoop = document.getElementById("property-model-animation-loop"); + var elModelAnimationHold = document.getElementById("property-model-animation-hold"); + var elModelTextures = document.getElementById("property-model-textures"); + var elModelOriginalTextures = document.getElementById("property-model-original-textures"); + + var elWebSections = document.querySelectorAll(".web-section"); + allSections.push(elWebSections); + var elWebSourceURL = document.getElementById("property-web-source-url"); + + var elDescription = document.getElementById("property-description"); + + var elHyperlinkHref = document.getElementById("property-hyperlink-href"); + + var elHyperlinkSections = document.querySelectorAll(".hyperlink-section"); + + + var elTextSections = document.querySelectorAll(".text-section"); + allSections.push(elTextSections); + var elTextText = document.getElementById("property-text-text"); + var elTextLineHeight = document.getElementById("property-text-line-height"); + var elTextTextColor = document.getElementById("property-text-text-color"); + var elTextFaceCamera = document.getElementById("property-text-face-camera"); + var elTextTextColorRed = document.getElementById("property-text-text-color-red"); + var elTextTextColorGreen = document.getElementById("property-text-text-color-green"); + var elTextTextColorBlue = document.getElementById("property-text-text-color-blue"); + var elTextBackgroundColor = document.getElementById("property-text-background-color"); + var elTextBackgroundColorRed = document.getElementById("property-text-background-color-red"); + var elTextBackgroundColorGreen = document.getElementById("property-text-background-color-green"); + var elTextBackgroundColorBlue = document.getElementById("property-text-background-color-blue"); + + var elZoneSections = document.querySelectorAll(".zone-section"); + allSections.push(elZoneSections); + var elZoneStageSunModelEnabled = document.getElementById("property-zone-stage-sun-model-enabled"); + + var elZoneKeyLightColor = document.getElementById("property-zone-key-light-color"); + var elZoneKeyLightColorRed = document.getElementById("property-zone-key-light-color-red"); + var elZoneKeyLightColorGreen = document.getElementById("property-zone-key-light-color-green"); + var elZoneKeyLightColorBlue = document.getElementById("property-zone-key-light-color-blue"); + var elZoneKeyLightIntensity = document.getElementById("property-zone-key-intensity"); + var elZoneKeyLightAmbientIntensity = document.getElementById("property-zone-key-ambient-intensity"); + var elZoneKeyLightDirectionX = document.getElementById("property-zone-key-light-direction-x"); + var elZoneKeyLightDirectionY = document.getElementById("property-zone-key-light-direction-y"); + var elZoneKeyLightDirectionZ = document.getElementById("property-zone-key-light-direction-z"); + var elZoneKeyLightAmbientURL = document.getElementById("property-zone-key-ambient-url"); + + var elZoneStageLatitude = document.getElementById("property-zone-stage-latitude"); + var elZoneStageLongitude = document.getElementById("property-zone-stage-longitude"); + var elZoneStageAltitude = document.getElementById("property-zone-stage-altitude"); + var elZoneStageAutomaticHourDay = document.getElementById("property-zone-stage-automatic-hour-day"); + var elZoneStageDay = document.getElementById("property-zone-stage-day"); + var elZoneStageHour = document.getElementById("property-zone-stage-hour"); + + var elZoneBackgroundMode = document.getElementById("property-zone-background-mode"); + + var elZoneSkyboxColor = document.getElementById("property-zone-skybox-color"); + var elZoneSkyboxColorRed = document.getElementById("property-zone-skybox-color-red"); + var elZoneSkyboxColorGreen = document.getElementById("property-zone-skybox-color-green"); + var elZoneSkyboxColorBlue = document.getElementById("property-zone-skybox-color-blue"); + var elZoneSkyboxURL = document.getElementById("property-zone-skybox-url"); + + var elZoneFlyingAllowed = document.getElementById("property-zone-flying-allowed"); + var elZoneGhostingAllowed = document.getElementById("property-zone-ghosting-allowed"); + + var elPolyVoxSections = document.querySelectorAll(".poly-vox-section"); + allSections.push(elPolyVoxSections); + var elVoxelVolumeSizeX = document.getElementById("property-voxel-volume-size-x"); + var elVoxelVolumeSizeY = document.getElementById("property-voxel-volume-size-y"); + var elVoxelVolumeSizeZ = document.getElementById("property-voxel-volume-size-z"); + var elVoxelSurfaceStyle = document.getElementById("property-voxel-surface-style"); + var elXTextureURL = document.getElementById("property-x-texture-url"); + var elYTextureURL = document.getElementById("property-y-texture-url"); + var elZTextureURL = document.getElementById("property-z-texture-url"); + + var elPreviewCameraButton = document.getElementById("preview-camera-button"); + + if (window.EventBridge !== undefined) { + var properties; + EventBridge.scriptEventReceived.connect(function(data) { + data = JSON.parse(data); + if (data.type == "update") { + if (data.selections.length == 0) { + elTypeIcon.style.display = "none"; + elType.innerHTML = "No selection"; + elID.innerHTML = ""; + disableProperties(); + } else if (data.selections.length > 1) { + var selections = data.selections; + + var ids = []; + var types = {}; + var numTypes = 0; + + for (var i = 0; i < selections.length; i++) { + ids.push(selections[i].id); + var type = selections[i].properties.type; + if (types[type] === undefined) { + types[type] = 0; + numTypes += 1; + } + types[type]++; + } + + var type; + if (numTypes === 1) { + type = selections[0].properties.type; + } else { + type = "Multiple"; + } + elType.innerHTML = type + " (" + data.selections.length + ")"; + elTypeIcon.innerHTML = ICON_FOR_TYPE[type]; + elTypeIcon.style.display = "inline-block"; + + elID.innerHTML = ids.join("
"); + + disableProperties(); + } else { + + + properties = data.selections[0].properties; + + elID.innerHTML = properties.id; + + elType.innerHTML = properties.type; + elTypeIcon.innerHTML = ICON_FOR_TYPE[properties.type]; + elTypeIcon.style.display = "inline-block"; + + elLocked.checked = properties.locked; + + if (properties.locked) { + disableProperties(); + elLocked.removeAttribute('disabled'); + } else { + enableProperties(); + } + + elName.value = properties.name; + + elVisible.checked = properties.visible; + + elPositionX.value = properties.position.x.toFixed(4); + elPositionY.value = properties.position.y.toFixed(4); + elPositionZ.value = properties.position.z.toFixed(4); + + elDimensionsX.value = properties.dimensions.x.toFixed(4); + elDimensionsY.value = properties.dimensions.y.toFixed(4); + elDimensionsZ.value = properties.dimensions.z.toFixed(4); + + elParentID.value = properties.parentID; + elParentJointIndex.value = properties.parentJointIndex; + + elRegistrationX.value = properties.registrationPoint.x.toFixed(4); + elRegistrationY.value = properties.registrationPoint.y.toFixed(4); + elRegistrationZ.value = properties.registrationPoint.z.toFixed(4); + + elRotationX.value = properties.rotation.x.toFixed(4); + elRotationY.value = properties.rotation.y.toFixed(4); + elRotationZ.value = properties.rotation.z.toFixed(4); + + elLinearVelocityX.value = properties.velocity.x.toFixed(4); + elLinearVelocityY.value = properties.velocity.y.toFixed(4); + elLinearVelocityZ.value = properties.velocity.z.toFixed(4); + elLinearDamping.value = properties.damping.toFixed(2); + + elAngularVelocityX.value = (properties.angularVelocity.x * RADIANS_TO_DEGREES).toFixed(4); + elAngularVelocityY.value = (properties.angularVelocity.y * RADIANS_TO_DEGREES).toFixed(4); + elAngularVelocityZ.value = (properties.angularVelocity.z * RADIANS_TO_DEGREES).toFixed(4); + elAngularDamping.value = properties.angularDamping.toFixed(4); + + elRestitution.value = properties.restitution.toFixed(4); + elFriction.value = properties.friction.toFixed(4); + + elGravityX.value = properties.gravity.x.toFixed(4); + elGravityY.value = properties.gravity.y.toFixed(4); + elGravityZ.value = properties.gravity.z.toFixed(4); + + elAccelerationX.value = properties.acceleration.x.toFixed(4); + elAccelerationY.value = properties.acceleration.y.toFixed(4); + elAccelerationZ.value = properties.acceleration.z.toFixed(4); + + elDensity.value = properties.density.toFixed(4); + elCollisionless.checked = properties.collisionless; + elDynamic.checked = properties.dynamic; + + elCollideStatic.checked = properties.collidesWith.indexOf("static") > -1; + elCollideKinematic.checked = properties.collidesWith.indexOf("kinematic") > -1; + elCollideDynamic.checked = properties.collidesWith.indexOf("dynamic") > -1; + elCollideMyAvatar.checked = properties.collidesWith.indexOf("myAvatar") > -1; + elCollideOtherAvatar.checked = properties.collidesWith.indexOf("otherAvatar") > -1; + + elGrabbable.checked = properties.dynamic; + elWantsTrigger.checked = false; + elIgnoreIK.checked = false; + var parsedUserData = {} + try { + parsedUserData = JSON.parse(properties.userData); + + if ("grabbableKey" in parsedUserData) { + if ("grabbable" in parsedUserData["grabbableKey"]) { + elGrabbable.checked = parsedUserData["grabbableKey"].grabbable; + } + if ("wantsTrigger" in parsedUserData["grabbableKey"]) { + elWantsTrigger.checked = parsedUserData["grabbableKey"].wantsTrigger; + } + if ("ignoreIK" in parsedUserData["grabbableKey"]) { + elIgnoreIK.checked = parsedUserData["grabbableKey"].ignoreIK; + } + } + } catch(e) {} + + elCollisionSoundURL.value = properties.collisionSoundURL; + elLifetime.value = properties.lifetime; + elScriptURL.value = properties.script; + /* + FIXME: See FIXME for property-script-url. + elScriptTimestamp.value = properties.scriptTimestamp; + */ + elUserData.value = properties.userData; + setTextareaScrolling(elUserData); + + elHyperlinkHref.value = properties.href; + elDescription.value = properties.description; + + for (var i = 0; i < allSections.length; i++) { + for (var j = 0; j < allSections[i].length; j++) { + allSections[i][j].style.display = 'none'; + } + } + + for (var i = 0; i < elHyperlinkSections.length; i++) { + elHyperlinkSections[i].style.display = 'table'; + } + + if (properties.type == "Shape" || properties.type == "Box" || properties.type == "Sphere") { + for (var i = 0; i < elShapeSections.length; i++) { + elShapeSections[i].style.display = 'table'; + } + elShape.value = properties.shape; + setDropdownText(elShape); + + } else { + for (var i = 0; i < elShapeSections.length; i++) { + elShapeSections[i].style.display = 'none'; + } + } + + if (properties.type == "Shape" || properties.type == "Box" || properties.type == "Sphere" || properties.type == "ParticleEffect") { + for (var i = 0; i < elColorSections.length; i++) { + elColorSections[i].style.display = 'table'; + } + elColorRed.value = properties.color.red; + elColorGreen.value = properties.color.green; + elColorBlue.value = properties.color.blue; + elColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; + } else { + for (var i = 0; i < elColorSections.length; i++) { + elColorSections[i].style.display = 'none'; + } + } + + if (properties.type == "Model") { + for (var i = 0; i < elModelSections.length; i++) { + elModelSections[i].style.display = 'table'; + } + + elModelURL.value = properties.modelURL; + elShapeType.value = properties.shapeType; + setDropdownText(elShapeType); + elCompoundShapeURL.value = properties.compoundShapeURL; + elModelAnimationURL.value = properties.animation.url; + elModelAnimationPlaying.checked = properties.animation.running; + elModelAnimationFPS.value = properties.animation.fps; + elModelAnimationFrame.value = properties.animation.currentFrame; + elModelAnimationFirstFrame.value = properties.animation.firstFrame; + elModelAnimationLastFrame.value = properties.animation.lastFrame; + elModelAnimationLoop.checked = properties.animation.loop; + elModelAnimationHold.checked = properties.animation.hold; + elModelTextures.value = properties.textures; + setTextareaScrolling(elModelTextures); + elModelOriginalTextures.value = properties.originalTextures; + setTextareaScrolling(elModelOriginalTextures); + } else if (properties.type == "Web") { + for (var i = 0; i < elWebSections.length; i++) { + elWebSections[i].style.display = 'table'; + } + for (var i = 0; i < elHyperlinkSections.length; i++) { + elHyperlinkSections[i].style.display = 'none'; + } + + elWebSourceURL.value = properties.sourceUrl; + } else if (properties.type == "Text") { + for (var i = 0; i < elTextSections.length; i++) { + elTextSections[i].style.display = 'table'; + } + + elTextText.value = properties.text; + elTextLineHeight.value = properties.lineHeight.toFixed(4); + elTextFaceCamera = properties.faceCamera; + elTextTextColor.style.backgroundColor = "rgb(" + properties.textColor.red + "," + properties.textColor.green + "," + properties.textColor.blue + ")"; + elTextTextColorRed.value = properties.textColor.red; + elTextTextColorGreen.value = properties.textColor.green; + elTextTextColorBlue.value = properties.textColor.blue; + elTextBackgroundColorRed.value = properties.backgroundColor.red; + elTextBackgroundColorGreen.value = properties.backgroundColor.green; + elTextBackgroundColorBlue.value = properties.backgroundColor.blue; + } else if (properties.type == "Light") { + for (var i = 0; i < elLightSections.length; i++) { + elLightSections[i].style.display = 'table'; + } + + elLightSpotLight.checked = properties.isSpotlight; + + elLightColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; + elLightColorRed.value = properties.color.red; + elLightColorGreen.value = properties.color.green; + elLightColorBlue.value = properties.color.blue; + + elLightIntensity.value = properties.intensity.toFixed(1); + elLightFalloffRadius.value = properties.falloffRadius.toFixed(1); + elLightExponent.value = properties.exponent.toFixed(2); + elLightCutoff.value = properties.cutoff.toFixed(2); + } else if (properties.type == "Zone") { + for (var i = 0; i < elZoneSections.length; i++) { + elZoneSections[i].style.display = 'table'; + } + + elZoneStageSunModelEnabled.checked = properties.stage.sunModelEnabled; + elZoneKeyLightColor.style.backgroundColor = "rgb(" + properties.keyLight.color.red + "," + properties.keyLight.color.green + "," + properties.keyLight.color.blue + ")"; + elZoneKeyLightColorRed.value = properties.keyLight.color.red; + elZoneKeyLightColorGreen.value = properties.keyLight.color.green; + elZoneKeyLightColorBlue.value = properties.keyLight.color.blue; + elZoneKeyLightIntensity.value = properties.keyLight.intensity.toFixed(2); + elZoneKeyLightAmbientIntensity.value = properties.keyLight.ambientIntensity.toFixed(2); + elZoneKeyLightDirectionX.value = properties.keyLight.direction.x.toFixed(2); + elZoneKeyLightDirectionY.value = properties.keyLight.direction.y.toFixed(2); + elZoneKeyLightAmbientURL.value = properties.keyLight.ambientURL; + + + elZoneStageLatitude.value = properties.stage.latitude.toFixed(2); + elZoneStageLongitude.value = properties.stage.longitude.toFixed(2); + elZoneStageAltitude.value = properties.stage.altitude.toFixed(2); + elZoneStageAutomaticHourDay.checked = properties.stage.automaticHourDay; + elZoneStageDay.value = properties.stage.day; + elZoneStageHour.value = properties.stage.hour; + elShapeType.value = properties.shapeType; + elCompoundShapeURL.value = properties.compoundShapeURL; + + elZoneBackgroundMode.value = properties.backgroundMode; + setDropdownText(elZoneBackgroundMode); + + elZoneSkyboxColor.style.backgroundColor = "rgb(" + properties.skybox.color.red + "," + properties.skybox.color.green + "," + properties.skybox.color.blue + ")"; + elZoneSkyboxColorRed.value = properties.skybox.color.red; + elZoneSkyboxColorGreen.value = properties.skybox.color.green; + elZoneSkyboxColorBlue.value = properties.skybox.color.blue; + elZoneSkyboxURL.value = properties.skybox.url; + + elZoneFlyingAllowed.checked = properties.flyingAllowed; + elZoneGhostingAllowed.checked = properties.ghostingAllowed; + + showElements(document.getElementsByClassName('skybox-section'), elZoneBackgroundMode.value == 'skybox'); + } else if (properties.type == "PolyVox") { + for (var i = 0; i < elPolyVoxSections.length; i++) { + elPolyVoxSections[i].style.display = 'table'; + } + + elVoxelVolumeSizeX.value = properties.voxelVolumeSize.x.toFixed(2); + elVoxelVolumeSizeY.value = properties.voxelVolumeSize.y.toFixed(2); + elVoxelVolumeSizeZ.value = properties.voxelVolumeSize.z.toFixed(2); + elVoxelSurfaceStyle.value = properties.voxelSurfaceStyle; + setDropdownText(elVoxelSurfaceStyle); + elXTextureURL.value = properties.xTextureURL; + elYTextureURL.value = properties.yTextureURL; + elZTextureURL.value = properties.zTextureURL; + } + + var activeElement = document.activeElement; + + if(typeof activeElement.select!=="undefined"){ + activeElement.select(); + } + } + } + }); + } + + elLocked.addEventListener('change', createEmitCheckedPropertyUpdateFunction('locked')); + elName.addEventListener('change', createEmitTextPropertyUpdateFunction('name')); + elHyperlinkHref.addEventListener('change', createEmitTextPropertyUpdateFunction('href')); + elDescription.addEventListener('change', createEmitTextPropertyUpdateFunction('description')); + elVisible.addEventListener('change', createEmitCheckedPropertyUpdateFunction('visible')); + + var positionChangeFunction = createEmitVec3PropertyUpdateFunction( + 'position', elPositionX, elPositionY, elPositionZ); + elPositionX.addEventListener('change', positionChangeFunction); + elPositionY.addEventListener('change', positionChangeFunction); + elPositionZ.addEventListener('change', positionChangeFunction); + + var dimensionsChangeFunction = createEmitVec3PropertyUpdateFunction( + 'dimensions', elDimensionsX, elDimensionsY, elDimensionsZ); + elDimensionsX.addEventListener('change', dimensionsChangeFunction); + elDimensionsY.addEventListener('change', dimensionsChangeFunction); + elDimensionsZ.addEventListener('change', dimensionsChangeFunction); + + elParentID.addEventListener('change', createEmitTextPropertyUpdateFunction('parentID')); + elParentJointIndex.addEventListener('change', createEmitNumberPropertyUpdateFunction('parentJointIndex')); + + var registrationChangeFunction = createEmitVec3PropertyUpdateFunction( + 'registrationPoint', elRegistrationX, elRegistrationY, elRegistrationZ); + elRegistrationX.addEventListener('change', registrationChangeFunction); + elRegistrationY.addEventListener('change', registrationChangeFunction); + elRegistrationZ.addEventListener('change', registrationChangeFunction); + + var rotationChangeFunction = createEmitVec3PropertyUpdateFunction( + 'rotation', elRotationX, elRotationY, elRotationZ); + elRotationX.addEventListener('change', rotationChangeFunction); + elRotationY.addEventListener('change', rotationChangeFunction); + elRotationZ.addEventListener('change', rotationChangeFunction); + + var velocityChangeFunction = createEmitVec3PropertyUpdateFunction( + 'velocity', elLinearVelocityX, elLinearVelocityY, elLinearVelocityZ); + elLinearVelocityX.addEventListener('change', velocityChangeFunction); + elLinearVelocityY.addEventListener('change', velocityChangeFunction); + elLinearVelocityZ.addEventListener('change', velocityChangeFunction); + elLinearDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('damping')); + + var angularVelocityChangeFunction = createEmitVec3PropertyUpdateFunctionWithMultiplier( + 'angularVelocity', elAngularVelocityX, elAngularVelocityY, elAngularVelocityZ, DEGREES_TO_RADIANS); + elAngularVelocityX.addEventListener('change', angularVelocityChangeFunction); + elAngularVelocityY.addEventListener('change', angularVelocityChangeFunction); + elAngularVelocityZ.addEventListener('change', angularVelocityChangeFunction); + elAngularDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('angularDamping')); + + elRestitution.addEventListener('change', createEmitNumberPropertyUpdateFunction('restitution')); + elFriction.addEventListener('change', createEmitNumberPropertyUpdateFunction('friction')); + + var gravityChangeFunction = createEmitVec3PropertyUpdateFunction( + 'gravity', elGravityX, elGravityY, elGravityZ); + elGravityX.addEventListener('change', gravityChangeFunction); + elGravityY.addEventListener('change', gravityChangeFunction); + elGravityZ.addEventListener('change', gravityChangeFunction); + + var accelerationChangeFunction = createEmitVec3PropertyUpdateFunction( + 'acceleration', elAccelerationX, elAccelerationY, elAccelerationZ); + elAccelerationX.addEventListener('change', accelerationChangeFunction); + elAccelerationY.addEventListener('change', accelerationChangeFunction); + elAccelerationZ.addEventListener('change', accelerationChangeFunction); + + elDensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('density')); + elCollisionless.addEventListener('change', createEmitCheckedPropertyUpdateFunction('collisionless')); + elDynamic.addEventListener('change', createEmitCheckedPropertyUpdateFunction('dynamic')); + + elCollideDynamic.addEventListener('change', function() { + updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideDynamic, 'dynamic'); + }); + + elCollideKinematic.addEventListener('change', function() { + updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideKinematic, 'kinematic'); + }); + + elCollideStatic.addEventListener('change', function() { + updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideStatic, 'static'); + }); + elCollideMyAvatar.addEventListener('change', function() { + updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideMyAvatar, 'myAvatar'); + }); + elCollideOtherAvatar.addEventListener('change', function() { + updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideOtherAvatar, 'otherAvatar'); + }); + + elGrabbable.addEventListener('change', function() { + userDataChanger("grabbableKey", "grabbable", elGrabbable, elUserData, properties.dynamic); + }); + elWantsTrigger.addEventListener('change', function() { + userDataChanger("grabbableKey", "wantsTrigger", elWantsTrigger, elUserData, false); + }); + elIgnoreIK.addEventListener('change', function() { + userDataChanger("grabbableKey", "ignoreIK", elIgnoreIK, elUserData, false); + }); + + elCollisionSoundURL.addEventListener('change', createEmitTextPropertyUpdateFunction('collisionSoundURL')); + + elLifetime.addEventListener('change', createEmitNumberPropertyUpdateFunction('lifetime')); + elScriptURL.addEventListener('change', createEmitTextPropertyUpdateFunction('script')); + /* + FIXME: See FIXME for property-script-url. + elScriptTimestamp.addEventListener('change', createEmitNumberPropertyUpdateFunction('scriptTimestamp')); + */ + elUserData.addEventListener('change', createEmitTextPropertyUpdateFunction('userData')); + + var colorChangeFunction = createEmitColorPropertyUpdateFunction( + 'color', elColorRed, elColorGreen, elColorBlue); + elColorRed.addEventListener('change', colorChangeFunction); + elColorGreen.addEventListener('change', colorChangeFunction); + elColorBlue.addEventListener('change', colorChangeFunction); + colorPickers.push($('#property-color').colpick({ + colorScheme: 'dark', + layout: 'hex', + color: '000000', + onShow: function (colpick) { + $('#property-color').attr('active', 'true'); + }, + onHide: function (colpick) { + $('#property-color').attr('active', 'false'); + }, + onSubmit: function (hsb, hex, rgb, el) { + $(el).css('background-color', '#' + hex); + $(el).colpickHide(); + emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); + } + })); + + elLightSpotLight.addEventListener('change', createEmitCheckedPropertyUpdateFunction('isSpotlight')); + + var lightColorChangeFunction = createEmitColorPropertyUpdateFunction( + 'color', elLightColorRed, elLightColorGreen, elLightColorBlue); + elLightColorRed.addEventListener('change', lightColorChangeFunction); + elLightColorGreen.addEventListener('change', lightColorChangeFunction); + elLightColorBlue.addEventListener('change', lightColorChangeFunction); + colorPickers.push($('#property-light-color').colpick({ + colorScheme: 'dark', + layout: 'hex', + color: '000000', + onShow: function (colpick) { + $('#property-light-color').attr('active', 'true'); + }, + onHide: function (colpick) { + $('#property-light-color').attr('active', 'false'); + }, + onSubmit: function (hsb, hex, rgb, el) { + $(el).css('background-color', '#' + hex); + $(el).colpickHide(); + emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); + } + })); + + elLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('intensity', 1)); + elLightFalloffRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('falloffRadius', 1)); + elLightExponent.addEventListener('change', createEmitNumberPropertyUpdateFunction('exponent', 2)); + elLightCutoff.addEventListener('change', createEmitNumberPropertyUpdateFunction('cutoff', 2)); + + elShape.addEventListener('change', createEmitTextPropertyUpdateFunction('shape')); + + elWebSourceURL.addEventListener('change', createEmitTextPropertyUpdateFunction('sourceUrl')); + + elModelURL.addEventListener('change', createEmitTextPropertyUpdateFunction('modelURL')); + elShapeType.addEventListener('change', createEmitTextPropertyUpdateFunction('shapeType')); + elCompoundShapeURL.addEventListener('change', createEmitTextPropertyUpdateFunction('compoundShapeURL')); + + elModelAnimationURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('animation', 'url')); + elModelAnimationPlaying.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation','running')); + elModelAnimationFPS.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation','fps')); + elModelAnimationFrame.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'currentFrame')); + elModelAnimationFirstFrame.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'firstFrame')); + elModelAnimationLastFrame.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'lastFrame')); + elModelAnimationLoop.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation', 'loop')); + elModelAnimationHold.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation', 'hold')); + + elModelTextures.addEventListener('change', createEmitTextPropertyUpdateFunction('textures')); + + elTextText.addEventListener('change', createEmitTextPropertyUpdateFunction('text')); + elTextFaceCamera.addEventListener('change', createEmitCheckedPropertyUpdateFunction('faceCamera')); + elTextLineHeight.addEventListener('change', createEmitNumberPropertyUpdateFunction('lineHeight')); + var textTextColorChangeFunction = createEmitColorPropertyUpdateFunction( + 'textColor', elTextTextColorRed, elTextTextColorGreen, elTextTextColorBlue); + elTextTextColorRed.addEventListener('change', textTextColorChangeFunction); + elTextTextColorGreen.addEventListener('change', textTextColorChangeFunction); + elTextTextColorBlue.addEventListener('change', textTextColorChangeFunction); + colorPickers.push($('#property-text-text-color').colpick({ + colorScheme:'dark', + layout:'hex', + color: '000000', + onShow: function (colpick) { + $('#property-text-text-color').attr('active', 'true'); + }, + onHide: function (colpick) { + $('#property-text-text-color').attr('active', 'false'); + }, + onSubmit: function (hsb, hex, rgb, el) { + $(el).css('background-color', '#'+hex); + $(el).colpickHide(); + $(el).attr('active', 'false'); + emitColorPropertyUpdate('textColor', rgb.r, rgb.g, rgb.b); + } + })); + + var textBackgroundColorChangeFunction = createEmitColorPropertyUpdateFunction( + 'backgroundColor', elTextBackgroundColorRed, elTextBackgroundColorGreen, elTextBackgroundColorBlue); + elTextBackgroundColorRed.addEventListener('change', textBackgroundColorChangeFunction); + elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction); + elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction); + colorPickers.push($('#property-text-background-color').colpick({ + colorScheme:'dark', + layout:'hex', + color:'000000', + onShow: function (colpick) { + $('#property-text-background-color').attr('active', 'true'); + }, + onHide: function (colpick) { + $('#property-text-background-color').attr('active', 'false'); + }, + onSubmit: function (hsb, hex, rgb, el) { + $(el).css('background-color', '#'+hex); + $(el).colpickHide(); + emitColorPropertyUpdate('backgroundColor', rgb.r, rgb.g, rgb.b); + } + })); + + elZoneStageSunModelEnabled.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('stage','sunModelEnabled')); + colorPickers.push($('#property-zone-key-light-color').colpick({ + colorScheme:'dark', + layout:'hex', + color:'000000', + onShow: function (colpick) { + $('#property-zone-key-light-color').attr('active', 'true'); + }, + onHide: function (colpick) { + $('#property-zone-key-light-color').attr('active', 'false'); + }, + onSubmit: function (hsb, hex, rgb, el) { + $(el).css('background-color', '#'+hex); + $(el).colpickHide(); + emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'keyLight'); + } + })); + var zoneKeyLightColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('keyLight','color', elZoneKeyLightColorRed, elZoneKeyLightColorGreen, elZoneKeyLightColorBlue); + elZoneKeyLightColorRed.addEventListener('change', zoneKeyLightColorChangeFunction); + elZoneKeyLightColorGreen.addEventListener('change', zoneKeyLightColorChangeFunction); + elZoneKeyLightColorBlue.addEventListener('change', zoneKeyLightColorChangeFunction); + elZoneKeyLightIntensity.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('keyLight','intensity')); + elZoneKeyLightAmbientIntensity.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('keyLight','ambientIntensity')); + elZoneKeyLightAmbientURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('keyLight','ambientURL')); + var zoneKeyLightDirectionChangeFunction = createEmitGroupVec3PropertyUpdateFunction('keyLight','direction', elZoneKeyLightDirectionX, elZoneKeyLightDirectionY); + elZoneKeyLightDirectionX.addEventListener('change', zoneKeyLightDirectionChangeFunction); + elZoneKeyLightDirectionY.addEventListener('change', zoneKeyLightDirectionChangeFunction); + + elZoneStageLatitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','latitude')); + elZoneStageLongitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','longitude')); + elZoneStageAltitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','altitude')); + elZoneStageAutomaticHourDay.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('stage','automaticHourDay')); + elZoneStageDay.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','day')); + elZoneStageHour.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','hour')); + + + elZoneBackgroundMode.addEventListener('change', createEmitTextPropertyUpdateFunction('backgroundMode')); + var zoneSkyboxColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('skybox','color', + elZoneSkyboxColorRed, elZoneSkyboxColorGreen, elZoneSkyboxColorBlue); + elZoneSkyboxColorRed.addEventListener('change', zoneSkyboxColorChangeFunction); + elZoneSkyboxColorGreen.addEventListener('change', zoneSkyboxColorChangeFunction); + elZoneSkyboxColorBlue.addEventListener('change', zoneSkyboxColorChangeFunction); + colorPickers.push($('#property-zone-skybox-color').colpick({ + colorScheme:'dark', + layout:'hex', + color:'000000', + onShow: function (colpick) { + $('#property-zone-skybox-color').attr('active', 'true'); + }, + onHide: function (colpick) { + $('#property-zone-skybox-color').attr('active', 'false'); + }, + onSubmit: function (hsb, hex, rgb, el) { + $(el).css('background-color', '#'+hex); + $(el).colpickHide(); + emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'skybox'); + } + })); + + elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox','url')); + + elZoneFlyingAllowed.addEventListener('change', createEmitCheckedPropertyUpdateFunction('flyingAllowed')); + elZoneGhostingAllowed.addEventListener('change', createEmitCheckedPropertyUpdateFunction('ghostingAllowed')); + + var voxelVolumeSizeChangeFunction = createEmitVec3PropertyUpdateFunction( + 'voxelVolumeSize', elVoxelVolumeSizeX, elVoxelVolumeSizeY, elVoxelVolumeSizeZ); + elVoxelVolumeSizeX.addEventListener('change', voxelVolumeSizeChangeFunction); + elVoxelVolumeSizeY.addEventListener('change', voxelVolumeSizeChangeFunction); + elVoxelVolumeSizeZ.addEventListener('change', voxelVolumeSizeChangeFunction); + elVoxelSurfaceStyle.addEventListener('change', createEmitTextPropertyUpdateFunction('voxelSurfaceStyle')); + elXTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('xTextureURL')); + elYTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('yTextureURL')); + elZTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('zTextureURL')); + + elMoveSelectionToGrid.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "moveSelectionToGrid", + })); + }); + elMoveAllToGrid.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "moveAllToGrid", + })); + }); + elResetToNaturalDimensions.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "resetToNaturalDimensions", + })); + }); + elRescaleDimensionsButton.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "rescaleDimensions", + percentage: parseInt(elRescaleDimensionsPct.value), + })); + }); + /* + FIXME: See FIXME for property-script-url. + elReloadScriptButton.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "reloadScript" + })); + }); + */ + elPreviewCameraButton.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "previewCamera" + })); + }); + + window.onblur = function() { + // Fake a change event + var ev = document.createEvent("HTMLEvents"); + ev.initEvent("change", true, true); + document.activeElement.dispatchEvent(ev); + } + + // For input and textarea elements, select all of the text on focus + // WebKit-based browsers, such as is used with QWebView, have a quirk + // where the mouseup event comes after the focus event, causing the + // text to be deselected immediately after selecting all of the text. + // To make this work we block the first mouseup event after the elements + // received focus. If we block all mouseup events the user will not + // be able to click within the selected text. + // We also check to see if the value has changed to make sure we aren't + // blocking a mouse-up event when clicking on an input spinner. + var els = document.querySelectorAll("input, textarea"); + for (var i = 0; i < els.length; i++) { + var clicked = false; + var originalText; + els[i].onfocus = function(e) { + originalText = this.value; + this.select(); + clicked = false; + }; + els[i].onmouseup = function(e) { + if (!clicked && originalText == this.value) { + e.preventDefault(); + } + clicked = true; + }; + } + }); + + // Collapsible sections + var elCollapsible = document.getElementsByClassName("section-header"); + + var toggleCollapsedEvent = function (event) { + var element = event.target; + if (element.nodeName !== "DIV") { + element = element.parentNode; + } + var isCollapsed = element.getAttribute("collapsed") !== "true"; + element.setAttribute("collapsed", isCollapsed ? "true" : "false"); + element.getElementsByTagName("span")[0].textContent = isCollapsed ? "L" : "M"; + }; + + for (var i = 0, length = elCollapsible.length; i < length; i++) { + var element = elCollapsible[i]; + element.addEventListener("click", toggleCollapsedEvent, true); + }; + + + // Textarea scrollbars + var elTextareas = document.getElementsByTagName("TEXTAREA"); + + var textareaOnChangeEvent = function (event) { + setTextareaScrolling(event.target); + } + + for (var i = 0, length = elTextareas.length; i < length; i++) { + var element = elTextareas[i]; + setTextareaScrolling(element); + element.addEventListener("input", textareaOnChangeEvent, false); + element.addEventListener("change", textareaOnChangeEvent, false); + /* FIXME: Detect and update textarea scrolling attribute on resize. Unfortunately textarea doesn't have a resize + event; mouseup is a partial stand-in but doesn't handle resizing if mouse moves outside textarea rectangle. */ + element.addEventListener("mouseup", textareaOnChangeEvent, false); + }; + + // Dropdowns + // For each dropdown the following replacement is created in place of the oriringal dropdown... + // Structure created: + //
+ //
display textcarat
+ //
+ //
    + //
  • 0) { + var el = elDropdowns[0]; + el.parentNode.removeChild(el); + elDropdowns = document.getElementsByTagName("select"); + } + + augmentSpinButtons(); + + // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked + document.addEventListener("contextmenu", function (event) { + event.preventDefault(); + }, false); +} + diff --git a/scripts/system/html/gridControls.html b/scripts/system/html/gridControls.html index 4b18a8555b..f7f206d702 100644 --- a/scripts/system/html/gridControls.html +++ b/scripts/system/html/gridControls.html @@ -10,144 +10,14 @@ - + - - + + - - - + + +
    diff --git a/scripts/system/html/colpick.js b/scripts/system/html/js/colpick.js similarity index 100% rename from scripts/system/html/colpick.js rename to scripts/system/html/js/colpick.js diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js new file mode 100644 index 0000000000..8e5e190068 --- /dev/null +++ b/scripts/system/html/js/entityList.js @@ -0,0 +1,310 @@ +// entityList.js +// +// Created by Ryan Huffman on 19 Nov 2014 +// Copyright 2014 High Fidelity, Inc. +// +// Distributed under the Apache License, Version 2.0. +// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html + +var entities = {}; +var selectedEntities = []; +var currentSortColumn = 'type'; +var currentSortOrder = 'des'; +var entityList = null; +var refreshEntityListTimer = null; +const ASCENDING_STRING = '▾'; +const DESCENDING_STRING = '▴'; +const LOCKED_GLYPH = ""; +const VISIBLE_GLYPH = ""; +const DELETE = 46; // Key code for the delete key. +const MAX_ITEMS = Number.MAX_VALUE; // Used to set the max length of the list of discovered entities. + +debugPrint = function (message) { + console.log(message); +}; + +function loaded() { + openEventBridge(function() { + entityList = new List('entity-list', { valueNames: ['name', 'type', 'url', 'locked', 'visible'], page: MAX_ITEMS}); + entityList.clear(); + elEntityTable = document.getElementById("entity-table"); + elEntityTableBody = document.getElementById("entity-table-body"); + elRefresh = document.getElementById("refresh"); + elToggleLocked = document.getElementById("locked"); + elToggleVisible = document.getElementById("visible"); + elDelete = document.getElementById("delete"); + elTeleport = document.getElementById("teleport"); + elRadius = document.getElementById("radius"); + elFooter = document.getElementById("footer-text"); + elNoEntitiesMessage = document.getElementById("no-entities"); + elNoEntitiesRadius = document.getElementById("no-entities-radius"); + elEntityTableScroll = document.getElementById("entity-table-scroll"); + + document.getElementById("entity-name").onclick = function() { + setSortColumn('name'); + }; + document.getElementById("entity-type").onclick = function() { + setSortColumn('type'); + }; + document.getElementById("entity-url").onclick = function() { + setSortColumn('url'); + }; + document.getElementById("entity-locked").onclick = function () { + setSortColumn('locked'); + }; + document.getElementById("entity-visible").onclick = function () { + setSortColumn('visible'); + }; + + function onRowClicked(clickEvent) { + var id = this.dataset.entityId; + var selection = [this.dataset.entityId]; + if (clickEvent.ctrlKey) { + selection = selection.concat(selectedEntities); + } else if (clickEvent.shiftKey && selectedEntities.length > 0) { + var previousItemFound = -1; + var clickedItemFound = -1; + for (var entity in entityList.visibleItems) { + if (clickedItemFound === -1 && this.dataset.entityId == entityList.visibleItems[entity].values().id) { + clickedItemFound = entity; + } else if(previousItemFound === -1 && selectedEntities[0] == entityList.visibleItems[entity].values().id) { + previousItemFound = entity; + } + } + if (previousItemFound !== -1 && clickedItemFound !== -1) { + var betweenItems = []; + var toItem = Math.max(previousItemFound, clickedItemFound); + // skip first and last item in this loop, we add them to selection after the loop + for (var i = (Math.min(previousItemFound, clickedItemFound) + 1); i < toItem; i++) { + entityList.visibleItems[i].elm.className = 'selected'; + betweenItems.push(entityList.visibleItems[i].values().id); + } + if (previousItemFound > clickedItemFound) { + // always make sure that we add the items in the right order + betweenItems.reverse(); + } + selection = selection.concat(betweenItems, selectedEntities); + } + } + + selectedEntities = selection; + + this.className = 'selected'; + + EventBridge.emitWebEvent(JSON.stringify({ + type: "selectionUpdate", + focus: false, + entityIds: selection, + })); + } + + function onRowDoubleClicked() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "selectionUpdate", + focus: true, + entityIds: [this.dataset.entityId], + })); + } + + function addEntity(id, name, type, url, locked, visible) { + var urlParts = url.split('/'); + var filename = urlParts[urlParts.length - 1]; + + if (entities[id] === undefined) { + entityList.add([{ id: id, name: name, type: type, url: filename, locked: locked, visible: visible }], + function (items) { + var currentElement = items[0].elm; + var id = items[0]._values.id; + entities[id] = { + id: id, + name: name, + el: currentElement, + item: items[0] + }; + currentElement.setAttribute('id', 'entity_' + id); + currentElement.setAttribute('title', url); + currentElement.dataset.entityId = id; + currentElement.onclick = onRowClicked; + currentElement.ondblclick = onRowDoubleClicked; + }); + + if (refreshEntityListTimer) { + clearTimeout(refreshEntityListTimer); + } + refreshEntityListTimer = setTimeout(refreshEntityListObject, 50); + } else { + var item = entities[id].item; + item.values({ name: name, url: filename, locked: locked, visible: visible }); + } + } + + function clearEntities() { + entities = {}; + entityList.clear(); + } + + var elSortOrder = { + name: document.querySelector('#entity-name .sort-order'), + type: document.querySelector('#entity-type .sort-order'), + url: document.querySelector('#entity-url .sort-order'), + locked: document.querySelector('#entity-locked .sort-order'), + visible: document.querySelector('#entity-visible .sort-order') + } + function setSortColumn(column) { + if (currentSortColumn == column) { + currentSortOrder = currentSortOrder == "asc" ? "desc" : "asc"; + } else { + elSortOrder[currentSortColumn].innerHTML = ""; + currentSortColumn = column; + currentSortOrder = "asc"; + } + elSortOrder[column].innerHTML = currentSortOrder == "asc" ? ASCENDING_STRING : DESCENDING_STRING; + entityList.sort(currentSortColumn, { order: currentSortOrder }); + } + setSortColumn('type'); + + function refreshEntities() { + clearEntities(); + EventBridge.emitWebEvent(JSON.stringify({ type: 'refresh' })); + } + + function refreshEntityListObject() { + refreshEntityListTimer = null; + entityList.sort(currentSortColumn, { order: currentSortOrder }); + entityList.search(document.getElementById("filter").value); + } + + function updateSelectedEntities(selectedEntities) { + var notFound = false; + for (var id in entities) { + entities[id].el.className = ''; + } + for (var i = 0; i < selectedEntities.length; i++) { + var id = selectedEntities[i]; + if (id in entities) { + var entity = entities[id]; + entity.el.className = 'selected'; + } else { + notFound = true; + } + } + + if (selectedEntities.length > 1) { + elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected"; + } else if (selectedEntities.length === 1) { + elFooter.firstChild.nodeValue = "1 entity selected"; + } else if (entityList.visibleItems.length === 1) { + elFooter.firstChild.nodeValue = "1 entity found"; + } else { + elFooter.firstChild.nodeValue = entityList.visibleItems.length + " entities found"; + } + + // HACK: Fixes the footer and header text sometimes not displaying after adding or deleting entities. + // The problem appears to be a bug in the Qt HTML/CSS rendering (Qt 5.5). + document.getElementById("radius").focus(); + document.getElementById("radius").blur(); + + return notFound; + } + + elRefresh.onclick = function() { + refreshEntities(); + } + elToggleLocked.onclick = function () { + EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' })); + } + elToggleVisible.onclick = function () { + EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleVisible' })); + } + elTeleport.onclick = function () { + EventBridge.emitWebEvent(JSON.stringify({ type: 'teleport' })); + } + elDelete.onclick = function() { + EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' })); + refreshEntities(); + } + + document.addEventListener("keydown", function (keyDownEvent) { + if (keyDownEvent.target.nodeName === "INPUT") { + return; + } + var keyCode = keyDownEvent.keyCode; + if (keyCode === DELETE) { + EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' })); + refreshEntities(); + } + }, false); + + elRadius.onchange = function () { + elRadius.value = Math.max(elRadius.value, 0); + EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elRadius.value })); + refreshEntities(); + elNoEntitiesRadius.firstChild.nodeValue = elRadius.value; + } + + if (window.EventBridge !== undefined) { + EventBridge.scriptEventReceived.connect(function(data) { + data = JSON.parse(data); + + if (data.type === "clearEntityList") { + clearEntities(); + } else if (data.type == "selectionUpdate") { + var notFound = updateSelectedEntities(data.selectedIDs); + if (notFound) { + refreshEntities(); + } + } else if (data.type == "update") { + var newEntities = data.entities; + if (newEntities.length == 0) { + elNoEntitiesMessage.style.display = "block"; + elFooter.firstChild.nodeValue = "0 entities found"; + } else { + elNoEntitiesMessage.style.display = "none"; + for (var i = 0; i < newEntities.length; i++) { + var id = newEntities[i].id; + addEntity(id, newEntities[i].name, newEntities[i].type, newEntities[i].url, + newEntities[i].locked ? LOCKED_GLYPH : null, + newEntities[i].visible ? VISIBLE_GLYPH : null); + } + updateSelectedEntities(data.selectedIDs); + resize(); + } + } + }); + setTimeout(refreshEntities, 1000); + } + + function resize() { + // Take up available window space + elEntityTableScroll.style.height = window.innerHeight - 207; + + var tds = document.querySelectorAll("#entity-table-body tr:first-child td"); + var ths = document.querySelectorAll("#entity-table thead th"); + if (tds.length >= ths.length) { + // Update the widths of the header cells to match the body + for (var i = 0; i < ths.length; i++) { + ths[i].width = tds[i].offsetWidth; + } + } else { + // Reasonable widths if nothing is displayed + var tableWidth = document.getElementById("entity-table").offsetWidth; + ths[0].width = 0.16 * tableWidth; + ths[1].width = 0.34 * tableWidth; + ths[2].width = 0.34 * tableWidth; + ths[3].width = 0.08 * tableWidth; + ths[4].width = 0.08 * tableWidth; + } + }; + + window.onresize = resize; + resize(); + }); + + augmentSpinButtons(); + + // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked + document.addEventListener("contextmenu", function (event) { + event.preventDefault(); + }, false); +} + diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js new file mode 100644 index 0000000000..490579e909 --- /dev/null +++ b/scripts/system/html/js/entityProperties.js @@ -0,0 +1,1317 @@ +// entityProperties.js +// +// Created by Ryan Huffman on 13 Nov 2014 +// Copyright 2014 High Fidelity, Inc. +// +// Distributed under the Apache License, Version 2.0. +// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html + +var PI = 3.14159265358979; +var DEGREES_TO_RADIANS = PI / 180.0; +var RADIANS_TO_DEGREES = 180.0 / PI; +var ICON_FOR_TYPE = { + Box: "V", + Sphere: "n", + Shape: "n", + ParticleEffect: "", + Model: "", + Web: "q", + Text: "l", + Light: "p", + Zone: "o", + PolyVox: "", + Multiple: "" +} + +var colorPickers = []; + +debugPrint = function(message) { + EventBridge.emitWebEvent( + JSON.stringify({ + type:"print", + message: message + }) + ); +}; + +function enableChildren(el, selector) { + els = el.querySelectorAll(selector); + for (var i = 0; i < els.length; i++) { + els[i].removeAttribute('disabled'); + } +} +function disableChildren(el, selector) { + els = el.querySelectorAll(selector); + for (var i = 0; i < els.length; i++) { + els[i].setAttribute('disabled', 'disabled'); + } +} + +function enableProperties() { + enableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker"); + enableChildren(document, ".colpick"); +} + +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(); + } +} + +function showElements(els, show) { + for (var i = 0; i < els.length; i++) { + els[i].style.display = (show) ? 'table' : 'none'; + } +} + +function createEmitCheckedPropertyUpdateFunction(propertyName) { + return function() { + EventBridge.emitWebEvent( + '{ "type":"update", "properties":{"' + propertyName + '":' + this.checked + '}}' + ); + }; +} + +function createEmitCheckedToStringPropertyUpdateFunction(checkboxElement, name, propertyName) { + var newString = ""; + if (checkboxElement.checked) { + newString += name + ""; + } else { + + } + +} + +function createEmitGroupCheckedPropertyUpdateFunction(group, propertyName) { + return function () { + var properties = {}; + properties[group] = {}; + properties[group][propertyName] = this.checked; + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: properties + }) + ); + }; +} + +function createEmitNumberPropertyUpdateFunction(propertyName, decimals) { + decimals = decimals == undefined ? 4 : decimals; + return function() { + var value = parseFloat(this.value).toFixed(decimals); + + EventBridge.emitWebEvent( + '{ "type":"update", "properties":{"' + propertyName + '":' + value + '}}' + ); + }; +} +function createEmitGroupNumberPropertyUpdateFunction(group, propertyName) { + return function() { + var properties = {}; + properties[group] = {}; + properties[group][propertyName] = this.value; + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: properties, + }) + ); + }; +} + + +function createEmitTextPropertyUpdateFunction(propertyName) { + return function() { + var properties = {}; + properties[propertyName] = this.value; + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: properties, + }) + ); + }; +} + +function createEmitGroupTextPropertyUpdateFunction(group,propertyName) { + return function() { + var properties = {}; + properties[group] = {}; + properties[group][propertyName] = this.value; + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: properties, + }) + ); + }; +} + +function createEmitVec3PropertyUpdateFunction(property, elX, elY, elZ) { + return function() { + var data = { + type: "update", + properties: { + } + }; + data.properties[property] = { + x: elX.value, + y: elY.value, + z: elZ.value, + }; + EventBridge.emitWebEvent(JSON.stringify(data)); + } +}; + +function createEmitGroupVec3PropertyUpdateFunction(group, property, elX, elY, elZ) { + return function() { + var data = { + type: "update", + properties: { + } + }; + data.properties[group] = { }; + data.properties[group][property] = { + x: elX.value, + y: elY.value, + z: elZ ? elZ.value : 0, + }; + EventBridge.emitWebEvent(JSON.stringify(data)); + } +}; + +function createEmitVec3PropertyUpdateFunctionWithMultiplier(property, elX, elY, elZ, multiplier) { + return function() { + var data = { + type: "update", + properties: { + } + }; + data.properties[property] = { + x: elX.value * multiplier, + y: elY.value * multiplier, + z: elZ.value * multiplier, + }; + EventBridge.emitWebEvent(JSON.stringify(data)); + } +}; + +function createEmitColorPropertyUpdateFunction(property, elRed, elGreen, elBlue) { + return function() { + emitColorPropertyUpdate(property, elRed.value, elGreen.value, elBlue.value); + } +}; + +function emitColorPropertyUpdate(property, red, green, blue, group) { + var data = { + type: "update", + properties: { + } + }; + if (group) { + data.properties[group] = { }; + data.properties[group][property] = { + red: red, + green: green, + blue: blue, + }; + } else { + data.properties[property] = { + red: red, + green: green, + blue: blue, + }; + } + EventBridge.emitWebEvent(JSON.stringify(data)); +}; + + +function createEmitGroupColorPropertyUpdateFunction(group, property, elRed, elGreen, elBlue) { + return function() { + var data = { + type: "update", + properties: { + } + }; + data.properties[group] = { }; + + data.properties[group][property] = { + red: elRed.value, + green: elGreen.value, + blue: elBlue.value, + }; + EventBridge.emitWebEvent(JSON.stringify(data)); + } +}; + +function updateCheckedSubProperty(propertyName, propertyValue, subPropertyElement, subPropertyString) { + if (subPropertyElement.checked) { + if (propertyValue.indexOf(subPropertyString)) { + propertyValue += subPropertyString + ','; + } + } else { + // We've unchecked, so remove + propertyValue = propertyValue.replace(subPropertyString + ",", ""); + } + + var _properties ={} + _properties[propertyName] = propertyValue; + + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: _properties + }) + ); + +} + +function userDataChanger(groupName, keyName, checkBoxElement, userDataElement, defaultValue) { + var properties = {}; + var parsedData = {}; + try { + parsedData = JSON.parse(userDataElement.value); + } catch(e) {} + + if (!(groupName in parsedData)) { + parsedData[groupName] = {} + } + delete parsedData[groupName][keyName]; + if (checkBoxElement.checked !== defaultValue) { + parsedData[groupName][keyName] = checkBoxElement.checked; + } + + if (Object.keys(parsedData[groupName]).length == 0) { + delete parsedData[groupName]; + } + if (Object.keys(parsedData).length > 0) { + properties['userData'] = JSON.stringify(parsedData); + } else { + properties['userData'] = ''; + } + + userDataElement.value = properties['userData']; + + EventBridge.emitWebEvent( + JSON.stringify({ + type: "update", + properties: properties, + }) + ); +}; + +function setTextareaScrolling(element) { + var isScrolling = element.scrollHeight > element.offsetHeight; + element.setAttribute("scrolling", isScrolling ? "true" : "false"); +} + +function loaded() { + openEventBridge(function() { + var allSections = []; + var elID = document.getElementById("property-id"); + var elType = document.getElementById("property-type"); + var elTypeIcon = document.getElementById("type-icon"); + var elName = document.getElementById("property-name"); + var elLocked = document.getElementById("property-locked"); + var elVisible = document.getElementById("property-visible"); + var elPositionX = document.getElementById("property-pos-x"); + var elPositionY = document.getElementById("property-pos-y"); + var elPositionZ = document.getElementById("property-pos-z"); + var elMoveSelectionToGrid = document.getElementById("move-selection-to-grid"); + var elMoveAllToGrid = document.getElementById("move-all-to-grid"); + + var elDimensionsX = document.getElementById("property-dim-x"); + var elDimensionsY = document.getElementById("property-dim-y"); + var elDimensionsZ = document.getElementById("property-dim-z"); + var elResetToNaturalDimensions = document.getElementById("reset-to-natural-dimensions"); + var elRescaleDimensionsPct = document.getElementById("dimension-rescale-pct"); + var elRescaleDimensionsButton = document.getElementById("dimension-rescale-button"); + + var elParentID = document.getElementById("property-parent-id"); + var elParentJointIndex = document.getElementById("property-parent-joint-index"); + + var elRegistrationX = document.getElementById("property-reg-x"); + var elRegistrationY = document.getElementById("property-reg-y"); + var elRegistrationZ = document.getElementById("property-reg-z"); + + var elRotationX = document.getElementById("property-rot-x"); + var elRotationY = document.getElementById("property-rot-y"); + var elRotationZ = document.getElementById("property-rot-z"); + + var elLinearVelocityX = document.getElementById("property-lvel-x"); + var elLinearVelocityY = document.getElementById("property-lvel-y"); + var elLinearVelocityZ = document.getElementById("property-lvel-z"); + var elLinearDamping = document.getElementById("property-ldamping"); + + var elAngularVelocityX = document.getElementById("property-avel-x"); + var elAngularVelocityY = document.getElementById("property-avel-y"); + var elAngularVelocityZ = document.getElementById("property-avel-z"); + var elAngularDamping = document.getElementById("property-adamping"); + + var elRestitution = document.getElementById("property-restitution"); + var elFriction = document.getElementById("property-friction"); + + var elGravityX = document.getElementById("property-grav-x"); + var elGravityY = document.getElementById("property-grav-y"); + var elGravityZ = document.getElementById("property-grav-z"); + + var elAccelerationX = document.getElementById("property-lacc-x"); + var elAccelerationY = document.getElementById("property-lacc-y"); + var elAccelerationZ = document.getElementById("property-lacc-z"); + + var elDensity = document.getElementById("property-density"); + var elCollisionless = document.getElementById("property-collisionless"); + var elDynamic = document.getElementById("property-dynamic" ); + var elCollideStatic = document.getElementById("property-collide-static"); + var elCollideDynamic = document.getElementById("property-collide-dynamic"); + var elCollideKinematic = document.getElementById("property-collide-kinematic"); + var elCollideMyAvatar = document.getElementById("property-collide-myAvatar"); + var elCollideOtherAvatar = document.getElementById("property-collide-otherAvatar"); + var elCollisionSoundURL = document.getElementById("property-collision-sound-url"); + + var elGrabbable = document.getElementById("property-grabbable"); + var elWantsTrigger = document.getElementById("property-wants-trigger"); + var elIgnoreIK = document.getElementById("property-ignore-ik"); + + var elLifetime = document.getElementById("property-lifetime"); + var elScriptURL = document.getElementById("property-script-url"); + /* + FIXME: See FIXME for property-script-url. + var elScriptTimestamp = document.getElementById("property-script-timestamp"); + */ + var elReloadScriptButton = document.getElementById("reload-script-button"); + var elUserData = document.getElementById("property-user-data"); + + var elColorSections = document.querySelectorAll(".color-section"); + var elColor = document.getElementById("property-color"); + var elColorRed = document.getElementById("property-color-red"); + var elColorGreen = document.getElementById("property-color-green"); + var elColorBlue = document.getElementById("property-color-blue"); + + var elShapeSections = document.querySelectorAll(".shape-section"); + allSections.push(elShapeSections); + var elShape = document.getElementById("property-shape"); + + var elLightSections = document.querySelectorAll(".light-section"); + allSections.push(elLightSections); + var elLightSpotLight = document.getElementById("property-light-spot-light"); + var elLightColor = document.getElementById("property-light-color"); + var elLightColorRed = document.getElementById("property-light-color-red"); + var elLightColorGreen = document.getElementById("property-light-color-green"); + var elLightColorBlue = document.getElementById("property-light-color-blue"); + + var elLightIntensity = document.getElementById("property-light-intensity"); + var elLightFalloffRadius = document.getElementById("property-light-falloff-radius"); + var elLightExponent = document.getElementById("property-light-exponent"); + var elLightCutoff = document.getElementById("property-light-cutoff"); + + var elModelSections = document.querySelectorAll(".model-section"); + allSections.push(elModelSections); + var elModelURL = document.getElementById("property-model-url"); + var elShapeType = document.getElementById("property-shape-type"); + var elCompoundShapeURL = document.getElementById("property-compound-shape-url"); + var elModelAnimationURL = document.getElementById("property-model-animation-url"); + var elModelAnimationPlaying = document.getElementById("property-model-animation-playing"); + var elModelAnimationFPS = document.getElementById("property-model-animation-fps"); + var elModelAnimationFrame = document.getElementById("property-model-animation-frame"); + var elModelAnimationFirstFrame = document.getElementById("property-model-animation-first-frame"); + var elModelAnimationLastFrame = document.getElementById("property-model-animation-last-frame"); + var elModelAnimationLoop = document.getElementById("property-model-animation-loop"); + var elModelAnimationHold = document.getElementById("property-model-animation-hold"); + var elModelTextures = document.getElementById("property-model-textures"); + var elModelOriginalTextures = document.getElementById("property-model-original-textures"); + + var elWebSections = document.querySelectorAll(".web-section"); + allSections.push(elWebSections); + var elWebSourceURL = document.getElementById("property-web-source-url"); + + var elDescription = document.getElementById("property-description"); + + var elHyperlinkHref = document.getElementById("property-hyperlink-href"); + + var elHyperlinkSections = document.querySelectorAll(".hyperlink-section"); + + + var elTextSections = document.querySelectorAll(".text-section"); + allSections.push(elTextSections); + var elTextText = document.getElementById("property-text-text"); + var elTextLineHeight = document.getElementById("property-text-line-height"); + var elTextTextColor = document.getElementById("property-text-text-color"); + var elTextFaceCamera = document.getElementById("property-text-face-camera"); + var elTextTextColorRed = document.getElementById("property-text-text-color-red"); + var elTextTextColorGreen = document.getElementById("property-text-text-color-green"); + var elTextTextColorBlue = document.getElementById("property-text-text-color-blue"); + var elTextBackgroundColor = document.getElementById("property-text-background-color"); + var elTextBackgroundColorRed = document.getElementById("property-text-background-color-red"); + var elTextBackgroundColorGreen = document.getElementById("property-text-background-color-green"); + var elTextBackgroundColorBlue = document.getElementById("property-text-background-color-blue"); + + var elZoneSections = document.querySelectorAll(".zone-section"); + allSections.push(elZoneSections); + var elZoneStageSunModelEnabled = document.getElementById("property-zone-stage-sun-model-enabled"); + + var elZoneKeyLightColor = document.getElementById("property-zone-key-light-color"); + var elZoneKeyLightColorRed = document.getElementById("property-zone-key-light-color-red"); + var elZoneKeyLightColorGreen = document.getElementById("property-zone-key-light-color-green"); + var elZoneKeyLightColorBlue = document.getElementById("property-zone-key-light-color-blue"); + var elZoneKeyLightIntensity = document.getElementById("property-zone-key-intensity"); + var elZoneKeyLightAmbientIntensity = document.getElementById("property-zone-key-ambient-intensity"); + var elZoneKeyLightDirectionX = document.getElementById("property-zone-key-light-direction-x"); + var elZoneKeyLightDirectionY = document.getElementById("property-zone-key-light-direction-y"); + var elZoneKeyLightDirectionZ = document.getElementById("property-zone-key-light-direction-z"); + var elZoneKeyLightAmbientURL = document.getElementById("property-zone-key-ambient-url"); + + var elZoneStageLatitude = document.getElementById("property-zone-stage-latitude"); + var elZoneStageLongitude = document.getElementById("property-zone-stage-longitude"); + var elZoneStageAltitude = document.getElementById("property-zone-stage-altitude"); + var elZoneStageAutomaticHourDay = document.getElementById("property-zone-stage-automatic-hour-day"); + var elZoneStageDay = document.getElementById("property-zone-stage-day"); + var elZoneStageHour = document.getElementById("property-zone-stage-hour"); + + var elZoneBackgroundMode = document.getElementById("property-zone-background-mode"); + + var elZoneSkyboxColor = document.getElementById("property-zone-skybox-color"); + var elZoneSkyboxColorRed = document.getElementById("property-zone-skybox-color-red"); + var elZoneSkyboxColorGreen = document.getElementById("property-zone-skybox-color-green"); + var elZoneSkyboxColorBlue = document.getElementById("property-zone-skybox-color-blue"); + var elZoneSkyboxURL = document.getElementById("property-zone-skybox-url"); + + var elZoneFlyingAllowed = document.getElementById("property-zone-flying-allowed"); + var elZoneGhostingAllowed = document.getElementById("property-zone-ghosting-allowed"); + + var elPolyVoxSections = document.querySelectorAll(".poly-vox-section"); + allSections.push(elPolyVoxSections); + var elVoxelVolumeSizeX = document.getElementById("property-voxel-volume-size-x"); + var elVoxelVolumeSizeY = document.getElementById("property-voxel-volume-size-y"); + var elVoxelVolumeSizeZ = document.getElementById("property-voxel-volume-size-z"); + var elVoxelSurfaceStyle = document.getElementById("property-voxel-surface-style"); + var elXTextureURL = document.getElementById("property-x-texture-url"); + var elYTextureURL = document.getElementById("property-y-texture-url"); + var elZTextureURL = document.getElementById("property-z-texture-url"); + + var elPreviewCameraButton = document.getElementById("preview-camera-button"); + + if (window.EventBridge !== undefined) { + var properties; + EventBridge.scriptEventReceived.connect(function(data) { + data = JSON.parse(data); + if (data.type == "update") { + if (data.selections.length == 0) { + elTypeIcon.style.display = "none"; + elType.innerHTML = "No selection"; + elID.innerHTML = ""; + disableProperties(); + } else if (data.selections.length > 1) { + var selections = data.selections; + + var ids = []; + var types = {}; + var numTypes = 0; + + for (var i = 0; i < selections.length; i++) { + ids.push(selections[i].id); + var type = selections[i].properties.type; + if (types[type] === undefined) { + types[type] = 0; + numTypes += 1; + } + types[type]++; + } + + var type; + if (numTypes === 1) { + type = selections[0].properties.type; + } else { + type = "Multiple"; + } + elType.innerHTML = type + " (" + data.selections.length + ")"; + elTypeIcon.innerHTML = ICON_FOR_TYPE[type]; + elTypeIcon.style.display = "inline-block"; + + elID.innerHTML = ids.join("
    "); + + disableProperties(); + } else { + + + properties = data.selections[0].properties; + + elID.innerHTML = properties.id; + + elType.innerHTML = properties.type; + elTypeIcon.innerHTML = ICON_FOR_TYPE[properties.type]; + elTypeIcon.style.display = "inline-block"; + + elLocked.checked = properties.locked; + + if (properties.locked) { + disableProperties(); + elLocked.removeAttribute('disabled'); + } else { + enableProperties(); + } + + elName.value = properties.name; + + elVisible.checked = properties.visible; + + elPositionX.value = properties.position.x.toFixed(4); + elPositionY.value = properties.position.y.toFixed(4); + elPositionZ.value = properties.position.z.toFixed(4); + + elDimensionsX.value = properties.dimensions.x.toFixed(4); + elDimensionsY.value = properties.dimensions.y.toFixed(4); + elDimensionsZ.value = properties.dimensions.z.toFixed(4); + + elParentID.value = properties.parentID; + elParentJointIndex.value = properties.parentJointIndex; + + elRegistrationX.value = properties.registrationPoint.x.toFixed(4); + elRegistrationY.value = properties.registrationPoint.y.toFixed(4); + elRegistrationZ.value = properties.registrationPoint.z.toFixed(4); + + elRotationX.value = properties.rotation.x.toFixed(4); + elRotationY.value = properties.rotation.y.toFixed(4); + elRotationZ.value = properties.rotation.z.toFixed(4); + + elLinearVelocityX.value = properties.velocity.x.toFixed(4); + elLinearVelocityY.value = properties.velocity.y.toFixed(4); + elLinearVelocityZ.value = properties.velocity.z.toFixed(4); + elLinearDamping.value = properties.damping.toFixed(2); + + elAngularVelocityX.value = (properties.angularVelocity.x * RADIANS_TO_DEGREES).toFixed(4); + elAngularVelocityY.value = (properties.angularVelocity.y * RADIANS_TO_DEGREES).toFixed(4); + elAngularVelocityZ.value = (properties.angularVelocity.z * RADIANS_TO_DEGREES).toFixed(4); + elAngularDamping.value = properties.angularDamping.toFixed(4); + + elRestitution.value = properties.restitution.toFixed(4); + elFriction.value = properties.friction.toFixed(4); + + elGravityX.value = properties.gravity.x.toFixed(4); + elGravityY.value = properties.gravity.y.toFixed(4); + elGravityZ.value = properties.gravity.z.toFixed(4); + + elAccelerationX.value = properties.acceleration.x.toFixed(4); + elAccelerationY.value = properties.acceleration.y.toFixed(4); + elAccelerationZ.value = properties.acceleration.z.toFixed(4); + + elDensity.value = properties.density.toFixed(4); + elCollisionless.checked = properties.collisionless; + elDynamic.checked = properties.dynamic; + + elCollideStatic.checked = properties.collidesWith.indexOf("static") > -1; + elCollideKinematic.checked = properties.collidesWith.indexOf("kinematic") > -1; + elCollideDynamic.checked = properties.collidesWith.indexOf("dynamic") > -1; + elCollideMyAvatar.checked = properties.collidesWith.indexOf("myAvatar") > -1; + elCollideOtherAvatar.checked = properties.collidesWith.indexOf("otherAvatar") > -1; + + elGrabbable.checked = properties.dynamic; + elWantsTrigger.checked = false; + elIgnoreIK.checked = false; + var parsedUserData = {} + try { + parsedUserData = JSON.parse(properties.userData); + + if ("grabbableKey" in parsedUserData) { + if ("grabbable" in parsedUserData["grabbableKey"]) { + elGrabbable.checked = parsedUserData["grabbableKey"].grabbable; + } + if ("wantsTrigger" in parsedUserData["grabbableKey"]) { + elWantsTrigger.checked = parsedUserData["grabbableKey"].wantsTrigger; + } + if ("ignoreIK" in parsedUserData["grabbableKey"]) { + elIgnoreIK.checked = parsedUserData["grabbableKey"].ignoreIK; + } + } + } catch(e) {} + + elCollisionSoundURL.value = properties.collisionSoundURL; + elLifetime.value = properties.lifetime; + elScriptURL.value = properties.script; + /* + FIXME: See FIXME for property-script-url. + elScriptTimestamp.value = properties.scriptTimestamp; + */ + elUserData.value = properties.userData; + setTextareaScrolling(elUserData); + + elHyperlinkHref.value = properties.href; + elDescription.value = properties.description; + + for (var i = 0; i < allSections.length; i++) { + for (var j = 0; j < allSections[i].length; j++) { + allSections[i][j].style.display = 'none'; + } + } + + for (var i = 0; i < elHyperlinkSections.length; i++) { + elHyperlinkSections[i].style.display = 'table'; + } + + if (properties.type == "Shape" || properties.type == "Box" || properties.type == "Sphere") { + for (var i = 0; i < elShapeSections.length; i++) { + elShapeSections[i].style.display = 'table'; + } + elShape.value = properties.shape; + setDropdownText(elShape); + + } else { + for (var i = 0; i < elShapeSections.length; i++) { + elShapeSections[i].style.display = 'none'; + } + } + + if (properties.type == "Shape" || properties.type == "Box" || properties.type == "Sphere" || properties.type == "ParticleEffect") { + for (var i = 0; i < elColorSections.length; i++) { + elColorSections[i].style.display = 'table'; + } + elColorRed.value = properties.color.red; + elColorGreen.value = properties.color.green; + elColorBlue.value = properties.color.blue; + elColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; + } else { + for (var i = 0; i < elColorSections.length; i++) { + elColorSections[i].style.display = 'none'; + } + } + + if (properties.type == "Model") { + for (var i = 0; i < elModelSections.length; i++) { + elModelSections[i].style.display = 'table'; + } + + elModelURL.value = properties.modelURL; + elShapeType.value = properties.shapeType; + setDropdownText(elShapeType); + elCompoundShapeURL.value = properties.compoundShapeURL; + elModelAnimationURL.value = properties.animation.url; + elModelAnimationPlaying.checked = properties.animation.running; + elModelAnimationFPS.value = properties.animation.fps; + elModelAnimationFrame.value = properties.animation.currentFrame; + elModelAnimationFirstFrame.value = properties.animation.firstFrame; + elModelAnimationLastFrame.value = properties.animation.lastFrame; + elModelAnimationLoop.checked = properties.animation.loop; + elModelAnimationHold.checked = properties.animation.hold; + elModelTextures.value = properties.textures; + setTextareaScrolling(elModelTextures); + elModelOriginalTextures.value = properties.originalTextures; + setTextareaScrolling(elModelOriginalTextures); + } else if (properties.type == "Web") { + for (var i = 0; i < elWebSections.length; i++) { + elWebSections[i].style.display = 'table'; + } + for (var i = 0; i < elHyperlinkSections.length; i++) { + elHyperlinkSections[i].style.display = 'none'; + } + + elWebSourceURL.value = properties.sourceUrl; + } else if (properties.type == "Text") { + for (var i = 0; i < elTextSections.length; i++) { + elTextSections[i].style.display = 'table'; + } + + elTextText.value = properties.text; + elTextLineHeight.value = properties.lineHeight.toFixed(4); + elTextFaceCamera = properties.faceCamera; + elTextTextColor.style.backgroundColor = "rgb(" + properties.textColor.red + "," + properties.textColor.green + "," + properties.textColor.blue + ")"; + elTextTextColorRed.value = properties.textColor.red; + elTextTextColorGreen.value = properties.textColor.green; + elTextTextColorBlue.value = properties.textColor.blue; + elTextBackgroundColorRed.value = properties.backgroundColor.red; + elTextBackgroundColorGreen.value = properties.backgroundColor.green; + elTextBackgroundColorBlue.value = properties.backgroundColor.blue; + } else if (properties.type == "Light") { + for (var i = 0; i < elLightSections.length; i++) { + elLightSections[i].style.display = 'table'; + } + + elLightSpotLight.checked = properties.isSpotlight; + + elLightColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; + elLightColorRed.value = properties.color.red; + elLightColorGreen.value = properties.color.green; + elLightColorBlue.value = properties.color.blue; + + elLightIntensity.value = properties.intensity.toFixed(1); + elLightFalloffRadius.value = properties.falloffRadius.toFixed(1); + elLightExponent.value = properties.exponent.toFixed(2); + elLightCutoff.value = properties.cutoff.toFixed(2); + } else if (properties.type == "Zone") { + for (var i = 0; i < elZoneSections.length; i++) { + elZoneSections[i].style.display = 'table'; + } + + elZoneStageSunModelEnabled.checked = properties.stage.sunModelEnabled; + elZoneKeyLightColor.style.backgroundColor = "rgb(" + properties.keyLight.color.red + "," + properties.keyLight.color.green + "," + properties.keyLight.color.blue + ")"; + elZoneKeyLightColorRed.value = properties.keyLight.color.red; + elZoneKeyLightColorGreen.value = properties.keyLight.color.green; + elZoneKeyLightColorBlue.value = properties.keyLight.color.blue; + elZoneKeyLightIntensity.value = properties.keyLight.intensity.toFixed(2); + elZoneKeyLightAmbientIntensity.value = properties.keyLight.ambientIntensity.toFixed(2); + elZoneKeyLightDirectionX.value = properties.keyLight.direction.x.toFixed(2); + elZoneKeyLightDirectionY.value = properties.keyLight.direction.y.toFixed(2); + elZoneKeyLightAmbientURL.value = properties.keyLight.ambientURL; + + + elZoneStageLatitude.value = properties.stage.latitude.toFixed(2); + elZoneStageLongitude.value = properties.stage.longitude.toFixed(2); + elZoneStageAltitude.value = properties.stage.altitude.toFixed(2); + elZoneStageAutomaticHourDay.checked = properties.stage.automaticHourDay; + elZoneStageDay.value = properties.stage.day; + elZoneStageHour.value = properties.stage.hour; + elShapeType.value = properties.shapeType; + elCompoundShapeURL.value = properties.compoundShapeURL; + + elZoneBackgroundMode.value = properties.backgroundMode; + setDropdownText(elZoneBackgroundMode); + + elZoneSkyboxColor.style.backgroundColor = "rgb(" + properties.skybox.color.red + "," + properties.skybox.color.green + "," + properties.skybox.color.blue + ")"; + elZoneSkyboxColorRed.value = properties.skybox.color.red; + elZoneSkyboxColorGreen.value = properties.skybox.color.green; + elZoneSkyboxColorBlue.value = properties.skybox.color.blue; + elZoneSkyboxURL.value = properties.skybox.url; + + elZoneFlyingAllowed.checked = properties.flyingAllowed; + elZoneGhostingAllowed.checked = properties.ghostingAllowed; + + showElements(document.getElementsByClassName('skybox-section'), elZoneBackgroundMode.value == 'skybox'); + } else if (properties.type == "PolyVox") { + for (var i = 0; i < elPolyVoxSections.length; i++) { + elPolyVoxSections[i].style.display = 'table'; + } + + elVoxelVolumeSizeX.value = properties.voxelVolumeSize.x.toFixed(2); + elVoxelVolumeSizeY.value = properties.voxelVolumeSize.y.toFixed(2); + elVoxelVolumeSizeZ.value = properties.voxelVolumeSize.z.toFixed(2); + elVoxelSurfaceStyle.value = properties.voxelSurfaceStyle; + setDropdownText(elVoxelSurfaceStyle); + elXTextureURL.value = properties.xTextureURL; + elYTextureURL.value = properties.yTextureURL; + elZTextureURL.value = properties.zTextureURL; + } + + var activeElement = document.activeElement; + + if(typeof activeElement.select!=="undefined"){ + activeElement.select(); + } + } + } + }); + } + + elLocked.addEventListener('change', createEmitCheckedPropertyUpdateFunction('locked')); + elName.addEventListener('change', createEmitTextPropertyUpdateFunction('name')); + elHyperlinkHref.addEventListener('change', createEmitTextPropertyUpdateFunction('href')); + elDescription.addEventListener('change', createEmitTextPropertyUpdateFunction('description')); + elVisible.addEventListener('change', createEmitCheckedPropertyUpdateFunction('visible')); + + var positionChangeFunction = createEmitVec3PropertyUpdateFunction( + 'position', elPositionX, elPositionY, elPositionZ); + elPositionX.addEventListener('change', positionChangeFunction); + elPositionY.addEventListener('change', positionChangeFunction); + elPositionZ.addEventListener('change', positionChangeFunction); + + var dimensionsChangeFunction = createEmitVec3PropertyUpdateFunction( + 'dimensions', elDimensionsX, elDimensionsY, elDimensionsZ); + elDimensionsX.addEventListener('change', dimensionsChangeFunction); + elDimensionsY.addEventListener('change', dimensionsChangeFunction); + elDimensionsZ.addEventListener('change', dimensionsChangeFunction); + + elParentID.addEventListener('change', createEmitTextPropertyUpdateFunction('parentID')); + elParentJointIndex.addEventListener('change', createEmitNumberPropertyUpdateFunction('parentJointIndex')); + + var registrationChangeFunction = createEmitVec3PropertyUpdateFunction( + 'registrationPoint', elRegistrationX, elRegistrationY, elRegistrationZ); + elRegistrationX.addEventListener('change', registrationChangeFunction); + elRegistrationY.addEventListener('change', registrationChangeFunction); + elRegistrationZ.addEventListener('change', registrationChangeFunction); + + var rotationChangeFunction = createEmitVec3PropertyUpdateFunction( + 'rotation', elRotationX, elRotationY, elRotationZ); + elRotationX.addEventListener('change', rotationChangeFunction); + elRotationY.addEventListener('change', rotationChangeFunction); + elRotationZ.addEventListener('change', rotationChangeFunction); + + var velocityChangeFunction = createEmitVec3PropertyUpdateFunction( + 'velocity', elLinearVelocityX, elLinearVelocityY, elLinearVelocityZ); + elLinearVelocityX.addEventListener('change', velocityChangeFunction); + elLinearVelocityY.addEventListener('change', velocityChangeFunction); + elLinearVelocityZ.addEventListener('change', velocityChangeFunction); + elLinearDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('damping')); + + var angularVelocityChangeFunction = createEmitVec3PropertyUpdateFunctionWithMultiplier( + 'angularVelocity', elAngularVelocityX, elAngularVelocityY, elAngularVelocityZ, DEGREES_TO_RADIANS); + elAngularVelocityX.addEventListener('change', angularVelocityChangeFunction); + elAngularVelocityY.addEventListener('change', angularVelocityChangeFunction); + elAngularVelocityZ.addEventListener('change', angularVelocityChangeFunction); + elAngularDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('angularDamping')); + + elRestitution.addEventListener('change', createEmitNumberPropertyUpdateFunction('restitution')); + elFriction.addEventListener('change', createEmitNumberPropertyUpdateFunction('friction')); + + var gravityChangeFunction = createEmitVec3PropertyUpdateFunction( + 'gravity', elGravityX, elGravityY, elGravityZ); + elGravityX.addEventListener('change', gravityChangeFunction); + elGravityY.addEventListener('change', gravityChangeFunction); + elGravityZ.addEventListener('change', gravityChangeFunction); + + var accelerationChangeFunction = createEmitVec3PropertyUpdateFunction( + 'acceleration', elAccelerationX, elAccelerationY, elAccelerationZ); + elAccelerationX.addEventListener('change', accelerationChangeFunction); + elAccelerationY.addEventListener('change', accelerationChangeFunction); + elAccelerationZ.addEventListener('change', accelerationChangeFunction); + + elDensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('density')); + elCollisionless.addEventListener('change', createEmitCheckedPropertyUpdateFunction('collisionless')); + elDynamic.addEventListener('change', createEmitCheckedPropertyUpdateFunction('dynamic')); + + elCollideDynamic.addEventListener('change', function() { + updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideDynamic, 'dynamic'); + }); + + elCollideKinematic.addEventListener('change', function() { + updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideKinematic, 'kinematic'); + }); + + elCollideStatic.addEventListener('change', function() { + updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideStatic, 'static'); + }); + elCollideMyAvatar.addEventListener('change', function() { + updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideMyAvatar, 'myAvatar'); + }); + elCollideOtherAvatar.addEventListener('change', function() { + updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideOtherAvatar, 'otherAvatar'); + }); + + elGrabbable.addEventListener('change', function() { + userDataChanger("grabbableKey", "grabbable", elGrabbable, elUserData, properties.dynamic); + }); + elWantsTrigger.addEventListener('change', function() { + userDataChanger("grabbableKey", "wantsTrigger", elWantsTrigger, elUserData, false); + }); + elIgnoreIK.addEventListener('change', function() { + userDataChanger("grabbableKey", "ignoreIK", elIgnoreIK, elUserData, false); + }); + + elCollisionSoundURL.addEventListener('change', createEmitTextPropertyUpdateFunction('collisionSoundURL')); + + elLifetime.addEventListener('change', createEmitNumberPropertyUpdateFunction('lifetime')); + elScriptURL.addEventListener('change', createEmitTextPropertyUpdateFunction('script')); + /* + FIXME: See FIXME for property-script-url. + elScriptTimestamp.addEventListener('change', createEmitNumberPropertyUpdateFunction('scriptTimestamp')); + */ + elUserData.addEventListener('change', createEmitTextPropertyUpdateFunction('userData')); + + var colorChangeFunction = createEmitColorPropertyUpdateFunction( + 'color', elColorRed, elColorGreen, elColorBlue); + elColorRed.addEventListener('change', colorChangeFunction); + elColorGreen.addEventListener('change', colorChangeFunction); + elColorBlue.addEventListener('change', colorChangeFunction); + colorPickers.push($('#property-color').colpick({ + colorScheme: 'dark', + layout: 'hex', + color: '000000', + onShow: function (colpick) { + $('#property-color').attr('active', 'true'); + }, + onHide: function (colpick) { + $('#property-color').attr('active', 'false'); + }, + onSubmit: function (hsb, hex, rgb, el) { + $(el).css('background-color', '#' + hex); + $(el).colpickHide(); + emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); + } + })); + + elLightSpotLight.addEventListener('change', createEmitCheckedPropertyUpdateFunction('isSpotlight')); + + var lightColorChangeFunction = createEmitColorPropertyUpdateFunction( + 'color', elLightColorRed, elLightColorGreen, elLightColorBlue); + elLightColorRed.addEventListener('change', lightColorChangeFunction); + elLightColorGreen.addEventListener('change', lightColorChangeFunction); + elLightColorBlue.addEventListener('change', lightColorChangeFunction); + colorPickers.push($('#property-light-color').colpick({ + colorScheme: 'dark', + layout: 'hex', + color: '000000', + onShow: function (colpick) { + $('#property-light-color').attr('active', 'true'); + }, + onHide: function (colpick) { + $('#property-light-color').attr('active', 'false'); + }, + onSubmit: function (hsb, hex, rgb, el) { + $(el).css('background-color', '#' + hex); + $(el).colpickHide(); + emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); + } + })); + + elLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('intensity', 1)); + elLightFalloffRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('falloffRadius', 1)); + elLightExponent.addEventListener('change', createEmitNumberPropertyUpdateFunction('exponent', 2)); + elLightCutoff.addEventListener('change', createEmitNumberPropertyUpdateFunction('cutoff', 2)); + + elShape.addEventListener('change', createEmitTextPropertyUpdateFunction('shape')); + + elWebSourceURL.addEventListener('change', createEmitTextPropertyUpdateFunction('sourceUrl')); + + elModelURL.addEventListener('change', createEmitTextPropertyUpdateFunction('modelURL')); + elShapeType.addEventListener('change', createEmitTextPropertyUpdateFunction('shapeType')); + elCompoundShapeURL.addEventListener('change', createEmitTextPropertyUpdateFunction('compoundShapeURL')); + + elModelAnimationURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('animation', 'url')); + elModelAnimationPlaying.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation','running')); + elModelAnimationFPS.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation','fps')); + elModelAnimationFrame.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'currentFrame')); + elModelAnimationFirstFrame.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'firstFrame')); + elModelAnimationLastFrame.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'lastFrame')); + elModelAnimationLoop.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation', 'loop')); + elModelAnimationHold.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation', 'hold')); + + elModelTextures.addEventListener('change', createEmitTextPropertyUpdateFunction('textures')); + + elTextText.addEventListener('change', createEmitTextPropertyUpdateFunction('text')); + elTextFaceCamera.addEventListener('change', createEmitCheckedPropertyUpdateFunction('faceCamera')); + elTextLineHeight.addEventListener('change', createEmitNumberPropertyUpdateFunction('lineHeight')); + var textTextColorChangeFunction = createEmitColorPropertyUpdateFunction( + 'textColor', elTextTextColorRed, elTextTextColorGreen, elTextTextColorBlue); + elTextTextColorRed.addEventListener('change', textTextColorChangeFunction); + elTextTextColorGreen.addEventListener('change', textTextColorChangeFunction); + elTextTextColorBlue.addEventListener('change', textTextColorChangeFunction); + colorPickers.push($('#property-text-text-color').colpick({ + colorScheme:'dark', + layout:'hex', + color: '000000', + onShow: function (colpick) { + $('#property-text-text-color').attr('active', 'true'); + }, + onHide: function (colpick) { + $('#property-text-text-color').attr('active', 'false'); + }, + onSubmit: function (hsb, hex, rgb, el) { + $(el).css('background-color', '#'+hex); + $(el).colpickHide(); + $(el).attr('active', 'false'); + emitColorPropertyUpdate('textColor', rgb.r, rgb.g, rgb.b); + } + })); + + var textBackgroundColorChangeFunction = createEmitColorPropertyUpdateFunction( + 'backgroundColor', elTextBackgroundColorRed, elTextBackgroundColorGreen, elTextBackgroundColorBlue); + elTextBackgroundColorRed.addEventListener('change', textBackgroundColorChangeFunction); + elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction); + elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction); + colorPickers.push($('#property-text-background-color').colpick({ + colorScheme:'dark', + layout:'hex', + color:'000000', + onShow: function (colpick) { + $('#property-text-background-color').attr('active', 'true'); + }, + onHide: function (colpick) { + $('#property-text-background-color').attr('active', 'false'); + }, + onSubmit: function (hsb, hex, rgb, el) { + $(el).css('background-color', '#'+hex); + $(el).colpickHide(); + emitColorPropertyUpdate('backgroundColor', rgb.r, rgb.g, rgb.b); + } + })); + + elZoneStageSunModelEnabled.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('stage','sunModelEnabled')); + colorPickers.push($('#property-zone-key-light-color').colpick({ + colorScheme:'dark', + layout:'hex', + color:'000000', + onShow: function (colpick) { + $('#property-zone-key-light-color').attr('active', 'true'); + }, + onHide: function (colpick) { + $('#property-zone-key-light-color').attr('active', 'false'); + }, + onSubmit: function (hsb, hex, rgb, el) { + $(el).css('background-color', '#'+hex); + $(el).colpickHide(); + emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'keyLight'); + } + })); + var zoneKeyLightColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('keyLight','color', elZoneKeyLightColorRed, elZoneKeyLightColorGreen, elZoneKeyLightColorBlue); + elZoneKeyLightColorRed.addEventListener('change', zoneKeyLightColorChangeFunction); + elZoneKeyLightColorGreen.addEventListener('change', zoneKeyLightColorChangeFunction); + elZoneKeyLightColorBlue.addEventListener('change', zoneKeyLightColorChangeFunction); + elZoneKeyLightIntensity.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('keyLight','intensity')); + elZoneKeyLightAmbientIntensity.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('keyLight','ambientIntensity')); + elZoneKeyLightAmbientURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('keyLight','ambientURL')); + var zoneKeyLightDirectionChangeFunction = createEmitGroupVec3PropertyUpdateFunction('keyLight','direction', elZoneKeyLightDirectionX, elZoneKeyLightDirectionY); + elZoneKeyLightDirectionX.addEventListener('change', zoneKeyLightDirectionChangeFunction); + elZoneKeyLightDirectionY.addEventListener('change', zoneKeyLightDirectionChangeFunction); + + elZoneStageLatitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','latitude')); + elZoneStageLongitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','longitude')); + elZoneStageAltitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','altitude')); + elZoneStageAutomaticHourDay.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('stage','automaticHourDay')); + elZoneStageDay.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','day')); + elZoneStageHour.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','hour')); + + + elZoneBackgroundMode.addEventListener('change', createEmitTextPropertyUpdateFunction('backgroundMode')); + var zoneSkyboxColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('skybox','color', + elZoneSkyboxColorRed, elZoneSkyboxColorGreen, elZoneSkyboxColorBlue); + elZoneSkyboxColorRed.addEventListener('change', zoneSkyboxColorChangeFunction); + elZoneSkyboxColorGreen.addEventListener('change', zoneSkyboxColorChangeFunction); + elZoneSkyboxColorBlue.addEventListener('change', zoneSkyboxColorChangeFunction); + colorPickers.push($('#property-zone-skybox-color').colpick({ + colorScheme:'dark', + layout:'hex', + color:'000000', + onShow: function (colpick) { + $('#property-zone-skybox-color').attr('active', 'true'); + }, + onHide: function (colpick) { + $('#property-zone-skybox-color').attr('active', 'false'); + }, + onSubmit: function (hsb, hex, rgb, el) { + $(el).css('background-color', '#'+hex); + $(el).colpickHide(); + emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'skybox'); + } + })); + + elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox','url')); + + elZoneFlyingAllowed.addEventListener('change', createEmitCheckedPropertyUpdateFunction('flyingAllowed')); + elZoneGhostingAllowed.addEventListener('change', createEmitCheckedPropertyUpdateFunction('ghostingAllowed')); + + var voxelVolumeSizeChangeFunction = createEmitVec3PropertyUpdateFunction( + 'voxelVolumeSize', elVoxelVolumeSizeX, elVoxelVolumeSizeY, elVoxelVolumeSizeZ); + elVoxelVolumeSizeX.addEventListener('change', voxelVolumeSizeChangeFunction); + elVoxelVolumeSizeY.addEventListener('change', voxelVolumeSizeChangeFunction); + elVoxelVolumeSizeZ.addEventListener('change', voxelVolumeSizeChangeFunction); + elVoxelSurfaceStyle.addEventListener('change', createEmitTextPropertyUpdateFunction('voxelSurfaceStyle')); + elXTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('xTextureURL')); + elYTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('yTextureURL')); + elZTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('zTextureURL')); + + elMoveSelectionToGrid.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "moveSelectionToGrid", + })); + }); + elMoveAllToGrid.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "moveAllToGrid", + })); + }); + elResetToNaturalDimensions.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "resetToNaturalDimensions", + })); + }); + elRescaleDimensionsButton.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "rescaleDimensions", + percentage: parseInt(elRescaleDimensionsPct.value), + })); + }); + /* + FIXME: See FIXME for property-script-url. + elReloadScriptButton.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "reloadScript" + })); + }); + */ + elPreviewCameraButton.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "previewCamera" + })); + }); + + window.onblur = function() { + // Fake a change event + var ev = document.createEvent("HTMLEvents"); + ev.initEvent("change", true, true); + document.activeElement.dispatchEvent(ev); + } + + // For input and textarea elements, select all of the text on focus + // WebKit-based browsers, such as is used with QWebView, have a quirk + // where the mouseup event comes after the focus event, causing the + // text to be deselected immediately after selecting all of the text. + // To make this work we block the first mouseup event after the elements + // received focus. If we block all mouseup events the user will not + // be able to click within the selected text. + // We also check to see if the value has changed to make sure we aren't + // blocking a mouse-up event when clicking on an input spinner. + var els = document.querySelectorAll("input, textarea"); + for (var i = 0; i < els.length; i++) { + var clicked = false; + var originalText; + els[i].onfocus = function(e) { + originalText = this.value; + this.select(); + clicked = false; + }; + els[i].onmouseup = function(e) { + if (!clicked && originalText == this.value) { + e.preventDefault(); + } + clicked = true; + }; + } + }); + + // Collapsible sections + var elCollapsible = document.getElementsByClassName("section-header"); + + var toggleCollapsedEvent = function (event) { + var element = event.target; + if (element.nodeName !== "DIV") { + element = element.parentNode; + } + var isCollapsed = element.getAttribute("collapsed") !== "true"; + element.setAttribute("collapsed", isCollapsed ? "true" : "false"); + element.getElementsByTagName("span")[0].textContent = isCollapsed ? "L" : "M"; + }; + + for (var i = 0, length = elCollapsible.length; i < length; i++) { + var element = elCollapsible[i]; + element.addEventListener("click", toggleCollapsedEvent, true); + }; + + + // Textarea scrollbars + var elTextareas = document.getElementsByTagName("TEXTAREA"); + + var textareaOnChangeEvent = function (event) { + setTextareaScrolling(event.target); + } + + for (var i = 0, length = elTextareas.length; i < length; i++) { + var element = elTextareas[i]; + setTextareaScrolling(element); + element.addEventListener("input", textareaOnChangeEvent, false); + element.addEventListener("change", textareaOnChangeEvent, false); + /* FIXME: Detect and update textarea scrolling attribute on resize. Unfortunately textarea doesn't have a resize + event; mouseup is a partial stand-in but doesn't handle resizing if mouse moves outside textarea rectangle. */ + element.addEventListener("mouseup", textareaOnChangeEvent, false); + }; + + // Dropdowns + // For each dropdown the following replacement is created in place of the oriringal dropdown... + // Structure created: + //
    + //
    display textcarat
    + //
    + //
      + //
    • 0) { + var el = elDropdowns[0]; + el.parentNode.removeChild(el); + elDropdowns = document.getElementsByTagName("select"); + } + + augmentSpinButtons(); + + // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked + document.addEventListener("contextmenu", function (event) { + event.preventDefault(); + }, false); +} + diff --git a/scripts/system/html/eventBridgeLoader.js b/scripts/system/html/js/eventBridgeLoader.js similarity index 100% rename from scripts/system/html/eventBridgeLoader.js rename to scripts/system/html/js/eventBridgeLoader.js diff --git a/scripts/system/html/js/gridControls.js b/scripts/system/html/js/gridControls.js new file mode 100644 index 0000000000..cc268bcbff --- /dev/null +++ b/scripts/system/html/js/gridControls.js @@ -0,0 +1,138 @@ +// gridControls.js +// +// Created by Ryan Huffman on 6 Nov 2014 +// Copyright 2014 High Fidelity, Inc. +// +// Distributed under the Apache License, Version 2.0. +// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html + +function loaded() { + openEventBridge(function() { + elPosY = document.getElementById("horiz-y"); + elMinorSpacing = document.getElementById("minor-spacing"); + elMajorSpacing = document.getElementById("major-spacing"); + elSnapToGrid = document.getElementById("snap-to-grid"); + elHorizontalGridVisible = document.getElementById("horiz-grid-visible"); + elMoveToSelection = document.getElementById("move-to-selection"); + elMoveToAvatar = document.getElementById("move-to-avatar"); + + if (window.EventBridge !== undefined) { + EventBridge.scriptEventReceived.connect(function(data) { + data = JSON.parse(data); + + if (data.origin) { + var origin = data.origin; + elPosY.value = origin.y; + } + + if (data.minorGridEvery !== undefined) { + elMinorSpacing.value = data.minorGridEvery; + } + + if (data.majorGridEvery !== undefined) { + elMajorSpacing.value = data.majorGridEvery; + } + + if (data.gridColor) { + gridColor = data.gridColor; + } + + if (data.snapToGrid !== undefined) { + elSnapToGrid.checked = data.snapToGrid == true; + } + + if (data.visible !== undefined) { + elHorizontalGridVisible.checked = data.visible == true; + } + }); + + function emitUpdate() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "update", + origin: { + y: elPosY.value, + }, + minorGridEvery: elMinorSpacing.value, + majorGridEvery: elMajorSpacing.value, + gridColor: gridColor, + snapToGrid: elSnapToGrid.checked, + visible: elHorizontalGridVisible.checked, + })); + } + + } + + elPosY.addEventListener("change", emitUpdate); + elMinorSpacing.addEventListener("change", emitUpdate); + elMajorSpacing.addEventListener("change", emitUpdate); + elSnapToGrid.addEventListener("change", emitUpdate); + elHorizontalGridVisible.addEventListener("change", emitUpdate); + + elMoveToAvatar.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "moveToAvatar", + })); + }); + elMoveToSelection.addEventListener("click", function() { + EventBridge.emitWebEvent(JSON.stringify({ + type: "action", + action: "moveToSelection", + })); + }); + + var gridColor = { red: 255, green: 255, blue: 255 }; + var elColor = document.getElementById("grid-color"); + var elColorRed = document.getElementById("grid-color-red"); + var elColorGreen = document.getElementById("grid-color-green"); + var elColorBlue = document.getElementById("grid-color-blue"); + elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")"; + elColorRed.value = gridColor.red; + elColorGreen.value = gridColor.green; + elColorBlue.value = gridColor.blue; + + var colorChangeFunction = function () { + gridColor = { red: elColorRed.value, green: elColorGreen.value, blue: elColorBlue.value }; + elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")"; + emitUpdate(); + }; + + var colorPickFunction = function (red, green, blue) { + elColorRed.value = red; + elColorGreen.value = green; + elColorBlue.value = blue; + gridColor = { red: red, green: green, blue: blue }; + emitUpdate(); + } + + elColorRed.addEventListener('change', colorChangeFunction); + elColorGreen.addEventListener('change', colorChangeFunction); + elColorBlue.addEventListener('change', colorChangeFunction); + $('#grid-color').colpick({ + colorScheme: 'dark', + layout: 'hex', + color: { r: gridColor.red, g: gridColor.green, b: gridColor.blue }, + onShow: function (colpick) { + $('#grid-color').attr('active', 'true'); + }, + onHide: function (colpick) { + $('#grid-color').attr('active', 'false'); + }, + onSubmit: function (hsb, hex, rgb, el) { + $(el).css('background-color', '#' + hex); + $(el).colpickHide(); + colorPickFunction(rgb.r, rgb.g, rgb.b); + } + }); + + augmentSpinButtons(); + + EventBridge.emitWebEvent(JSON.stringify({ type: 'init' })); + }); + + // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked + document.addEventListener("contextmenu", function (event) { + event.preventDefault(); + }, false); +} + diff --git a/scripts/system/html/jquery-2.1.4.min.js b/scripts/system/html/js/jquery-2.1.4.min.js similarity index 100% rename from scripts/system/html/jquery-2.1.4.min.js rename to scripts/system/html/js/jquery-2.1.4.min.js diff --git a/scripts/system/html/list.min.js b/scripts/system/html/js/list.min.js similarity index 100% rename from scripts/system/html/list.min.js rename to scripts/system/html/js/list.min.js diff --git a/scripts/system/html/spinButtons.js b/scripts/system/html/js/spinButtons.js similarity index 100% rename from scripts/system/html/spinButtons.js rename to scripts/system/html/js/spinButtons.js From d5b822ddbe50fad78a2d17f086f75291e086e8a9 Mon Sep 17 00:00:00 2001 From: Zach Pomerantz Date: Tue, 9 Aug 2016 15:20:56 -0700 Subject: [PATCH 2/2] remove missing camera selectors --- scripts/system/html/entityProperties.js | 1317 -------------------- scripts/system/html/js/entityProperties.js | 8 - 2 files changed, 1325 deletions(-) delete mode 100644 scripts/system/html/entityProperties.js diff --git a/scripts/system/html/entityProperties.js b/scripts/system/html/entityProperties.js deleted file mode 100644 index 490579e909..0000000000 --- a/scripts/system/html/entityProperties.js +++ /dev/null @@ -1,1317 +0,0 @@ -// entityProperties.js -// -// Created by Ryan Huffman on 13 Nov 2014 -// Copyright 2014 High Fidelity, Inc. -// -// Distributed under the Apache License, Version 2.0. -// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html - -var PI = 3.14159265358979; -var DEGREES_TO_RADIANS = PI / 180.0; -var RADIANS_TO_DEGREES = 180.0 / PI; -var ICON_FOR_TYPE = { - Box: "V", - Sphere: "n", - Shape: "n", - ParticleEffect: "", - Model: "", - Web: "q", - Text: "l", - Light: "p", - Zone: "o", - PolyVox: "", - Multiple: "" -} - -var colorPickers = []; - -debugPrint = function(message) { - EventBridge.emitWebEvent( - JSON.stringify({ - type:"print", - message: message - }) - ); -}; - -function enableChildren(el, selector) { - els = el.querySelectorAll(selector); - for (var i = 0; i < els.length; i++) { - els[i].removeAttribute('disabled'); - } -} -function disableChildren(el, selector) { - els = el.querySelectorAll(selector); - for (var i = 0; i < els.length; i++) { - els[i].setAttribute('disabled', 'disabled'); - } -} - -function enableProperties() { - enableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker"); - enableChildren(document, ".colpick"); -} - -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(); - } -} - -function showElements(els, show) { - for (var i = 0; i < els.length; i++) { - els[i].style.display = (show) ? 'table' : 'none'; - } -} - -function createEmitCheckedPropertyUpdateFunction(propertyName) { - return function() { - EventBridge.emitWebEvent( - '{ "type":"update", "properties":{"' + propertyName + '":' + this.checked + '}}' - ); - }; -} - -function createEmitCheckedToStringPropertyUpdateFunction(checkboxElement, name, propertyName) { - var newString = ""; - if (checkboxElement.checked) { - newString += name + ""; - } else { - - } - -} - -function createEmitGroupCheckedPropertyUpdateFunction(group, propertyName) { - return function () { - var properties = {}; - properties[group] = {}; - properties[group][propertyName] = this.checked; - EventBridge.emitWebEvent( - JSON.stringify({ - type: "update", - properties: properties - }) - ); - }; -} - -function createEmitNumberPropertyUpdateFunction(propertyName, decimals) { - decimals = decimals == undefined ? 4 : decimals; - return function() { - var value = parseFloat(this.value).toFixed(decimals); - - EventBridge.emitWebEvent( - '{ "type":"update", "properties":{"' + propertyName + '":' + value + '}}' - ); - }; -} -function createEmitGroupNumberPropertyUpdateFunction(group, propertyName) { - return function() { - var properties = {}; - properties[group] = {}; - properties[group][propertyName] = this.value; - EventBridge.emitWebEvent( - JSON.stringify({ - type: "update", - properties: properties, - }) - ); - }; -} - - -function createEmitTextPropertyUpdateFunction(propertyName) { - return function() { - var properties = {}; - properties[propertyName] = this.value; - EventBridge.emitWebEvent( - JSON.stringify({ - type: "update", - properties: properties, - }) - ); - }; -} - -function createEmitGroupTextPropertyUpdateFunction(group,propertyName) { - return function() { - var properties = {}; - properties[group] = {}; - properties[group][propertyName] = this.value; - EventBridge.emitWebEvent( - JSON.stringify({ - type: "update", - properties: properties, - }) - ); - }; -} - -function createEmitVec3PropertyUpdateFunction(property, elX, elY, elZ) { - return function() { - var data = { - type: "update", - properties: { - } - }; - data.properties[property] = { - x: elX.value, - y: elY.value, - z: elZ.value, - }; - EventBridge.emitWebEvent(JSON.stringify(data)); - } -}; - -function createEmitGroupVec3PropertyUpdateFunction(group, property, elX, elY, elZ) { - return function() { - var data = { - type: "update", - properties: { - } - }; - data.properties[group] = { }; - data.properties[group][property] = { - x: elX.value, - y: elY.value, - z: elZ ? elZ.value : 0, - }; - EventBridge.emitWebEvent(JSON.stringify(data)); - } -}; - -function createEmitVec3PropertyUpdateFunctionWithMultiplier(property, elX, elY, elZ, multiplier) { - return function() { - var data = { - type: "update", - properties: { - } - }; - data.properties[property] = { - x: elX.value * multiplier, - y: elY.value * multiplier, - z: elZ.value * multiplier, - }; - EventBridge.emitWebEvent(JSON.stringify(data)); - } -}; - -function createEmitColorPropertyUpdateFunction(property, elRed, elGreen, elBlue) { - return function() { - emitColorPropertyUpdate(property, elRed.value, elGreen.value, elBlue.value); - } -}; - -function emitColorPropertyUpdate(property, red, green, blue, group) { - var data = { - type: "update", - properties: { - } - }; - if (group) { - data.properties[group] = { }; - data.properties[group][property] = { - red: red, - green: green, - blue: blue, - }; - } else { - data.properties[property] = { - red: red, - green: green, - blue: blue, - }; - } - EventBridge.emitWebEvent(JSON.stringify(data)); -}; - - -function createEmitGroupColorPropertyUpdateFunction(group, property, elRed, elGreen, elBlue) { - return function() { - var data = { - type: "update", - properties: { - } - }; - data.properties[group] = { }; - - data.properties[group][property] = { - red: elRed.value, - green: elGreen.value, - blue: elBlue.value, - }; - EventBridge.emitWebEvent(JSON.stringify(data)); - } -}; - -function updateCheckedSubProperty(propertyName, propertyValue, subPropertyElement, subPropertyString) { - if (subPropertyElement.checked) { - if (propertyValue.indexOf(subPropertyString)) { - propertyValue += subPropertyString + ','; - } - } else { - // We've unchecked, so remove - propertyValue = propertyValue.replace(subPropertyString + ",", ""); - } - - var _properties ={} - _properties[propertyName] = propertyValue; - - EventBridge.emitWebEvent( - JSON.stringify({ - type: "update", - properties: _properties - }) - ); - -} - -function userDataChanger(groupName, keyName, checkBoxElement, userDataElement, defaultValue) { - var properties = {}; - var parsedData = {}; - try { - parsedData = JSON.parse(userDataElement.value); - } catch(e) {} - - if (!(groupName in parsedData)) { - parsedData[groupName] = {} - } - delete parsedData[groupName][keyName]; - if (checkBoxElement.checked !== defaultValue) { - parsedData[groupName][keyName] = checkBoxElement.checked; - } - - if (Object.keys(parsedData[groupName]).length == 0) { - delete parsedData[groupName]; - } - if (Object.keys(parsedData).length > 0) { - properties['userData'] = JSON.stringify(parsedData); - } else { - properties['userData'] = ''; - } - - userDataElement.value = properties['userData']; - - EventBridge.emitWebEvent( - JSON.stringify({ - type: "update", - properties: properties, - }) - ); -}; - -function setTextareaScrolling(element) { - var isScrolling = element.scrollHeight > element.offsetHeight; - element.setAttribute("scrolling", isScrolling ? "true" : "false"); -} - -function loaded() { - openEventBridge(function() { - var allSections = []; - var elID = document.getElementById("property-id"); - var elType = document.getElementById("property-type"); - var elTypeIcon = document.getElementById("type-icon"); - var elName = document.getElementById("property-name"); - var elLocked = document.getElementById("property-locked"); - var elVisible = document.getElementById("property-visible"); - var elPositionX = document.getElementById("property-pos-x"); - var elPositionY = document.getElementById("property-pos-y"); - var elPositionZ = document.getElementById("property-pos-z"); - var elMoveSelectionToGrid = document.getElementById("move-selection-to-grid"); - var elMoveAllToGrid = document.getElementById("move-all-to-grid"); - - var elDimensionsX = document.getElementById("property-dim-x"); - var elDimensionsY = document.getElementById("property-dim-y"); - var elDimensionsZ = document.getElementById("property-dim-z"); - var elResetToNaturalDimensions = document.getElementById("reset-to-natural-dimensions"); - var elRescaleDimensionsPct = document.getElementById("dimension-rescale-pct"); - var elRescaleDimensionsButton = document.getElementById("dimension-rescale-button"); - - var elParentID = document.getElementById("property-parent-id"); - var elParentJointIndex = document.getElementById("property-parent-joint-index"); - - var elRegistrationX = document.getElementById("property-reg-x"); - var elRegistrationY = document.getElementById("property-reg-y"); - var elRegistrationZ = document.getElementById("property-reg-z"); - - var elRotationX = document.getElementById("property-rot-x"); - var elRotationY = document.getElementById("property-rot-y"); - var elRotationZ = document.getElementById("property-rot-z"); - - var elLinearVelocityX = document.getElementById("property-lvel-x"); - var elLinearVelocityY = document.getElementById("property-lvel-y"); - var elLinearVelocityZ = document.getElementById("property-lvel-z"); - var elLinearDamping = document.getElementById("property-ldamping"); - - var elAngularVelocityX = document.getElementById("property-avel-x"); - var elAngularVelocityY = document.getElementById("property-avel-y"); - var elAngularVelocityZ = document.getElementById("property-avel-z"); - var elAngularDamping = document.getElementById("property-adamping"); - - var elRestitution = document.getElementById("property-restitution"); - var elFriction = document.getElementById("property-friction"); - - var elGravityX = document.getElementById("property-grav-x"); - var elGravityY = document.getElementById("property-grav-y"); - var elGravityZ = document.getElementById("property-grav-z"); - - var elAccelerationX = document.getElementById("property-lacc-x"); - var elAccelerationY = document.getElementById("property-lacc-y"); - var elAccelerationZ = document.getElementById("property-lacc-z"); - - var elDensity = document.getElementById("property-density"); - var elCollisionless = document.getElementById("property-collisionless"); - var elDynamic = document.getElementById("property-dynamic" ); - var elCollideStatic = document.getElementById("property-collide-static"); - var elCollideDynamic = document.getElementById("property-collide-dynamic"); - var elCollideKinematic = document.getElementById("property-collide-kinematic"); - var elCollideMyAvatar = document.getElementById("property-collide-myAvatar"); - var elCollideOtherAvatar = document.getElementById("property-collide-otherAvatar"); - var elCollisionSoundURL = document.getElementById("property-collision-sound-url"); - - var elGrabbable = document.getElementById("property-grabbable"); - var elWantsTrigger = document.getElementById("property-wants-trigger"); - var elIgnoreIK = document.getElementById("property-ignore-ik"); - - var elLifetime = document.getElementById("property-lifetime"); - var elScriptURL = document.getElementById("property-script-url"); - /* - FIXME: See FIXME for property-script-url. - var elScriptTimestamp = document.getElementById("property-script-timestamp"); - */ - var elReloadScriptButton = document.getElementById("reload-script-button"); - var elUserData = document.getElementById("property-user-data"); - - var elColorSections = document.querySelectorAll(".color-section"); - var elColor = document.getElementById("property-color"); - var elColorRed = document.getElementById("property-color-red"); - var elColorGreen = document.getElementById("property-color-green"); - var elColorBlue = document.getElementById("property-color-blue"); - - var elShapeSections = document.querySelectorAll(".shape-section"); - allSections.push(elShapeSections); - var elShape = document.getElementById("property-shape"); - - var elLightSections = document.querySelectorAll(".light-section"); - allSections.push(elLightSections); - var elLightSpotLight = document.getElementById("property-light-spot-light"); - var elLightColor = document.getElementById("property-light-color"); - var elLightColorRed = document.getElementById("property-light-color-red"); - var elLightColorGreen = document.getElementById("property-light-color-green"); - var elLightColorBlue = document.getElementById("property-light-color-blue"); - - var elLightIntensity = document.getElementById("property-light-intensity"); - var elLightFalloffRadius = document.getElementById("property-light-falloff-radius"); - var elLightExponent = document.getElementById("property-light-exponent"); - var elLightCutoff = document.getElementById("property-light-cutoff"); - - var elModelSections = document.querySelectorAll(".model-section"); - allSections.push(elModelSections); - var elModelURL = document.getElementById("property-model-url"); - var elShapeType = document.getElementById("property-shape-type"); - var elCompoundShapeURL = document.getElementById("property-compound-shape-url"); - var elModelAnimationURL = document.getElementById("property-model-animation-url"); - var elModelAnimationPlaying = document.getElementById("property-model-animation-playing"); - var elModelAnimationFPS = document.getElementById("property-model-animation-fps"); - var elModelAnimationFrame = document.getElementById("property-model-animation-frame"); - var elModelAnimationFirstFrame = document.getElementById("property-model-animation-first-frame"); - var elModelAnimationLastFrame = document.getElementById("property-model-animation-last-frame"); - var elModelAnimationLoop = document.getElementById("property-model-animation-loop"); - var elModelAnimationHold = document.getElementById("property-model-animation-hold"); - var elModelTextures = document.getElementById("property-model-textures"); - var elModelOriginalTextures = document.getElementById("property-model-original-textures"); - - var elWebSections = document.querySelectorAll(".web-section"); - allSections.push(elWebSections); - var elWebSourceURL = document.getElementById("property-web-source-url"); - - var elDescription = document.getElementById("property-description"); - - var elHyperlinkHref = document.getElementById("property-hyperlink-href"); - - var elHyperlinkSections = document.querySelectorAll(".hyperlink-section"); - - - var elTextSections = document.querySelectorAll(".text-section"); - allSections.push(elTextSections); - var elTextText = document.getElementById("property-text-text"); - var elTextLineHeight = document.getElementById("property-text-line-height"); - var elTextTextColor = document.getElementById("property-text-text-color"); - var elTextFaceCamera = document.getElementById("property-text-face-camera"); - var elTextTextColorRed = document.getElementById("property-text-text-color-red"); - var elTextTextColorGreen = document.getElementById("property-text-text-color-green"); - var elTextTextColorBlue = document.getElementById("property-text-text-color-blue"); - var elTextBackgroundColor = document.getElementById("property-text-background-color"); - var elTextBackgroundColorRed = document.getElementById("property-text-background-color-red"); - var elTextBackgroundColorGreen = document.getElementById("property-text-background-color-green"); - var elTextBackgroundColorBlue = document.getElementById("property-text-background-color-blue"); - - var elZoneSections = document.querySelectorAll(".zone-section"); - allSections.push(elZoneSections); - var elZoneStageSunModelEnabled = document.getElementById("property-zone-stage-sun-model-enabled"); - - var elZoneKeyLightColor = document.getElementById("property-zone-key-light-color"); - var elZoneKeyLightColorRed = document.getElementById("property-zone-key-light-color-red"); - var elZoneKeyLightColorGreen = document.getElementById("property-zone-key-light-color-green"); - var elZoneKeyLightColorBlue = document.getElementById("property-zone-key-light-color-blue"); - var elZoneKeyLightIntensity = document.getElementById("property-zone-key-intensity"); - var elZoneKeyLightAmbientIntensity = document.getElementById("property-zone-key-ambient-intensity"); - var elZoneKeyLightDirectionX = document.getElementById("property-zone-key-light-direction-x"); - var elZoneKeyLightDirectionY = document.getElementById("property-zone-key-light-direction-y"); - var elZoneKeyLightDirectionZ = document.getElementById("property-zone-key-light-direction-z"); - var elZoneKeyLightAmbientURL = document.getElementById("property-zone-key-ambient-url"); - - var elZoneStageLatitude = document.getElementById("property-zone-stage-latitude"); - var elZoneStageLongitude = document.getElementById("property-zone-stage-longitude"); - var elZoneStageAltitude = document.getElementById("property-zone-stage-altitude"); - var elZoneStageAutomaticHourDay = document.getElementById("property-zone-stage-automatic-hour-day"); - var elZoneStageDay = document.getElementById("property-zone-stage-day"); - var elZoneStageHour = document.getElementById("property-zone-stage-hour"); - - var elZoneBackgroundMode = document.getElementById("property-zone-background-mode"); - - var elZoneSkyboxColor = document.getElementById("property-zone-skybox-color"); - var elZoneSkyboxColorRed = document.getElementById("property-zone-skybox-color-red"); - var elZoneSkyboxColorGreen = document.getElementById("property-zone-skybox-color-green"); - var elZoneSkyboxColorBlue = document.getElementById("property-zone-skybox-color-blue"); - var elZoneSkyboxURL = document.getElementById("property-zone-skybox-url"); - - var elZoneFlyingAllowed = document.getElementById("property-zone-flying-allowed"); - var elZoneGhostingAllowed = document.getElementById("property-zone-ghosting-allowed"); - - var elPolyVoxSections = document.querySelectorAll(".poly-vox-section"); - allSections.push(elPolyVoxSections); - var elVoxelVolumeSizeX = document.getElementById("property-voxel-volume-size-x"); - var elVoxelVolumeSizeY = document.getElementById("property-voxel-volume-size-y"); - var elVoxelVolumeSizeZ = document.getElementById("property-voxel-volume-size-z"); - var elVoxelSurfaceStyle = document.getElementById("property-voxel-surface-style"); - var elXTextureURL = document.getElementById("property-x-texture-url"); - var elYTextureURL = document.getElementById("property-y-texture-url"); - var elZTextureURL = document.getElementById("property-z-texture-url"); - - var elPreviewCameraButton = document.getElementById("preview-camera-button"); - - if (window.EventBridge !== undefined) { - var properties; - EventBridge.scriptEventReceived.connect(function(data) { - data = JSON.parse(data); - if (data.type == "update") { - if (data.selections.length == 0) { - elTypeIcon.style.display = "none"; - elType.innerHTML = "No selection"; - elID.innerHTML = ""; - disableProperties(); - } else if (data.selections.length > 1) { - var selections = data.selections; - - var ids = []; - var types = {}; - var numTypes = 0; - - for (var i = 0; i < selections.length; i++) { - ids.push(selections[i].id); - var type = selections[i].properties.type; - if (types[type] === undefined) { - types[type] = 0; - numTypes += 1; - } - types[type]++; - } - - var type; - if (numTypes === 1) { - type = selections[0].properties.type; - } else { - type = "Multiple"; - } - elType.innerHTML = type + " (" + data.selections.length + ")"; - elTypeIcon.innerHTML = ICON_FOR_TYPE[type]; - elTypeIcon.style.display = "inline-block"; - - elID.innerHTML = ids.join("
      "); - - disableProperties(); - } else { - - - properties = data.selections[0].properties; - - elID.innerHTML = properties.id; - - elType.innerHTML = properties.type; - elTypeIcon.innerHTML = ICON_FOR_TYPE[properties.type]; - elTypeIcon.style.display = "inline-block"; - - elLocked.checked = properties.locked; - - if (properties.locked) { - disableProperties(); - elLocked.removeAttribute('disabled'); - } else { - enableProperties(); - } - - elName.value = properties.name; - - elVisible.checked = properties.visible; - - elPositionX.value = properties.position.x.toFixed(4); - elPositionY.value = properties.position.y.toFixed(4); - elPositionZ.value = properties.position.z.toFixed(4); - - elDimensionsX.value = properties.dimensions.x.toFixed(4); - elDimensionsY.value = properties.dimensions.y.toFixed(4); - elDimensionsZ.value = properties.dimensions.z.toFixed(4); - - elParentID.value = properties.parentID; - elParentJointIndex.value = properties.parentJointIndex; - - elRegistrationX.value = properties.registrationPoint.x.toFixed(4); - elRegistrationY.value = properties.registrationPoint.y.toFixed(4); - elRegistrationZ.value = properties.registrationPoint.z.toFixed(4); - - elRotationX.value = properties.rotation.x.toFixed(4); - elRotationY.value = properties.rotation.y.toFixed(4); - elRotationZ.value = properties.rotation.z.toFixed(4); - - elLinearVelocityX.value = properties.velocity.x.toFixed(4); - elLinearVelocityY.value = properties.velocity.y.toFixed(4); - elLinearVelocityZ.value = properties.velocity.z.toFixed(4); - elLinearDamping.value = properties.damping.toFixed(2); - - elAngularVelocityX.value = (properties.angularVelocity.x * RADIANS_TO_DEGREES).toFixed(4); - elAngularVelocityY.value = (properties.angularVelocity.y * RADIANS_TO_DEGREES).toFixed(4); - elAngularVelocityZ.value = (properties.angularVelocity.z * RADIANS_TO_DEGREES).toFixed(4); - elAngularDamping.value = properties.angularDamping.toFixed(4); - - elRestitution.value = properties.restitution.toFixed(4); - elFriction.value = properties.friction.toFixed(4); - - elGravityX.value = properties.gravity.x.toFixed(4); - elGravityY.value = properties.gravity.y.toFixed(4); - elGravityZ.value = properties.gravity.z.toFixed(4); - - elAccelerationX.value = properties.acceleration.x.toFixed(4); - elAccelerationY.value = properties.acceleration.y.toFixed(4); - elAccelerationZ.value = properties.acceleration.z.toFixed(4); - - elDensity.value = properties.density.toFixed(4); - elCollisionless.checked = properties.collisionless; - elDynamic.checked = properties.dynamic; - - elCollideStatic.checked = properties.collidesWith.indexOf("static") > -1; - elCollideKinematic.checked = properties.collidesWith.indexOf("kinematic") > -1; - elCollideDynamic.checked = properties.collidesWith.indexOf("dynamic") > -1; - elCollideMyAvatar.checked = properties.collidesWith.indexOf("myAvatar") > -1; - elCollideOtherAvatar.checked = properties.collidesWith.indexOf("otherAvatar") > -1; - - elGrabbable.checked = properties.dynamic; - elWantsTrigger.checked = false; - elIgnoreIK.checked = false; - var parsedUserData = {} - try { - parsedUserData = JSON.parse(properties.userData); - - if ("grabbableKey" in parsedUserData) { - if ("grabbable" in parsedUserData["grabbableKey"]) { - elGrabbable.checked = parsedUserData["grabbableKey"].grabbable; - } - if ("wantsTrigger" in parsedUserData["grabbableKey"]) { - elWantsTrigger.checked = parsedUserData["grabbableKey"].wantsTrigger; - } - if ("ignoreIK" in parsedUserData["grabbableKey"]) { - elIgnoreIK.checked = parsedUserData["grabbableKey"].ignoreIK; - } - } - } catch(e) {} - - elCollisionSoundURL.value = properties.collisionSoundURL; - elLifetime.value = properties.lifetime; - elScriptURL.value = properties.script; - /* - FIXME: See FIXME for property-script-url. - elScriptTimestamp.value = properties.scriptTimestamp; - */ - elUserData.value = properties.userData; - setTextareaScrolling(elUserData); - - elHyperlinkHref.value = properties.href; - elDescription.value = properties.description; - - for (var i = 0; i < allSections.length; i++) { - for (var j = 0; j < allSections[i].length; j++) { - allSections[i][j].style.display = 'none'; - } - } - - for (var i = 0; i < elHyperlinkSections.length; i++) { - elHyperlinkSections[i].style.display = 'table'; - } - - if (properties.type == "Shape" || properties.type == "Box" || properties.type == "Sphere") { - for (var i = 0; i < elShapeSections.length; i++) { - elShapeSections[i].style.display = 'table'; - } - elShape.value = properties.shape; - setDropdownText(elShape); - - } else { - for (var i = 0; i < elShapeSections.length; i++) { - elShapeSections[i].style.display = 'none'; - } - } - - if (properties.type == "Shape" || properties.type == "Box" || properties.type == "Sphere" || properties.type == "ParticleEffect") { - for (var i = 0; i < elColorSections.length; i++) { - elColorSections[i].style.display = 'table'; - } - elColorRed.value = properties.color.red; - elColorGreen.value = properties.color.green; - elColorBlue.value = properties.color.blue; - elColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; - } else { - for (var i = 0; i < elColorSections.length; i++) { - elColorSections[i].style.display = 'none'; - } - } - - if (properties.type == "Model") { - for (var i = 0; i < elModelSections.length; i++) { - elModelSections[i].style.display = 'table'; - } - - elModelURL.value = properties.modelURL; - elShapeType.value = properties.shapeType; - setDropdownText(elShapeType); - elCompoundShapeURL.value = properties.compoundShapeURL; - elModelAnimationURL.value = properties.animation.url; - elModelAnimationPlaying.checked = properties.animation.running; - elModelAnimationFPS.value = properties.animation.fps; - elModelAnimationFrame.value = properties.animation.currentFrame; - elModelAnimationFirstFrame.value = properties.animation.firstFrame; - elModelAnimationLastFrame.value = properties.animation.lastFrame; - elModelAnimationLoop.checked = properties.animation.loop; - elModelAnimationHold.checked = properties.animation.hold; - elModelTextures.value = properties.textures; - setTextareaScrolling(elModelTextures); - elModelOriginalTextures.value = properties.originalTextures; - setTextareaScrolling(elModelOriginalTextures); - } else if (properties.type == "Web") { - for (var i = 0; i < elWebSections.length; i++) { - elWebSections[i].style.display = 'table'; - } - for (var i = 0; i < elHyperlinkSections.length; i++) { - elHyperlinkSections[i].style.display = 'none'; - } - - elWebSourceURL.value = properties.sourceUrl; - } else if (properties.type == "Text") { - for (var i = 0; i < elTextSections.length; i++) { - elTextSections[i].style.display = 'table'; - } - - elTextText.value = properties.text; - elTextLineHeight.value = properties.lineHeight.toFixed(4); - elTextFaceCamera = properties.faceCamera; - elTextTextColor.style.backgroundColor = "rgb(" + properties.textColor.red + "," + properties.textColor.green + "," + properties.textColor.blue + ")"; - elTextTextColorRed.value = properties.textColor.red; - elTextTextColorGreen.value = properties.textColor.green; - elTextTextColorBlue.value = properties.textColor.blue; - elTextBackgroundColorRed.value = properties.backgroundColor.red; - elTextBackgroundColorGreen.value = properties.backgroundColor.green; - elTextBackgroundColorBlue.value = properties.backgroundColor.blue; - } else if (properties.type == "Light") { - for (var i = 0; i < elLightSections.length; i++) { - elLightSections[i].style.display = 'table'; - } - - elLightSpotLight.checked = properties.isSpotlight; - - elLightColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; - elLightColorRed.value = properties.color.red; - elLightColorGreen.value = properties.color.green; - elLightColorBlue.value = properties.color.blue; - - elLightIntensity.value = properties.intensity.toFixed(1); - elLightFalloffRadius.value = properties.falloffRadius.toFixed(1); - elLightExponent.value = properties.exponent.toFixed(2); - elLightCutoff.value = properties.cutoff.toFixed(2); - } else if (properties.type == "Zone") { - for (var i = 0; i < elZoneSections.length; i++) { - elZoneSections[i].style.display = 'table'; - } - - elZoneStageSunModelEnabled.checked = properties.stage.sunModelEnabled; - elZoneKeyLightColor.style.backgroundColor = "rgb(" + properties.keyLight.color.red + "," + properties.keyLight.color.green + "," + properties.keyLight.color.blue + ")"; - elZoneKeyLightColorRed.value = properties.keyLight.color.red; - elZoneKeyLightColorGreen.value = properties.keyLight.color.green; - elZoneKeyLightColorBlue.value = properties.keyLight.color.blue; - elZoneKeyLightIntensity.value = properties.keyLight.intensity.toFixed(2); - elZoneKeyLightAmbientIntensity.value = properties.keyLight.ambientIntensity.toFixed(2); - elZoneKeyLightDirectionX.value = properties.keyLight.direction.x.toFixed(2); - elZoneKeyLightDirectionY.value = properties.keyLight.direction.y.toFixed(2); - elZoneKeyLightAmbientURL.value = properties.keyLight.ambientURL; - - - elZoneStageLatitude.value = properties.stage.latitude.toFixed(2); - elZoneStageLongitude.value = properties.stage.longitude.toFixed(2); - elZoneStageAltitude.value = properties.stage.altitude.toFixed(2); - elZoneStageAutomaticHourDay.checked = properties.stage.automaticHourDay; - elZoneStageDay.value = properties.stage.day; - elZoneStageHour.value = properties.stage.hour; - elShapeType.value = properties.shapeType; - elCompoundShapeURL.value = properties.compoundShapeURL; - - elZoneBackgroundMode.value = properties.backgroundMode; - setDropdownText(elZoneBackgroundMode); - - elZoneSkyboxColor.style.backgroundColor = "rgb(" + properties.skybox.color.red + "," + properties.skybox.color.green + "," + properties.skybox.color.blue + ")"; - elZoneSkyboxColorRed.value = properties.skybox.color.red; - elZoneSkyboxColorGreen.value = properties.skybox.color.green; - elZoneSkyboxColorBlue.value = properties.skybox.color.blue; - elZoneSkyboxURL.value = properties.skybox.url; - - elZoneFlyingAllowed.checked = properties.flyingAllowed; - elZoneGhostingAllowed.checked = properties.ghostingAllowed; - - showElements(document.getElementsByClassName('skybox-section'), elZoneBackgroundMode.value == 'skybox'); - } else if (properties.type == "PolyVox") { - for (var i = 0; i < elPolyVoxSections.length; i++) { - elPolyVoxSections[i].style.display = 'table'; - } - - elVoxelVolumeSizeX.value = properties.voxelVolumeSize.x.toFixed(2); - elVoxelVolumeSizeY.value = properties.voxelVolumeSize.y.toFixed(2); - elVoxelVolumeSizeZ.value = properties.voxelVolumeSize.z.toFixed(2); - elVoxelSurfaceStyle.value = properties.voxelSurfaceStyle; - setDropdownText(elVoxelSurfaceStyle); - elXTextureURL.value = properties.xTextureURL; - elYTextureURL.value = properties.yTextureURL; - elZTextureURL.value = properties.zTextureURL; - } - - var activeElement = document.activeElement; - - if(typeof activeElement.select!=="undefined"){ - activeElement.select(); - } - } - } - }); - } - - elLocked.addEventListener('change', createEmitCheckedPropertyUpdateFunction('locked')); - elName.addEventListener('change', createEmitTextPropertyUpdateFunction('name')); - elHyperlinkHref.addEventListener('change', createEmitTextPropertyUpdateFunction('href')); - elDescription.addEventListener('change', createEmitTextPropertyUpdateFunction('description')); - elVisible.addEventListener('change', createEmitCheckedPropertyUpdateFunction('visible')); - - var positionChangeFunction = createEmitVec3PropertyUpdateFunction( - 'position', elPositionX, elPositionY, elPositionZ); - elPositionX.addEventListener('change', positionChangeFunction); - elPositionY.addEventListener('change', positionChangeFunction); - elPositionZ.addEventListener('change', positionChangeFunction); - - var dimensionsChangeFunction = createEmitVec3PropertyUpdateFunction( - 'dimensions', elDimensionsX, elDimensionsY, elDimensionsZ); - elDimensionsX.addEventListener('change', dimensionsChangeFunction); - elDimensionsY.addEventListener('change', dimensionsChangeFunction); - elDimensionsZ.addEventListener('change', dimensionsChangeFunction); - - elParentID.addEventListener('change', createEmitTextPropertyUpdateFunction('parentID')); - elParentJointIndex.addEventListener('change', createEmitNumberPropertyUpdateFunction('parentJointIndex')); - - var registrationChangeFunction = createEmitVec3PropertyUpdateFunction( - 'registrationPoint', elRegistrationX, elRegistrationY, elRegistrationZ); - elRegistrationX.addEventListener('change', registrationChangeFunction); - elRegistrationY.addEventListener('change', registrationChangeFunction); - elRegistrationZ.addEventListener('change', registrationChangeFunction); - - var rotationChangeFunction = createEmitVec3PropertyUpdateFunction( - 'rotation', elRotationX, elRotationY, elRotationZ); - elRotationX.addEventListener('change', rotationChangeFunction); - elRotationY.addEventListener('change', rotationChangeFunction); - elRotationZ.addEventListener('change', rotationChangeFunction); - - var velocityChangeFunction = createEmitVec3PropertyUpdateFunction( - 'velocity', elLinearVelocityX, elLinearVelocityY, elLinearVelocityZ); - elLinearVelocityX.addEventListener('change', velocityChangeFunction); - elLinearVelocityY.addEventListener('change', velocityChangeFunction); - elLinearVelocityZ.addEventListener('change', velocityChangeFunction); - elLinearDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('damping')); - - var angularVelocityChangeFunction = createEmitVec3PropertyUpdateFunctionWithMultiplier( - 'angularVelocity', elAngularVelocityX, elAngularVelocityY, elAngularVelocityZ, DEGREES_TO_RADIANS); - elAngularVelocityX.addEventListener('change', angularVelocityChangeFunction); - elAngularVelocityY.addEventListener('change', angularVelocityChangeFunction); - elAngularVelocityZ.addEventListener('change', angularVelocityChangeFunction); - elAngularDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('angularDamping')); - - elRestitution.addEventListener('change', createEmitNumberPropertyUpdateFunction('restitution')); - elFriction.addEventListener('change', createEmitNumberPropertyUpdateFunction('friction')); - - var gravityChangeFunction = createEmitVec3PropertyUpdateFunction( - 'gravity', elGravityX, elGravityY, elGravityZ); - elGravityX.addEventListener('change', gravityChangeFunction); - elGravityY.addEventListener('change', gravityChangeFunction); - elGravityZ.addEventListener('change', gravityChangeFunction); - - var accelerationChangeFunction = createEmitVec3PropertyUpdateFunction( - 'acceleration', elAccelerationX, elAccelerationY, elAccelerationZ); - elAccelerationX.addEventListener('change', accelerationChangeFunction); - elAccelerationY.addEventListener('change', accelerationChangeFunction); - elAccelerationZ.addEventListener('change', accelerationChangeFunction); - - elDensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('density')); - elCollisionless.addEventListener('change', createEmitCheckedPropertyUpdateFunction('collisionless')); - elDynamic.addEventListener('change', createEmitCheckedPropertyUpdateFunction('dynamic')); - - elCollideDynamic.addEventListener('change', function() { - updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideDynamic, 'dynamic'); - }); - - elCollideKinematic.addEventListener('change', function() { - updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideKinematic, 'kinematic'); - }); - - elCollideStatic.addEventListener('change', function() { - updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideStatic, 'static'); - }); - elCollideMyAvatar.addEventListener('change', function() { - updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideMyAvatar, 'myAvatar'); - }); - elCollideOtherAvatar.addEventListener('change', function() { - updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideOtherAvatar, 'otherAvatar'); - }); - - elGrabbable.addEventListener('change', function() { - userDataChanger("grabbableKey", "grabbable", elGrabbable, elUserData, properties.dynamic); - }); - elWantsTrigger.addEventListener('change', function() { - userDataChanger("grabbableKey", "wantsTrigger", elWantsTrigger, elUserData, false); - }); - elIgnoreIK.addEventListener('change', function() { - userDataChanger("grabbableKey", "ignoreIK", elIgnoreIK, elUserData, false); - }); - - elCollisionSoundURL.addEventListener('change', createEmitTextPropertyUpdateFunction('collisionSoundURL')); - - elLifetime.addEventListener('change', createEmitNumberPropertyUpdateFunction('lifetime')); - elScriptURL.addEventListener('change', createEmitTextPropertyUpdateFunction('script')); - /* - FIXME: See FIXME for property-script-url. - elScriptTimestamp.addEventListener('change', createEmitNumberPropertyUpdateFunction('scriptTimestamp')); - */ - elUserData.addEventListener('change', createEmitTextPropertyUpdateFunction('userData')); - - var colorChangeFunction = createEmitColorPropertyUpdateFunction( - 'color', elColorRed, elColorGreen, elColorBlue); - elColorRed.addEventListener('change', colorChangeFunction); - elColorGreen.addEventListener('change', colorChangeFunction); - elColorBlue.addEventListener('change', colorChangeFunction); - colorPickers.push($('#property-color').colpick({ - colorScheme: 'dark', - layout: 'hex', - color: '000000', - onShow: function (colpick) { - $('#property-color').attr('active', 'true'); - }, - onHide: function (colpick) { - $('#property-color').attr('active', 'false'); - }, - onSubmit: function (hsb, hex, rgb, el) { - $(el).css('background-color', '#' + hex); - $(el).colpickHide(); - emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); - } - })); - - elLightSpotLight.addEventListener('change', createEmitCheckedPropertyUpdateFunction('isSpotlight')); - - var lightColorChangeFunction = createEmitColorPropertyUpdateFunction( - 'color', elLightColorRed, elLightColorGreen, elLightColorBlue); - elLightColorRed.addEventListener('change', lightColorChangeFunction); - elLightColorGreen.addEventListener('change', lightColorChangeFunction); - elLightColorBlue.addEventListener('change', lightColorChangeFunction); - colorPickers.push($('#property-light-color').colpick({ - colorScheme: 'dark', - layout: 'hex', - color: '000000', - onShow: function (colpick) { - $('#property-light-color').attr('active', 'true'); - }, - onHide: function (colpick) { - $('#property-light-color').attr('active', 'false'); - }, - onSubmit: function (hsb, hex, rgb, el) { - $(el).css('background-color', '#' + hex); - $(el).colpickHide(); - emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); - } - })); - - elLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('intensity', 1)); - elLightFalloffRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('falloffRadius', 1)); - elLightExponent.addEventListener('change', createEmitNumberPropertyUpdateFunction('exponent', 2)); - elLightCutoff.addEventListener('change', createEmitNumberPropertyUpdateFunction('cutoff', 2)); - - elShape.addEventListener('change', createEmitTextPropertyUpdateFunction('shape')); - - elWebSourceURL.addEventListener('change', createEmitTextPropertyUpdateFunction('sourceUrl')); - - elModelURL.addEventListener('change', createEmitTextPropertyUpdateFunction('modelURL')); - elShapeType.addEventListener('change', createEmitTextPropertyUpdateFunction('shapeType')); - elCompoundShapeURL.addEventListener('change', createEmitTextPropertyUpdateFunction('compoundShapeURL')); - - elModelAnimationURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('animation', 'url')); - elModelAnimationPlaying.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation','running')); - elModelAnimationFPS.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation','fps')); - elModelAnimationFrame.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'currentFrame')); - elModelAnimationFirstFrame.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'firstFrame')); - elModelAnimationLastFrame.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'lastFrame')); - elModelAnimationLoop.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation', 'loop')); - elModelAnimationHold.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation', 'hold')); - - elModelTextures.addEventListener('change', createEmitTextPropertyUpdateFunction('textures')); - - elTextText.addEventListener('change', createEmitTextPropertyUpdateFunction('text')); - elTextFaceCamera.addEventListener('change', createEmitCheckedPropertyUpdateFunction('faceCamera')); - elTextLineHeight.addEventListener('change', createEmitNumberPropertyUpdateFunction('lineHeight')); - var textTextColorChangeFunction = createEmitColorPropertyUpdateFunction( - 'textColor', elTextTextColorRed, elTextTextColorGreen, elTextTextColorBlue); - elTextTextColorRed.addEventListener('change', textTextColorChangeFunction); - elTextTextColorGreen.addEventListener('change', textTextColorChangeFunction); - elTextTextColorBlue.addEventListener('change', textTextColorChangeFunction); - colorPickers.push($('#property-text-text-color').colpick({ - colorScheme:'dark', - layout:'hex', - color: '000000', - onShow: function (colpick) { - $('#property-text-text-color').attr('active', 'true'); - }, - onHide: function (colpick) { - $('#property-text-text-color').attr('active', 'false'); - }, - onSubmit: function (hsb, hex, rgb, el) { - $(el).css('background-color', '#'+hex); - $(el).colpickHide(); - $(el).attr('active', 'false'); - emitColorPropertyUpdate('textColor', rgb.r, rgb.g, rgb.b); - } - })); - - var textBackgroundColorChangeFunction = createEmitColorPropertyUpdateFunction( - 'backgroundColor', elTextBackgroundColorRed, elTextBackgroundColorGreen, elTextBackgroundColorBlue); - elTextBackgroundColorRed.addEventListener('change', textBackgroundColorChangeFunction); - elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction); - elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction); - colorPickers.push($('#property-text-background-color').colpick({ - colorScheme:'dark', - layout:'hex', - color:'000000', - onShow: function (colpick) { - $('#property-text-background-color').attr('active', 'true'); - }, - onHide: function (colpick) { - $('#property-text-background-color').attr('active', 'false'); - }, - onSubmit: function (hsb, hex, rgb, el) { - $(el).css('background-color', '#'+hex); - $(el).colpickHide(); - emitColorPropertyUpdate('backgroundColor', rgb.r, rgb.g, rgb.b); - } - })); - - elZoneStageSunModelEnabled.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('stage','sunModelEnabled')); - colorPickers.push($('#property-zone-key-light-color').colpick({ - colorScheme:'dark', - layout:'hex', - color:'000000', - onShow: function (colpick) { - $('#property-zone-key-light-color').attr('active', 'true'); - }, - onHide: function (colpick) { - $('#property-zone-key-light-color').attr('active', 'false'); - }, - onSubmit: function (hsb, hex, rgb, el) { - $(el).css('background-color', '#'+hex); - $(el).colpickHide(); - emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'keyLight'); - } - })); - var zoneKeyLightColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('keyLight','color', elZoneKeyLightColorRed, elZoneKeyLightColorGreen, elZoneKeyLightColorBlue); - elZoneKeyLightColorRed.addEventListener('change', zoneKeyLightColorChangeFunction); - elZoneKeyLightColorGreen.addEventListener('change', zoneKeyLightColorChangeFunction); - elZoneKeyLightColorBlue.addEventListener('change', zoneKeyLightColorChangeFunction); - elZoneKeyLightIntensity.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('keyLight','intensity')); - elZoneKeyLightAmbientIntensity.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('keyLight','ambientIntensity')); - elZoneKeyLightAmbientURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('keyLight','ambientURL')); - var zoneKeyLightDirectionChangeFunction = createEmitGroupVec3PropertyUpdateFunction('keyLight','direction', elZoneKeyLightDirectionX, elZoneKeyLightDirectionY); - elZoneKeyLightDirectionX.addEventListener('change', zoneKeyLightDirectionChangeFunction); - elZoneKeyLightDirectionY.addEventListener('change', zoneKeyLightDirectionChangeFunction); - - elZoneStageLatitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','latitude')); - elZoneStageLongitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','longitude')); - elZoneStageAltitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','altitude')); - elZoneStageAutomaticHourDay.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('stage','automaticHourDay')); - elZoneStageDay.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','day')); - elZoneStageHour.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','hour')); - - - elZoneBackgroundMode.addEventListener('change', createEmitTextPropertyUpdateFunction('backgroundMode')); - var zoneSkyboxColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('skybox','color', - elZoneSkyboxColorRed, elZoneSkyboxColorGreen, elZoneSkyboxColorBlue); - elZoneSkyboxColorRed.addEventListener('change', zoneSkyboxColorChangeFunction); - elZoneSkyboxColorGreen.addEventListener('change', zoneSkyboxColorChangeFunction); - elZoneSkyboxColorBlue.addEventListener('change', zoneSkyboxColorChangeFunction); - colorPickers.push($('#property-zone-skybox-color').colpick({ - colorScheme:'dark', - layout:'hex', - color:'000000', - onShow: function (colpick) { - $('#property-zone-skybox-color').attr('active', 'true'); - }, - onHide: function (colpick) { - $('#property-zone-skybox-color').attr('active', 'false'); - }, - onSubmit: function (hsb, hex, rgb, el) { - $(el).css('background-color', '#'+hex); - $(el).colpickHide(); - emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'skybox'); - } - })); - - elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox','url')); - - elZoneFlyingAllowed.addEventListener('change', createEmitCheckedPropertyUpdateFunction('flyingAllowed')); - elZoneGhostingAllowed.addEventListener('change', createEmitCheckedPropertyUpdateFunction('ghostingAllowed')); - - var voxelVolumeSizeChangeFunction = createEmitVec3PropertyUpdateFunction( - 'voxelVolumeSize', elVoxelVolumeSizeX, elVoxelVolumeSizeY, elVoxelVolumeSizeZ); - elVoxelVolumeSizeX.addEventListener('change', voxelVolumeSizeChangeFunction); - elVoxelVolumeSizeY.addEventListener('change', voxelVolumeSizeChangeFunction); - elVoxelVolumeSizeZ.addEventListener('change', voxelVolumeSizeChangeFunction); - elVoxelSurfaceStyle.addEventListener('change', createEmitTextPropertyUpdateFunction('voxelSurfaceStyle')); - elXTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('xTextureURL')); - elYTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('yTextureURL')); - elZTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('zTextureURL')); - - elMoveSelectionToGrid.addEventListener("click", function() { - EventBridge.emitWebEvent(JSON.stringify({ - type: "action", - action: "moveSelectionToGrid", - })); - }); - elMoveAllToGrid.addEventListener("click", function() { - EventBridge.emitWebEvent(JSON.stringify({ - type: "action", - action: "moveAllToGrid", - })); - }); - elResetToNaturalDimensions.addEventListener("click", function() { - EventBridge.emitWebEvent(JSON.stringify({ - type: "action", - action: "resetToNaturalDimensions", - })); - }); - elRescaleDimensionsButton.addEventListener("click", function() { - EventBridge.emitWebEvent(JSON.stringify({ - type: "action", - action: "rescaleDimensions", - percentage: parseInt(elRescaleDimensionsPct.value), - })); - }); - /* - FIXME: See FIXME for property-script-url. - elReloadScriptButton.addEventListener("click", function() { - EventBridge.emitWebEvent(JSON.stringify({ - type: "action", - action: "reloadScript" - })); - }); - */ - elPreviewCameraButton.addEventListener("click", function() { - EventBridge.emitWebEvent(JSON.stringify({ - type: "action", - action: "previewCamera" - })); - }); - - window.onblur = function() { - // Fake a change event - var ev = document.createEvent("HTMLEvents"); - ev.initEvent("change", true, true); - document.activeElement.dispatchEvent(ev); - } - - // For input and textarea elements, select all of the text on focus - // WebKit-based browsers, such as is used with QWebView, have a quirk - // where the mouseup event comes after the focus event, causing the - // text to be deselected immediately after selecting all of the text. - // To make this work we block the first mouseup event after the elements - // received focus. If we block all mouseup events the user will not - // be able to click within the selected text. - // We also check to see if the value has changed to make sure we aren't - // blocking a mouse-up event when clicking on an input spinner. - var els = document.querySelectorAll("input, textarea"); - for (var i = 0; i < els.length; i++) { - var clicked = false; - var originalText; - els[i].onfocus = function(e) { - originalText = this.value; - this.select(); - clicked = false; - }; - els[i].onmouseup = function(e) { - if (!clicked && originalText == this.value) { - e.preventDefault(); - } - clicked = true; - }; - } - }); - - // Collapsible sections - var elCollapsible = document.getElementsByClassName("section-header"); - - var toggleCollapsedEvent = function (event) { - var element = event.target; - if (element.nodeName !== "DIV") { - element = element.parentNode; - } - var isCollapsed = element.getAttribute("collapsed") !== "true"; - element.setAttribute("collapsed", isCollapsed ? "true" : "false"); - element.getElementsByTagName("span")[0].textContent = isCollapsed ? "L" : "M"; - }; - - for (var i = 0, length = elCollapsible.length; i < length; i++) { - var element = elCollapsible[i]; - element.addEventListener("click", toggleCollapsedEvent, true); - }; - - - // Textarea scrollbars - var elTextareas = document.getElementsByTagName("TEXTAREA"); - - var textareaOnChangeEvent = function (event) { - setTextareaScrolling(event.target); - } - - for (var i = 0, length = elTextareas.length; i < length; i++) { - var element = elTextareas[i]; - setTextareaScrolling(element); - element.addEventListener("input", textareaOnChangeEvent, false); - element.addEventListener("change", textareaOnChangeEvent, false); - /* FIXME: Detect and update textarea scrolling attribute on resize. Unfortunately textarea doesn't have a resize - event; mouseup is a partial stand-in but doesn't handle resizing if mouse moves outside textarea rectangle. */ - element.addEventListener("mouseup", textareaOnChangeEvent, false); - }; - - // Dropdowns - // For each dropdown the following replacement is created in place of the oriringal dropdown... - // Structure created: - //
      - //
      display textcarat
      - //
      - //
        - //
      • 0) { - var el = elDropdowns[0]; - el.parentNode.removeChild(el); - elDropdowns = document.getElementsByTagName("select"); - } - - augmentSpinButtons(); - - // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked - document.addEventListener("contextmenu", function (event) { - event.preventDefault(); - }, false); -} - diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js index 490579e909..5898f85e90 100644 --- a/scripts/system/html/js/entityProperties.js +++ b/scripts/system/html/js/entityProperties.js @@ -492,8 +492,6 @@ function loaded() { var elYTextureURL = document.getElementById("property-y-texture-url"); var elZTextureURL = document.getElementById("property-z-texture-url"); - var elPreviewCameraButton = document.getElementById("preview-camera-button"); - if (window.EventBridge !== undefined) { var properties; EventBridge.scriptEventReceived.connect(function(data) { @@ -1133,12 +1131,6 @@ function loaded() { })); }); */ - elPreviewCameraButton.addEventListener("click", function() { - EventBridge.emitWebEvent(JSON.stringify({ - type: "action", - action: "previewCamera" - })); - }); window.onblur = function() { // Fake a change event