vftdan
/
neomojimixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use `<select>` instead of `<span>` to show parts' name 

Users can now select an item from dropdown menus
This commit is contained in:
Vftdan 2024-04-23 08:48:38 +02:00
parent ed6a9097ee
commit d3033b8912
3 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -18,10 +18,10 @@
<img class="arms" id="arms_img" src="" />
</div>
<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="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="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="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="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><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><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><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="export"><button id="export" onclick="NeomojiMixer.exportImage();" disabled>Export Image</button></div>
</div>

2
neomojimixer.css
View File

@ -47,7 +47,7 @@ button#export {
width: 250px;
}
span.name {
#controls > div > .name {
display: inline-block;
width: 200px;
text-align: center;

26
neomojimixer.js
View File

@ -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) {