From ab37534e0dba7d403e1ba6fa02a2e4e7a0cd6969 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Tue, 29 Mar 2016 20:14:08 +1300
Subject: [PATCH] Restyle dropdowns

---
 examples/html/edit-style.css        |  87 +++++++++++++++-
 examples/html/entityProperties.html | 154 +++++++++++++++++++++++-----
 2 files changed, 211 insertions(+), 30 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 10f20153d7..72a48cfa49 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -349,7 +349,6 @@ input[type=checkbox]:checked + label:hover {
 
 
 .section-header, .sub-section-header {
-    position: relative;
     margin: 22px -12px 0 -12px;
     padding: 14px 12px 0 12px;
     font-size: 12px;
@@ -359,6 +358,7 @@ input[type=checkbox]:checked + label:hover {
 }
 
 .section-header {
+    position: relative;
     background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAqCAIAAAAbNW1vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVChTY1BFAgzhSIDBAQmMcoYHRwIJMCgjAQZ9JMBgBQdWVgBh5XmBV5A2FQAAAABJRU5ErkJggg==) repeat-x top left;
 }
 
@@ -438,7 +438,7 @@ input[type=checkbox]:checked + label:hover {
     margin-left: 12px;
 }
 
-.text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label {
+.text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label, .dropdown label {
     float: left;
     margin-bottom: 4px;
 }
@@ -455,6 +455,89 @@ input[type=checkbox]:checked + label:hover {
     clear: both;
 }
 
+.dropdown {
+    position: relative;
+}
+
+.dropdown select {
+    clear: both;
+}
+
+.dropdown dl {
+    clear: both;
+}
+.dropdown dl {
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+    width: 172px;
+    height: 28px;
+    padding: 0 28px 0 12px;
+
+    color: #afafaf;
+    background: linear-gradient(#7d7d7d 20%, #686a68 100%);
+
+    position: relative;
+}
+.dropdown dl[dropped="true"] {
+    color: #404040;
+    background: linear-gradient(#afafaf, #afafaf);
+}
+
+.dropdown dt {
+    height: 100%;
+    box-sizing: border-box;
+    border-right: 1px solid #121212;
+    width: 100%;
+}
+.dropdown dt:hover {
+    color: #404040;
+}
+.dropdown dt span:first-child {
+    display: inline-block;
+    position: relative;
+    top: 5px;
+}
+.dropdown dt span:last-child {
+    font-family: HiFi-Glyphs;
+    font-size: 42px;
+    float: right;
+    margin-right: -48px;
+    position: relative;
+    left: -12px;
+    top: -11px;
+}
+
+.dropdown dd {
+    position: absolute;
+    top: 28px;
+    left: 3px;
+    display: none;
+}
+.dropdown dl[dropped="true"] dd {
+    display: block;
+}
+
+.dropdown li {
+    list-style-type: none;
+    padding: 3px 0 1px 12px;
+    width: 200px;
+    height: auto;
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+    color: #404040;
+    background-color: #afafaf
+}
+.dropdown li:hover {
+    background-color: #00b4ef;
+}
+
+/*dd {
+    min-width: 100px;
+    min-height: 100px;
+    border: 1x dotted red;
+}*/
+
+
 div.refresh {
     box-sizing: border-box;
     padding-right: 44px;
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 4837197984..c5b388ece1 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -671,6 +671,7 @@
     
                                     elModelURL.value = properties.modelURL;
                                     elShapeType.value = properties.shapeType;
+                                    setDropdownText(elShapeType);
                                     elCompoundShapeURL.value = properties.compoundShapeURL;
                                     elModelAnimationURL.value = properties.animation.url;
                                     elModelAnimationPlaying.checked = properties.animation.running;
@@ -750,6 +751,7 @@
                                     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;
@@ -767,6 +769,7 @@
                                     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;
@@ -1129,6 +1132,7 @@
                 }
             });
 
+            // Collapsible sections
             var elCollapsible = document.getElementsByClassName("section-header");
 
             var toggleCollapsedEvent = function (event) {
@@ -1146,6 +1150,8 @@
                 element.addEventListener("click", toggleCollapsedEvent, true);
             };
 
+
+            // Textarea scollbars
             var elTextareas = document.getElementsByTagName("TEXTAREA");
 
             var textareaOnChangeEvent = function (event) {
@@ -1161,6 +1167,104 @@
                 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:
+            //  <dl dropped="true/false">
+            //      <dt name="?" id="?" value="?"><span>display text</span><span>carat</span></dt>
+            //      <dd>
+            //          <ul>
+            //              <li value="??>display text</li>
+            //              <li>...</li>
+            //          </ul>
+            //      </dd>
+            //  </dl>
+
+            function setDropdownText(dropdown) {
+                var lis = dropdown.parentNode.getElementsByTagName("li");
+                var text = "";
+                for (var i = 0; i < lis.length; i++) {
+                    if (lis[i].getAttribute("value") === dropdown.value) {
+                        text = lis[i].textContent;
+                    }
+                }
+                dropdown.firstChild.textContent = text;
+            }
+
+            function toggleDropdown(event) {
+                var element = event.target;
+                if (element.nodeName !== "DT") {
+                    element = element.parentNode;
+                }
+                element = element.parentNode;
+                var isDropped = element.getAttribute("dropped");
+                element.setAttribute("dropped", isDropped !== "true" ? "true" : "false");
+            }
+
+            function setDropdownValue(event) {
+                var dt = event.target.parentNode.parentNode.previousSibling;
+                dt.value = event.target.getAttribute("value");
+                dt.firstChild.textContent = event.target.textContent;
+
+                dt.parentNode.setAttribute("dropped", "false");
+
+                var evt = document.createEvent("HTMLEvents");
+                evt.initEvent("change", true, true);
+                dt.dispatchEvent(evt);
+            }
+
+            var elDropdowns = document.getElementsByTagName("select");
+            for (var i = 0; i < elDropdowns.length; i++) {
+                var options = elDropdowns[i].getElementsByTagName("option");
+                var selectedOption = 0;
+                for (var j = 0; j < options.length; j++) {
+                    if (options[i].getAttribute("selected") === "selected") {
+                        selectedOption = i;
+                    }
+                }
+                var div = elDropdowns[i].parentNode;
+
+                var dl = document.createElement("dl");
+                div.appendChild(dl);
+
+                var dt = document.createElement("dt");
+                dt.name = elDropdowns[i].name;
+                dt.id = elDropdowns[i].id;
+                dt.addEventListener("click", toggleDropdown, true);
+                dl.appendChild(dt);
+
+                var span = document.createElement("span");
+                span.setAttribute("value", options[selectedOption].value);
+                span.textContent = options[selectedOption].firstChild.textContent;
+                dt.appendChild(span);
+
+                var span = document.createElement("span");
+                span.textContent = "5";  // caratDn
+                dt.appendChild(span);
+
+                var dd = document.createElement("dd");
+                dl.appendChild(dd);
+
+                var ul = document.createElement("ul");
+                dd.appendChild(ul);
+
+                for (var j = 0; j < options.length; j++) {
+                    var li = document.createElement("li");
+                    li.setAttribute("value", options[j].value);
+                    li.textContent = options[j].firstChild.textContent;
+                    li.addEventListener("click", setDropdownValue);
+                    ul.appendChild(li);
+                }
+            }
+
+            elDropdowns = document.getElementsByTagName("select");
+            while (elDropdowns.length > 0) {
+                var el = elDropdowns[0];
+                el.parentNode.removeChild(el);
+                elDropdowns = document.getElementsByTagName("select");
+            }
+
         }
     </script>
 </head>
@@ -1317,14 +1421,12 @@
             <label>Background</label>
         </div>
 
-        <div class="zone-section background-section property">
-            <div class="label">Background Mode</div>
-            <div class="value">
-                <select name="SelectBackgroundMode" id="property-zone-background-mode">
-                    <option value='inherit'>Nothing</option>
-                    <option value='skybox'>Skybox</option>
-                </select> 
-            </div>
+        <div class="zone-section background-section property dropdown">
+            <label>Background mode</label>
+            <select name="SelectBackgroundMode" id="property-zone-background-mode">
+                <option value="inherit">Nothing</option>
+                <option value="skybox">Skybox</option>
+            </select>
         </div>
 
 
@@ -1435,16 +1537,14 @@
             </div>
         </div>
 
-        <div class="property">
-            <div class="label">Surface Extractor</div>
-            <div class="value">
-                <select name="SelectVoxelSurfaceStyle" id="property-voxel-surface-style">
-                    <option value='0'>marching cubes</option>
-                    <option value='1'>cubic</option>
-                    <option value='2'>edged cubic</option>
-                    <option value='3'>edged marching cubes</option>
-                </select>
-            </div>
+        <div class="property dropdown">
+            <label>Surface extractor</label>
+            <select name="SelectVoxelSurfaceStyle" id="property-voxel-surface-style">
+                <option value="0">Marching cubes</option>
+                <option value="1">Cubic</option>
+                <option value="2">Edged cubic</option>
+                <option value="3">Edged marching cubes</option>
+            </select>
         </div>
 
         <div class="property url refresh">
@@ -1646,16 +1746,14 @@
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
-        <div class="model-section zone-section property">
-            <div class="label">Collision Shape Type</div>
-            <div class="value">
-                <select name="SelectShapeType" id="property-shape-type">
-                    <option value='none'>none</option>
-                    <option value='box'>box</option>
-                    <option value='sphere'>sphere</option>
-                    <option value='compound'>compound</option>
-                </select>
-            </div>
+        <div class="model-section zone-section property dropdown">
+            <label>Collision shape type</label>
+            <select name="SelectShapeType" id="property-shape-type">
+                <option value="none">None</option>
+                <option value="box">Box</option>
+                <option value="sphere">Sphere</option>
+                <option value="compound">Compound</option>
+            </select>
         </div>
         <div class="model-section zone-section property url refresh">
             <label for="property-compound-shape-url">Compound shape URL</label>