FossilRepo

fossilrepo / assets / admin / js / actions.js
Source Blame History 204 lines
afe42d0… ragelink 1 /*global gettext, interpolate, ngettext, Actions*/
afe42d0… ragelink 2 'use strict';
afe42d0… ragelink 3 {
afe42d0… ragelink 4 function show(selector) {
afe42d0… ragelink 5 document.querySelectorAll(selector).forEach(function(el) {
afe42d0… ragelink 6 el.classList.remove('hidden');
afe42d0… ragelink 7 });
afe42d0… ragelink 8 }
afe42d0… ragelink 9
afe42d0… ragelink 10 function hide(selector) {
afe42d0… ragelink 11 document.querySelectorAll(selector).forEach(function(el) {
afe42d0… ragelink 12 el.classList.add('hidden');
afe42d0… ragelink 13 });
afe42d0… ragelink 14 }
afe42d0… ragelink 15
afe42d0… ragelink 16 function showQuestion(options) {
afe42d0… ragelink 17 hide(options.acrossClears);
afe42d0… ragelink 18 show(options.acrossQuestions);
afe42d0… ragelink 19 hide(options.allContainer);
afe42d0… ragelink 20 }
afe42d0… ragelink 21
afe42d0… ragelink 22 function showClear(options) {
afe42d0… ragelink 23 show(options.acrossClears);
afe42d0… ragelink 24 hide(options.acrossQuestions);
afe42d0… ragelink 25 document.querySelector(options.actionContainer).classList.remove(options.selectedClass);
afe42d0… ragelink 26 show(options.allContainer);
afe42d0… ragelink 27 hide(options.counterContainer);
afe42d0… ragelink 28 }
afe42d0… ragelink 29
afe42d0… ragelink 30 function reset(options) {
afe42d0… ragelink 31 hide(options.acrossClears);
afe42d0… ragelink 32 hide(options.acrossQuestions);
afe42d0… ragelink 33 hide(options.allContainer);
afe42d0… ragelink 34 show(options.counterContainer);
afe42d0… ragelink 35 }
afe42d0… ragelink 36
afe42d0… ragelink 37 function clearAcross(options) {
afe42d0… ragelink 38 reset(options);
afe42d0… ragelink 39 const acrossInputs = document.querySelectorAll(options.acrossInput);
afe42d0… ragelink 40 acrossInputs.forEach(function(acrossInput) {
afe42d0… ragelink 41 acrossInput.value = 0;
afe42d0… ragelink 42 });
afe42d0… ragelink 43 document.querySelector(options.actionContainer).classList.remove(options.selectedClass);
afe42d0… ragelink 44 }
afe42d0… ragelink 45
afe42d0… ragelink 46 function checker(actionCheckboxes, options, checked) {
afe42d0… ragelink 47 if (checked) {
afe42d0… ragelink 48 showQuestion(options);
afe42d0… ragelink 49 } else {
afe42d0… ragelink 50 reset(options);
afe42d0… ragelink 51 }
afe42d0… ragelink 52 actionCheckboxes.forEach(function(el) {
afe42d0… ragelink 53 el.checked = checked;
afe42d0… ragelink 54 el.closest('tr').classList.toggle(options.selectedClass, checked);
afe42d0… ragelink 55 });
afe42d0… ragelink 56 }
afe42d0… ragelink 57
afe42d0… ragelink 58 function updateCounter(actionCheckboxes, options) {
afe42d0… ragelink 59 const sel = Array.from(actionCheckboxes).filter(function(el) {
afe42d0… ragelink 60 return el.checked;
afe42d0… ragelink 61 }).length;
afe42d0… ragelink 62 const counter = document.querySelector(options.counterContainer);
afe42d0… ragelink 63 // data-actions-icnt is defined in the generated HTML
afe42d0… ragelink 64 // and contains the total amount of objects in the queryset
afe42d0… ragelink 65 const actions_icnt = Number(counter.dataset.actionsIcnt);
afe42d0… ragelink 66 counter.textContent = interpolate(
afe42d0… ragelink 67 ngettext('%(sel)s of %(cnt)s selected', '%(sel)s of %(cnt)s selected', sel), {
afe42d0… ragelink 68 sel: sel,
afe42d0… ragelink 69 cnt: actions_icnt
afe42d0… ragelink 70 }, true);
afe42d0… ragelink 71 const allToggle = document.getElementById(options.allToggleId);
afe42d0… ragelink 72 allToggle.checked = sel === actionCheckboxes.length;
afe42d0… ragelink 73 if (allToggle.checked) {
afe42d0… ragelink 74 showQuestion(options);
afe42d0… ragelink 75 } else {
afe42d0… ragelink 76 clearAcross(options);
afe42d0… ragelink 77 }
afe42d0… ragelink 78 }
afe42d0… ragelink 79
afe42d0… ragelink 80 const defaults = {
afe42d0… ragelink 81 actionContainer: "div.actions",
afe42d0… ragelink 82 counterContainer: "span.action-counter",
afe42d0… ragelink 83 allContainer: "div.actions span.all",
afe42d0… ragelink 84 acrossInput: "div.actions input.select-across",
afe42d0… ragelink 85 acrossQuestions: "div.actions span.question",
afe42d0… ragelink 86 acrossClears: "div.actions span.clear",
afe42d0… ragelink 87 allToggleId: "action-toggle",
afe42d0… ragelink 88 selectedClass: "selected"
afe42d0… ragelink 89 };
afe42d0… ragelink 90
afe42d0… ragelink 91 window.Actions = function(actionCheckboxes, options) {
afe42d0… ragelink 92 options = Object.assign({}, defaults, options);
afe42d0… ragelink 93 let list_editable_changed = false;
afe42d0… ragelink 94 let lastChecked = null;
afe42d0… ragelink 95 let shiftPressed = false;
afe42d0… ragelink 96
afe42d0… ragelink 97 document.addEventListener('keydown', (event) => {
afe42d0… ragelink 98 shiftPressed = event.shiftKey;
afe42d0… ragelink 99 });
afe42d0… ragelink 100
afe42d0… ragelink 101 document.addEventListener('keyup', (event) => {
afe42d0… ragelink 102 shiftPressed = event.shiftKey;
afe42d0… ragelink 103 });
afe42d0… ragelink 104
afe42d0… ragelink 105 document.getElementById(options.allToggleId).addEventListener('click', function(event) {
afe42d0… ragelink 106 checker(actionCheckboxes, options, this.checked);
afe42d0… ragelink 107 updateCounter(actionCheckboxes, options);
afe42d0… ragelink 108 });
afe42d0… ragelink 109
afe42d0… ragelink 110 document.querySelectorAll(options.acrossQuestions + " a").forEach(function(el) {
afe42d0… ragelink 111 el.addEventListener('click', function(event) {
afe42d0… ragelink 112 event.preventDefault();
afe42d0… ragelink 113 const acrossInputs = document.querySelectorAll(options.acrossInput);
afe42d0… ragelink 114 acrossInputs.forEach(function(acrossInput) {
afe42d0… ragelink 115 acrossInput.value = 1;
afe42d0… ragelink 116 });
afe42d0… ragelink 117 showClear(options);
afe42d0… ragelink 118 });
afe42d0… ragelink 119 });
afe42d0… ragelink 120
afe42d0… ragelink 121 document.querySelectorAll(options.acrossClears + " a").forEach(function(el) {
afe42d0… ragelink 122 el.addEventListener('click', function(event) {
afe42d0… ragelink 123 event.preventDefault();
afe42d0… ragelink 124 document.getElementById(options.allToggleId).checked = false;
afe42d0… ragelink 125 clearAcross(options);
afe42d0… ragelink 126 checker(actionCheckboxes, options, false);
afe42d0… ragelink 127 updateCounter(actionCheckboxes, options);
afe42d0… ragelink 128 });
afe42d0… ragelink 129 });
afe42d0… ragelink 130
afe42d0… ragelink 131 function affectedCheckboxes(target, withModifier) {
afe42d0… ragelink 132 const multiSelect = (lastChecked && withModifier && lastChecked !== target);
afe42d0… ragelink 133 if (!multiSelect) {
afe42d0… ragelink 134 return [target];
afe42d0… ragelink 135 }
afe42d0… ragelink 136 const checkboxes = Array.from(actionCheckboxes);
afe42d0… ragelink 137 const targetIndex = checkboxes.findIndex(el => el === target);
afe42d0… ragelink 138 const lastCheckedIndex = checkboxes.findIndex(el => el === lastChecked);
afe42d0… ragelink 139 const startIndex = Math.min(targetIndex, lastCheckedIndex);
afe42d0… ragelink 140 const endIndex = Math.max(targetIndex, lastCheckedIndex);
afe42d0… ragelink 141 const filtered = checkboxes.filter((el, index) => (startIndex <= index) && (index <= endIndex));
afe42d0… ragelink 142 return filtered;
afe42d0… ragelink 143 };
afe42d0… ragelink 144
afe42d0… ragelink 145 Array.from(document.getElementById('result_list').tBodies).forEach(function(el) {
afe42d0… ragelink 146 el.addEventListener('change', function(event) {
afe42d0… ragelink 147 const target = event.target;
afe42d0… ragelink 148 if (target.classList.contains('action-select')) {
afe42d0… ragelink 149 const checkboxes = affectedCheckboxes(target, shiftPressed);
afe42d0… ragelink 150 checker(checkboxes, options, target.checked);
afe42d0… ragelink 151 updateCounter(actionCheckboxes, options);
afe42d0… ragelink 152 lastChecked = target;
afe42d0… ragelink 153 } else {
afe42d0… ragelink 154 list_editable_changed = true;
afe42d0… ragelink 155 }
afe42d0… ragelink 156 });
afe42d0… ragelink 157 });
afe42d0… ragelink 158
afe42d0… ragelink 159 document.querySelector('#changelist-form button[name=index]').addEventListener('click', function(event) {
afe42d0… ragelink 160 if (list_editable_changed) {
afe42d0… ragelink 161 const confirmed = confirm(gettext("You have unsaved changes on individual editable fields. If you run an action, your unsaved changes will be lost."));
afe42d0… ragelink 162 if (!confirmed) {
afe42d0… ragelink 163 event.preventDefault();
afe42d0… ragelink 164 }
afe42d0… ragelink 165 }
afe42d0… ragelink 166 });
afe42d0… ragelink 167
afe42d0… ragelink 168 const el = document.querySelector('#changelist-form input[name=_save]');
afe42d0… ragelink 169 // The button does not exist if no fields are editable.
afe42d0… ragelink 170 if (el) {
afe42d0… ragelink 171 el.addEventListener('click', function(event) {
afe42d0… ragelink 172 if (document.querySelector('[name=action]').value) {
afe42d0… ragelink 173 const text = list_editable_changed
afe42d0… ragelink 174 ? 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.")
afe42d0… ragelink 175 : 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.");
afe42d0… ragelink 176 if (!confirm(text)) {
afe42d0… ragelink 177 event.preventDefault();
afe42d0… ragelink 178 }
afe42d0… ragelink 179 }
afe42d0… ragelink 180 });
afe42d0… ragelink 181 }
afe42d0… ragelink 182 // Sync counter when navigating to the page, such as through the back
afe42d0… ragelink 183 // button.
afe42d0… ragelink 184 window.addEventListener('pageshow', (event) => updateCounter(actionCheckboxes, options));
afe42d0… ragelink 185 };
afe42d0… ragelink 186
afe42d0… ragelink 187 // Call function fn when the DOM is loaded and ready. If it is already
afe42d0… ragelink 188 // loaded, call the function now.
afe42d0… ragelink 189 // http://youmightnotneedjquery.com/#ready
afe42d0… ragelink 190 function ready(fn) {
afe42d0… ragelink 191 if (document.readyState !== 'loading') {
afe42d0… ragelink 192 fn();
afe42d0… ragelink 193 } else {
afe42d0… ragelink 194 document.addEventListener('DOMContentLoaded', fn);
afe42d0… ragelink 195 }
afe42d0… ragelink 196 }
afe42d0… ragelink 197
afe42d0… ragelink 198 ready(function() {
afe42d0… ragelink 199 const actionsEls = document.querySelectorAll('tr input.action-select');
afe42d0… ragelink 200 if (actionsEls.length > 0) {
afe42d0… ragelink 201 Actions(actionsEls);
afe42d0… ragelink 202 }
afe42d0… ragelink 203 });
afe42d0… ragelink 204 }

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button