diff --git a/html/modules/custom/ghi_form_elements/css/entity_browser.css b/html/modules/custom/ghi_form_elements/css/entity_browser.css
index 19ca78bfa..ccd57a274 100644
--- a/html/modules/custom/ghi_form_elements/css/entity_browser.css
+++ b/html/modules/custom/ghi_form_elements/css/entity_browser.css
@@ -44,6 +44,12 @@ form.entity-browser-form > div.view > .view-content {
margin: 0;
}
+form.entity-browser-form > div.view > .view-content .entity-browser-selection-counter {
+ position: absolute;
+ bottom: 1rem;
+ z-index: 1;
+}
+
form.entity-browser-form > div.view > nav {
margin: 0;
}
diff --git a/html/modules/custom/ghi_form_elements/ghi_form_elements.libraries.yml b/html/modules/custom/ghi_form_elements/ghi_form_elements.libraries.yml
index bbc0abf44..5dff478bc 100644
--- a/html/modules/custom/ghi_form_elements/ghi_form_elements.libraries.yml
+++ b/html/modules/custom/ghi_form_elements/ghi_form_elements.libraries.yml
@@ -71,4 +71,10 @@ custom_link:
entity_browser:
css:
component:
- css/entity_browser.css: {}
\ No newline at end of file
+ css/entity_browser.css: {}
+ js:
+ js/entity_browser.js: {}
+ dependencies:
+ - core/jquery
+ - core/drupal
+ - core/once
\ No newline at end of file
diff --git a/html/modules/custom/ghi_form_elements/js/entity_browser.js b/html/modules/custom/ghi_form_elements/js/entity_browser.js
new file mode 100644
index 000000000..eb7d50ed2
--- /dev/null
+++ b/html/modules/custom/ghi_form_elements/js/entity_browser.js
@@ -0,0 +1,54 @@
+/**
+ * @file
+ * JavaScript behaviors for entity browser.
+ */
+(function ($, Drupal, once) {
+ /**
+ * Keep track of selections across paginated lists.
+ *
+ * @type Object
+ */
+ let selections = {};
+
+ Drupal.behaviors.EntityBrowserSelections = {
+ attach: function (context, settings) {
+ once("entity-browser-form", 'form.entity-browser-form', context).forEach((form) => {
+ // Reset selections when the form is opened.
+ selections = {};
+
+ form.addEventListener("submit", (event) => {
+ Object.keys(selections).forEach((key) => {
+ if (!form.contains(selections[key])) {
+ // Add previous selections when they don't exist.
+ form.appendChild(selections[key]);
+ }
+ });
+ });
+ });
+
+ once("entity-browser-input", 'form.entity-browser-form > .view').forEach((view) => {
+ const counter = document.createElement("div");
+ counter.className = "entity-browser-selection-counter";
+ counter.innerText = Drupal.formatPlural(Object.keys(selections).length, "1 selection", "@count selections");
+ const table = view.querySelector(".view-content table.views-table");
+ table.parentNode.insertBefore(counter, table);
+
+ view.querySelectorAll('input[type="checkbox"][value]').forEach((element) => {
+ if (selections[element.name]) {
+ // Restore selection from the previous page.
+ element.checked = true;
+ }
+ $(element).on("change", () => {
+ if (element.checked) {
+ selections[element.name] = element.cloneNode();
+ selections[element.name].type = "hidden";
+ } else {
+ delete selections[element.name];
+ }
+ counter.innerText = Drupal.formatPlural(Object.keys(selections).length, "1 selection", "@count selections");
+ });
+ });
+ });
+ }
+ };
+})(jQuery, Drupal, once);
\ No newline at end of file