Use `<select>` instead of `<span>` to show parts' name
Users can now select an item from dropdown menus
This commit is contained in:
parent
ed6a9097ee
commit
d3033b8912
|
@ -18,10 +18,10 @@
|
||||||
<img class="arms" id="arms_img" src="" />
|
<img class="arms" id="arms_img" src="" />
|
||||||
</div>
|
</div>
|
||||||
<div id="controls">
|
<div id="controls">
|
||||||
<div class="body"><button id="body_left" onclick="NeomojiMixer.part_handlers.body.onClickPrev();" disabled><</button><span class="name" id="body_name">name body</span><button id="body_right" onclick="NeomojiMixer.part_handlers.body.onClickNext();" disabled>></button></div>
|
<div class="body"><button id="body_left" onclick="NeomojiMixer.part_handlers.body.onClickPrev();" disabled><</button><select class="name" id="body_name" onchange="NeomojiMixer.part_handlers.body.onChangeDropdown();" disabled>name body</select><button id="body_right" onclick="NeomojiMixer.part_handlers.body.onClickNext();" disabled>></button></div>
|
||||||
<div class="eyes"><button id="eyes_left" onclick="NeomojiMixer.part_handlers.eyes.onClickPrev();" disabled><</button><span class="name" id="eyes_name">name eyes</span><button id="eyes_right" onclick="NeomojiMixer.part_handlers.eyes.onClickNext();" disabled>></button></div>
|
<div class="eyes"><button id="eyes_left" onclick="NeomojiMixer.part_handlers.eyes.onClickPrev();" disabled><</button><select class="name" id="eyes_name" onchange="NeomojiMixer.part_handlers.eyes.onChangeDropdown();" disabled>name eyes</select><button id="eyes_right" onclick="NeomojiMixer.part_handlers.eyes.onClickNext();" disabled>></button></div>
|
||||||
<div class="mouth"><button id="mouth_left" onclick="NeomojiMixer.part_handlers.mouth.onClickPrev();" disabled><</button><span class="name" id="mouth_name">name mouth</span><button id="mouth_right" onclick="NeomojiMixer.part_handlers.mouth.onClickNext();" disabled>></button></div>
|
<div class="mouth"><button id="mouth_left" onclick="NeomojiMixer.part_handlers.mouth.onClickPrev();" disabled><</button><select class="name" id="mouth_name" onchange="NeomojiMixer.part_handlers.mouth.onChangeDropdown();" disabled>name mouth</select><button id="mouth_right" onclick="NeomojiMixer.part_handlers.mouth.onClickNext();" disabled>></button></div>
|
||||||
<div class="arms"><button id="arms_left" onclick="NeomojiMixer.part_handlers.arms.onClickPrev();" disabled><</button><span class="name" id="arms_name">name arms</span><button id="arms_right" onclick="NeomojiMixer.part_handlers.arms.onClickNext();" disabled>></button></div>
|
<div class="arms"><button id="arms_left" onclick="NeomojiMixer.part_handlers.arms.onClickPrev();" disabled><</button><select class="name" id="arms_name" onchange="NeomojiMixer.part_handlers.arms.onChangeDropdown();" disabled>name arms</select><button id="arms_right" onclick="NeomojiMixer.part_handlers.arms.onClickNext();" disabled>></button></div>
|
||||||
<div class="random"><button id="random" onclick="NeomojiMixer.randomize();" disabled>Random</button></div>
|
<div class="random"><button id="random" onclick="NeomojiMixer.randomize();" disabled>Random</button></div>
|
||||||
<div class="export"><button id="export" onclick="NeomojiMixer.exportImage();" disabled>Export Image</button></div>
|
<div class="export"><button id="export" onclick="NeomojiMixer.exportImage();" disabled>Export Image</button></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -47,7 +47,7 @@ button#export {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
span.name {
|
#controls > div > .name {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
@ -70,7 +70,9 @@ const NeomojiMixer = (function(NeomojiMixer) {
|
||||||
redraw: function() {
|
redraw: function() {
|
||||||
const entry = this.getSelectedEntry();
|
const entry = this.getSelectedEntry();
|
||||||
this.image_element.src = "." + entry[1]; //Change URL of picture
|
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() {
|
onClickNext: function() {
|
||||||
this.setIndex(this.selected_index + 1);
|
this.setIndex(this.selected_index + 1);
|
||||||
|
@ -78,9 +80,13 @@ const NeomojiMixer = (function(NeomojiMixer) {
|
||||||
onClickPrev: function() {
|
onClickPrev: function() {
|
||||||
this.setIndex(this.selected_index - 1);
|
this.setIndex(this.selected_index - 1);
|
||||||
},
|
},
|
||||||
|
onChangeDropdown: function() {
|
||||||
|
this.setIndex(this.name_element.selectedIndex);
|
||||||
|
},
|
||||||
activateControls: function() {
|
activateControls: function() {
|
||||||
this.button_left.disabled = false;
|
this.button_left.disabled = false;
|
||||||
this.button_right.disabled = false;
|
this.button_right.disabled = false;
|
||||||
|
this.name_element.disabled = false;
|
||||||
},
|
},
|
||||||
randomize: function() {
|
randomize: function() {
|
||||||
this.setIndex(Math.floor(Math.random() * this.entry_indices.length));
|
this.setIndex(Math.floor(Math.random() * this.entry_indices.length));
|
||||||
|
@ -91,6 +97,24 @@ const NeomojiMixer = (function(NeomojiMixer) {
|
||||||
img.src = "." + entry[1];
|
img.src = "." + entry[1];
|
||||||
return img;
|
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) {
|
function ColoredPartHandler(name) {
|
||||||
|
|
Loading…
Reference in New Issue