add ui

ui/components/form/multiSelectCheckbox.page.js

@@ -0,0 +1,45 @@
+import { AutoloadPage } from 'vj/misc/PageLoader';
+
+const lastSelectionByGroup = {};
+
+function isInGroup(group) {
+  return (idx, element) => element.getAttribute('data-checkbox-group') === group;
+}
+
+function onRangeRoleCheckboxClick(ev) {
+  const $current = $(ev.currentTarget);
+  const targetGroup = $current.attr('data-checkbox-group');
+  const $targets = $('[type="checkbox"]')
+    .filter(isInGroup(targetGroup))
+    .filter(':visible')
+    .filter(':not(:disabled)');
+  if (ev.shiftKey && lastSelectionByGroup[targetGroup]) {
+    const destCheck = lastSelectionByGroup[targetGroup].prop('checked');
+    const from = $targets.index(lastSelectionByGroup[targetGroup]);
+    const to = $targets.index($current);
+    const start = Math.min(from, to);
+    const end = Math.max(from, to) + 1;
+    $targets
+      .slice(start, end)
+      .prop('checked', destCheck);
+  }
+  lastSelectionByGroup[targetGroup] = $current;
+}
+
+function onToggleRoleCheckboxClick(ev) {
+  const $current = $(ev.currentTarget);
+  const targetGroup = $current.attr('data-checkbox-toggle');
+  const $targets = $('[type="checkbox"]')
+    .filter(isInGroup(targetGroup))
+    .filter(':visible')
+    .filter(':not(:disabled)');
+  const destCheck = $current.prop('checked');
+  $targets.prop('checked', destCheck);
+}
+
+const multiSelectCheckboxPage = new AutoloadPage('multiSelectCheckboxPage', () => {
+  $(document).on('click', '[data-checkbox-range]', onRangeRoleCheckboxClick);
+  $(document).on('click', '[data-checkbox-toggle]', onToggleRoleCheckboxClick);
+});
+
+export default multiSelectCheckboxPage;