Files
fvtt-adventures-with-emmy/module/applications/sheets/base-item-sheet.mjs
T

247 lines
7.7 KiB
JavaScript

import { SYSTEM } from "../../config/system.mjs"
const { HandlebarsApplicationMixin } = foundry.applications.api
export default class AwEItemSheet extends HandlebarsApplicationMixin(foundry.applications.sheets.ItemSheetV2) {
/**
* Different sheet modes.
* @enum {number}
*/
static SHEET_MODES = { EDIT: 0, PLAY: 1 }
constructor(options = {}) {
super(options)
this.#dragDrop = this.#createDragDropHandlers()
}
#dragDrop
/** @override */
static DEFAULT_OPTIONS = {
classes: ["awemmy", "item"],
position: {
width: 600,
height: 480
},
form: {
submitOnChange: true
},
window: {
resizable: true
},
dragDrop: [{ dragSelector: "[data-drag]", dropSelector: null }],
actions: {
toggleSheet: AwEItemSheet.#onToggleSheet,
editImage: AwEItemSheet.#onEditImage,
addTrait: AwEItemSheet.#onAddTrait,
removeTrait: AwEItemSheet.#onRemoveTrait
}
}
/**
* The current sheet mode.
* @type {number}
*/
_sheetMode = this.constructor.SHEET_MODES.PLAY
/**
* Is the sheet currently in 'Play' mode?
* @type {boolean}
*/
get isPlayMode() {
return this._sheetMode === this.constructor.SHEET_MODES.PLAY
}
/**
* Is the sheet currently in 'Edit' mode?
* @type {boolean}
*/
get isEditMode() {
return this._sheetMode === this.constructor.SHEET_MODES.EDIT
}
/** @override */
async _prepareContext() {
const context = await super._prepareContext()
context.fields = this.document.schema.fields
context.systemFields = this.document.system.schema.fields
context.item = this.document
context.system = this.document.system
context.source = this.document.toObject()
context.enrichedDescription = await foundry.applications.ux.TextEditor.implementation.enrichHTML(
this.document.system.description, { async: true }
)
context.isEditMode = this.isEditMode
context.isPlayMode = this.isPlayMode
context.isEditable = this.isEditable
context.traitSuggestions = SYSTEM.TRAITS
return context
}
/** @override */
_onRender(context, options) {
super._onRender(context, options)
this.#dragDrop.forEach(d => d.bind(this.element))
// Bind Enter key on tag input fields to trigger the addTrait/addSpecialization actions
this.element.querySelectorAll("input.new-tag[data-action]").forEach(input => {
input.addEventListener("keydown", event => {
if (event.key !== "Enter") return
event.preventDefault()
const actionName = input.dataset.action
const handler = this.options.actions?.[actionName]
if (handler) handler.call(this, event, input)
})
// Auto-split comma-separated values on paste
input.addEventListener("paste", async event => {
const pasted = (event.clipboardData ?? window.clipboardData).getData("text")
const parts = pasted.split(",").map(s => s.trim().toLowerCase()).filter(Boolean)
if (parts.length < 2) return // single value: let default paste handle it
event.preventDefault()
const fieldName = input.dataset.field ?? "system.traits"
const current = foundry.utils.getProperty(this.document, fieldName) ?? []
const merged = [...new Set([...current, ...parts])]
try {
await this.document.update({ [fieldName]: merged })
} catch (err) {
ui.notifications.error(game.i18n.localize("AWEMMY.Error.TraitPasteFailed"))
console.error("AwE | trait paste update failed:", err)
}
})
})
}
// #region Drag-and-Drop Workflow
/**
* Create drag-and-drop workflow handlers for this Application.
* @returns {DragDrop[]} An array of DragDrop handlers.
* @private
*/
#createDragDropHandlers() {
return this.options.dragDrop.map(d => {
d.permissions = {
dragstart: this._canDragStart.bind(this),
drop: this._canDragDrop.bind(this)
}
d.callbacks = {
dragstart: this._onDragStart.bind(this),
dragover: this._onDragOver.bind(this),
drop: this._onDrop.bind(this)
}
return new foundry.applications.ux.DragDrop.implementation(d)
})
}
/**
* Define whether a user is able to begin a dragstart workflow for a given drag selector.
* @param {string} selector - The candidate HTML selector for dragging.
* @returns {boolean} Can the current user drag this selector?
* @protected
*/
_canDragStart(selector) {
return this.isEditable
}
/**
* Define whether a user is able to conclude a drag-and-drop workflow for a given drop selector.
* @param {string} selector - The candidate HTML selector for the drop target.
* @returns {boolean} Can the current user drop on this selector?
* @protected
*/
_canDragDrop(selector) {
return this.isEditable && this.document.isOwner
}
/**
* Callback actions which occur at the beginning of a drag start workflow.
* @param {DragEvent} event - The originating DragEvent.
* @protected
*/
_onDragStart(event) {
if ("link" in event.target.dataset) return
}
/**
* Callback actions which occur when a dragged element is over a drop target.
* @param {DragEvent} event - The originating DragEvent.
* @protected
*/
_onDragOver(event) {}
/**
* Callback actions which occur when a dragged element is dropped on a target.
* @param {DragEvent} event - The originating DragEvent.
* @protected
*/
async _onDrop(event) {}
// #endregion
// #region Actions
/**
* Handle toggling between Edit and Play mode.
* @param {Event} event - The initiating click event.
* @param {HTMLElement} target - The current target of the event listener.
*/
static #onToggleSheet(event, target) {
const modes = this.constructor.SHEET_MODES
this._sheetMode = this.isEditMode ? modes.PLAY : modes.EDIT
this.render()
}
/**
* Handle changing a Document's image.
* @param {PointerEvent} event - The originating click event.
* @param {HTMLElement} target - The capturing HTML element which defined a [data-action].
* @returns {Promise} The file picker promise.
* @private
*/
static async #onEditImage(event, target) {
const attr = target.dataset.edit
const current = foundry.utils.getProperty(this.document, attr)
const { img } = this.document.constructor.getDefaultArtwork?.(this.document.toObject()) ?? {}
const fp = new FilePicker({
current,
type: "image",
redirectToRoot: img ? [img] : [],
callback: path => {
this.document.update({ [attr]: path })
},
top: this.position.top + 40,
left: this.position.left + 10
})
return fp.browse()
}
// #endregion
// #region Array field helpers (traits, specializations)
/**
* Handle adding a tag (trait, specialization) from the input field.
* @param {PointerEvent|KeyboardEvent} event - The initiating event.
* @param {HTMLElement} target - The input element.
*/
static async #onAddTrait(event, target) {
const value = target.value.trim()
if (!value) return
const fieldName = target.dataset.field ?? "system.traits"
const current = foundry.utils.getProperty(this.document, fieldName) ?? []
await this.document.update({ [fieldName]: [...current, value] })
target.value = ""
}
/**
* Handle removing a tag (trait, specialization) from an array field.
* @param {PointerEvent} event - The initiating click event.
* @param {HTMLElement} target - The remove button.
*/
static async #onRemoveTrait(event, target) {
const index = Number(target.dataset.index)
const fieldName = target.dataset.field ?? "system.traits"
const current = [...(foundry.utils.getProperty(this.document, fieldName) ?? [])]
current.splice(index, 1)
await this.document.update({ [fieldName]: current })
}
// #endregion
}