15c51c9845
dd.alternatives triggers "widget", each (dt, dd) is an alternative with dt being the alternative (and radio button) label and dd being the actual content to display on selection.
81 lines
2.9 KiB
JavaScript
81 lines
2.9 KiB
JavaScript
(function () {
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
alternatives()
|
|
checks_handling();
|
|
});
|
|
|
|
/** alternatives display:
|
|
* - prepend control for each <dt>
|
|
* - radio input with link to following dd
|
|
* - label is <dt> content
|
|
* - hide all first-level dt and dd (CSS)
|
|
* - on change
|
|
* - hide all dds
|
|
* - show dd corresponding to the selected radio
|
|
* - automatically select first control on startup
|
|
*/
|
|
function alternatives() {
|
|
$('dl.alternatives').each(function (index) {
|
|
var $list = $(this),
|
|
$contents = $list.children('dd');
|
|
var $controls = $('<div class="alternatives-controls">').append(
|
|
$list.children('dt').map(function () {
|
|
var label = document.createElement('label'),
|
|
input = document.createElement('input');
|
|
input.setAttribute('type', 'radio');
|
|
input.setAttribute('name', 'alternatives-' + index);
|
|
|
|
var sibling = this;
|
|
while ((sibling = sibling.nextSibling) && sibling.nodeType !== 1);
|
|
input.content = sibling;
|
|
|
|
label.appendChild(input);
|
|
label.appendChild(document.createTextNode(' '));
|
|
label.appendChild(document.createTextNode(this.textContent));
|
|
|
|
return label;
|
|
}))
|
|
.insertBefore($list)
|
|
.on('change', 'input', function (e) {
|
|
// change event triggers only on newly selected input, not
|
|
// on the one being deselected
|
|
$contents.css('display', '');
|
|
var content = e.target.content;
|
|
content && (content.style.display = 'block');
|
|
})
|
|
.find('input:first').click();
|
|
});
|
|
}
|
|
function checks_handling() {
|
|
var $section = $('.checks-handling');
|
|
if (!$section.length) { return; }
|
|
|
|
var $ul = $section.find('ul')
|
|
.find('li').each(function () {
|
|
var txt = this.textContent;
|
|
while (this.firstChild) {
|
|
this.removeChild(this.firstChild)
|
|
}
|
|
|
|
$('<label style="display: block;">')
|
|
.append('<input type="radio" name="checks-handling">')
|
|
.append(' ')
|
|
.append(txt)
|
|
.appendTo(this);
|
|
}).end()
|
|
.on('change', 'input', update);
|
|
update();
|
|
function update() {
|
|
var $inputs = $ul.find('input');
|
|
var idx = 0;
|
|
$inputs.each(function (index) {
|
|
if (this.checked) {
|
|
idx = index;
|
|
}
|
|
}).eq(idx).prop('checked', true);
|
|
$ul.nextAll('div').hide().eq(idx).show();
|
|
}
|
|
|
|
}
|
|
})();
|