formstrap 0.1.3 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a7107b5857d9ac041c0adfb899049c93cbda09ecb46b0740a848cc3d7ebb881e
-  data.tar.gz: 56f553925e6d00e5ca9e2c22ea02596a64023739304eef1af6f1a35e058046a3
+  metadata.gz: 07cc257d4684759a070f1d259212a1e0c10a0edf4f0c9f9dd275b5ef0a3708be
+  data.tar.gz: 626e3625647a1d0e897f03e3c4ed712eb847e20761a112cc8b3dff667d82d072
 SHA512:
-  metadata.gz: 30d0714a40e7de9ea0572ba8892c53d909d9f627e09a4a1eee04bc938ed6cf35423312186f0803dd2d04170209ac3dbc9c494d87f94fdb2ce801488bf90687aa
-  data.tar.gz: da87804184cae4b9234232b37750c9f6e21ab87e9426320ae78bdeeac583b944cfe30fd23f045e10474c43b194736f8cdf6591ab6627d29f35b66b782778cbe8
+  metadata.gz: 16262a9223b70aeb5f6e5ae830e124fd329226fd794c070e2b8afb5ebe1ce2f260c944da356fd8bae5246c1f931bc1b09652dab85f1c9ed8a16335b55978a678
+  data.tar.gz: 4d0d78db261a85d8cba1dd449b24f206ecc0aac2b3f3287e25bdc4f6c14b57a764bb17322ec7d8523279ee31135cf20fe0aa312182e894398135243a57afe1e4

data/CHANGELOG.md

@@ -1 +1,38 @@
-# Formstap Changelog
+# Formstrap Changelog
+
+## 0.2
+- FEATURE: Search added to media modal
+- FEATURE: Thumbnail supports SVG previews now
+- FIX: You can upload new media and select it right away
+- FIX: Flickering heights of thumbnails in media modal is fixed
+- BREAK: All partials in `formstrap/fields/` are removed.
+ 
+Copy the partials from `formstrap/fields/` to your project and customize them.
+
+- BREAK: The partial `formstrap/blocks` is removed.
+ 
+Copy `formstrap/blocks.html.erb` to your project and customize it.
+ 
+- BREAK: Default filtering logic for ActiveStorage models is included in Formstrap.
+
+To remove redundant code in your project, you can add these initializers.
+
+config/initializers/extend_active_storage_attachment.rb
+```ruby
+Rails.configuration.to_prepare do
+  ActiveStorage::Attachment.include Formstrap::Attachment
+  
+  # Feel free to extend ActiveStorage::Attachment with your own concerns
+  # ActiveStorage::Attachment.include Admin::Attachment
+end
+```
+
+config/initializers/extend_active_storage_blob.rb.rb
+```ruby
+Rails.configuration.to_prepare do
+  ActiveStorage::Blob.include Formstrap::Blob
+  
+  # Feel free to extend ActiveStorage::Blob with your own concerns
+  # ActiveStorage::Blob.include Admin::Blob
+end
+```

data/app/assets/javascripts/formstrap/controllers/file_preview_controller.js

@@ -165,7 +165,7 @@ export default class extends Controller {
   }
 
   updateThumbnailRemoveButton (thumbnail, fileName) {
-    const removeButton = thumbnail.querySelector('.h-form-file-thumbnail-remove')
+    const removeButton = thumbnail.querySelector('.formstrap-file-thumbnail-remove')
     if (removeButton) {
       removeButton.dataset.filePreviewNameParam = fileName
     }
@@ -176,16 +176,16 @@ export default class extends Controller {
   }
 
   updateThumbnailBackground (thumbnail, url) {
-    const thumbnailBackground = thumbnail.querySelector('.h-thumbnail-bg')
+    const thumbnailBackground = thumbnail.querySelector('.formstrap-thumbnail-bg')
     thumbnailBackground.style.backgroundImage = `url('${url}')`
   }
 
   removeThumbnailIcon (thumbnail) {
-    thumbnail.querySelector('.h-thumbnail-bg').innerHTML = ''
+    thumbnail.querySelector('.formstrap-thumbnail-bg').innerHTML = ''
   }
 
   updateThumbnailIcon (thumbnail, icon) {
-    thumbnail.querySelector('.h-thumbnail-bg').innerHTML = icon
+    thumbnail.querySelector('.formstrap-thumbnail-bg').innerHTML = icon
   }
 
   iconForMimeType (mimeType) {
@@ -206,7 +206,7 @@ export default class extends Controller {
     const iconName = Object.keys(typeMap).find(key => typeMap[key].includes(mimeType))
     const fullIconName = ['bi', 'file', 'earmark', iconName].filter(e => typeof e === 'string' && e !== '').join('-')
 
-    return `<i class="bi ${fullIconName} h-thumbnail-icon"></i>`
+    return `<i class="bi ${fullIconName} formstrap-thumbnail-icon"></i>`
   }
 
   isImage (file) {

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

@@ -187,10 +187,12 @@ export default class extends Controller {
 
     // Update edit button url
     const editButton = newItem.querySelector('[data-media-target="editButton"]')
-    editButton.setAttribute('href', editButton.getAttribute('href').replace('$1', item.blobId))
+    if (editButton) {
+      editButton.setAttribute('href', editButton.getAttribute('href').replace(':id', item.blobId))
+    }
 
     // Copy thumbnail
-    const oldThumbnail = newItem.querySelector('.h-thumbnail')
+    const oldThumbnail = newItem.querySelector('.formstrap-thumbnail')
     const newThumbnail = item.thumbnail.cloneNode(true)
     oldThumbnail.parentNode.replaceChild(newThumbnail, oldThumbnail)
   }

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

@@ -3,7 +3,7 @@ import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
   static get targets () {
-    return ['idCheckbox', 'item', 'form', 'selectButton', 'placeholder', 'count']
+    return ['idCheckbox', 'item', 'form', 'selectButton', 'placeholder', 'count', 'search', 'searchId']
   }
 
   static get values () {
@@ -22,6 +22,7 @@ export default class extends Controller {
 
   submitForm () {
     this.hidePlaceholder()
+    this.search('')
     this.triggerFormSubmission()
   }
 
@@ -35,6 +36,13 @@ export default class extends Controller {
     this.placeholderTarget.classList.add('d-none')
   }
 
+  search (string) {
+    const search = this.searchTarget.querySelector("input[name='search']")
+    search.value = string
+
+    this.searchTarget.requestSubmit()
+  }
+
   handleIdsUpdate (element) {
     if (element.checked) {
       const arr = this.idsValue
@@ -45,6 +53,8 @@ export default class extends Controller {
         return element.value !== value
       })
     }
+
+    this.handleSearchdIdsUpdate()
   }
 
   itemTargetConnected (element) {
@@ -97,7 +107,7 @@ export default class extends Controller {
 
     return {
       blobId: id,
-      thumbnail: element ? element.querySelector('.h-thumbnail') : ''
+      thumbnail: element ? element.querySelector('.formstrap-thumbnail') : ''
     }
   }
 
@@ -144,4 +154,30 @@ export default class extends Controller {
   updateCount () {
     this.countTarget.innerHTML = this.selectedItemsCount()
   }
+
+  handleSearchdIdsUpdate () {
+    this.deleteSearchIdInputs()
+    this.createSearchIdInputs()
+  }
+
+  deleteSearchIdInputs () {
+    for (const searchId of this.searchIdTargets) {
+      searchId.remove()
+    }
+  }
+
+  createSearchIdInputs () {
+    for (const id of this.idsValue) {
+      this.createSearchIdInput(id)
+    }
+  }
+
+  createSearchIdInput (value) {
+    const input = document.createElement('input')
+    input.type = 'hidden'
+    input.name = 'ids[]'
+    input.setAttribute('data-media-modal-target', 'searchId')
+    input.value = value
+    this.searchTarget.appendChild(input)
+  }
 }

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

@@ -0,0 +1,75 @@
+/* global HTMLInputElement */
+import {Controller} from '@hotwired/stimulus'
+import {createPopper} from '@popperjs/core'
+
+export default class extends Controller {
+  static get targets () {
+    return ['popup', 'button']
+  }
+
+  static get values () {
+    return { id: String }
+  }
+
+  connect () {
+    // Clicked outside popup
+    document.addEventListener('click', (event) => {
+      this.handleOutsideClick(event)
+    })
+  }
+
+  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)')
+
+    if (!inButton && !inPopup && openPopup) {
+      this.closePopup(openPopup)
+    }
+  }
+
+  open (event) {
+    const button = event.target.closest('[data-popup-target="button"]')
+    const popup = this.popupById(button.dataset.popupId)
+    const passThru = button.dataset.popupPassThru
+
+    // Open the popup
+    createPopper(button, popup)
+    this.openPopup(popup)
+
+    if (passThru) {
+      // Pass click event to an element inside the popup
+      const passThruElement = popup.querySelector(passThru)
+      passThruElement.click()
+
+      // Focus and select value if it's an input element
+      if (passThruElement instanceof HTMLInputElement) {
+        passThruElement.focus()
+        passThruElement.select()
+      }
+    }
+  }
+
+  close (event) {
+    const button = event.target.closest('[data-popup-target="button"]')
+    const popup = this.popupById(button.dataset.popupId)
+    this.closePopup(popup)
+  }
+
+  popupById (id) {
+    return this.popupTargets.find((popup) => {
+      return popup.dataset.popupId === id
+    })
+  }
+
+  openPopup (popup) {
+    popup.classList.remove('closed')
+  }
+
+  closePopup (popup) {
+    popup.classList.add('closed')
+  }
+}

data/app/assets/javascripts/formstrap/controllers/repeater_controller.js

@@ -16,8 +16,8 @@ export default class extends Controller {
     Sortable.create(this.listTarget, {
       animation: 150,
       ghostClass: 'list-group-item-dark',
-      draggable: '.repeater-row',
-      handle: '.repeater-row-handle',
+      draggable: '.formstrap-repeater-row',
+      handle: '.formstrap-repeater-row-handle',
       onEnd: () => {
         this.resetIndices()
         this.resetPositions()
@@ -28,7 +28,7 @@ export default class extends Controller {
   }
 
   resetButtonIndices (event) {
-    const row = event.target.closest('.repeater-row')
+    const row = event.target.closest('.formstrap-repeater-row')
     const index = this.containsRow(row) ? row.dataset.rowIndex : ''
     this.updatePopupButtonIndices(index)
   }
@@ -73,7 +73,7 @@ export default class extends Controller {
   removeRow (event) {
     event.preventDefault()
 
-    const row = event.target.closest('.repeater-row')
+    const row = event.target.closest('.formstrap-repeater-row')
 
     if (row.dataset.newRecord === 'true') {
       // New records are simply removed from the page

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

@@ -8,6 +8,7 @@ import FlatpickrController from './controllers/flatpickr_controller'
 import InfiniteScrollerController from './controllers/infinite_scroller_controller'
 import MediaController from './controllers/media_controller'
 import MediaModalController from './controllers/media_modal_controller'
+import PopupController from './controllers/popup_controller'
 import RedactorxController from './controllers/redactorx_controller'
 import RepeaterController from './controllers/repeater_controller'
 import SelectController from './controllers/select_controller'
@@ -24,6 +25,7 @@ export class Formstrap {
     Stimulus.register('infinite-scroller', InfiniteScrollerController)
     Stimulus.register('media', MediaController)
     Stimulus.register('media-modal', MediaModalController)
+    Stimulus.register('popup', PopupController)
     Stimulus.register('redactorx', RedactorxController)
     Stimulus.register('repeater', RepeaterController)
     Stimulus.register('select', SelectController)