- let optHtml = "";
- for (let select of Rules.Options.select) {
- optHtml += `
- <label for="var_${select.variable}">${select.label}</label>
- <select id="var_${select.variable}" data-numeric="1">`;
- for (option of select.options) {
- const defaut = option.value == select.defaut;
- optHtml += `<option value="${option.value}"`;
- if (defaut) optHtml += 'selected="true"';
- optHtml += `>${option.label}</option>`;
+ let optHtml = Rules.Options.select.map(select => { return `
+ <div class="option-select">
+ <label for="var_${select.variable}">${select.label}</label>
+ <div class="select">
+ <select id="var_${select.variable}" data-numeric="1">` +
+ select.options.map(option => { return `
+ <option
+ value="${option.value}"
+ ${option.value == select.defaut ? " selected" : ""}
+ >
+ ${option.label}
+ </option>`;
+ }).join("") + `
+ </select>
+ <span class="focus"></span>
+ </div>
+ </div>`;
+ }).join("");
+ optHtml += Rules.Options.check.map(check => {
+ return `
+ <div class="option-check">
+ <label class="checkbox">
+ <input id="var_${check.variable}"
+ type="checkbox"${check.defaut ? " checked" : ""}/>
+ <span class="spacer"></span>
+ <span>${check.label}</span>
+ </label>
+ </div>`;
+ }).join("");
+ if (Rules.Options.styles.length >= 1) {
+ optHtml += '<div class="words">';
+ let i = 0;
+ const stylesLength = Rules.Options.styles.length;
+ while (i < stylesLength) {
+ optHtml += '<div class="row">';
+ for (let j=i; j<i+4; j++) {
+ if (j == stylesLength) break;
+ const style = Rules.Options.styles[j];
+ optHtml +=
+ `<span onClick="toggleStyle(event, '${style}')">${style}</span>`;
+ }
+ optHtml += "</div>";
+ i += 4;