postnhost 0.0.0 → 0.1.1

data/app/javascript/controllers/cover_image_upload_controller.js

@@ -0,0 +1,164 @@
+import { Controller } from "@hotwired/stimulus"
+import { hideElement, showElement, createToast } from "../helpers/dom_helpers"
+import { applyClasses, removeClasses, DRAG_STATES } from "../helpers/style_helpers"
+
+const VALID_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/heic']
+const MAX_FILE_SIZE = 25 * 1024 * 1024 // 25MB
+
+export default class extends Controller {
+  static targets = ["input", "uploadArea", "spinner", "placeholder", "preview", "previewImage", "altField", "uploadSection"]
+  static values = {
+    articleId: String,
+    mountPath: { type: String, default: '' }
+  }
+
+  dragOver(event) {
+    event.preventDefault()
+    applyClasses(this.uploadAreaTarget, DRAG_STATES.over)
+  }
+
+  dragLeave(event) {
+    event.preventDefault()
+    removeClasses(this.uploadAreaTarget, DRAG_STATES.over)
+  }
+
+  drop(event) {
+    event.preventDefault()
+    removeClasses(this.uploadAreaTarget, DRAG_STATES.over)
+
+    const files = event.dataTransfer.files
+    if (files.length > 0) {
+      this.#uploadImage(files[0])
+    }
+  }
+
+  selectFile(event) {
+    const files = event.target.files
+    if (files.length > 0) {
+      this.#uploadImage(files[0])
+    }
+  }
+
+  triggerFileInput() {
+    this.inputTarget.click()
+  }
+
+  removeImage() {
+    const mountPath = this.mountPathValue === '/' ? '' : this.mountPathValue.replace(/\/$/, '')
+    const deleteUrl = `${mountPath}/articles/${this.articleIdValue}/cover_image`
+
+    fetch(deleteUrl, {
+      method: 'DELETE',
+      headers: {
+        'X-CSRF-Token': document.querySelector('[name="csrf-token"]').getAttribute('content')
+      }
+    })
+      .then(response => {
+        if (response.ok) {
+          this.#hidePreview()
+          this.dispatch('delete-complete', { bubbles: true })
+        } else {
+          createToast('Failed to remove image', 'error')
+        }
+      })
+      .catch(error => {
+        console.error('Delete error:', error)
+        createToast('Failed to remove image', 'error')
+      })
+  }
+
+  #uploadImage(file) {
+    if (!this.#validateFile(file)) return
+
+    this.dispatch('upload-start', { bubbles: true })
+    this.#showLoading()
+
+    const formData = new FormData()
+    formData.append('file', file)
+
+    const mountPath = this.mountPathValue === '/' ? '' : this.mountPathValue.replace(/\/$/, '')
+    const uploadUrl = `${mountPath}/articles/${this.articleIdValue}/cover_image`
+
+    fetch(uploadUrl, {
+      method: 'POST',
+      body: formData,
+      headers: {
+        'X-CSRF-Token': document.querySelector('[name="csrf-token"]').getAttribute('content')
+      }
+    })
+      .then(response => response.json())
+      .then(data => {
+        if (data.url) {
+          this.#showPreview(data.url)
+          this.#hideLoading()
+          this.dispatch('upload-complete', { bubbles: true })
+        } else {
+          createToast(data.error || 'Failed to upload image', 'error')
+          this.#hideLoading()
+          this.dispatch('upload-failed', { bubbles: true })
+        }
+      })
+      .catch(error => {
+        console.error('Upload error:', error)
+        createToast('Failed to upload image', 'error')
+        this.#hideLoading()
+        this.dispatch('upload-failed', { bubbles: true })
+      })
+  }
+
+  #validateFile(file) {
+    if (!VALID_IMAGE_TYPES.includes(file.type)) {
+      createToast('Please upload a valid image file (JPEG, PNG, GIF, WEBP, HEIC)', 'error')
+      return false
+    }
+
+    if (file.size > MAX_FILE_SIZE) {
+      createToast('Image size must be less than 25MB', 'error')
+      return false
+    }
+
+    return true
+  }
+
+  #showPreview(imageUrl) {
+    if (this.hasUploadSectionTarget) {
+      hideElement(this.uploadSectionTarget)
+    }
+
+    if (this.hasPreviewImageTarget) {
+      this.previewImageTarget.src = imageUrl
+    }
+
+    if (this.hasPreviewTarget) {
+      showElement(this.previewTarget)
+    }
+
+    if (this.hasAltFieldTarget) {
+      this.altFieldTarget.value = ''
+    }
+  }
+
+  #hidePreview() {
+    if (this.hasPreviewTarget) {
+      hideElement(this.previewTarget)
+    }
+
+    if (this.hasUploadSectionTarget) {
+      showElement(this.uploadSectionTarget)
+    }
+
+    if (this.hasInputTarget) {
+      this.inputTarget.value = ''
+    }
+  }
+
+  #showLoading() {
+    hideElement(this.placeholderTarget)
+    showElement(this.spinnerTarget)
+  }
+
+  #hideLoading() {
+    hideElement(this.spinnerTarget)
+    showElement(this.placeholderTarget)
+  }
+}

data/app/javascript/controllers/dropdown_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus"
+import { toggleElement, hideElement } from "../helpers/dom_helpers"
+
+export default class extends Controller {
+  static targets = ["menu", "chevron"]
+
+  connect() {
+    document.addEventListener("click", this.#handleClickOutside)
+    this.#syncChevron()
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.#handleClickOutside)
+  }
+
+  toggle() {
+    toggleElement(this.menuTarget)
+    this.#syncChevron()
+  }
+
+  close() {
+    hideElement(this.menuTarget)
+    this.#syncChevron()
+  }
+
+  #syncChevron() {
+    if (!this.hasChevronTarget) return
+
+    const isOpen = !this.menuTarget.classList.contains("hidden")
+    this.chevronTarget.classList.toggle("rotate-180", isOpen)
+  }
+
+  #handleClickOutside = (event) => {
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+}

data/app/javascript/controllers/editor_mobile_sidebars_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["metaSidebar", "actionsSidebar"]
+
+  toggleMeta() {
+    if (!this.hasMetaSidebarTarget) return
+    this.#toggle(this.metaSidebarTarget, this.hasActionsSidebarTarget ? this.actionsSidebarTarget : null)
+  }
+
+  toggleActions() {
+    if (!this.hasActionsSidebarTarget) return
+    this.#toggle(this.actionsSidebarTarget, this.hasMetaSidebarTarget ? this.metaSidebarTarget : null)
+  }
+
+  closeMeta() {
+    if (!this.hasMetaSidebarTarget) return
+    this.#hide(this.metaSidebarTarget)
+  }
+
+  closeActions() {
+    if (!this.hasActionsSidebarTarget) return
+    this.#hide(this.actionsSidebarTarget)
+  }
+
+  #toggle(target, otherTarget) {
+    const shouldOpen = target.classList.contains("hidden")
+    target.classList.toggle("hidden", !shouldOpen)
+
+    if (otherTarget) this.#hide(otherTarget)
+  }
+
+  #hide(target) {
+    target.classList.add("hidden")
+  }
+}

data/app/javascript/controllers/file_auto_submit_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["form", "input"]
+
+  connect() {
+    this.inputTargets.forEach((input) => {
+      input.addEventListener("change", this.#handleFileChange)
+    })
+  }
+
+  disconnect() {
+    this.inputTargets.forEach((input) => {
+      input.removeEventListener("change", this.#handleFileChange)
+    })
+  }
+
+  #handleFileChange = (event) => {
+    if (event.target.files.length > 0) {
+      this.formTarget.requestSubmit()
+    }
+  }
+}

data/app/javascript/controllers/flash_message_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus"
+import { removeElement, elementExists } from "../helpers/dom_helpers"
+import { applyClasses, toggleClasses, ANIMATION_CLASSES } from "../helpers/style_helpers"
+
+const ANIMATION_DELAY = 50
+const CLOSE_ANIMATION_DURATION = 300
+
+export default class extends Controller {
+  static targets = ["message"]
+
+  connect() {
+    applyClasses(this.messageTarget, ANIMATION_CLASSES.initial)
+
+    void this.messageTarget.offsetWidth
+
+    this.messageTarget.classList.add("transition-all", "duration-300", "ease-out")
+
+    setTimeout(() => {
+      toggleClasses(this.messageTarget, ANIMATION_CLASSES.fadeIn, ANIMATION_CLASSES.fadeOut)
+    }, ANIMATION_DELAY)
+  }
+
+  close(event) {
+    if (event) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
+    const messageElement = this.hasMessageTarget ? this.messageTarget : this.element
+    if (!messageElement) return
+
+    applyClasses(messageElement, ANIMATION_CLASSES.fadeOut)
+
+    setTimeout(() => {
+      if (elementExists(messageElement)) {
+        removeElement(messageElement)
+      }
+    }, CLOSE_ANIMATION_DURATION)
+  }
+}

data/app/javascript/controllers/index.js

@@ -0,0 +1,71 @@
+// This file is auto-generated by ./bin/rails stimulus:manifest:update
+// Run that command whenever you add a new controller or create them with
+// ./bin/rails generate stimulus controllerName
+
+import { application } from "./application"
+
+import FlashMessageController from "./flash_message_controller"
+application.register("flash-message", FlashMessageController)
+
+import BurgerController from "./burger_controller"
+application.register("burger", BurgerController)
+
+import DropdownController from "./dropdown_controller"
+application.register("dropdown", DropdownController)
+
+import FileAutoSubmitController from "./file_auto_submit_controller"
+application.register("file-auto-submit", FileAutoSubmitController)
+
+import Dialog from "@stimulus-components/dialog"
+application.register("dialog", Dialog)
+
+import TiptapEditorController from "./tiptap_editor_controller"
+application.register("tiptap-editor", TiptapEditorController)
+
+import AutoSaveController from "./auto_save_controller"
+application.register("auto-save", AutoSaveController)
+
+import AiTranslationController from "./ai_translation_controller"
+application.register("ai-translation", AiTranslationController)
+
+import CategoryManagerController from "./category_manager_controller"
+application.register("category-manager", CategoryManagerController)
+
+import AuthorManagerController from "./author_manager_controller"
+application.register("author-manager", AuthorManagerController)
+
+import CoverImageUploadController from "./cover_image_upload_controller"
+application.register("cover-image-upload", CoverImageUploadController)
+
+import BulkSelectionController from "./bulk_selection_controller"
+application.register("bulk-selection", BulkSelectionController)
+
+import TitleFieldController from "./title_field_controller"
+application.register("title-field", TitleFieldController)
+
+import SuggestionManagerController from "./suggestion_manager_controller"
+application.register("suggestion-manager", SuggestionManagerController)
+
+import ScheduleManagerController from "./schedule_manager_controller"
+application.register("schedule-manager", ScheduleManagerController)
+
+import ReadingProgressController from "./reading_progress_controller"
+application.register("reading-progress", ReadingProgressController)
+
+import CollapsibleSidebarController from "./collapsible_sidebar_controller"
+application.register("collapsible-sidebar", CollapsibleSidebarController)
+
+import EditorMobileSidebarsController from "./editor_mobile_sidebars_controller"
+application.register("editor-mobile-sidebars", EditorMobileSidebarsController)
+
+import PublishGuardController from "./publish_guard_controller"
+application.register("publish-guard", PublishGuardController)
+
+import TemplatePreviewController from "./template_preview_controller"
+application.register("template-preview", TemplatePreviewController)
+
+import NavigationBuilderController from "./navigation_builder_controller"
+application.register("navigation-builder", NavigationBuilderController)
+
+import PublicMobileNavController from "./public_mobile_nav_controller"
+application.register("public-mobile-nav", PublicMobileNavController)