headmin.js in headmin-0.6.2

- old
+ new

@@ -7716,11 +7716,10 @@
       name: String
     };
   }
   connect() {
     this.element.controller = this;
-    this.updateHiddenValue();
   }
   toggle(event) {
     const expanded = this.buttonTarget.getAttribute("aria-expanded") === "true";
     if (expanded) {
       this.close(null);
@@ -7774,11 +7773,18 @@
   buildInstructionString() {
     let string = "";
     for (const row of this.rowTargets) {
       const conditional = row.previousElementSibling ? row.previousElementSibling.querySelector('[data-filter-target="conditional"]').value : null;
       const operator = row.querySelector('[data-filter-target="operator"]').value;
-      const value = row.querySelector('[data-filter-target="value"]').value;
+      let values = Array.from(row.querySelectorAll('[data-filter-target="value"]'));
+      values = values.filter((element) => {
+        return element.style.display;
+      });
+      values = values.map((element) => {
+        return element.value;
+      });
+      const value = values.join(",");
       string += `${conditional || ""}${operator}:${value}`;
     }
     return string;
   }
   getTemplateHTML() {
@@ -7797,30 +7803,55 @@
     this.handleOperatorChange();
   }
   handleOperatorChange() {
     if (this.operatorTarget.value === "is_null" || this.operatorTarget.value === "is_not_null") {
       this.toggleNullInput();
+    } else if (this.operatorTarget.value === "between" || this.operatorTarget.value === "not_between") {
+      this.toggleSecondaryInput();
     } else {
       this.toggleOriginalInput();
     }
   }
   toggleNullInput() {
     this.hideOriginal();
+    this.hideSecondary();
     this.showNull();
   }
   toggleOriginalInput() {
     this.showOriginal();
+    this.hideSecondary();
     this.hideNull();
   }
+  toggleSecondaryInput() {
+    this.showSecondary();
+    this.hideOriginal();
+    this.hideNull();
+  }
   hideOriginal() {
     this.originalTarget.style.display = "none";
     this.originalTarget.setAttribute("data-filter-target", "value_original");
   }
   showOriginal() {
     this.originalTarget.style.display = "block";
     this.originalTarget.setAttribute("data-filter-target", "value");
   }
+  hideSecondary() {
+    for (const [index2, value] of this.originalTargets.entries()) {
+      if (index2 != 0) {
+        value.style.display = "none";
+        value.setAttribute("data-filter-target", "value_original");
+      }
+    }
+  }
+  showSecondary() {
+    for (const [index2, value] of this.originalTargets.entries()) {
+      if (index2 != 0) {
+        value.style.display = "block";
+        value.setAttribute("data-filter-target", "value");
+      }
+    }
+  }
   hideNull() {
     this.nullTarget.style.display = "none";
     this.nullTarget.setAttribute("data-filter-target", "value_null");
   }
   showNull() {
@@ -10091,10 +10122,33 @@
   connect() {
     this.element.textContent = "Hello world";
   }
 };
 
+// app/assets/javascripts/headmin/controllers/infinite_scroller_controller.js
+var infinite_scroller_controller_default = class extends Controller {
+  connect() {
+    this.clickWhenInViewport();
+    document.querySelector(".modal-body").addEventListener("scroll", () => {
+      this.clickWhenInViewport();
+    });
+  }
+  clickWhenInViewport() {
+    if (!this.isLoading() && this.isInViewport()) {
+      this.element.setAttribute("clicked", 1);
+      this.element.click();
+    }
+  }
+  isLoading() {
+    return this.element.hasAttribute("clicked");
+  }
+  isInViewport() {
+    const rect = this.element.getBoundingClientRect();
+    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+  }
+};
+
 // app/assets/javascripts/headmin/controllers/media_controller.js
 var media_controller_default = class extends Controller {
   static get targets() {
     return ["item", "template", "thumbnails", "modalButton", "placeholder", "count", "editButton", "validationInput"];
   }
@@ -10138,12 +10192,12 @@
   destroyItem(item) {
     this.removeItem(item);
     this.postProcess();
   }
   selectItems(items) {
-    this.removeAllItems();
-    this.addItems(items);
+    this.removeAllDeselectedItems(items);
+    this.addNewItems(items);
     this.postProcess();
   }
   postProcess() {
     this.resetPositions();
     this.syncIds();
@@ -10182,12 +10236,20 @@
       if (positionInput) {
         positionInput.value = index2;
       }
     });
   }
-  addItems(items) {
-    items.forEach((item) => this.addItem(item));
+  addNewItems(items) {
+    const itemTargetIds = this.itemTargets.map((i) => {
+      return parseInt(i.querySelectorAll("input")[1].value);
+    });
+    items.forEach((item) => {
+      if (itemTargetIds.includes(item.blobId)) {
+        return;
+      }
+      this.addItem(item);
+    });
   }
   addItem(item) {
     const currentItem = this.itemByBlobId(item.blobId);
     if (currentItem) {
       this.enableItem(currentItem);
@@ -10228,15 +10290,22 @@
   randomizeIds(template) {
     const regex = new RegExp(template.dataset.templateIdRegex, "g");
     const randomNumber = Math.floor(1e8 + Math.random() * 9e8);
     return template.innerHTML.replace(regex, randomNumber);
   }
-  removeAllItems() {
-    this.removeItems(this.itemTargets);
+  removeAllDeselectedItems(items) {
+    this.removeDeselectedItems(items, this.itemTargets);
   }
-  removeItems(items) {
+  removeDeselectedItems(elements, items) {
+    const returnedBlobIds = elements.map((e) => {
+      return e.blobId;
+    });
     items.forEach((item) => {
+      const blobId = parseInt(item.querySelectorAll("input")[1].value);
+      if (returnedBlobIds.includes(blobId)) {
+        return;
+      }
       this.removeItem(item);
     });
   }
   removeItem(item) {
     item.querySelector("input[name*='_destroy']").value = 1;
@@ -10265,10 +10334,13 @@
 // app/assets/javascripts/headmin/controllers/media_modal_controller.js
 var media_modal_controller_default = class extends Controller {
   static get targets() {
     return ["idCheckbox", "item", "form", "selectButton", "placeholder", "count"];
   }
+  static get values() {
+    return { ids: Array };
+  }
   connect() {
     this.validate();
     this.updateCount();
   }
   select() {
@@ -10276,48 +10348,78 @@
   }
   submitForm() {
     this.hidePlaceholder();
     this.triggerFormSubmission();
   }
-  inputChange() {
-    this.handleInputChange();
+  inputChange(event) {
+    this.handleIdsUpdate(event.target);
     this.updateCount();
   }
   hidePlaceholder() {
     this.placeholderTarget.classList.add("d-none");
   }
-  handleInputChange() {
+  handleIdsUpdate(element) {
+    if (element.checked) {
+      let arr = this.idsValue;
+      arr.push(element.value);
+      this.idsValue = arr;
+    } else {
+      this.idsValue = this.idsValue.filter((value) => {
+        return element.value !== value;
+      });
+    }
+  }
+  itemTargetConnected(element) {
+    this.updateItem(element.querySelector("input"));
+  }
+  updateItem(element) {
+    const arr = this.idsValue;
+    if (arr.includes(element.value)) {
+      element.checked = true;
+    } else {
+      element.checked = false;
+    }
+  }
+  idsValueChanged() {
+    for (const item of this.itemTargets) {
+      this.updateItem(item.querySelector("input"));
+    }
     this.validate();
   }
   dispatchSelectionEvent() {
     document.dispatchEvent(new CustomEvent("mediaSelectionSubmitted", {
       detail: {
         name: this.element.dataset.name,
-        items: this.renderItemsForEvent(this.selectedItems())
+        items: this.renderItemsForEvent()
       }
     }));
   }
   triggerFormSubmission() {
     this.formTarget.requestSubmit();
   }
-  renderItemsForEvent(items) {
-    return items.map((item) => this.renderItemForEvent(item));
+  renderItemsForEvent() {
+    return this.idsValue.map((item) => this.renderItemForEvent(item)).filter((i) => {
+      return i !== void 0;
+    });
   }
   renderItemForEvent(item) {
+    const id = parseInt(item);
+    const blob_id = `#blob_${id}`;
+    const element = this.element.querySelector(blob_id);
     return {
-      blobId: item.querySelector('input[type="checkbox"]').value,
-      thumbnail: item.querySelector(".h-thumbnail")
+      blobId: id,
+      thumbnail: element ? element.querySelector(".h-thumbnail") : ""
     };
   }
   selectedItems() {
     return this.itemTargets.filter((item) => {
       const checkbox = item.querySelector('input[type="checkbox"]');
       return checkbox.checked;
     });
   }
   selectedItemsCount() {
-    return this.selectedItems().length;
+    return this.idsValue.length;
   }
   minSelectedItems() {
     return parseInt(this.element.dataset.min, 10) || 0;
   }
   maxSelectedItems() {
@@ -10339,11 +10441,11 @@
   isValid() {
     const count = this.selectedItemsCount();
     return count >= this.minSelectedItems() && count <= this.maxSelectedItems();
   }
   updateCount() {
-    this.countTarget.innerHTML = this.idCheckboxTargets.filter((checkbox) => checkbox.checked).length;
+    this.countTarget.innerHTML = this.selectedItemsCount();
   }
 };
 
 // node_modules/@popperjs/core/lib/index.js
 var lib_exports = {};
@@ -15899,9 +16001,10 @@
     Stimulus.register("filter", filter_controller_default);
     Stimulus.register("filter-row", filter_row_controller_default);
     Stimulus.register("filters", filters_controller_default);
     Stimulus.register("flatpickr", flatpickr_controller_default);
     Stimulus.register("hello", hello_controller_default);
+    Stimulus.register("infinite-scroller", infinite_scroller_controller_default);
     Stimulus.register("media", media_controller_default);
     Stimulus.register("media-modal", media_modal_controller_default);
     Stimulus.register("notification", notification_controller_default);
     Stimulus.register("popup", popup_controller_default);
     Stimulus.register("redactorx", redactorx_controller_default);