|
1 | 1 | --- |
2 | | -layout: document |
| 2 | +layout: single |
3 | 3 | --- |
4 | 4 |
|
5 | | -{% for group in page.data %} |
6 | | - |
7 | | -{% capture notice %} |
8 | | - |
9 | | -## {{ group.title }} |
10 | | - |
| 5 | +{%- for group in page.data %} |
| 6 | +<h2 id="{{ group.title }}">{{ group.title }}</h2> |
11 | 7 | {% for pair in group.settings %} |
12 | 8 | {% assign name = pair[0] %} |
13 | 9 | {% assign value = pair[1] %} |
14 | 10 | {% assign setting = site.data.settings[name] %} |
15 | | - |
16 | | -{% if setting.type == 'radio' %} |
17 | 11 | <div class="notice"> |
18 | | - <ul class="task-list"> |
19 | | - <li><strong>{{ value.title }}</strong></li> |
20 | | - <li>{{ value.description }}</li> |
21 | | - {% for option in setting.options %} |
22 | | - <li class="task-list-item"> |
23 | | - <input type="radio" class="task-list-item-checkbox" name="{{ name }}" value="{{ option }}" id="{{ name }}_{{ option }}"{% if setting.default == option %} checked{% endif %}><label for="{{ name }}_{{ option }}">{{ value.options[option] }}</label> |
24 | | - </li> |
25 | | - {% endfor %} |
26 | | - </ul> |
| 12 | + <h3 id="{{ name }}">{{ value.title }}</h3> |
| 13 | + {% if value.description %}<p>{{ value.description }}</p>{% endif %} |
| 14 | + {% if setting.type == 'radio' %} |
| 15 | + {% for option in setting.options %} |
| 16 | + <label> |
| 17 | + <input type="radio"{% if setting.default == option %} checked{% endif %} class="setting-item" name="{{ name }}" value="{{ option }}"> |
| 18 | + {{ value.options[option] }} |
| 19 | + </label> |
| 20 | + {% endfor %} |
| 21 | + {% elsif setting.type == 'multi-radio' %} |
| 22 | + <table class="setting-multi-radio"> |
| 23 | + <thead> |
| 24 | + <tr> |
| 25 | + <th>{{ value.title }}</th> |
| 26 | + {% for item in setting.children %} |
| 27 | + {% capture item_name %}{{ item[0] }}{% endcapture %} |
| 28 | + <th>{{ value.children[item_name] }}</th> |
| 29 | + {% endfor %} |
| 30 | + </tr> |
| 31 | + </thead> |
| 32 | + <tbody> |
| 33 | + {% for option in setting.options %} |
| 34 | + <tr> |
| 35 | + <th>{{ value.options[option] }}</th> |
| 36 | + {% for item in setting.children %} |
| 37 | + <td><input class="setting-item"{% if item[1].default == option %} checked{% endif %} type="radio" name="{{ name }}.{{ item[0] }}" value="{{ option }}"></td> |
| 38 | + {% endfor %} |
| 39 | + </tr> |
| 40 | + {% endfor %} |
| 41 | + </tbody> |
| 42 | + </table> |
| 43 | + {% endif %} |
27 | 44 | </div> |
| 45 | +{% endfor %} |
| 46 | +{% endfor %} |
28 | 47 |
|
29 | 48 | <script> |
30 | | - settings.onChange("{{ name }}", function (newValue, oldValue) { |
31 | | - var list = document.getElementsByName("{{ name }}"); |
32 | | - for (var i = 0; i < list.length; i++) { |
33 | | - list[i].checked = list[i].value === newValue; |
34 | | - list[i].onchange = function () { |
35 | | - if (this.checked) { |
36 | | - settings.set(this.name, this.value); |
37 | | - } |
38 | | - } |
39 | | - } |
40 | | - }); |
| 49 | + for (const settingItem of document.getElementsByClassName("setting-item")) { |
| 50 | + settingItem.addEventListener("change", ({ target }) => settings.set(target.name, target.value)); |
| 51 | + settings.onChange(settingItem.name, (value) => settingItem.type === "radio" && (settingItem.checked = settingItem.value === value)); |
| 52 | + } |
41 | 53 | </script> |
42 | | -{% endif %} |
43 | | -{% endfor %} |
44 | | -{% endcapture %} |
45 | | -{{ notice | markdownify }} |
46 | | -{% endfor %} |
| 54 | + |
| 55 | +<style>.notice label input { display: inline }</style> |
0 commit comments