journal-to-canvas-slideshow/scripts/SheetImageApp.js

316 lines
12 KiB
JavaScript

"use strict";
import { log } from "./debug-mode.js";
import { HelperFunctions } from "./classes/HelperFunctions.js";
import { sheetImageActions, sheetControls } from "./SheetImageActions.js";
import { SheetImageDataController } from "./SheetImageDataController.js";
import { artTileManager, helpers } from "./data/ModuleManager.js";
import { ArtTileManager } from "./classes/ArtTileManager.js";
import { universalInterfaceActions } from "./data/Universal-Actions.js";
export class SheetImageApp {
static displayMethods = [
{
name: "anyScene",
icon: "fas fa-vector-square",
tooltip: "choose Art Tile in current scene to display image on",
},
{
name: "window",
icon: "fas fa-external-link-alt",
tooltip: "Display image in pop-out window",
},
{
name: "journalEntry",
icon: "fas fa-book-open",
tooltip: "display image in your chosen 'Art Journal'",
},
{
name: "artScene",
icon: "far fa-image",
tooltip: "display image in your chosen 'Art Scene'",
},
];
/**
*
* @param {*} app - the application (sheet) that this is being called from
* @param {*} html
*/
static async applyImageClasses(app, html) {
if (game.user.isGM) {
const whichSheets = await HelperFunctions.getSettingValue(
"artGallerySettings",
"sheetSettings.modularChoices"
);
const doc = app.document;
let onThisSheet = await HelperFunctions.getFlagValue(
doc,
"showControls",
"",
false
);
let documentName = doc.documentName;
documentName = documentName.charAt(0).toLowerCase() + documentName.slice(1);
// if (documentName === "item" && doc.parent) {
// //if it's an embedded item in a sheet
// return;
// }
// for v10 +
if (game.version >= 10) {
if (documentName === "journalEntryPage") {
documentName = "journalEntry";
onThisSheet = await HelperFunctions.getFlagValue(
doc.parent,
"showControls",
"",
false
);
}
}
let selectorString = "img, video, .lightbox-image";
if (whichSheets[documentName] || onThisSheet === true) {
if (onThisSheet) {
if (documentName === "journalEntry" && game.version < 10) {
html.find(selectorString).addClass("clickableImage");
} else {
html.find(selectorString).addClass("rightClickableImage");
}
//inject the controls into every image that has the clickableImage or rightClickableImage classes
Array.from(
html.find(".clickableImage, .rightClickableImage")
).forEach((img) => SheetImageApp.injectImageControls(img, app));
}
}
if (doc.documentName !== "JournalEntryPage") {
SheetImageApp.injectSheetWideControls(app);
}
}
}
static async applySheetFadeSettings(journalSheet) {
//get opacity, and whether or not journals should be faded
let opacityValue = (
await game.JTCS.utils.getSettingValue(
"artGallerySettings",
"sheetFadeOpacityData"
)
).value;
let shouldFadeImages = (
await game.JTCS.utils.getSettingValue(
"artGallerySettings",
"fadeSheetImagesData"
)
).chosen;
//set a CSS variable on the journal sheet to grab the opacity in css
let sheetElement = journalSheet.element;
sheetElement[0].style.setProperty("--journal-fade", opacityValue + "%");
//set the window content's data-attribute to "data-fade-all" so it fades the journal's opacity, and not just the background color
if (shouldFadeImages === "fadeAll") {
sheetElement.find(".window-content").attr("data-fade-all", true);
// sheetElementStyle.setProperty("--fade-all", true);
}
}
/**
* When the journal sheet renders, we're going to add controls over each image
* @param {HTMLElement} imgElement - the image HTML element
* @param {*} journalSheet - the journal sheet we're searching within
*/
static async injectImageControls(imgElement, journalSheet) {
let template = "modules/journal-to-canvas-slideshow/templates/image-controls.hbs";
// game.JTCS.templates["image-controls"]
const defaultArtTileID = await ArtTileManager.getDefaultArtTileID();
const imageName = await SheetImageDataController.convertImageSourceToID(
imgElement
);
imgElement.dataset.name = imageName;
//get the art tiles in the scene
let displayTiles = await ArtTileManager.getSceneSlideshowTiles("art", true);
displayTiles = displayTiles.filter((tile) => !tile.missing);
displayTiles = displayTiles.map((tile) => {
return {
tile: tile,
randomID: foundry.utils.randomID(),
};
});
let users = game.users.contents;
let renderHtml = await renderTemplate(template, {
currentSceneName: game.scenes.viewed.name,
displayMethods: SheetImageApp.displayMethods,
displayTiles: displayTiles,
defaultArtTileID: defaultArtTileID,
imgPath: imageName,
users: users,
// ...imageFlagData,
});
//wrap each image in a clickableImageContainer
$(imgElement).wrap("<div class='clickableImageContainer'></div>");
$(imgElement).parent().append(renderHtml);
await SheetImageApp.activateImageEventListeners({
controlsContainer: $(imgElement).parent(),
journalSheet: journalSheet,
imgElement: imgElement,
});
}
static async injectSheetWideControls(journalSheet) {
let template = game.JTCS.templates["sheet-wide-controls"];
await SheetImageApp.applySheetFadeSettings(journalSheet);
let isActive = await HelperFunctions.getFlagValue(
journalSheet.document,
"showControls",
"",
false
);
let controlsData = sheetControls.map((control) =>
control.toggle ? { ...control, active: isActive } : control
);
let renderHtml = await renderTemplate(template, {
controls: controlsData,
isActive,
});
let selector = ".window-content";
if (journalSheet.document.documentName === "JournalEntryPage") {
selector = ".journal-page-content";
}
let $editorElement = $(journalSheet.element[0].querySelector(selector));
$editorElement.prepend(renderHtml);
let controlsContainer = $("#sheet-controls");
await SheetImageApp.activateSheetWideEventListeners({
controlsContainer,
journalSheet,
isActive,
});
}
static async activateSheetWideEventListeners(options) {
const { journalSheet, isActive } = options;
const controlsContainer = journalSheet.element.find("#sheet-controls");
$(controlsContainer)
.off("click", "[data-action]")
.on("click", "[data-action]", async (event) => {
SheetImageApp.handleAction(event, journalSheet, "action", false);
});
const controlsToggleButton = $(controlsContainer).find(
"[data-action='sheet.click.toggleImageControls']"
)[0];
if (isActive) {
$(controlsToggleButton).addClass("active");
}
universalInterfaceActions.toggleHideAllSiblings(null, controlsToggleButton);
}
// handle any interaction event
static async handleAction(event, journalSheet, actionType = "action", isItem = true) {
event.preventDefault();
let targetElement = $(event.currentTarget);
let imgElement;
//"isItem" stands for if it's a sheet-wide control or an item-specific control
if (isItem) {
//if our target element is not an image, get the closest image from our clickableImageContainer parent
//else just get the current target itself
if (
targetElement.prop("nodeName") !== "IMG" ||
targetElement.prop("nodeName") !== "VIDEO"
) {
imgElement = targetElement[0]
.closest(".clickableImageContainer")
.querySelector("img, video");
} else {
imgElement = targetElement[0];
}
//if our target element is a label, get the input before it instead
targetElement.prop("nodeName") === "LABEL" &&
(targetElement = targetElement.prev());
}
let action = targetElement.data()[actionType];
let handlerPropertyString = "onClick";
switch (actionType) {
case "hoverAction":
handlerPropertyString = "onHover";
break;
case "changeAction":
handlerPropertyString = "onChange";
break;
}
let actionData = getProperty(sheetImageActions, action);
if (actionData && actionData.hasOwnProperty(handlerPropertyString)) {
//call the event handler stored on this object
let options = {
action: action,
app: journalSheet,
html: journalSheet.element,
...(imgElement && {
parentItem: imgElement.closest(".clickableImageContainer"),
}),
imgElement: imgElement,
};
actionData[handlerPropertyString](event, options);
}
}
/**
*
* @param data - the data object
*/
static async activateImageEventListeners(data) {
let { journalSheet, imgElement, controlsContainer } = data;
let html = journalSheet.element;
//add data actions to the images
$(imgElement).attr("data-hover-action", "image.hover.showTileIndicator");
$(imgElement).attr("data-action", "image.click.sendImageDataToDisplay");
$(controlsContainer)
.off("click contextmenu", "[data-action]")
.on(
"click contextmenu",
"[data-action]",
async (event) =>
await SheetImageApp.handleAction(event, journalSheet, "action")
);
$(controlsContainer)
.off("mouseenter mouseleave", "[data-hover-action]")
.on(
"mouseenter mouseleave",
"[data-hover-action]",
async (event) =>
await SheetImageApp.handleAction(event, journalSheet, "hoverAction")
);
$(controlsContainer)
.off("change", "[data-change-action]")
.on(
"change",
"[data-change-action]",
async (event) =>
await SheetImageApp.handleAction(event, journalSheet, "changeAction")
);
}
static async addFadeStylesToSheet(event) {
event.preventDefault();
let windowContent = event.currentTarget.closest(".window-content");
let faded =
windowContent.classList.contains("fade") ||
windowContent.classList.contains("fade-all");
if (faded) {
windowContent.classList.remove("fade");
} else {
windowContent.classList.add("fade");
}
}
}