headmin 0.6.2 → 0.6.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4ec99ac85337bc096a16478a65e5434f37209281e861043a59f8cd4692197851
-  data.tar.gz: e3c9bf55658ce12c6d96ca0791ffa7e2dae14df3df9798e4ee21dc4b07b2f994
+  metadata.gz: 819c038f09a0d2dab83f4931d67256dd6130244afcff409af0580d8abf72d02c
+  data.tar.gz: 28fa2501518683ed07ce67315a42b62b1f2d8749208196a84ef20642125b815b
 SHA512:
-  metadata.gz: c0eaf4ed9453bbc2cf383c82d050c708f7f8e7ba930c58fb9a0c2432ada5f4e928644b2d2e26ba331bd793bd4d58e5cca261f8e61ee091e987c90b62d6d096da
-  data.tar.gz: 249378b6c61d2d02b4349af48080fc9c53d8bba28fe41da0d7492c725502f2932384e3b9dfde718be1eca5f1cbc17c4d0ef884ec6dd21be804f0592be10bef7f
+  metadata.gz: a117642e4cd9cc87484aa37ca85c0ba95a0e0747111b51ce87c529c92510a4b7dfa715aa432d8993b37b412aab30fa51f4a0b4876e2058d2fd83086ef1145a54
+  data.tar.gz: 06247200375b3fa43820d017fd7a174e29e5acea8a8c4fda239c95a8388e6df33918e1995fa4488e77c8c915ea8f9fc715d50f390e11edffc60794ca6eeeb2e3

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    headmin (0.6.1)
+    headmin (0.6.3)
       closure_tree (~> 7.4)
       inline_svg (~> 1.7)
       redcarpet (~> 3.5)
@@ -218,7 +218,7 @@ GEM
       zeitwerk (~> 2.5)
     rainbow (3.1.1)
     rake (13.0.6)
-    redcarpet (3.5.1)
+    redcarpet (3.6.0)
     regexp_parser (2.6.2)
     reline (0.3.2)
       io-console (~> 0.5)
@@ -288,8 +288,9 @@ GEM
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
-    with_advisory_lock (4.6.0)
-      activerecord (>= 4.2)
+    with_advisory_lock (5.1.0)
+      activerecord (>= 6.1)
+      zeitwerk (>= 2.6)
     xpath (3.2.0)
       nokogiri (~> 1.8)
     zeitwerk (2.6.6)

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

@@ -91,7 +91,7 @@ export default class extends Controller {
 
       // Only the visible elements are of interest
       values = values.filter((element) => {
-        return element.style.display;
+        return element.style.display
       })
 
       // Grab the value of each visible element
@@ -100,7 +100,7 @@ export default class extends Controller {
       })
 
       // Concatenate array to a string
-      const value = values.join(",")
+      const value = values.join(',')
 
       string += `${conditional || ''}${operator}:${value}`
     }

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

@@ -1,78 +1,78 @@
-import {Controller} from '@hotwired/stimulus'
+import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-    static get targets() {
-        return ['original', 'operator', 'null']
-    }
+  static get targets () {
+    return ['original', 'operator', 'null']
+  }
 
-    connect() {
-        this.operatorTarget.addEventListener('change', () => this.handleOperatorChange())
-        this.handleOperatorChange()
-    }
+  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()
-        }
+  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()
-    }
+  toggleNullInput () {
+    this.hideOriginal()
+    this.hideSecondary()
+    this.showNull()
+  }
 
-    toggleOriginalInput() {
-        this.showOriginal()
-        this.hideSecondary()
-        this.hideNull()
-    }
+  toggleOriginalInput () {
+    this.showOriginal()
+    this.hideSecondary()
+    this.hideNull()
+  }
 
-    toggleSecondaryInput() {
-        this.showSecondary()
-        this.hideOriginal()
-        this.hideNull()
-    }
+  toggleSecondaryInput () {
+    this.showSecondary()
+    this.hideOriginal()
+    this.hideNull()
+  }
 
-    hideOriginal() {
-        this.originalTarget.style.display = 'none'
-        this.originalTarget.setAttribute('data-filter-target', 'value_original')
-    }
+  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')
-    }
+  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')
-            }
-        }
+  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')
-            }
-        }
+  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')
-    }
+  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')
-    }
+  showNull () {
+    this.nullTarget.style.display = 'block'
+    this.nullTarget.setAttribute('data-filter-target', 'value')
+  }
 }

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

@@ -1,30 +1,28 @@
-/* global fetch, Event */
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  connect() {
+  connect () {
     this.clickWhenInViewport()
 
-    document.querySelector(".modal-body").addEventListener("scroll", () => {
+    document.querySelector('.modal-body').addEventListener('scroll', () => {
       this.clickWhenInViewport()
     })
   }
 
-  clickWhenInViewport() {
+  clickWhenInViewport () {
     if (!this.isLoading() && this.isInViewport()) {
-      this.element.setAttribute("clicked", 1)
+      this.element.setAttribute('clicked', 1)
       this.element.click()
     }
   }
 
-  isLoading() {
-    return this.element.hasAttribute("clicked")
+  isLoading () {
+    return this.element.hasAttribute('clicked')
   }
 
-  isInViewport() {
+  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);
+    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

@@ -130,7 +130,7 @@ export default class extends Controller {
   }
 
   addNewItems (items) {
-    const itemTargetIds = this.itemTargets.map((i) => { return parseInt(i.querySelectorAll("input")[1].value)})
+    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)
@@ -205,13 +205,13 @@ export default class extends Controller {
   }
 
   removeDeselectedItems (elements, items) {
-    const returnedBlobIds = elements.map((e) => { return e.blobId})
+    const returnedBlobIds = elements.map((e) => { return e.blobId })
 
     items.forEach((item) => {
-      const blobId = parseInt(item.querySelectorAll("input")[1].value)
+      const blobId = parseInt(item.querySelectorAll('input')[1].value)
       if (returnedBlobIds.includes(blobId)) {
         // Do not delete this one
-        return;
+        return
       }
 
       this.removeItem(item)

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

@@ -1,147 +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']
-    }
-
-    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
-            })
+  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) {
+      const 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()
+          }
         }
-    }
-
-    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()
-    }
+      )
+    )
+  }
+
+  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 blobId = `#blob_${id}`
+    const element = this.element.querySelector(blobId)
+
+    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.js

@@ -7836,7 +7836,7 @@ var filter_row_controller_default = class extends Controller {
   }
   hideSecondary() {
     for (const [index2, value] of this.originalTargets.entries()) {
-      if (index2 != 0) {
+      if (index2 !== 0) {
         value.style.display = "none";
         value.setAttribute("data-filter-target", "value_original");
       }
@@ -7844,7 +7844,7 @@ var filter_row_controller_default = class extends Controller {
   }
   showSecondary() {
     for (const [index2, value] of this.originalTargets.entries()) {
-      if (index2 != 0) {
+      if (index2 !== 0) {
         value.style.display = "block";
         value.setAttribute("data-filter-target", "value");
       }
@@ -10359,7 +10359,7 @@ var media_modal_controller_default = class extends Controller {
   }
   handleIdsUpdate(element) {
     if (element.checked) {
-      let arr = this.idsValue;
+      const arr = this.idsValue;
       arr.push(element.value);
       this.idsValue = arr;
     } else {
@@ -10403,8 +10403,8 @@ var media_modal_controller_default = class extends Controller {
   }
   renderItemForEvent(item) {
     const id = parseInt(item);
-    const blob_id = `#blob_${id}`;
-    const element = this.element.querySelector(blob_id);
+    const blobId = `#blob_${id}`;
+    const element = this.element.querySelector(blobId);
     return {
       blobId: id,
       thumbnail: element ? element.querySelector(".h-thumbnail") : ""

data/app/assets/stylesheets/headmin.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 @import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css";
 
-/* sass-plugin-0:/usr/local/var/www/headmin/src/scss/headmin.scss */
+/* sass-plugin-0:/opt/homebrew/var/www/headmin/src/scss/headmin.scss */
 :root {
   --bs-blue: #0d6efd;
   --bs-indigo: #6610f2;

data/app/views/headmin/media/create.turbo_stream.erb

@@ -1,5 +1,7 @@
 <%= turbo_stream.prepend "thumbnails" do %>
   <% @blobs.each do |blob| %>
-    <%= render "headmin/media/thumbnail", blob: blob %>
+    <%= turbo_frame_tag blob, src: headmin_media_item_thumbnail_path(blob), loading: "lazy" do %>
+      <%= render "thumbnail" %>
+    <% end %>
   <% end %>
 <% end %>

data/lib/headmin/version.rb

@@ -1,3 +1,3 @@
 module Headmin
-  VERSION = "0.6.2"
+  VERSION = "0.6.3"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "headmin",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Admin component library",
   "module": "app/assets/javascripts/headmin.js",
   "main": "app/assets/javascripts/headmin.js",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: headmin
 version: !ruby/object:Gem::Version
-  version: 0.6.2
+  version: 0.6.3
 platform: ruby
 authors:
 - Jef Vlamings
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2023-02-13 00:00:00.000000000 Z
+date: 2024-09-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: closure_tree
@@ -573,7 +573,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.3
+rubygems_version: 3.5.6
 signing_key:
 specification_version: 4
 summary: Admin component library