@radioactive-labs/plutonium 0.2.1 → 0.3.0

package/src/js/controllers/attachment_input_controller.js

@@ -0,0 +1,241 @@
+import { Controller } from "@hotwired/stimulus"
+
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import ImageEditor from '@uppy/image-editor'
+import XHRUpload from '@uppy/xhr-upload'
+import DomElement from "../support/dom_element"
+
+// Connects to data-controller="attachment-input"
+export default class extends Controller {
+  static values = {
+    identifier: String,
+
+    maxFileSize: { type: Number, default: null },
+    minFileSize: { type: Number, default: null },
+    maxTotalSize: { type: Number, default: null },
+    maxFileNum: { type: Number, default: null },
+    minFileNum: { type: Number, default: null },
+    allowedFileTypes: { type: Array, default: null },
+    requiredMetaFields: { type: Array, default: [] },
+  }
+
+  static outlets = ["attachment-preview", "attachment-preview-container"]
+
+  //======= Lifecycle
+
+  connect() {
+    // initialize
+    this.uploadedFiles = []
+
+    // hide the input
+    this.element.style["display"] = "none"
+
+    // setup uppy
+    this.configureUppy()
+    // build trigger
+    this.#buildTriggers()
+    // init state
+    this.#onAttachmentsChanged()
+  }
+
+  disconnect() {
+    this.uppy = null
+  }
+
+  attachmentPreviewOutletConnected(outlet, element) {
+    this.#onAttachmentsChanged()
+  }
+
+  attachmentPreviewOutletDisconnected(outlet, element) {
+    this.#onAttachmentsChanged()
+  }
+
+  //======= Config
+
+  configureUppy() {
+    this.uppy = new Uppy({
+      restrictions: {
+        maxFileSize: this.maxFileSizeValue,
+        minFileSize: this.minFileSizeValue,
+        maxTotalFileSize: this.maxTotalSizeValue,
+        maxNumberOfFiles: this.maxFileNumValue,
+        minNumberOfFiles: this.minFileNumValue,
+        allowedFileTypes: this.allowedFileTypesValue,
+        requiredMetaFields: this.requiredMetaFieldsValue,
+      }
+    })
+      .use(Dashboard, { inline: false, closeAfterFinish: true })
+      .use(ImageEditor, { target: Dashboard })
+
+    this.#configureUploader()
+    this.#configureEventHandlers()
+  }
+
+  #configureUploader() {
+    this.uppy
+      .use(XHRUpload, {
+        endpoint: '/upload', // path to the upload endpoint
+      })
+  }
+
+  #configureEventHandlers() {
+    this.uppy.on('upload-success', this.#onUploadSuccess.bind(this))
+  }
+
+  //======= Events
+
+  #onModalTriggered() {
+    // ensure correct color mode is set
+    let theme = document.documentElement.getAttribute('data-bs-theme') || 'auto'
+    this.#dashboard.setOptions({ theme: theme })
+
+    // clear all successfully uploaded files
+    let file = null;
+    while (file = this.uploadedFiles.pop()) this.uppy.removeFile(file.id)
+
+    // open modal
+    this.#dashboard.openModal()
+  }
+
+  #onUploadSuccess(file, response) {
+    this.uploadedFiles.push(file)
+
+    // remove current preview
+    if (!this.multiple) this.attachmentPreviewOutlets.forEach(a => a.remove())
+
+    // retrieve uploaded file data
+    const uploadedFileData = response.body["data"]
+    const uploadedFileUrl = response.body["url"]
+
+    // set hidden field value to the uploaded file data so that it's submitted
+    // with the form as the attachment
+    this.attachmentPreviewContainerOutlet.element.appendChild(
+      this.#buildPreview(uploadedFileData, uploadedFileUrl)
+    )
+  }
+
+  #onAttachmentsChanged() {
+    if (!this.deleteAllTrigger) return
+
+    const len = this.attachmentPreviewOutlets.length
+    if (len > 1) {
+      this.deleteAllTrigger.style["display"] = 'initial'
+      this.deleteAllTrigger.textContent = `Delete ${this.attachmentPreviewOutlets.length}`
+    } else {
+      this.deleteAllTrigger.style["display"] = 'none'
+    }
+  }
+
+  //======= Builders
+
+  #buildTriggers() {
+    this.triggerContainer = document.createElement("div")
+    this.triggerContainer.className = "flex items-center gap-2" // Add flex container with alignment
+    this.element.insertAdjacentElement('afterend', this.triggerContainer)
+
+    this.#buildUploadTrigger()
+    // currently experiencing a weird issue where outlet disconnections are not triggering
+    // this.#buildDeleteAllTrigger()
+
+    if (this.uploadTrigger) this.triggerContainer.append(this.uploadTrigger)
+    if (this.deleteAllTrigger) this.triggerContainer.append(this.deleteAllTrigger)
+  }
+
+  #buildUploadTrigger() {
+    const triggerPrompt = this.multiple ? "Choose files" : "Choose file"
+    this.uploadTrigger = DomElement.fromTemplate(
+      `<button type="button" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700 inline-flex items-center">
+        <svg class="w-4 h-4 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
+        </svg>
+        ${triggerPrompt}
+      </button>`,
+      false
+    )
+    this.uploadTrigger.addEventListener('click', this.#onModalTriggered.bind(this))
+  }
+
+  #buildDeleteAllTrigger() {
+    this.deleteAllTrigger = DomElement.fromTemplate(
+      `<button type="button" class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm         px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800 inline-flex items-center">
+        Delete ${this.attachmentPreviewOutlets.length}
+      </button>`,
+      false
+    )
+    this.deleteAllTrigger.addEventListener('click', () => {
+      if (confirm('Are you sure?')) this.attachmentPreviewContainerOutlet.clear()
+    })
+  }
+
+  #buildPreview(data, url) {
+    const filename = data.metadata.filename
+    const extension = filename.substring(filename.lastIndexOf('.') + 1, filename.length) || filename
+    const multiple = this.multiple ? 'multiple' : ''
+    const mimeType = data.metadata.mime_type
+
+    // List of commonly representable mime types
+    const representableMimeTypes = [
+      'image/jpeg',
+      'image/png',
+      'image/gif',
+      'image/webp',
+      'image/svg+xml',
+      'image/bmp',
+      'image/tiff'
+    ]
+
+    const isRepresentable = representableMimeTypes.includes(mimeType.toLowerCase())
+
+    // build preview element
+    const previewElem = DomElement.fromTemplate(
+      this.#buildPreviewTemplate(filename, extension, mimeType, url, isRepresentable)
+    )
+
+    // build input element
+    const inputElem = DomElement.fromTemplate(
+      `<input name="${this.element.name}" ${multiple} type="hidden" autocomplete="off" hidden />`
+    )
+    inputElem.value = JSON.stringify(data)
+
+    // insert input element into preview
+    previewElem.appendChild(inputElem)
+
+    return previewElem
+  }
+
+  #buildPreviewTemplate(filename, extension, mimeType, url, isRepresentable) {
+    return `
+      <div class="${this.identifierValue} attachment-preview group relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300"
+           data-controller="attachment-preview"
+           data-attachment-preview-mime-type-value="${mimeType}"
+           data-attachment-preview-thumbnail-url-value="${isRepresentable ? url : ''}"
+           data-attachment-preview-target="thumbnail"
+           title="${filename}">
+        <a class="block aspect-square overflow-hidden rounded-t-lg"
+           data-attachment-preview-target="thumbnailLink">
+          ${isRepresentable
+        ? `<img src="${url}" class="w-full h-full object-cover" />`
+        : `<div class="w-full h-full flex items-center justify-center bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 font-mono">.${extension}</div>`
+      }
+        </a>
+        <div class="px-2 py-1.5 text-sm text-gray-700 dark:text-gray-300 border-t border-gray-200 dark:border-gray-700 truncate text-center bg-white dark:bg-gray-800"
+             title="${filename}">
+          ${filename}
+        </div>
+        <button type="button"
+                class="w-full py-2 px-4 text-sm text-red-600 dark:text-red-400 bg-white dark:bg-gray-800 hover:bg-red-50 dark:hover:bg-red-900/50 rounded-b-lg transition-colors duration-200 flex items-center justify-center gap-2 border-t border-gray-200 dark:border-gray-700"
+                data-action="click->attachment-preview#remove">
+          <span class="bi bi-trash"></span>
+          Delete
+        </button>
+      </div>
+    `
+  }
+
+  //======= Getters
+
+  get #dashboard() { return this.uppy.getPlugin('Dashboard') }
+
+  get multiple() { return this.maxFileNumValue != 1 }
+}

package/src/js/controllers/attachment_preview_container_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="attachment-preview-container"
+export default class extends Controller {
+  connect() {
+  }
+
+  append(element) {
+    this.element.appendChild(element)
+  }
+
+  clear() {
+    this.element.innerHTML = null
+  }
+}

package/src/js/controllers/attachment_preview_controller.js

@@ -0,0 +1,63 @@
+import { Controller } from "@hotwired/stimulus"
+import getIconByMime from "../support/mime_icon"
+import DomElement from "../support/dom_element"
+
+// Connects to data-controller="attachment-preview"
+export default class extends Controller {
+  static targets = ["thumbnail", "thumbnailLink"]
+  static values = {
+    mimeType: String,
+    thumbnailUrl: String,
+  }
+
+  connect() {
+    if (!this.hasThumbnailTarget) return;
+
+    if (this.thumbnailUrlValue) {
+      this.useThumbnailPreview()
+    } else {
+      this.useMimeIconPreview()
+    }
+  }
+
+  remove() {
+    this.element.remove()
+  }
+
+  useThumbnailPreview() {
+    const thumbnail = DomElement.fromTemplate(`
+      <img src="${this.thumbnailUrlValue}" class="w-full h-full object-cover" />
+    `)
+
+    this.thumbnailLinkTarget.innerHTML = null
+    this.thumbnailLinkTarget.appendChild(thumbnail)
+  }
+
+  useMimeIconPreview() {
+    const mime = getIconByMime(this.mimeTypeValue)
+
+    // Configure the icon
+    mime.icon.classList.add(
+      'w-3/5',      // 60% width
+      'h-4/5',      // 80% height
+      'rounded-lg',
+      'shadow-lg',
+      'bg-white',
+      'p-2'         // Add some padding inside the icon container
+    )
+
+    // Center the icon in the container
+    this.thumbnailLinkTarget.classList.add(
+      'flex',
+      'items-center',
+      'justify-center'
+    )
+
+    // Set the background color
+    this.thumbnailLinkTarget.style.backgroundColor = mime.color
+
+    // Clear and append the icon
+    this.thumbnailLinkTarget.innerHTML = null
+    this.thumbnailLinkTarget.appendChild(mime.icon)
+  }
+}

package/src/js/controllers/color_mode_controller.js

@@ -6,7 +6,6 @@ export default class extends Controller {
   // static targets = ["trigger", "menu"]
 
   connect() {
-    console.log(`color-mode connected: ${this.element}`)
     this.updateColorMode()
   }
 

package/src/js/controllers/easymde_controller.js

@@ -5,7 +5,6 @@ import { marked } from 'marked';
 // Connects to data-controller="easymde"
 export default class extends Controller {
   connect() {
-    console.log(`easymde connected: ${this.element}`)
     this.easyMDE = new EasyMDE(this.#buildOptions())
     this.element.setAttribute("data-action", "turbo:morph-element->easymde#reconnect")
   }

package/src/js/controllers/flatpickr_controller.js

@@ -3,7 +3,6 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="flatpickr"
 export default class extends Controller {
   connect() {
-    console.log(`flatpickr connected: ${this.element}`)
     this.picker = new flatpickr(this.element, this.#buildOptions())
     this.element.setAttribute("data-action", "turbo:morph-element->flatpickr#reconnect")
   }

package/src/js/controllers/form_controller.js

@@ -4,7 +4,6 @@ import debounce from "lodash.debounce";
 // Connects to data-controller="form"
 export default class extends Controller {
   connect() {
-    console.log(`form connected: ${this.element}`)
   }
 
   submit() {

package/src/js/controllers/frame_navigator_controller.js

@@ -2,10 +2,9 @@ import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="frame-navigator"
 export default class extends Controller {
-  static targets = ["frame", "refreshButton", "backButton", "homeButton"];
+  static targets = ["frame", "refreshButton", "backButton", "homeButton", "maximizeLink"];
 
   connect() {
-    console.log(`frame-navigator connected: ${this.element}`)
     this.#loadingStarted()
 
     this.srcHistory = []
@@ -61,16 +60,7 @@ export default class extends Controller {
     this.#loadingStopped()
 
     let src = event.target.src
-    if (src == this.currentSrc) {
-      // this must be a refresh
-      // do nothing
-    }
-    else if (src == this.originalFrameSrc)
-      this.srcHistory = [src]
-    else
-      this.srcHistory.push(src)
-
-    this.#updateNavigationButtonsDisplay()
+    this.#notifySrcChanged(src)
   }
 
   refreshButtonClicked(event) {
@@ -94,6 +84,20 @@ export default class extends Controller {
 
   get currentSrc() { return this.srcHistory[this.srcHistory.length - 1] }
 
+  #notifySrcChanged(src) {
+    if (src == this.currentSrc) {
+      // this must be a refresh
+      // do nothing
+    }
+    else if (src == this.originalFrameSrc)
+      this.srcHistory = [src]
+    else
+      this.srcHistory.push(src)
+
+    this.#updateNavigationButtonsDisplay()
+    if (this.hasMaximizeLinkTarget) this.maximizeLinkTarget.href = src
+  }
+
   #loadingStarted() {
     if (this.hasRefreshButtonTarget) this.refreshButtonTarget.classList.add("motion-safe:animate-spin")
     this.frameTarget.classList.add("motion-safe:animate-pulse")

package/src/js/controllers/intl_tel_input_controller.js

@@ -5,7 +5,6 @@ export default class extends Controller {
   static targets = ["input"]
 
   connect() {
-    console.log(`intl-tel-input connected: ${this.element}`)
   }
 
   disconnect() {

package/src/js/controllers/register_controllers.js

@@ -1,20 +1,6 @@
 // Import controllers here
-import ResourceLayoutController from "./resource_layout_controller.js"
-import NavGridMenuItemController from "./nav_grid_menu_item_controller.js"
-import NavGridMenuController from "./nav_grid_menu_controller.js"
-import NavUserSectionController from "./nav_user_section_controller.js"
-import NavUserLinkController from "./nav_user_link_controller.js"
-import NavUserController from "./nav_user_controller.js"
-import HeaderController from "./header_controller.js"
-import SidebarMenuItemController from "./sidebar_menu_item_controller.js"
-import SidebarMenuController from "./sidebar_menu_controller.js"
-import SidebarController from "./sidebar_controller.js"
-import HasManyPanelController from "./has_many_panel_controller.js"
+import ResourceHeaderController from "./resource_header_controller.js"
 import NestedResourceFormFieldsController from "./nested_resource_form_fields_controller.js"
-import ToolbarController from "./toolbar_controller.js"
-import TableSearchInputController from "./table_search_input_controller.js"
-import TableToolbarController from "./table_toolbar_controller.js"
-import TableController from "./table_controller.js"
 import FormController from "./form_controller.js"
 import ResourceDropDownController from "./resource_drop_down_controller.js"
 import ResourceCollapseController from "./resource_collapse_controller.js"
@@ -25,25 +11,16 @@ import EasyMDEController from "./easymde_controller.js"
 import SlimSelectController from "./slim_select_controller.js"
 import FlatpickrController from "./flatpickr_controller.js"
 import IntlTelInputController from "./intl_tel_input_controller.js"
+import SelectNavigatorController from "./select_navigator.js"
+import ResourceTabListController from "./resource_tab_list_controller.js"
+import AttachmentInputController from "./attachment_input_controller.js"
+import AttachmentPreviewController from "./attachment_preview_controller.js"
+import AttachmentPreviewContainerController from "./attachment_preview_container_controller.js"
 
 export default function (application) {
   // Register controllers here
-  application.register("resource-layout", ResourceLayoutController)
-  application.register("nav-grid-menu-item", NavGridMenuItemController)
-  application.register("nav-grid-menu", NavGridMenuController)
-  application.register("nav-user-section", NavUserSectionController)
-  application.register("nav-user-link", NavUserLinkController)
-  application.register("nav-user", NavUserController)
-  application.register("header", HeaderController)
-  application.register("sidebar-menu-item", SidebarMenuItemController)
-  application.register("sidebar-menu", SidebarMenuController)
-  application.register("sidebar", SidebarController)
-  application.register("has-many-panel", HasManyPanelController)
+  application.register("resource-header", ResourceHeaderController)
   application.register("nested-resource-form-fields", NestedResourceFormFieldsController)
-  application.register("toolbar", ToolbarController)
-  application.register("table-search-input", TableSearchInputController)
-  application.register("table-toolbar", TableToolbarController)
-  application.register("table", TableController)
   application.register("form", FormController)
   application.register("resource-drop-down", ResourceDropDownController)
   application.register("resource-collapse", ResourceCollapseController)
@@ -54,4 +31,9 @@ export default function (application) {
   application.register("slim-select", SlimSelectController)
   application.register("flatpickr", FlatpickrController)
   application.register("intl-tel-input", IntlTelInputController)
+  application.register("select-navigator", SelectNavigatorController)
+  application.register("resource-tab-list", ResourceTabListController)
+  application.register("attachment-input", AttachmentInputController)
+  application.register("attachment-preview", AttachmentPreviewController)
+  application.register("attachment-preview-container", AttachmentPreviewContainerController)
 }

package/src/js/controllers/resource_collapse_controller.js

@@ -5,7 +5,6 @@ export default class extends Controller {
   static targets = ["trigger", "menu"]
 
   connect() {
-    console.log(`resource-collapse connected: ${this.element}`)
 
     // Default to false if the data attribute isn't set
     if (!this.element.hasAttribute('data-visible')) {

package/src/js/controllers/resource_dismiss_controller.js

@@ -7,7 +7,6 @@ export default class extends Controller {
   }
 
   connect() {
-    console.log(`resource-dismiss connected: ${this.element}`)
 
     if (this.hasAfterValue && this.afterValue > 0) {
       this.autoDismissTimeout = setTimeout(() => {