A sorter site for Idolm@ster Characters
Reset imagegen, allow 0 images display, default tooltip if not provided
+17
-8
+1
-1
README.md
+1
-1
README.md
···
80
80
81
81
* `name`: The name of the option to be displayed. **Required.**
82
82
* `key`: A shorthand reference, used to refer to it in the character data. **Required.**
83
-
* `tooltip`: Some optional information that appears when you hover over the option.
83
+
* `tooltip`: Some optional information that appears when you hover over the option. If not provided, defaults to the option's name.
84
84
* `checked`: If set to `true`, this option will be checked when your sorter starts. If not provided, defaults to `false`.
85
85
86
86
Example:
+1
-1
index.html
+1
-1
index.html
···
60
60
<div class="results"></div>
61
61
62
62
<div class="info">
63
-
<a href="https://relick.me/song/">Song Sorter</a> | <a href="mailto:fera@imouto.my">Contact</a> | <a href="https://github.com/execfera/charasort/">Source Code</a> | <a href="https://tohosort.frelia.my/?IwVmE4CZNAGSBs5YB8QA5zAMzoCwqzCxEmnDGVkkUXVHEON1lW0tPOn1s9suNyTGr3Y0G3QcN4SBQunNaCxC+pPLsuqreNob5MylKOtuk5RoWGlenhM63TInfyNSRS-aKuaDV+7bKjrJ8wbpClhyu1BZ6bnKG8R5m5kHOHly6gariITE2vvyRxpocZtqW8moxpZ7GGbmlmbGilZXe6j75CSGtLnbAhAxAA">Best Taste</a> | <a class="clearsave">Clear Save Data</a>
63
+
<a href="https://relick.me/song/">Song Sorter</a> | <a href="mailto:fera@imouto.my">Contact</a> | <a href="https://github.com/execfera/charasort/">Source Code</a> | <a href="?IwVmE4CZNAGSBs5YB8QA5zAMzoCwqzCxEmnDGVkkUXVHEON1lW0tPOn1s9suNyTGr3Y0G3QcN4SBQunNaCxC+pPLsuqreNob5MylKOtuk5RoWGlenhM63TInfyNSRS-aKuaDV+7bKjrJ8wbpClhyu1BZ6bnKG8R5m5kHOHly6gariITE2vvyRxpocZtqW8moxpZ7GGbmlmbGilZXe6j75CSGtLnbAhAxAA">Best Taste</a> | <a class="clearsave">Clear Save Data</a>
64
64
65
65
<br><br>
66
66
+15
-6
src/js/main.js
+15
-6
src/js/main.js
···
104
104
document.querySelector('.image.selector').insertAdjacentElement('beforeend', document.createElement('select'));
105
105
106
106
/** Initialize image quantity selector for results. */
107
-
for (let i = 1; i <= 10; i++) {
107
+
for (let i = 0; i <= 10; i++) {
108
108
const select = document.createElement('option');
109
109
select.value = i;
110
110
select.text = i;
···
569
569
html2canvas(document.querySelector('.results')).then(canvas => {
570
570
const dataURL = canvas.toDataURL();
571
571
const imgButton = document.querySelector('.finished.getimg.button');
572
+
const resetButton = document.createElement('a');
572
573
573
574
imgButton.removeEventListener('click', generateImage);
574
575
imgButton.innerHTML = '';
575
-
imgButton.insertAdjacentHTML('beforeend', `<a href="${dataURL}" download="${filename}">Download Image</a>`);
576
+
imgButton.insertAdjacentHTML('beforeend', `<a href="${dataURL}" download="${filename}">Download Image</a><br><br>`);
577
+
578
+
resetButton.insertAdjacentText('beforeend', 'Reset');
579
+
resetButton.addEventListener('click', (event) => {
580
+
imgButton.addEventListener('click', generateImage);
581
+
imgButton.innerHTML = 'Generate Image';
582
+
event.stopPropagation();
583
+
});
584
+
imgButton.insertAdjacentElement('beforeend', resetButton);
576
585
});
577
586
}
578
587
···
613
622
/** Populate option list. */
614
623
function populateOptions() {
615
624
const optList = document.querySelector('.options');
616
-
const optInsert = (name, id, tooltip = '', checked = true, disabled = false) => {
617
-
return `<div><label class="${tooltip?'tooltip':''}" title="${tooltip}"><input id="cb-${id}" type="checkbox" ${checked?'checked':''} ${disabled?'disabled':''}> ${name}</label></div>`;
625
+
const optInsert = (name, id, tooltip, checked = true, disabled = false) => {
626
+
return `<div><label class="${tooltip?'tooltip':''}" title="${tooltip?tooltip:name}"><input id="cb-${id}" type="checkbox" ${checked?'checked':''} ${disabled?'disabled':''}> ${name}</label></div>`;
618
627
};
619
-
const optInsertLarge = (name, id, tooltip = '', checked = true) => {
620
-
return `<div class="large option"><label class="${tooltip?'tooltip':''}" title="${tooltip}"><input id="cbgroup-${id}" type="checkbox" ${checked?'checked':''}> ${name}</label></div>`;
628
+
const optInsertLarge = (name, id, tooltip, checked = true) => {
629
+
return `<div class="large option"><label class="${tooltip?'tooltip':''}" title="${tooltip?tooltip:name}"><input id="cbgroup-${id}" type="checkbox" ${checked?'checked':''}> ${name}</label></div>`;
621
630
};
622
631
623
632
/** Clear out any previous options. */