headmin 0.6.1 → 0.6.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f0d94377c6d3cf0d97bdffa08c34d9c95ef9b72036c8e7b1d0d1b89996ed52d
-  data.tar.gz: 9b263a38b16dacace7769f9eb2cab3b90dc478cc229fead7ae157c4fd48e7f65
+  metadata.gz: 4ec99ac85337bc096a16478a65e5434f37209281e861043a59f8cd4692197851
+  data.tar.gz: e3c9bf55658ce12c6d96ca0791ffa7e2dae14df3df9798e4ee21dc4b07b2f994
 SHA512:
-  metadata.gz: 3ee1ebb9dbc530154fd310c910dbab36e13272a0c3433b494588e6f552c5e8af6c6ee4f39b41f2737a7b2321805c02d9a5c22b7dfeea9c62455584ecc0cbc907
-  data.tar.gz: e88897ec516a9b4f83188f8eb12e1b49d46da547d03b459942da6f77266faee9031f0f3f06c5300529183e6f6cd9aa2112e92ce1b30ba7902edcd919b0f9ceaf
+  metadata.gz: c0eaf4ed9453bbc2cf383c82d050c708f7f8e7ba930c58fb9a0c2432ada5f4e928644b2d2e26ba331bd793bd4d58e5cca261f8e61ee091e987c90b62d6d096da
+  data.tar.gz: 249378b6c61d2d02b4349af48080fc9c53d8bba28fe41da0d7492c725502f2932384e3b9dfde718be1eca5f1cbc17c4d0ef884ec6dd21be804f0592be10bef7f

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    headmin (0.6.0)
+    headmin (0.6.1)
       closure_tree (~> 7.4)
       inline_svg (~> 1.7)
       redcarpet (~> 3.5)

data/app/assets/javascripts/headmin/controllers/filter_controller.js

@@ -15,8 +15,6 @@ export default class extends Controller {
   // This allows calling controller methods from the element in other controllers
   connect () {
     this.element.controller = this
-
-    this.updateHiddenValue()
   }
 
   toggle (event) {
@@ -89,7 +87,21 @@ export default class extends Controller {
     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"]'))
+
+      // Only the visible elements are of interest
+      values = values.filter((element) => {
+        return element.style.display;
+      })
+
+      // Grab the value of each visible element
+      values = values.map((element) => {
+        return element.value
+      })
+
+      // Concatenate array to a string
+      const value = values.join(",")
+
       string += `${conditional || ''}${operator}:${value}`
     }
 

data/app/assets/javascripts/headmin/controllers/filter_row_controller.js

@@ -1,50 +1,78 @@
-import { Controller } from '@hotwired/stimulus'
+import {Controller} from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static get targets () {
-    return ['original', 'operator', 'null']
-  }
-
-  connect () {
-    this.operatorTarget.addEventListener('change', () => this.handleOperatorChange())
-    this.handleOperatorChange()
-  }
-
-  handleOperatorChange () {
-    if (this.operatorTarget.value === 'is_null' || this.operatorTarget.value === 'is_not_null') {
-      this.toggleNullInput()
-    } else {
-      this.toggleOriginalInput()
-    }
-  }
-
-  toggleNullInput () {
-    this.hideOriginal()
-    this.showNull()
-  }
-
-  toggleOriginalInput () {
-    this.showOriginal()
-    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')
-  }
-
-  hideNull () {
-    this.nullTarget.style.display = 'none'
-    this.nullTarget.setAttribute('data-filter-target', 'value_null')
-  }
-
-  showNull () {
-    this.nullTarget.style.display = 'block'
-    this.nullTarget.setAttribute('data-filter-target', 'value')
-  }
+    static get targets() {
+        return ['original', 'operator', 'null']
+    }
+
+    connect() {
+        this.operatorTarget.addEventListener('change', () => this.handleOperatorChange())
+        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 [index, value] of this.originalTargets.entries()) {
+            if (index != 0) {
+                value.style.display = 'none'
+                value.setAttribute('data-filter-target', 'value_original')
+            }
+        }
+    }
+
+    showSecondary() {
+        for (const [index, value] of this.originalTargets.entries()) {
+            if (index != 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() {
+        this.nullTarget.style.display = 'block'
+        this.nullTarget.setAttribute('data-filter-target', 'value')
+    }
 }

data/app/assets/javascripts/headmin/controllers/infinite_scroller_controller.js

@@ -0,0 +1,30 @@
+/* global fetch, Event */
+import { Controller } from '@hotwired/stimulus'
+
+export 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);
+  }
+
+}

data/app/assets/javascripts/headmin/controllers/media_controller.js

@@ -66,10 +66,10 @@ export default class extends Controller {
 
   selectItems (items) {
     // Destroy all deselected items
-    this.removeAllItems()
+    this.removeAllDeselectedItems(items)
 
-    // Add all selected items
-    this.addItems(items)
+    // Add all new selected items
+    this.addNewItems(items)
 
     this.postProcess()
   }
@@ -129,8 +129,16 @@ export default class extends Controller {
     })
   }
 
-  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)) {
+        // Do not add this item (as it is already present)
+        return
+      }
+
+      this.addItem(item)
+    })
   }
 
   addItem (item) {
@@ -192,12 +200,20 @@ export default class extends Controller {
     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)) {
+        // Do not delete this one
+        return;
+      }
+
       this.removeItem(item)
     })
   }

data/app/assets/javascripts/headmin/controllers/media_modal_controller.js

@@ -1,110 +1,147 @@
 /* global CustomEvent */
-import { Controller } from '@hotwired/stimulus'
+import {Controller} from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static get targets () {
-    return ['idCheckbox', 'item', 'form', 'selectButton', 'placeholder', 'count']
-  }
-
-  connect () {
-    this.validate()
-    this.updateCount()
-  }
-
-  // Actions
-  select () {
-    this.dispatchSelectionEvent()
-  }
-
-  submitForm () {
-    this.hidePlaceholder()
-    this.triggerFormSubmission()
-  }
-
-  inputChange () {
-    this.handleInputChange()
-    this.updateCount()
-  }
-
-  // Methods
-  hidePlaceholder () {
-    this.placeholderTarget.classList.add('d-none')
-  }
-
-  handleInputChange () {
-    this.validate()
-  }
-
-  dispatchSelectionEvent () {
-    document.dispatchEvent(
-      new CustomEvent(
-        'mediaSelectionSubmitted',
-        {
-          detail: {
-            name: this.element.dataset.name,
-            items: this.renderItemsForEvent(this.selectedItems())
-          }
+    static get targets() {
+        return ['idCheckbox', 'item', 'form', 'selectButton', 'placeholder', 'count']
+    }
+
+    static get values () {
+        return { ids: Array }
+    }
+
+    connect() {
+        this.validate()
+        this.updateCount()
+    }
+
+    // Actions
+    select() {
+        this.dispatchSelectionEvent()
+    }
+
+    submitForm() {
+        this.hidePlaceholder()
+        this.triggerFormSubmission()
+    }
+
+    inputChange(event) {
+        this.handleIdsUpdate(event.target)
+        this.updateCount()
+    }
+
+    // Methods
+    hidePlaceholder() {
+        this.placeholderTarget.classList.add('d-none')
+    }
+
+    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
+            })
         }
-      )
-    )
-  }
-
-  triggerFormSubmission () {
-    this.formTarget.requestSubmit()
-  }
-
-  renderItemsForEvent (items) {
-    return items.map((item) => this.renderItemForEvent(item))
-  }
-
-  renderItemForEvent (item) {
-    return {
-      blobId: item.querySelector('input[type="checkbox"]').value,
-      thumbnail: item.querySelector('.h-thumbnail')
-    }
-  }
-
-  selectedItems () {
-    return this.itemTargets.filter((item) => {
-      const checkbox = item.querySelector('input[type="checkbox"]')
-      return checkbox.checked
-    })
-  }
-
-  selectedItemsCount () {
-    return this.selectedItems().length
-  }
-
-  minSelectedItems () {
-    return parseInt(this.element.dataset.min, 10) || 0
-  }
-
-  maxSelectedItems () {
-    return parseInt(this.element.dataset.max, 10) || Infinity
-  }
-
-  validate () {
-    if (this.isValid()) {
-      this.enableSelectButton()
-    } else {
-      this.disableSelectButton()
-    }
-  }
-
-  enableSelectButton () {
-    this.selectButtonTarget.removeAttribute('disabled')
-  }
-
-  disableSelectButton () {
-    this.selectButtonTarget.setAttribute('disabled', '')
-  }
-
-  isValid () {
-    const count = this.selectedItemsCount()
-    return count >= this.minSelectedItems() && count <= this.maxSelectedItems()
-  }
-
-  updateCount () {
-    this.countTarget.innerHTML = this.idCheckboxTargets.filter(checkbox => checkbox.checked).length
-  }
+    }
+
+    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()
+                    }
+                }
+            )
+        )
+    }
+
+    triggerFormSubmission() {
+        this.formTarget.requestSubmit()
+    }
+
+    renderItemsForEvent() {
+        return this.idsValue.map((item) => this.renderItemForEvent(item)).filter((i) => { return i !== undefined })
+    }
+
+    renderItemForEvent(item) {
+        const id = parseInt(item)
+        const blob_id = `#blob_${id}`
+        const element = this.element.querySelector(blob_id)
+
+        return {
+            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.idsValue.length
+    }
+
+    minSelectedItems() {
+        return parseInt(this.element.dataset.min, 10) || 0
+    }
+
+    maxSelectedItems() {
+        return parseInt(this.element.dataset.max, 10) || Infinity
+    }
+
+    validate() {
+        if (this.isValid()) {
+            this.enableSelectButton()
+        } else {
+            this.disableSelectButton()
+        }
+    }
+
+    enableSelectButton() {
+        this.selectButtonTarget.removeAttribute('disabled')
+    }
+
+    disableSelectButton() {
+        this.selectButtonTarget.setAttribute('disabled', '')
+    }
+
+    isValid() {
+        const count = this.selectedItemsCount()
+        return count >= this.minSelectedItems() && count <= this.maxSelectedItems()
+    }
+
+    updateCount() {
+        this.countTarget.innerHTML = this.selectedItemsCount()
+    }
 }

data/app/assets/javascripts/headmin/index.js

@@ -10,6 +10,7 @@ import FilterRowController from './controllers/filter_row_controller'
 import FiltersController from './controllers/filters_controller'
 import FlatpickrController from './controllers/flatpickr_controller'
 import HelloController from './controllers/hello_controller'
+import InfiniteScrollerController from './controllers/infinite_scroller_controller'
 import MediaController from './controllers/media_controller'
 import MediaModalController from './controllers/media_modal_controller'
 import NotificationController from './controllers/notification_controller'
@@ -35,6 +36,7 @@ export class Headmin {
     Stimulus.register('filters', FiltersController)
     Stimulus.register('flatpickr', FlatpickrController)
     Stimulus.register('hello', HelloController)
+    Stimulus.register('infinite-scroller', InfiniteScrollerController)
     Stimulus.register('media', MediaController)
     Stimulus.register('media-modal', MediaModalController)
     Stimulus.register('notification', NotificationController)