mirror of https://github.com/interlegis/sigi.git
Sesostris Vieira
2 years ago
2 changed files with 244 additions and 0 deletions
@ -0,0 +1,201 @@ |
|||||
|
/*global gettext, interpolate, ngettext*/ |
||||
|
'use strict'; |
||||
|
{ |
||||
|
function show(selector) { |
||||
|
document.querySelectorAll(selector).forEach(function(el) { |
||||
|
el.classList.remove('hidden'); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function hide(selector) { |
||||
|
document.querySelectorAll(selector).forEach(function(el) { |
||||
|
el.classList.add('hidden'); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function showQuestion(options) { |
||||
|
hide(options.acrossClears); |
||||
|
show(options.acrossQuestions); |
||||
|
hide(options.allContainer); |
||||
|
} |
||||
|
|
||||
|
function showClear(options) { |
||||
|
show(options.acrossClears); |
||||
|
hide(options.acrossQuestions); |
||||
|
document.querySelector(options.actionContainer).classList.remove(options.selectedClass); |
||||
|
show(options.allContainer); |
||||
|
hide(options.counterContainer); |
||||
|
} |
||||
|
|
||||
|
function reset(options) { |
||||
|
hide(options.acrossClears); |
||||
|
hide(options.acrossQuestions); |
||||
|
hide(options.allContainer); |
||||
|
show(options.counterContainer); |
||||
|
} |
||||
|
|
||||
|
function clearAcross(options) { |
||||
|
reset(options); |
||||
|
const acrossInputs = document.querySelectorAll(options.acrossInput); |
||||
|
acrossInputs.forEach(function(acrossInput) { |
||||
|
acrossInput.value = 0; |
||||
|
}); |
||||
|
document.querySelector(options.actionContainer).classList.remove(options.selectedClass); |
||||
|
} |
||||
|
|
||||
|
function checker(actionCheckboxes, options, checked) { |
||||
|
if (checked) { |
||||
|
showQuestion(options); |
||||
|
} else { |
||||
|
reset(options); |
||||
|
} |
||||
|
actionCheckboxes.forEach(function(el) { |
||||
|
el.checked = checked; |
||||
|
el.closest('tr').classList.toggle(options.selectedClass, checked); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
function updateCounter(actionCheckboxes, options) { |
||||
|
const sel = Array.from(actionCheckboxes).filter(function(el) { |
||||
|
return el.checked; |
||||
|
}).length; |
||||
|
const counter = document.querySelector(options.counterContainer); |
||||
|
// data-actions-icnt is defined in the generated HTML
|
||||
|
// and contains the total amount of objects in the queryset
|
||||
|
const actions_icnt = Number(counter.dataset.actionsIcnt); |
||||
|
counter.textContent = interpolate( |
||||
|
ngettext('%(sel)s of %(cnt)s selected', '%(sel)s of %(cnt)s selected', sel), { |
||||
|
sel: sel, |
||||
|
cnt: actions_icnt |
||||
|
}, true); |
||||
|
const allToggle = document.getElementById(options.allToggleId); |
||||
|
allToggle.checked = sel === actionCheckboxes.length; |
||||
|
if (allToggle.checked) { |
||||
|
showQuestion(options); |
||||
|
} else { |
||||
|
clearAcross(options); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const defaults = { |
||||
|
actionContainer: "div.actions", |
||||
|
counterContainer: "span.action-counter", |
||||
|
allContainer: "div.actions span.all", |
||||
|
acrossInput: "div.actions input.select-across", |
||||
|
acrossQuestions: "div.actions span.question", |
||||
|
acrossClears: "div.actions span.clear", |
||||
|
allToggleId: "action-toggle", |
||||
|
selectedClass: "selected" |
||||
|
}; |
||||
|
|
||||
|
window.Actions = function(actionCheckboxes, options) { |
||||
|
options = Object.assign({}, defaults, options); |
||||
|
let list_editable_changed = false; |
||||
|
let lastChecked = null; |
||||
|
let shiftPressed = false; |
||||
|
|
||||
|
document.addEventListener('keydown', (event) => { |
||||
|
shiftPressed = event.shiftKey; |
||||
|
}); |
||||
|
|
||||
|
document.addEventListener('keyup', (event) => { |
||||
|
shiftPressed = event.shiftKey; |
||||
|
}); |
||||
|
|
||||
|
document.getElementById(options.allToggleId).addEventListener('click', function(event) { |
||||
|
checker(actionCheckboxes, options, this.checked); |
||||
|
updateCounter(actionCheckboxes, options); |
||||
|
}); |
||||
|
|
||||
|
document.querySelectorAll(options.acrossQuestions + " a").forEach(function(el) { |
||||
|
el.addEventListener('click', function(event) { |
||||
|
event.preventDefault(); |
||||
|
const acrossInputs = document.querySelectorAll(options.acrossInput); |
||||
|
acrossInputs.forEach(function(acrossInput) { |
||||
|
acrossInput.value = 1; |
||||
|
}); |
||||
|
showClear(options); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
document.querySelectorAll(options.acrossClears + " a").forEach(function(el) { |
||||
|
el.addEventListener('click', function(event) { |
||||
|
event.preventDefault(); |
||||
|
document.getElementById(options.allToggleId).checked = false; |
||||
|
clearAcross(options); |
||||
|
checker(actionCheckboxes, options, false); |
||||
|
updateCounter(actionCheckboxes, options); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
function affectedCheckboxes(target, withModifier) { |
||||
|
const multiSelect = (lastChecked && withModifier && lastChecked !== target); |
||||
|
if (!multiSelect) { |
||||
|
return [target]; |
||||
|
} |
||||
|
const checkboxes = Array.from(actionCheckboxes); |
||||
|
const targetIndex = checkboxes.findIndex(el => el === target); |
||||
|
const lastCheckedIndex = checkboxes.findIndex(el => el === lastChecked); |
||||
|
const startIndex = Math.min(targetIndex, lastCheckedIndex); |
||||
|
const endIndex = Math.max(targetIndex, lastCheckedIndex); |
||||
|
const filtered = checkboxes.filter((el, index) => (startIndex <= index) && (index <= endIndex)); |
||||
|
return filtered; |
||||
|
}; |
||||
|
|
||||
|
Array.from(document.getElementById('result_list').tBodies).forEach(function(el) { |
||||
|
el.addEventListener('change', function(event) { |
||||
|
const target = event.target; |
||||
|
if (target.classList.contains('action-select')) { |
||||
|
const checkboxes = affectedCheckboxes(target, shiftPressed); |
||||
|
checker(checkboxes, options, target.checked); |
||||
|
updateCounter(actionCheckboxes, options); |
||||
|
lastChecked = target; |
||||
|
} else { |
||||
|
list_editable_changed = true; |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
document.querySelector('#changelist-form button[name=index]').addEventListener('click', function(event) { |
||||
|
if (list_editable_changed) { |
||||
|
const confirmed = confirm(gettext("You have unsaved changes on individual editable fields. If you run an action, your unsaved changes will be lost.")); |
||||
|
if (!confirmed) { |
||||
|
event.preventDefault(); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
const el = document.querySelector('#changelist-form input[name=_save]'); |
||||
|
// The button does not exist if no fields are editable.
|
||||
|
if (el) { |
||||
|
el.addEventListener('click', function(event) { |
||||
|
if (document.querySelector('[name=action]').value) { |
||||
|
const text = list_editable_changed |
||||
|
? gettext("You have selected an action, but you haven’t saved your changes to individual fields yet. Please click OK to save. You’ll need to re-run the action.") |
||||
|
: gettext("You have selected an action, and you haven’t made any changes on individual fields. You’re probably looking for the Go button rather than the Save button."); |
||||
|
if (!confirm(text)) { |
||||
|
event.preventDefault(); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// Call function fn when the DOM is loaded and ready. If it is already
|
||||
|
// loaded, call the function now.
|
||||
|
// http://youmightnotneedjquery.com/#ready
|
||||
|
function ready(fn) { |
||||
|
if (document.readyState !== 'loading') { |
||||
|
fn(); |
||||
|
} else { |
||||
|
document.addEventListener('DOMContentLoaded', fn); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
ready(function() { |
||||
|
const actionsEls = document.querySelectorAll('tr input.action-select'); |
||||
|
if (actionsEls.length > 0) { |
||||
|
Actions(actionsEls); |
||||
|
} |
||||
|
}); |
||||
|
} |
@ -0,0 +1,43 @@ |
|||||
|
/*global URLify*/ |
||||
|
'use strict'; |
||||
|
{ |
||||
|
const $ = django.jQuery; |
||||
|
$.fn.prepopulate = function(dependencies, maxLength, allowUnicode) { |
||||
|
/* |
||||
|
Depends on urlify.js |
||||
|
Populates a selected field with the values of the dependent fields, |
||||
|
URLifies and shortens the string. |
||||
|
dependencies - array of dependent fields ids |
||||
|
maxLength - maximum length of the URLify'd string |
||||
|
allowUnicode - Unicode support of the URLify'd string |
||||
|
*/ |
||||
|
return this.each(function() { |
||||
|
const prepopulatedField = $(this); |
||||
|
|
||||
|
const populate = function() { |
||||
|
// Bail if the field's value has been changed by the user
|
||||
|
if (prepopulatedField.data('_changed')) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const values = []; |
||||
|
$.each(dependencies, function(i, field) { |
||||
|
field = $(field); |
||||
|
if (field.val().length > 0) { |
||||
|
values.push(field.val()); |
||||
|
} |
||||
|
}); |
||||
|
prepopulatedField.val(URLify(values.join(' '), maxLength, allowUnicode)); |
||||
|
}; |
||||
|
|
||||
|
prepopulatedField.data('_changed', false); |
||||
|
prepopulatedField.on('change', function() { |
||||
|
prepopulatedField.data('_changed', true); |
||||
|
}); |
||||
|
|
||||
|
if (!prepopulatedField.val()) { |
||||
|
$(dependencies.join(',')).on('keyup change focus', populate); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
} |
Loading…
Reference in new issue