headmin 0.4.2 → 0.5.2

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

@@ -0,0 +1,110 @@
+/* global CustomEvent */
+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())
+          }
+        }
+      )
+    )
+  }
+
+  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;
+  }
+}

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

@@ -19,6 +19,9 @@ export default class extends Controller {
   }
 
   handleOutsideClick (event) {
+    const itemRemoved = !document.body.contains(event.target) // Ignore items that were removed from DOM (else this triggers a close)
+    if (itemRemoved) return
+
     const inPopup = event.target.closest('[data-popup-target="popup"]') !== null
     const inButton = event.target.closest('[data-popup-target="button"]') !== null
     const openPopup = document.querySelector('[data-popup-target="popup"]:not(.closed)')
@@ -53,7 +56,6 @@ export default class extends Controller {
   close (event) {
     const button = event.target.closest('[data-popup-target="button"]')
     const popup = this.popupById(button.dataset.popupId)
-
     this.closePopup(popup)
   }
 

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

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { Modal } from 'bootstrap'
+
+export default class extends Controller {
+
+  connect () {
+    this.modal = new Modal(this.element)
+    this.modal.show()
+  }
+}

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

@@ -2,12 +2,12 @@ import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
   static get targets () {
-    return ['wrapper', 'form', 'select', 'method', 'button', 'idInputTemplate', 'id', 'counter']
+    return ['wrapper', 'form', 'select', 'method', 'button', 'idInput', 'counter']
   }
 
   connect () {
     this.wrapperTarget.addEventListener('idSelectionChanged', (event) => {
-      this.updateIdFields(event.detail.ids)
+      this.updateIdInput(event.detail.ids)
       this.updateCounter(event.detail.count)
       this.toggleCounter(event.detail.count)
     })
@@ -21,17 +21,24 @@ export default class extends Controller {
     this.enableButton()
   }
 
-  updateIdFields (ids) {
-    this.removeIds()
-    if (ids instanceof Array) {
-      ids.forEach((id) => {
-        this.addId(id)
-      })
+  updateIdInput (ids) {
+    if (ids == null) {
+      this.disableIdInput()
+      this.idInputTarget.value = ''
     } else {
-      this.addId('')
+      this.enableIdInput()
+      this.idInputTarget.value = `in:${ids.join(',')}`
     }
   }
 
+  disableIdInput () {
+    this.idInputTarget.removeAttribute('name')
+  }
+
+  enableIdInput () {
+    this.idInputTarget.setAttribute('name', 'id')
+  }
+
   updateCounter (count) {
     let htmlString = ''
     switch (count) {
@@ -94,16 +101,4 @@ export default class extends Controller {
   enableButton () {
     this.buttonTarget.removeAttribute('disabled')
   }
-
-  addId (id) {
-    const template = this.idInputTemplateTarget
-    const input = template.innerHTML.replace(/ID/g, id)
-    this.formTarget.insertAdjacentHTML('afterbegin', input)
-  }
-
-  removeIds () {
-    this.idTargets.forEach((input) => {
-      this.formTarget.removeChild(input)
-    })
-  }
 }

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

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static get targets () {
+    return ['textarea', 'count']
+  }
+
+  connect () {
+    this.update()
+  }
+
+  update () {
+    this.resize()
+    this.updateCount()
+  }
+
+  resize () {
+    this.textareaTarget.style.height = 'auto'
+    this.textareaTarget.setAttribute('style', 'height:' + (this.textareaTarget.scrollHeight) + 'px;overflow-y:hidden;')
+  }
+
+  updateCount () {
+    if (this.textareaTarget.getAttribute('maxlength')) {
+      this.updateCountLength()
+    }
+  }
+
+  updateCountLength () {
+    const current_length = this.textareaTarget.value.length
+    const maximum_length = this.textareaTarget.getAttribute('maxlength')
+
+    this.countTarget.textContent = `${current_length}/${maximum_length}`
+  }
+}

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

@@ -6,16 +6,21 @@ import DateRangeController from './controllers/date_range_controller'
 import DropzoneController from './controllers/dropzone_controller'
 import FilePreviewController from './controllers/file_preview_controller'
 import FilterController from './controllers/filter_controller'
+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 MediaController from './controllers/media_controller'
+import MediaModalController from './controllers/media_modal_controller'
 import NotificationController from './controllers/notification_controller'
 import PopupController from './controllers/popup_controller'
 import RedactorxController from './controllers/redactorx_controller'
+import RemoteModalController from './controllers/remote_modal_controller'
 import RepeaterController from './controllers/repeater_controller'
 import SelectController from './controllers/select_controller'
 import TableActionsController from './controllers/table_actions_controller'
 import TableController from './controllers/table_controller'
+import TextareaController from './controllers/textarea_controller'
 
 export class Headmin {
   static start () {
@@ -26,15 +31,20 @@ export class Headmin {
     Stimulus.register('dropzone', DropzoneController)
     Stimulus.register('file-preview', FilePreviewController)
     Stimulus.register('filter', FilterController)
+    Stimulus.register('filter-row', FilterRowController)
     Stimulus.register('filters', FiltersController)
     Stimulus.register('flatpickr', FlatpickrController)
     Stimulus.register('hello', HelloController)
+    Stimulus.register('media', MediaController)
+    Stimulus.register('media-modal', MediaModalController)
     Stimulus.register('notification', NotificationController)
     Stimulus.register('popup', PopupController)
     Stimulus.register('redactorx', RedactorxController)
+    Stimulus.register('remote-modal', RemoteModalController)
     Stimulus.register('repeater', RepeaterController)
     Stimulus.register('select', SelectController)
     Stimulus.register('table', TableController)
     Stimulus.register('table-actions', TableActionsController)
+    Stimulus.register('textarea', TextareaController)
   }
 }