Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-06 17:29:47 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

21356 - Reorder Edit.js

Browse source 
Made changes to the 3 sub files for the properties tabs. Although
visually the exiting menu looked like it was in different sections,
structurally it was all just one run of item after item, with a fair
amount of div-itis. I added in fieldsets to provide true groups and
replaced much of the div-ities with aditional feidlsets as they are the
smeantic element to use here.
This commit is contained in:
jmo 2017-07-10 15:49:26 -06:00
parent d957b970dd
commit a2b1b2e0f9
3 changed files with 1007 additions and 550 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

412
scripts/system/html/css/edit-style.css
View file

@ -449,8 +449,68 @@ input[type=checkbox]:checked + label:hover {
border: 1.5pt solid black; border: 1.5pt solid black;
} }
.shape-section, .light-section, .model-section, .web-section, .hyperlink-section, .text-section, .zone-section {
display: table;
}
.section-header, .sub-section-header, hr {
#properties-list fieldset {
position: relative;
/* 0.1px on the top is to prevent margin collapsing between this and it's first child */
margin: 21px -21px 0px -21px;
padding: 0.1px 21px 0px 21px;
border: none;
border-top: 1px rgb(90,90,90) solid;
box-shadow: 0px -1px 0px rgb(37,37,37);
}
#properties-list fieldset.fstuple, #properties-list fieldset.fsrow {
margin-top: 21px;
border: none;
box-shadow: none;
}
#properties-list > fieldset[data-collapsed="true"] + fieldset {
margin-top: 0px;
}
#properties-list > fieldset[data-collapsed="true"] > *:not(legend) {
display: none !important;
}
#properties-list legend + fieldset {
margin-top: 0px;
border: none;
box-shadow: none;
}
#properties-list > fieldset#properties-header {
margin-top: 0px;
padding-bottom: 0px;
}
#properties-list > fieldset > legend {
position: relative;
display: table;
width: 100%;
margin: 21px -21px 0 -21px;
padding: 14px 21px 0 21px;
font-family: Raleway-Regular;
font-size: 12px;
color: #afafaf;
height: 28px;
text-transform: uppercase;
outline: none;
background-color: #404040;
border: none;
border-top: 1px rgb(90,90,90) solid;
box-shadow: 0 -1px 0 rgb(37,37,37), 0 4px 4px 0 rgba(0,0,0,0.75);
}
div.section-header, .sub-section-header, hr {
display: table; display: table;
width: 100%; width: 100%;
margin: 21px -21px 0 -21px; margin: 21px -21px 0 -21px;
@ -463,16 +523,18 @@ input[type=checkbox]:checked + label:hover {
outline: none; outline: none;
} }
.section-header {
position: relative;
background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAqCAIAAAAbNW1vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVChTY1BFAgzhSIDBAQmMcoYHRwIJMCgjAQZ9JMBgBQdWVgBh5XmBV5A2FQAAAABJRU5ErkJggg==) repeat-x top left; .column .sub-section-header {
background-image: none;
padding-top: 0;
} }
.sub-section-header, .no-collapse, hr { .sub-section-header, .no-collapse, hr {
background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAjSURBVBhXY1RVVf3PgARYjIyMoEwIYHRwcEBRwQSloYCBAQCwjgPMiI7W2QAAAABJRU5ErkJggg==) repeat-x top left; background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAjSURBVBhXY1RVVf3PgARYjIyMoEwIYHRwcEBRwQSloYCBAQCwjgPMiI7W2QAAAABJRU5ErkJggg==) repeat-x top left;
} }
.section-header:first-child { div.section-header:first-child {
margin-top: -2px; margin-top: -2px;
padding-top: 0; padding-top: 0;
background: none; background: none;
@ -483,7 +545,7 @@ input[type=checkbox]:checked + label:hover {
margin-bottom: -10px; margin-bottom: -10px;
} }
.section-header span { #properties-list > fieldset > legend span, .section-header span {
font-family: HiFi-Glyphs; font-family: HiFi-Glyphs;
font-size: 30px; font-size: 30px;
float: right; float: right;
@ -537,6 +599,18 @@ hr {
font-size: 13px; font-size: 13px;
} }
.property legend, .number legend {
display: table-cell;
vertical-align: middle;
font-family: Raleway-SemiBold;
font-size: 14px;
}
.property legend .unit, .number legend .unit {
margin-left: 8px;
font-family: Raleway-Light;
font-size: 13px;
}
.value { .value {
display: block; display: block;
min-height: 18px; min-height: 18px;
@ -546,6 +620,11 @@ hr {
vertical-align: top; vertical-align: top;
width: 48px; width: 48px;
} }
.value legend {
display: inline-block;
vertical-align: top;
width: 48px;
}
.value span { .value span {
font-family: FiraSans-SemiBold; font-family: FiraSans-SemiBold;
font-size: 15px; font-size: 15px;
@ -573,6 +652,13 @@ hr {
margin-top: -2px; margin-top: -2px;
} }
.text legend, .url legend, .number legend, .textarea legend, .rgb legend, .xyz legend, .pyr legend, .dropdown legend, .gen legend {
float: left;
margin-left: 1px;
margin-bottom: 3px;
margin-top: -2px;
}
.number > input { .number > input {
clear: both; clear: both;
float: left; float: left;
@ -715,6 +801,14 @@ div.refresh input[type="button"] {
display: none !important; display: none !important;
} }
#property-color-control1 {
display: table-cell;
float: none;
}
#property-color-control1 + label {
border-left: 20px transparent solid;
}
.rgb label { .rgb label {
float: left; float: left;
@ -725,6 +819,15 @@ div.refresh input[type="button"] {
clear: both; clear: both;
} }
.rgb legend {
float: left;
margin-top: 10px;
margin-left: 21px;
}
.rgb legend + * {
clear: both;
}
.tuple div { .tuple div {
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -814,6 +917,42 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
display: table-cell; display: table-cell;
width: 50%; width: 50%;
} }
#properties-list fieldset .two-column {
padding-top:21px;
display: flex;
}
#properties-list .two-column fieldset {
/*display: table-cell;*/
width: 50%;
margin: 0;
padding: 0;
border-top: none;
box-shadow: none;
}
#properties-list .two-column fieldset legend {
display: table;
width: 100%;
margin: 21px -21px 0px -21px;
padding: 0px 0px 0px 21px;
font-family: Raleway-Regular;
font-size: 12px;
color: #afafaf;
height: 28px;
text-transform: uppercase;
outline: none;
}
fieldset .checkbox-sub-props {
margin-top: 0;
}
fieldset .checkbox-sub-props .property:first-child {
margin-top: 0;
}
.column { .column {
vertical-align: top; vertical-align: top;
} }
@ -1155,9 +1294,11 @@ th#entity-hasScript {
} }
#properties-header { #properties-list #properties-header {
display: table-row; display: table-row;
height: 28px; height: 28px;
border-top: none;
box-shadow: none;
} }
#properties-header .property { #properties-header .property {
@ -1262,3 +1403,260 @@ input#reset-to-natural-dimensions {
font-size:16px; font-size:16px;
display:none; display:none;
} }
#properties-list #collision-info > fieldset:first-of-type {
border-top: none !important;
box-shadow: none;
margin-top: 0;
}
#properties-list {
display: flex;
flex-direction: column;
}
/* ----- Order of Menu items for Primitive ----- */
#properties-list.ShapeMenu #general,
#properties-list.BoxMenu #general,
#properties-list.SphereMenu #general {
order: 1;
}
#properties-list.ShapeMenu #collision-info,
#properties-list.BoxMenu #collision-info,
#properties-list.SphereMenu #collision-info {
order: 2;
}
#properties-list.ShapeMenu #physical,
#properties-list.BoxMenu #physical,
#properties-list.SphereMenu #physical {
order: 3;
}
#properties-list.ShapeMenu #spatial,
#properties-list.BoxMenu #spatial,
#properties-list.SphereMenu #spatial {
order: 4;
}
#properties-list.ShapeMenu #behavior,
#properties-list.BoxMenu #behavior,
#properties-list.SphereMenu #behavior {
order: 5;
}
#properties-list.ShapeMenu #hyperlink,
#properties-list.BoxMenu #hyperlink,
#properties-list.SphereMenu #hyperlink {
order: 6;
}
#properties-list.ShapeMenu #light,
#properties-list.BoxMenu #light,
#properties-list.SphereMenu #light,
#properties-list.ShapeMenu #model,
#properties-list.BoxMenu #model,
#properties-list.SphereMenu #model,
#properties-list.ShapeMenu #zone,
#properties-list.BoxMenu #zone,
#properties-list.SphereMenu #zone,
#properties-list.ShapeMenu #text,
#properties-list.BoxMenu #text,
#properties-list.SphereMenu #text,
#properties-list.ShapeMenu #web,
#properties-list.BoxMenu #web,
#properties-list.SphereMenu #web {
display: none;
}
/* ----- Order of Menu items for Light ----- */
#properties-list.LightMenu #general {
order: 1;
}
#properties-list.LightMenu #light {
order: 2;
}
#properties-list.LightMenu #physical {
order: 3;
}
#properties-list.LightMenu #spatial {
order: 4;
}
#properties-list.LightMenu #behavior {
order: 5;
}
#properties-list.LightMenu #collision-info {
order: 6;
}
#properties-list.LightMenu #hyperlink {
order: 7;
}
/* sections to hide */
#properties-list.LightMenu #model,
#properties-list.LightMenu #zone,
#properties-list.LightMenu #text,
#properties-list.LightMenu #web {
display: none;
}
/* items to hide */
#properties-list.LightMenu .shape-group.shape-section.property.dropdown,
#properties-list.LightMenu color-section.color-control1 {
display: none
}
/* ----- Order of Menu items for Model ----- */
#properties-list.ModelMenu #general {
order: 1;
}
#properties-list.ModelMenu #model {
order: 2;
}
#properties-list.ModelMenu #collision-info {
order: 3;
}
#properties-list.ModelMenu #physical {
order: 4;
}
#properties-list.ModelMenu #spatial {
order: 5;
}
#properties-list.ModelMenu #behavior {
order: 6;
}
#properties-list.ModelMenu #hyperlink {
order: 7;
}
/* sections to hide */
#properties-list.ModelMenu #light,
#properties-list.ModelMenu #zone,
#properties-list.ModelMenu #text,
#properties-list.ModelMenu #web {
display: none;
}
/* items to hide */
#properties-list.ModelMenu .shape-group.shape-section.property.dropdown,
#properties-list.ModelMenu .color-section.color-control1 {
display: none
}
/* ----- Order of Menu items for Zone ----- */
#properties-list.ZoneMenu #general {
order: 1;
}
#properties-list.ZoneMenu #zone {
order: 2;
}
#properties-list.ZoneMenu #physical {
order: 3;
}
#properties-list.ZoneMenu #spatial {
order: 4;
}
#properties-list.ZoneMenu #behavior {
order: 5;
}
#properties-list.ZoneMenu #collision-info {
order: 6;
}
#properties-list.ZoneMenu #hyperlink {
order: 7;
}
/* sections to hide */
#properties-list.ZoneMenu #light,
#properties-list.ZoneMenu #model,
#properties-list.ZoneMenu #text,
#properties-list.ZoneMenu #web {
display: none;
}
/* items to hide */
#properties-list.ZoneMenu .shape-group.shape-section.property.dropdown,
#properties-list.ZoneMenu .color-section.color-control1 {
display: none
}
/* ----- Order of Menu items for Web ----- */
#properties-list.WebMenu #general {
order: 1;
}
#properties-list.WebMenu #web {
order: 2;
}
#properties-list.WebMenu #collision-info {
order: 3;
}
#properties-list.WebMenu #physical {
order: 4;
}
#properties-list.WebMenu #spatial {
order: 5;
}
#properties-list.WebMenu #behavior {
order: 6;
}
#properties-list.WebMenu #hyperlink {
order: 7;
}
/* sections to hide */
#properties-list.WebMenu #light,
#properties-list.WebMenu #model,
#properties-list.WebMenu #zone,
#properties-list.WebMenu #text {
display: none;
}
/* items to hide */
#properties-list.WebMenu .shape-group.shape-section.property.dropdown,
#properties-list.WebMenu .color-section.color-control1 {
display: none;
}
/* ----- Order of Menu items for Text ----- */
#properties-list.TextMenu #general {
order: 1;
}
#properties-list.TextMenu #text {
order: 2;
}
#properties-list.TextMenu #collision-info {
order: 3;
}
#properties-list.TextMenu #physical {
order: 4;
}
#properties-list.TextMenu #spatial {
order: 5;
}
#properties-list.TextMenu #behavior {
order: 6;
}
#properties-list.TextMenu #hyperlink {
order: 7;
}
/* sections to hide */
#properties-list.TextMenu #light,
#properties-list.TextMenu #model,
#properties-list.TextMenu #zone,
#properties-list.TextMenu #web {
display: none;
}
/* items to hide */
#properties-list.TextMenu .shape-group.shape-section.property.dropdown,
#properties-list.TextMenu .color-section.color-control1 {
display: none
}
/* Currently always hidden */
#properties-list #polyvox {
display: none;
}
.skybox-section {
display: none;
}

1047
scripts/system/html/entityProperties.html
View file

File diff suppressed because it is too large Load diff

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

@ -479,6 +479,7 @@ function loaded() {
openEventBridge(function() { openEventBridge(function() {
var allSections = []; var allSections = [];
var elPropertiesList = document.getElementById("properties-list");
var elID = document.getElementById("property-id"); var elID = document.getElementById("property-id");
var elType = document.getElementById("property-type"); var elType = document.getElementById("property-type");
var elTypeIcon = document.getElementById("type-icon"); var elTypeIcon = document.getElementById("type-icon");
@ -565,7 +566,8 @@ function loaded() {
var elJSONEditor = document.getElementById("userdata-editor"); var elJSONEditor = document.getElementById("userdata-editor");
var elNewJSONEditor = document.getElementById('userdata-new-editor'); var elNewJSONEditor = document.getElementById('userdata-new-editor');
var elColorSections = document.querySelectorAll(".color-section"); var elColorSections = document.querySelectorAll(".color-section");
var elColor = document.getElementById("property-color"); var elColorControl1 = document.getElementById("property-color-control1");
var elColorControl2 = document.getElementById("property-color-control2");
var elColorRed = document.getElementById("property-color-red"); var elColorRed = document.getElementById("property-color-red");
var elColorGreen = document.getElementById("property-color-green"); var elColorGreen = document.getElementById("property-color-green");
var elColorBlue = document.getElementById("property-color-blue"); var elColorBlue = document.getElementById("property-color-blue");
@ -679,7 +681,8 @@ function loaded() {
data = JSON.parse(data); data = JSON.parse(data);
if (data.type == "server_script_status") { if (data.type == "server_script_status") {
elServerScriptError.value = data.errorInfo; elServerScriptError.value = data.errorInfo;
elServerScriptError.style.display = data.errorInfo ? "block" : "none"; // If we just set elServerScriptError's diplay to block or none, we still end up with it's parent contributing 21px bottom padding even when elServerScriptError is display:none. So set it's parent to block or none
elServerScriptError.parentElement.style.display = data.errorInfo ? "block" : "none";
if (data.statusRetrieved === false) { if (data.statusRetrieved === false) {
elServerScriptStatus.innerText = "Failed to retrieve status"; elServerScriptStatus.innerText = "Failed to retrieve status";
} else if (data.isRunning) { } else if (data.isRunning) {
@ -705,6 +708,7 @@ function loaded() {
elTypeIcon.style.display = "none"; elTypeIcon.style.display = "none";
elType.innerHTML = "<i>No selection</i>"; elType.innerHTML = "<i>No selection</i>";
elID.value = ""; elID.value = "";
elPropertiesList.className = '';
disableProperties(); disableProperties();
} else if (data.selections && data.selections.length > 1) { } else if (data.selections && data.selections.length > 1) {
deleteJSONEditor(); deleteJSONEditor();
@ -733,6 +737,7 @@ function loaded() {
elType.innerHTML = type + " (" + data.selections.length + ")"; elType.innerHTML = type + " (" + data.selections.length + ")";
elTypeIcon.innerHTML = ICON_FOR_TYPE[type]; elTypeIcon.innerHTML = ICON_FOR_TYPE[type];
elTypeIcon.style.display = "inline-block"; elTypeIcon.style.display = "inline-block";
elPropertiesList.className = '';
elID.value = ""; elID.value = "";
@ -749,6 +754,7 @@ function loaded() {
lastEntityID = '"' + properties.id + '"'; lastEntityID = '"' + properties.id + '"';
elID.value = properties.id; elID.value = properties.id;
elPropertiesList.className = properties.type + 'Menu';
elType.innerHTML = properties.type; elType.innerHTML = properties.type;
elTypeIcon.innerHTML = ICON_FOR_TYPE[properties.type]; elTypeIcon.innerHTML = ICON_FOR_TYPE[properties.type];
elTypeIcon.style.display = "inline-block"; elTypeIcon.style.display = "inline-block";
@ -883,48 +889,20 @@ function loaded() {
elHyperlinkHref.value = properties.href; elHyperlinkHref.value = properties.href;
elDescription.value = properties.description; 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") { 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; elShape.value = properties.shape;
setDropdownText(elShape); 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") { 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; elColorRed.value = properties.color.red;
elColorGreen.value = properties.color.green; elColorGreen.value = properties.color.green;
elColorBlue.value = properties.color.blue; elColorBlue.value = properties.color.blue;
elColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; elColorControl1.style.backgroundColor = elColorControl2.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") { if (properties.type == "Model") {
for (var i = 0; i < elModelSections.length; i++) {
elModelSections[i].style.display = 'table';
}
elModelURL.value = properties.modelURL; elModelURL.value = properties.modelURL;
elShapeType.value = properties.shapeType; elShapeType.value = properties.shapeType;
setDropdownText(elShapeType); setDropdownText(elShapeType);
@ -942,20 +920,9 @@ function loaded() {
elModelOriginalTextures.value = properties.originalTextures; elModelOriginalTextures.value = properties.originalTextures;
setTextareaScrolling(elModelOriginalTextures); setTextareaScrolling(elModelOriginalTextures);
} else if (properties.type == "Web") { } 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; elWebSourceURL.value = properties.sourceUrl;
elWebDPI.value = properties.dpi; elWebDPI.value = properties.dpi;
} else if (properties.type == "Text") { } else if (properties.type == "Text") {
for (var i = 0; i < elTextSections.length; i++) {
elTextSections[i].style.display = 'table';
}
elTextText.value = properties.text; elTextText.value = properties.text;
elTextLineHeight.value = properties.lineHeight.toFixed(4); elTextLineHeight.value = properties.lineHeight.toFixed(4);
elTextFaceCamera.checked = properties.faceCamera; elTextFaceCamera.checked = properties.faceCamera;
@ -967,10 +934,6 @@ function loaded() {
elTextBackgroundColorGreen.value = properties.backgroundColor.green; elTextBackgroundColorGreen.value = properties.backgroundColor.green;
elTextBackgroundColorBlue.value = properties.backgroundColor.blue; elTextBackgroundColorBlue.value = properties.backgroundColor.blue;
} else if (properties.type == "Light") { } else if (properties.type == "Light") {
for (var i = 0; i < elLightSections.length; i++) {
elLightSections[i].style.display = 'table';
}
elLightSpotLight.checked = properties.isSpotlight; elLightSpotLight.checked = properties.isSpotlight;
elLightColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; elLightColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")";
@ -983,10 +946,6 @@ function loaded() {
elLightExponent.value = properties.exponent.toFixed(2); elLightExponent.value = properties.exponent.toFixed(2);
elLightCutoff.value = properties.cutoff.toFixed(2); elLightCutoff.value = properties.cutoff.toFixed(2);
} else if (properties.type == "Zone") { } else if (properties.type == "Zone") {
for (var i = 0; i < elZoneSections.length; i++) {
elZoneSections[i].style.display = 'table';
}
elZoneStageSunModelEnabled.checked = properties.stage.sunModelEnabled; elZoneStageSunModelEnabled.checked = properties.stage.sunModelEnabled;
elZoneKeyLightColor.style.backgroundColor = "rgb(" + properties.keyLight.color.red + "," + properties.keyLight.color.green + "," + properties.keyLight.color.blue + ")"; elZoneKeyLightColor.style.backgroundColor = "rgb(" + properties.keyLight.color.red + "," + properties.keyLight.color.green + "," + properties.keyLight.color.blue + ")";
elZoneKeyLightColorRed.value = properties.keyLight.color.red; elZoneKeyLightColorRed.value = properties.keyLight.color.red;
@ -1023,10 +982,6 @@ function loaded() {
showElements(document.getElementsByClassName('skybox-section'), elZoneBackgroundMode.value == 'skybox'); showElements(document.getElementsByClassName('skybox-section'), elZoneBackgroundMode.value == 'skybox');
} else if (properties.type == "PolyVox") { } 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); elVoxelVolumeSizeX.value = properties.voxelVolumeSize.x.toFixed(2);
elVoxelVolumeSizeY.value = properties.voxelVolumeSize.y.toFixed(2); elVoxelVolumeSizeY.value = properties.voxelVolumeSize.y.toFixed(2);
elVoxelVolumeSizeZ.value = properties.voxelVolumeSize.z.toFixed(2); elVoxelVolumeSizeZ.value = properties.voxelVolumeSize.z.toFixed(2);
@ -1225,20 +1180,41 @@ function loaded() {
elColorRed.addEventListener('change', colorChangeFunction); elColorRed.addEventListener('change', colorChangeFunction);
elColorGreen.addEventListener('change', colorChangeFunction); elColorGreen.addEventListener('change', colorChangeFunction);
elColorBlue.addEventListener('change', colorChangeFunction); elColorBlue.addEventListener('change', colorChangeFunction);
colorPickers.push($('#property-color').colpick({ colorPickers.push($('#property-color-control1').colpick({
colorScheme: 'dark', colorScheme: 'dark',
layout: 'hex', layout: 'hex',
color: '000000', color: '000000',
onShow: function(colpick) { onShow: function(colpick) {
$('#property-color').attr('active', 'true'); $('#property-color-control1').attr('active', 'true');
}, },
onHide: function(colpick) { onHide: function(colpick) {
$('#property-color').attr('active', 'false'); $('#property-color-control1').attr('active', 'false');
}, },
onSubmit: function(hsb, hex, rgb, el) { onSubmit: function(hsb, hex, rgb, el) {
$(el).css('background-color', '#' + hex); $(el).css('background-color', '#' + hex);
$(el).colpickHide(); $(el).colpickHide();
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
// Keep the companion control in sync
elColorControl2.style.backgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
}
}));
colorPickers.push($('#property-color-control2').colpick({
colorScheme: 'dark',
layout: 'hex',
color: '000000',
onShow: function(colpick) {
$('#property-color-control2').attr('active', 'true');
},
onHide: function(colpick) {
$('#property-color-control2').attr('active', 'false');
},
onSubmit: function(hsb, hex, rgb, el) {
$(el).css('background-color', '#' + hex);
$(el).colpickHide();
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
// Keep the companion control in sync
elColorControl1.style.backgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
} }
})); }));
@ -1502,11 +1478,9 @@ function loaded() {
var elCollapsible = document.getElementsByClassName("section-header"); var elCollapsible = document.getElementsByClassName("section-header");
var toggleCollapsedEvent = function(event) { var toggleCollapsedEvent = function(event) {
var element = event.target; var element = event.target.parentNode.parentNode;
if (element.nodeName !== "DIV") { var isCollapsed = element.dataset.collapsed !== "true";
element = element.parentNode; element.dataset.collapsed = isCollapsed ? "true" : false
}
var isCollapsed = element.getAttribute("collapsed") !== "true";
element.setAttribute("collapsed", isCollapsed ? "true" : "false"); element.setAttribute("collapsed", isCollapsed ? "true" : "false");
element.getElementsByTagName("span")[0].textContent = isCollapsed ? "L" : "M"; element.getElementsByTagName("span")[0].textContent = isCollapsed ? "L" : "M";
}; };