railspress-engine 0.1.2 → 1.2.0

data/app/javascript/railspress/controllers/crop_controller.js

@@ -0,0 +1,224 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Crop Controller
+ *
+ * Wraps Cropper.js for image cropping. Lazy-loads Cropper.js from CDN
+ * when first needed to avoid bundling the library.
+ *
+ * Usage:
+ *   <dialog data-controller="railspress--crop"
+ *           data-railspress--crop-aspect-ratio-value="1.778"
+ *           data-railspress--crop-src-value="/path/to/image.jpg">
+ *
+ *     <img data-railspress--crop-target="image">
+ *
+ *     <button data-action="railspress--crop#apply">Apply Crop</button>
+ *     <button data-action="railspress--crop#cancel">Cancel</button>
+ *     <button data-action="railspress--crop#reset">Reset</button>
+ *   </dialog>
+ *
+ * Events:
+ *   - railspress--crop:apply  - Dispatched with { region: { x, y, width, height } }
+ *   - railspress--crop:cancel - Dispatched when crop is cancelled
+ */
+export default class extends Controller {
+  static targets = ["image", "preview"]
+
+  static values = {
+    src: String,
+    aspectRatio: { type: Number, default: 0 }, // 0 = free aspect ratio
+    viewMode: { type: Number, default: 1 },
+    minWidth: { type: Number, default: 100 },
+    minHeight: { type: Number, default: 100 },
+    cropperUrl: {
+      type: String,
+      default: "https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.js"
+    },
+    cropperCssUrl: {
+      type: String,
+      default: "https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.css"
+    }
+  }
+
+  cropper = null
+  cropperLoaded = false
+
+  connect() {
+    // If this is a dialog element, set up show/close handlers
+    if (this.element.tagName === "DIALOG") {
+      this.element.addEventListener("close", this.handleClose.bind(this))
+    }
+  }
+
+  disconnect() {
+    this.destroyCropper()
+  }
+
+  // Opens the crop dialog and initializes cropper
+  async open(imageSrc = null) {
+    if (imageSrc) {
+      this.srcValue = imageSrc
+    }
+
+    // Show dialog if it's a dialog element
+    if (this.element.tagName === "DIALOG" && !this.element.open) {
+      this.element.showModal()
+    }
+
+    await this.initializeCropper()
+  }
+
+  async initializeCropper() {
+    // Load Cropper.js if not already loaded
+    if (!window.Cropper) {
+      await this.loadCropper()
+    }
+
+    // Set image source
+    if (this.hasImageTarget && this.srcValue) {
+      this.imageTarget.src = this.srcValue
+
+      // Wait for image to load
+      await new Promise((resolve, reject) => {
+        this.imageTarget.onload = resolve
+        this.imageTarget.onerror = reject
+      })
+
+      // Initialize Cropper
+      this.destroyCropper() // Clean up any existing instance
+      this.cropper = new window.Cropper(this.imageTarget, {
+        aspectRatio: this.aspectRatioValue || NaN, // NaN = free aspect ratio
+        viewMode: this.viewModeValue,
+        minCropBoxWidth: this.minWidthValue,
+        minCropBoxHeight: this.minHeightValue,
+        autoCropArea: 1,
+        responsive: true,
+        restore: true,
+        guides: true,
+        center: true,
+        highlight: true,
+        background: true,
+        movable: true,
+        rotatable: false,
+        scalable: false,
+        zoomable: true,
+        zoomOnTouch: true,
+        zoomOnWheel: true,
+        cropBoxMovable: true,
+        cropBoxResizable: true,
+        toggleDragModeOnDblclick: false
+      })
+    }
+  }
+
+  async loadCropper() {
+    if (this.cropperLoaded) return
+
+    // Load CSS
+    const link = document.createElement("link")
+    link.rel = "stylesheet"
+    link.href = this.cropperCssUrlValue
+    document.head.appendChild(link)
+
+    // Load JS
+    await new Promise((resolve, reject) => {
+      const script = document.createElement("script")
+      script.src = this.cropperUrlValue
+      script.onload = resolve
+      script.onerror = reject
+      document.head.appendChild(script)
+    })
+
+    this.cropperLoaded = true
+  }
+
+  apply(event) {
+    event?.preventDefault()
+
+    if (!this.cropper) return
+
+    const cropData = this.cropper.getData(true) // true = rounded values
+    const imageData = this.cropper.getImageData()
+
+    // Calculate normalized region (0-1 values)
+    const region = {
+      x: cropData.x / imageData.naturalWidth,
+      y: cropData.y / imageData.naturalHeight,
+      width: cropData.width / imageData.naturalWidth,
+      height: cropData.height / imageData.naturalHeight
+    }
+
+    this.dispatch("apply", { detail: { region, cropData, imageData } })
+    this.close()
+  }
+
+  cancel(event) {
+    event?.preventDefault()
+    this.dispatch("cancel")
+    this.close()
+  }
+
+  reset(event) {
+    event?.preventDefault()
+    if (this.cropper) {
+      this.cropper.reset()
+    }
+  }
+
+  close() {
+    if (this.element.tagName === "DIALOG" && this.element.open) {
+      this.element.close()
+    }
+    this.destroyCropper()
+  }
+
+  handleClose() {
+    this.destroyCropper()
+  }
+
+  destroyCropper() {
+    if (this.cropper) {
+      this.cropper.destroy()
+      this.cropper = null
+    }
+  }
+
+  // Set aspect ratio dynamically
+  setAspectRatio(ratio) {
+    this.aspectRatioValue = ratio
+    if (this.cropper) {
+      this.cropper.setAspectRatio(ratio || NaN)
+    }
+  }
+
+  // Zoom controls
+  zoomIn(event) {
+    event?.preventDefault()
+    if (this.cropper) {
+      this.cropper.zoom(0.1)
+    }
+  }
+
+  zoomOut(event) {
+    event?.preventDefault()
+    if (this.cropper) {
+      this.cropper.zoom(-0.1)
+    }
+  }
+
+  // Rotation (if enabled)
+  rotateLeft(event) {
+    event?.preventDefault()
+    if (this.cropper) {
+      this.cropper.rotate(-90)
+    }
+  }
+
+  rotateRight(event) {
+    event?.preventDefault()
+    if (this.cropper) {
+      this.cropper.rotate(90)
+    }
+  }
+}

data/app/javascript/railspress/controllers/dropzone_controller.js

@@ -0,0 +1,261 @@
+import { Controller } from "@hotwired/stimulus"
+import { DirectUpload } from "@rails/activestorage"
+
+/**
+ * Dropzone Controller
+ *
+ * Handles drag-and-drop file uploads using ActiveStorage DirectUpload.
+ * Provides visual feedback during upload and integrates with forms.
+ *
+ * Usage:
+ *   <div data-controller="railspress--dropzone"
+ *        data-railspress--dropzone-url-value="/rails/active_storage/direct_uploads"
+ *        data-railspress--dropzone-accept-value="image/*"
+ *        data-action="drop->railspress--dropzone#drop
+ *                     dragover->railspress--dropzone#dragover
+ *                     dragleave->railspress--dropzone#dragleave">
+ *
+ *     <input type="file" data-railspress--dropzone-target="input" class="sr-only">
+ *     <input type="hidden" data-railspress--dropzone-target="signedId" name="post[header_image]">
+ *
+ *     <div data-railspress--dropzone-target="dropArea">
+ *       <span data-railspress--dropzone-target="prompt">Drag image here or click to browse</span>
+ *     </div>
+ *
+ *     <div data-railspress--dropzone-target="preview" hidden>
+ *       <img data-railspress--dropzone-target="previewImage">
+ *       <button data-action="railspress--dropzone#remove">Remove</button>
+ *     </div>
+ *
+ *     <div data-railspress--dropzone-target="progress" hidden>
+ *       <div data-railspress--dropzone-target="progressBar"></div>
+ *       <span data-railspress--dropzone-target="progressText">0%</span>
+ *     </div>
+ *
+ *     <div data-railspress--dropzone-target="error" hidden></div>
+ *   </div>
+ */
+export default class extends Controller {
+  static targets = [
+    "input",
+    "signedId",
+    "dropArea",
+    "prompt",
+    "preview",
+    "previewImage",
+    "progress",
+    "progressBar",
+    "progressText",
+    "error"
+  ]
+
+  static values = {
+    url: { type: String, default: "/rails/active_storage/direct_uploads" },
+    accept: { type: String, default: "image/*" },
+    maxSize: { type: Number, default: 10 * 1024 * 1024 } // 10MB default
+  }
+
+  // Using hardcoded class names for simplicity in engine context
+  // Host apps can override via CSS or fork the controller
+
+  connect() {
+    this.element.addEventListener("click", this.openFilePicker.bind(this))
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this.openFilePicker.bind(this))
+  }
+
+  openFilePicker(event) {
+    // Don't open if clicking on remove button or preview
+    if (event.target.closest("[data-action*='remove']")) return
+    if (event.target.closest("button")) return
+
+    this.inputTarget.click()
+  }
+
+  dragover(event) {
+    event.preventDefault()
+    this.element.classList.add("rp-dropzone--dragging")
+  }
+
+  dragleave(event) {
+    event.preventDefault()
+    this.element.classList.remove("rp-dropzone--dragging")
+  }
+
+  drop(event) {
+    event.preventDefault()
+    this.element.classList.remove("rp-dropzone--dragging")
+
+    const files = event.dataTransfer?.files
+    if (files?.length > 0) {
+      this.handleFile(files[0])
+    }
+  }
+
+  // Called when file input changes
+  change(event) {
+    const file = event.target.files?.[0]
+    if (file) {
+      this.handleFile(file)
+    }
+  }
+
+  handleFile(file) {
+    // Validate file type
+    if (!this.isValidType(file)) {
+      this.showError(`Invalid file type. Please upload ${this.acceptValue}`)
+      return
+    }
+
+    // Validate file size
+    if (file.size > this.maxSizeValue) {
+      const maxMB = Math.round(this.maxSizeValue / 1024 / 1024)
+      this.showError(`File too large. Maximum size is ${maxMB}MB`)
+      return
+    }
+
+    this.hideError()
+    this.showPreview(file)
+    this.uploadFile(file)
+  }
+
+  isValidType(file) {
+    if (this.acceptValue === "*" || this.acceptValue === "*/*") return true
+
+    const accepts = this.acceptValue.split(",").map(s => s.trim())
+    return accepts.some(accept => {
+      if (accept.startsWith(".")) {
+        return file.name.toLowerCase().endsWith(accept.toLowerCase())
+      }
+      if (accept.endsWith("/*")) {
+        const baseType = accept.replace("/*", "")
+        return file.type.startsWith(baseType)
+      }
+      return file.type === accept
+    })
+  }
+
+  showPreview(file) {
+    if (!this.hasPreviewTarget) return
+
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      if (this.hasPreviewImageTarget) {
+        this.previewImageTarget.src = e.target.result
+      }
+      this.previewTarget.hidden = false
+      if (this.hasDropAreaTarget) {
+        this.dropAreaTarget.hidden = true
+      }
+    }
+    reader.readAsDataURL(file)
+  }
+
+  uploadFile(file) {
+    this.showProgress()
+    this.element.classList.add("rp-dropzone--uploading")
+
+    const upload = new DirectUpload(file, this.urlValue, this)
+
+    upload.create((error, blob) => {
+      this.hideProgress()
+      this.element.classList.remove("rp-dropzone--uploading")
+
+      if (error) {
+        this.showError(`Upload failed: ${error}`)
+        this.element.classList.add("rp-dropzone--error")
+      } else {
+        this.element.classList.add("rp-dropzone--complete")
+        if (this.hasSignedIdTarget) {
+          this.signedIdTarget.value = blob.signed_id
+        }
+        this.dispatch("upload", { detail: { blob, signedId: blob.signed_id } })
+      }
+    })
+  }
+
+  // DirectUpload delegate methods
+  directUploadWillStoreFileWithXHR(request) {
+    request.upload.addEventListener("progress", event => this.updateProgress(event))
+  }
+
+  updateProgress(event) {
+    if (!event.lengthComputable) return
+
+    const percent = Math.round((event.loaded / event.total) * 100)
+
+    if (this.hasProgressBarTarget) {
+      this.progressBarTarget.style.width = `${percent}%`
+    }
+    if (this.hasProgressTextTarget) {
+      this.progressTextTarget.textContent = `${percent}%`
+    }
+  }
+
+  showProgress() {
+    if (this.hasProgressTarget) {
+      this.progressTarget.hidden = false
+      if (this.hasProgressBarTarget) {
+        this.progressBarTarget.style.width = "0%"
+      }
+      if (this.hasProgressTextTarget) {
+        this.progressTextTarget.textContent = "0%"
+      }
+    }
+  }
+
+  hideProgress() {
+    if (this.hasProgressTarget) {
+      this.progressTarget.hidden = true
+    }
+  }
+
+  showError(message) {
+    if (this.hasErrorTarget) {
+      this.errorTarget.textContent = message
+      this.errorTarget.hidden = false
+    }
+    this.element.classList.add("rp-dropzone--error")
+  }
+
+  hideError() {
+    if (this.hasErrorTarget) {
+      this.errorTarget.hidden = true
+    }
+    this.element.classList.remove("rp-dropzone--error")
+  }
+
+  remove(event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    // Clear the signed ID
+    if (this.hasSignedIdTarget) {
+      this.signedIdTarget.value = ""
+    }
+
+    // Clear file input
+    if (this.hasInputTarget) {
+      this.inputTarget.value = ""
+    }
+
+    // Hide preview, show drop area
+    if (this.hasPreviewTarget) {
+      this.previewTarget.hidden = true
+      if (this.hasPreviewImageTarget) {
+        this.previewImageTarget.src = ""
+      }
+    }
+    if (this.hasDropAreaTarget) {
+      this.dropAreaTarget.hidden = false
+    }
+
+    // Reset classes
+    this.element.classList.remove("rp-dropzone--complete", "rp-dropzone--error")
+
+    this.hideError()
+    this.dispatch("remove")
+  }
+}

data/app/javascript/railspress/controllers/focal_point_controller.js

@@ -0,0 +1,124 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Focal Point Picker Controller
+ *
+ * Allows users to click on an image to set the focal point (the most
+ * important part of the image) for smart cropping in different contexts.
+ *
+ * Usage:
+ *   <div data-controller="railspress--focal-point"
+ *        data-railspress--focal-point-x-value="0.5"
+ *        data-railspress--focal-point-y-value="0.5">
+ *
+ *     <div data-action="click->railspress--focal-point#pick">
+ *       <img data-railspress--focal-point-target="image">
+ *       <div data-railspress--focal-point-target="crosshair"></div>
+ *     </div>
+ *
+ *     <input type="hidden" data-railspress--focal-point-target="xInput">
+ *     <input type="hidden" data-railspress--focal-point-target="yInput">
+ *
+ *     <img data-railspress--focal-point-target="preview">
+ *   </div>
+ */
+export default class extends Controller {
+  static targets = ["image", "crosshair", "xInput", "yInput", "coordsDisplay", "preview"]
+
+  static values = {
+    x: { type: Number, default: 0.5 },
+    y: { type: Number, default: 0.5 }
+  }
+
+  connect() {
+    this.updateUI()
+  }
+
+  pick(event) {
+    event.preventDefault()
+    const rect = this.imageTarget.getBoundingClientRect()
+    this.xValue = this.clamp((event.clientX - rect.left) / rect.width)
+    this.yValue = this.clamp((event.clientY - rect.top) / rect.height)
+    this.updateUI()
+    this.dispatch("change", { detail: { x: this.xValue, y: this.yValue } })
+  }
+
+  touch(event) {
+    if (event.touches.length !== 1) return
+    event.preventDefault()
+    const touch = event.touches[0]
+    const rect = this.imageTarget.getBoundingClientRect()
+    this.xValue = this.clamp((touch.clientX - rect.left) / rect.width)
+    this.yValue = this.clamp((touch.clientY - rect.top) / rect.height)
+    this.updateUI()
+    this.dispatch("change", { detail: { x: this.xValue, y: this.yValue } })
+  }
+
+  reset() {
+    this.xValue = 0.5
+    this.yValue = 0.5
+    this.updateUI()
+    this.dispatch("reset")
+  }
+
+  keydown(event) {
+    const step = event.shiftKey ? 0.1 : 0.01
+    let handled = true
+
+    switch (event.key) {
+      case "ArrowLeft":
+        this.xValue = this.clamp(this.xValue - step)
+        break
+      case "ArrowRight":
+        this.xValue = this.clamp(this.xValue + step)
+        break
+      case "ArrowUp":
+        this.yValue = this.clamp(this.yValue - step)
+        break
+      case "ArrowDown":
+        this.yValue = this.clamp(this.yValue + step)
+        break
+      default:
+        handled = false
+    }
+
+    if (handled) {
+      event.preventDefault()
+      this.updateUI()
+      this.dispatch("change", { detail: { x: this.xValue, y: this.yValue } })
+    }
+  }
+
+  updateUI() {
+    this.updateCrosshair()
+    this.updateInputs()
+    this.updatePreviews()
+    this.updateCoordsDisplay()
+  }
+
+  updateCrosshair() {
+    if (!this.hasCrosshairTarget) return
+    this.crosshairTarget.style.left = `${this.xValue * 100}%`
+    this.crosshairTarget.style.top = `${this.yValue * 100}%`
+  }
+
+  updateInputs() {
+    if (this.hasXInputTarget) this.xInputTarget.value = this.xValue.toFixed(4)
+    if (this.hasYInputTarget) this.yInputTarget.value = this.yValue.toFixed(4)
+  }
+
+  updatePreviews() {
+    const position = `${this.xValue * 100}% ${this.yValue * 100}%`
+    this.previewTargets.forEach(el => el.style.objectPosition = position)
+  }
+
+  updateCoordsDisplay() {
+    if (!this.hasCoordsDisplayTarget) return
+    this.coordsDisplayTarget.textContent =
+      `${Math.round(this.xValue * 100)}%, ${Math.round(this.yValue * 100)}%`
+  }
+
+  clamp(value) {
+    return Math.max(0, Math.min(1, value))
+  }
+}

data/app/javascript/railspress/controllers/image_section_controller.js

@@ -0,0 +1,94 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Image Section Controller
+ *
+ * Handles expand/collapse transitions for the image section.
+ * Uses CSS animations for smooth transitions without server round-trips.
+ *
+ * Usage:
+ *   <div data-controller="rp-image-section"
+ *        data-rp-image-section-expanded-value="false">
+ *
+ *     <div data-rp-image-section-target="compact"
+ *          data-action="click->rp-image-section#expand">
+ *       <!-- compact view -->
+ *     </div>
+ *
+ *     <div data-rp-image-section-target="editor" hidden>
+ *       <!-- expanded editor -->
+ *       <button data-action="rp-image-section#collapse">Done</button>
+ *     </div>
+ *   </div>
+ */
+export default class extends Controller {
+  static targets = ["compact", "editor", "editButton"]
+
+  static values = {
+    expanded: { type: Boolean, default: false }
+  }
+
+  connect() {
+    // Sync UI with initial state
+    this.updateUI()
+  }
+
+  toggle() {
+    this.expandedValue = !this.expandedValue
+    this.updateUI()
+  }
+
+  expand() {
+    if (this.expandedValue) return
+    this.expandedValue = true
+    this.updateUI()
+  }
+
+  collapse() {
+    if (!this.expandedValue) return
+    this.expandedValue = false
+    this.updateUI()
+  }
+
+  updateUI() {
+    if (this.expandedValue) {
+      this.showEditor()
+    } else {
+      this.showCompact()
+    }
+    this.updateButtonText()
+  }
+
+  showEditor() {
+    if (this.hasCompactTarget) {
+      this.compactTarget.hidden = true
+    }
+    if (this.hasEditorTarget) {
+      this.editorTarget.hidden = false
+      this.editorTarget.classList.add("rp-image-section-v2__editor--entering")
+      // Remove animation class after animation completes
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          this.editorTarget.classList.remove("rp-image-section-v2__editor--entering")
+        })
+      })
+    }
+    this.element.classList.add("rp-image-section-v2--expanded")
+  }
+
+  showCompact() {
+    if (this.hasEditorTarget) {
+      this.editorTarget.hidden = true
+    }
+    if (this.hasCompactTarget) {
+      this.compactTarget.hidden = false
+    }
+    this.element.classList.remove("rp-image-section-v2--expanded")
+  }
+
+  updateButtonText() {
+    if (this.hasEditButtonTarget) {
+      this.editButtonTarget.textContent = this.expandedValue ? "Collapse" : "Edit"
+    }
+  }
+}