86 lines
3.2 KiB
JavaScript
86 lines
3.2 KiB
JavaScript
// View-settings modal: lets the user pick the folder listing's view style,
|
|
// sort key, and order, then persists them by POSTing to the folder with
|
|
// ?settings. Reuses openModal/closeModal and postReplace from page/actions.js.
|
|
function openViewSettings() {
|
|
var btn = document.getElementById('view-settings-btn');
|
|
var state = {
|
|
view: (btn && btn.dataset.view) || 'list',
|
|
sort: (btn && btn.dataset.sort) || 'name',
|
|
order: (btn && btn.dataset.order) || 'asc'
|
|
};
|
|
|
|
// segmented builds a row of mutually-exclusive .btn toggles bound to a
|
|
// single state key, marking the current choice with .is-active.
|
|
function segmented(key, options) {
|
|
var wrap = document.createElement('div');
|
|
wrap.className = 'row gap-1';
|
|
options.forEach(function (opt) {
|
|
var b = document.createElement('button');
|
|
b.type = 'button';
|
|
b.className = 'btn btn-small';
|
|
b.textContent = opt.label;
|
|
if (state[key] === opt.value) b.classList.add('is-active');
|
|
b.addEventListener('click', function () {
|
|
state[key] = opt.value;
|
|
wrap.querySelectorAll('button').forEach(function (x) {
|
|
x.classList.remove('is-active');
|
|
});
|
|
b.classList.add('is-active');
|
|
});
|
|
wrap.appendChild(b);
|
|
});
|
|
return wrap;
|
|
}
|
|
|
|
function field(labelText, control) {
|
|
var row = document.createElement('div');
|
|
row.className = 'col gap-1';
|
|
var label = document.createElement('span');
|
|
label.className = 'caption';
|
|
label.textContent = labelText;
|
|
row.appendChild(label);
|
|
row.appendChild(control);
|
|
return row;
|
|
}
|
|
|
|
var sortSelect = document.createElement('select');
|
|
sortSelect.className = 'input';
|
|
[['name', 'Name'], ['modified', 'Modified'], ['size', 'Size']].forEach(function (o) {
|
|
var opt = document.createElement('option');
|
|
opt.value = o[0];
|
|
opt.textContent = o[1];
|
|
if (state.sort === o[0]) opt.selected = true;
|
|
sortSelect.appendChild(opt);
|
|
});
|
|
sortSelect.addEventListener('change', function () { state.sort = sortSelect.value; });
|
|
|
|
var body = document.createElement('div');
|
|
body.className = 'col';
|
|
body.appendChild(field('View style', segmented('view', [
|
|
{ value: 'list', label: 'List' },
|
|
{ value: 'thumbnail', label: 'Thumbnail' }
|
|
])));
|
|
body.appendChild(field('Sort by', sortSelect));
|
|
body.appendChild(field('Order', segmented('order', [
|
|
{ value: 'asc', label: 'Asc' },
|
|
{ value: 'desc', label: 'Desc' }
|
|
])));
|
|
|
|
openModal({
|
|
title: 'View settings',
|
|
body: body,
|
|
confirm: {
|
|
label: 'SAVE',
|
|
onConfirm: function () {
|
|
var action = window.location.pathname + '?settings';
|
|
var formBody = 'view=' + encodeURIComponent(state.view) +
|
|
'&sort=' + encodeURIComponent(state.sort) +
|
|
'&order=' + encodeURIComponent(state.order);
|
|
var target = window.location.pathname;
|
|
closeModal();
|
|
postReplace(action, formBody, target);
|
|
}
|
|
}
|
|
});
|
|
}
|