headmin 0.5.1 → 0.5.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a80387ee0e1dfc309d65f5e5eb450260dc84fda671904c3886eb50d2087c3eb
-  data.tar.gz: 98282252c395347dbb1c2490247c323649b4d282d1bc0d7a6bad32c51ec7ebfc
+  metadata.gz: c163e16eb068c93256e3a73a0ac3b58f569cc72c36da590f084ecb13873b8866
+  data.tar.gz: 9297b7bfd0194980aa843c45e59f9180349bc17e571cfe8f9c75678738de7def
 SHA512:
-  metadata.gz: 3c7271cbff3e46599c77506c07bdd0d0fc0d132bf7230202913a394b4b285f599c37866f52d28ff5d79b19ea59c754db7f25fab68bba71795e87d7d42139285a
-  data.tar.gz: 9900e4731b52d46486ea772433696774856b974d7bd2dc758628ce964c5d990296910c1a59a04990f5e509a5a1e341f3d9848d2043ad2ee2c14029c8096feae9
+  metadata.gz: b72bc6a71c864837e78619f8bfc7b0d455d4f57d108790f6d6619fbb3fe2acb882d2be87236b8a2d87204b55995fd4234c8617ee93be5a587b6eafa2616aaac4
+  data.tar.gz: 819ec0caa24dbfa82ac02dec7909d6c888550f87c71bf5eadae0b86b03a179c57b599c5a3af3b418e4435dfc569373a1b744ed5621380382bdf7cff4cb6d229d

data/CHANGELOG.md

@@ -32,10 +32,10 @@
 - BREAK: filter concern (controllers) has been renamed to filterable
 ```erb
 # Old
-<%= render "headmin/forms/date_range", form: form, start_attribute: :start_date, end_attribute: :end_date %>
+<%= render 'headmin/forms/date_range', form: form, start_attribute: :start_date, end_attribute: :end_date %>
 
 # New
-<%= render "headmin/forms/date_range", form: form, start: {attribute: :start_date}, end: {attribute: :end_date} %>
+<%= render 'headmin/forms/date_range', form: form, start: {attribute: :start_date}, end: {attribute: :end_date} %>
 ```
 
 ## 0.3

data/Gemfile

@@ -6,9 +6,23 @@ gemspec
 gem "capybara", ">= 3.26"
 gem "minitest", "~> 5.0"
 gem "minitest-spec-rails", "~> 6.1"
+gem "puma", "~> 5.2"
 gem "rails", "~> 7.0"
 gem "rake", "~> 13.0"
 gem "sprockets-rails", "~> 3.4"
 gem "sqlite3", "~> 1.4"
 gem "standard", "~> 1.7"
 gem "debug"
+
+# Dummy app
+gem "devise", "~> 4.8"
+gem "enumerize", "~> 2.3"
+gem "sassc-rails", "~> 2.1"
+gem "image_processing", "~> 1.2"
+gem "inline_svg", "~> 1.7"
+gem "kaminari", "~> 1.2"
+gem "route_translator", "~> 12.0"
+gem "acts_as_list", "~> 1.0"
+gem "breadcrumbs_on_rails", "~> 4.1"
+gem "importmap-rails", "~> 1.0"
+gem "hotwire-rails", "~> 0.1"

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    headmin (0.5.1)
+    headmin (0.5.3)
       closure_tree (~> 7.4)
       inline_svg (~> 1.7)
       redcarpet (~> 3.5)
@@ -75,9 +75,14 @@ GEM
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
+    acts_as_list (1.0.4)
+      activerecord (>= 4.2)
     addressable (2.8.0)
       public_suffix (>= 2.0.2, < 5.0)
     ast (2.4.2)
+    bcrypt (3.1.18)
+    breadcrumbs_on_rails (4.1.0)
+      railties (>= 5.0)
     builder (3.2.4)
     capybara (3.36.0)
       addressable
@@ -96,18 +101,49 @@ GEM
     debug (1.5.0)
       irb (>= 1.3.6)
       reline (>= 0.2.7)
+    devise (4.8.1)
+      bcrypt (~> 3.0)
+      orm_adapter (~> 0.1)
+      railties (>= 4.1.0)
+      responders
+      warden (~> 1.2.3)
     digest (3.1.0)
+    enumerize (2.5.0)
+      activesupport (>= 3.2)
     erubi (1.10.0)
+    ffi (1.15.5)
     globalid (1.0.0)
       activesupport (>= 5.0)
+    hotwire-rails (0.1.3)
+      rails (>= 6.0.0)
+      stimulus-rails
+      turbo-rails
     i18n (1.10.0)
       concurrent-ruby (~> 1.0)
+    image_processing (1.12.2)
+      mini_magick (>= 4.9.5, < 5)
+      ruby-vips (>= 2.0.17, < 3)
+    importmap-rails (1.0.3)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
     inline_svg (1.8.0)
       activesupport (>= 3.0)
       nokogiri (>= 1.6)
     io-console (0.5.11)
     irb (1.4.1)
       reline (>= 0.3.0)
+    kaminari (1.2.2)
+      activesupport (>= 4.1.0)
+      kaminari-actionview (= 1.2.2)
+      kaminari-activerecord (= 1.2.2)
+      kaminari-core (= 1.2.2)
+    kaminari-actionview (1.2.2)
+      actionview
+      kaminari-core (= 1.2.2)
+    kaminari-activerecord (1.2.2)
+      activerecord
+      kaminari-core (= 1.2.2)
+    kaminari-core (1.2.2)
     loofah (2.16.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
@@ -116,6 +152,7 @@ GEM
     marcel (1.0.2)
     matrix (0.4.2)
     method_source (1.0.0)
+    mini_magick (4.11.0)
     mini_mime (1.1.2)
     minitest (5.15.0)
     minitest-spec-rails (6.1.0)
@@ -142,10 +179,13 @@ GEM
       racc (~> 1.4)
     nokogiri (1.13.4-x86_64-linux)
       racc (~> 1.4)
+    orm_adapter (0.5.0)
     parallel (1.22.1)
     parser (3.1.2.0)
       ast (~> 2.4.1)
     public_suffix (4.0.7)
+    puma (5.6.4)
+      nio4r (~> 2.0)
     racc (1.6.0)
     rack (2.2.3)
     rack-test (1.1.0)
@@ -182,8 +222,15 @@ GEM
     regexp_parser (2.3.1)
     reline (0.3.1)
       io-console (~> 0.5)
+    responders (3.0.1)
+      actionpack (>= 5.0)
+      railties (>= 5.0)
     rexml (3.2.5)
-    rouge (3.28.0)
+    rouge (3.29.0)
+    route_translator (12.1.0)
+      actionpack (>= 5.2, < 7.1)
+      activesupport (>= 5.2, < 7.1)
+      addressable (~> 2.7)
     rubocop (1.28.2)
       parallel (~> 1.10)
       parser (>= 3.1.0.0)
@@ -199,6 +246,16 @@ GEM
       rubocop (>= 1.7.0, < 2.0)
       rubocop-ast (>= 0.4.0)
     ruby-progressbar (1.11.0)
+    ruby-vips (2.1.4)
+      ffi (~> 1.12)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    sassc-rails (2.1.2)
+      railties (>= 4.0.0)
+      sassc (>= 2.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
     sprockets (4.0.3)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
@@ -210,12 +267,20 @@ GEM
     standard (1.11.0)
       rubocop (= 1.28.2)
       rubocop-performance (= 1.13.3)
+    stimulus-rails (1.0.4)
+      railties (>= 6.0.0)
     strscan (3.0.1)
     thor (1.2.1)
+    tilt (2.0.10)
     timeout (0.2.0)
+    turbo-rails (1.0.1)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.1.0)
+    warden (1.2.9)
+      rack (>= 2.0.9)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -231,13 +296,25 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
+  acts_as_list (~> 1.0)
+  breadcrumbs_on_rails (~> 4.1)
   capybara (>= 3.26)
   debug
+  devise (~> 4.8)
+  enumerize (~> 2.3)
   headmin!
+  hotwire-rails (~> 0.1)
+  image_processing (~> 1.2)
+  importmap-rails (~> 1.0)
+  inline_svg (~> 1.7)
+  kaminari (~> 1.2)
   minitest (~> 5.0)
   minitest-spec-rails (~> 6.1)
+  puma (~> 5.2)
   rails (~> 7.0)
   rake (~> 13.0)
+  route_translator (~> 12.0)
+  sassc-rails (~> 2.1)
   sprockets-rails (~> 3.4)
   sqlite3 (~> 1.4)
   standard (~> 1.7)

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

@@ -0,0 +1,237 @@
+import { Controller } from '@hotwired/stimulus'
+import Sortable from 'sortablejs'
+
+export default class extends Controller {
+  static get targets () {
+    return ['item', 'template', 'thumbnails', 'modalButton', 'placeholder', 'validationInput', 'count', 'editButton']
+  }
+
+  connect () {
+    document.addEventListener('mediaSelectionSubmitted', (event) => {
+      if (event.detail.name === this.element.dataset.name) {
+        this.selectItems(event.detail.items)
+      }
+    })
+
+    // Init sorting
+    if (this.hasSorting()) {
+      this.initSortable()
+    }
+
+    this.validate()
+  }
+
+  // Actions
+  destroy (event) {
+    const item = event.currentTarget.closest('[data-media-target=\'item\']')
+    this.destroyItem(item)
+  }
+
+  syncIds () {
+    const ids = this.activeIds()
+
+    this.modalButtonTargets.forEach((button) => {
+      const url = new URL(button.getAttribute('href'))
+
+      // Remove all ids[]
+      url.searchParams.delete('ids[]')
+
+      // Add new ids
+      ids.forEach((id) => {
+        url.searchParams.append('ids[]', id)
+      })
+
+      button.setAttribute('href', url.toString())
+    })
+  }
+
+  // Methods
+  initSortable () {
+    Sortable.create(this.thumbnailsTarget, {
+      handle: '.media-drag-sort-handle',
+      onEnd: (event) => {
+        this.resetPositions()
+      }
+    })
+  }
+
+  hasSorting () {
+    return this.element.dataset.sort === 'true'
+  }
+
+  destroyItem (item) {
+    this.removeItem(item)
+    this.postProcess()
+  }
+
+  selectItems (items) {
+    // Destroy all deselected items
+    this.removeAllItems()
+
+    // Add all selected items
+    this.addItems(items)
+
+    this.postProcess()
+  }
+
+  postProcess () {
+    // Reset positions
+    this.resetPositions()
+
+    // Sync Ids
+    this.syncIds()
+
+    // Toggle placeholder
+    this.togglePlaceholder()
+
+    // Validate
+    this.validate()
+  }
+
+  validate () {
+    this.clearValidation()
+    if (this.element.dataset.required === '0') return
+    this.validateMinimum()
+    this.validateMaximum()
+  }
+
+  clearValidation () {
+    this.validationInputTarget.setCustomValidity('')
+  }
+
+  validateMinimum () {
+    const count = this.activeItems().length
+    if (count < this.minActiveItems()) {
+      this.validationInputTarget.setCustomValidity(this.validationInputTarget.dataset.minMessage)
+    }
+  }
+
+  validateMaximum () {
+    const count = this.activeItems().length
+    if (count > this.maxActiveItems()) {
+      this.validationInputTarget.setCustomValidity(this.validationInputTarget.dataset.maxMessage)
+    }
+  }
+
+  minActiveItems () {
+    return parseInt(this.element.dataset.min, 10) || 0
+  }
+
+  maxActiveItems () {
+    return parseInt(this.element.dataset.max, 10) || Infinity
+  }
+
+  resetPositions () {
+    this.activeItems().forEach((item, index) => {
+      const positionInput = item.querySelector('input[name*=\'position\']')
+      if (positionInput) {
+        positionInput.value = index
+      }
+    })
+  }
+
+  addItems (items) {
+    items.forEach((item) => this.addItem(item))
+  }
+
+  addItem (item) {
+    const currentItem = this.itemByBlobId(item.blobId)
+    if (currentItem) {
+      // (re-)enable if already exists
+      this.enableItem(currentItem)
+    } else {
+      // Create if item doesn't exist yet
+      this.createItem(item)
+    }
+  }
+
+  togglePlaceholder () {
+    if (this.activeItems().length > 0) {
+      this.hidePlaceholder()
+    } else {
+      this.showPlaceholder()
+    }
+  }
+
+  showPlaceholder () {
+    this.placeholderTarget.classList.remove('d-none')
+  }
+
+  hidePlaceholder () {
+    this.placeholderTarget.classList.add('d-none')
+  }
+
+  enableItem (item) {
+    item.querySelector('input[name*=\'_destroy\']').value = false
+    item.classList.remove('d-none')
+  }
+
+  createItem (item) {
+    // Copy template
+    const template = this.templateTarget
+    const html = this.randomizeIds(template)
+    this.thumbnailsTarget.insertAdjacentHTML('beforeend', html)
+
+    // Set new values
+    const newItem = this.itemTargets.pop()
+    newItem.querySelector('input[name*="[blob_id]"]').value = item.blobId
+    newItem.querySelector('input[name*="[_destroy]"]').value = false
+
+    // Update edit button url
+    const editButton = newItem.querySelector('[data-media-target="editButton"]')
+    editButton.setAttribute('href', editButton.getAttribute('href').replace('$1', item.blobId))
+
+    // Copy thumbnail
+    const oldThumbnail = newItem.querySelector('.h-thumbnail')
+    const newThumbnail = item.thumbnail.cloneNode(true)
+    oldThumbnail.parentNode.replaceChild(newThumbnail, oldThumbnail)
+  }
+
+  randomizeIds (template) {
+    const regex = new RegExp(template.dataset.templateIdRegex, 'g')
+    const randomNumber = Math.floor(100000000 + Math.random() * 900000000)
+    return template.innerHTML.replace(regex, randomNumber)
+  }
+
+  removeAllItems () {
+    this.removeItems(this.itemTargets)
+  }
+
+  removeItems (items) {
+    items.forEach((item) => {
+      this.removeItem(item)
+    })
+  }
+
+  removeItem (item) {
+    item.querySelector('input[name*=\'_destroy\']').value = 1
+    item.classList.add('d-none')
+
+    // Reset positions
+    this.resetPositions()
+
+    // Sync ids
+    this.syncIds()
+
+    // Toggle placeholder
+    this.togglePlaceholder()
+  }
+
+  itemByBlobId (blobId) {
+    return this.itemTargets.find((item) => {
+      return item.querySelector('input[name*=\'blob_id\']').value === blobId
+    })
+  }
+
+  activeItems () {
+    return this.itemTargets.filter((item) => {
+      return item.querySelector('input[name$=\'[_destroy]\']').value === 'false'
+    })
+  }
+
+  activeIds () {
+    return this.activeItems().map((item) => {
+      return item.querySelector('input[name$=\'[blob_id]\']').value
+    })
+  }
+}

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/remote_modal_controller.js

@@ -0,0 +1,9 @@
+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/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 currentLength = this.textareaTarget.value.length
+    const maximumLength = this.textareaTarget.getAttribute('maxlength')
+
+    this.countTarget.textContent = `${currentLength}/${maximumLength}`
+  }
+}

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

@@ -10,13 +10,17 @@ 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 () {
@@ -31,12 +35,16 @@ export class Headmin {
     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)
   }
 }