diff --git a/index.html b/index.html
index ed2d43e..ce7eaa7 100644
--- a/index.html
+++ b/index.html
@@ -18,10 +18,10 @@
-
name body
-
name eyes
-
name mouth
-
name arms
+
+
+
+
diff --git a/neomojimixer.css b/neomojimixer.css
index df5a90d..39862d5 100644
--- a/neomojimixer.css
+++ b/neomojimixer.css
@@ -47,7 +47,7 @@ button#export {
width: 250px;
}
-span.name {
+#controls > div > .name {
display: inline-block;
width: 200px;
text-align: center;
diff --git a/neomojimixer.js b/neomojimixer.js
index 680e512..6a50a50 100644
--- a/neomojimixer.js
+++ b/neomojimixer.js
@@ -70,7 +70,9 @@ const NeomojiMixer = (function(NeomojiMixer) {
redraw: function() {
const entry = this.getSelectedEntry();
this.image_element.src = "." + entry[1]; //Change URL of picture
- this.name_element.innerHTML = entry[0]; //Change name in controls
+ //Change name in controls
+ this.updateOptions();
+ this.name_element.selectedIndex = this.selected_index;
},
onClickNext: function() {
this.setIndex(this.selected_index + 1);
@@ -78,9 +80,13 @@ const NeomojiMixer = (function(NeomojiMixer) {
onClickPrev: function() {
this.setIndex(this.selected_index - 1);
},
+ onChangeDropdown: function() {
+ this.setIndex(this.name_element.selectedIndex);
+ },
activateControls: function() {
this.button_left.disabled = false;
this.button_right.disabled = false;
+ this.name_element.disabled = false;
},
randomize: function() {
this.setIndex(Math.floor(Math.random() * this.entry_indices.length));
@@ -91,6 +97,24 @@ const NeomojiMixer = (function(NeomojiMixer) {
img.src = "." + entry[1];
return img;
},
+ updateOptions: function() {
+ const options = this.name_element.options;
+ for (let i = 0; i < this.entry_indices.length; i++) {
+ const index = this.entry_indices[i];
+ const entry = this.entries[index];
+ if (options.length > i && options[i].value == entry[0]) {
+ continue;
+ } else {
+ const option = new Option(entry[0], entry[0], false, this.selected_index == i);
+ if (this.name_element.length <= i) {
+ this.name_element.add(option);
+ } else {
+ this.name_element.remove(i);
+ this.name_element.add(option, i);
+ }
+ }
+ }
+ },
};
function ColoredPartHandler(name) {