diff --git a/src/core/drive/morphing_page_renderer.js b/src/core/drive/morphing_page_renderer.js index 8f1073b3d..0f0c3427d 100644 --- a/src/core/drive/morphing_page_renderer.js +++ b/src/core/drive/morphing_page_renderer.js @@ -1,25 +1,9 @@ import { PageRenderer } from "./page_renderer" -import { dispatch } from "../../util" -import { morphElements, shouldRefreshFrameWithMorphing, closestFrameReloadableWithMorphing } from "../morphing" +import { morphBodyElements } from "../morphing" export class MorphingPageRenderer extends PageRenderer { - static renderElement(currentElement, newElement) { - morphElements(currentElement, newElement, { - callbacks: { - beforeNodeMorphed: (node, newNode) => { - if ( - shouldRefreshFrameWithMorphing(node, newNode) && - !closestFrameReloadableWithMorphing(node) - ) { - node.reload() - return false - } - return true - } - } - }) - - dispatch("turbo:morph", { detail: { currentElement, newElement } }) + static render(currentBody, newBody) { + morphBodyElements(currentBody, newBody) } async preservingPermanentElements(callback) { @@ -34,4 +18,3 @@ export class MorphingPageRenderer extends PageRenderer { return false } } - diff --git a/src/core/frames/morphing_frame_renderer.js b/src/core/frames/morphing_frame_renderer.js index 01e29994a..722b85e4d 100644 --- a/src/core/frames/morphing_frame_renderer.js +++ b/src/core/frames/morphing_frame_renderer.js @@ -1,32 +1,12 @@ import { FrameRenderer } from "./frame_renderer" -import { morphChildren, shouldRefreshFrameWithMorphing, closestFrameReloadableWithMorphing } from "../morphing" -import { dispatch } from "../../util" +import { morphTurboFrameElements } from "../morphing" export class MorphingFrameRenderer extends FrameRenderer { - static renderElement(currentElement, newElement) { - dispatch("turbo:before-frame-morph", { - target: currentElement, - detail: { currentElement, newElement } - }) - - morphChildren(currentElement, newElement, { - callbacks: { - beforeNodeMorphed: (node, newNode) => { - if ( - shouldRefreshFrameWithMorphing(node, newNode) && - closestFrameReloadableWithMorphing(node) === currentElement - ) { - node.reload() - return false - } - return true - } - } - }) + static render(currentFrame, newFrame) { + morphTurboFrameElements(currentFrame, newFrame) } async preservingPermanentElements(callback) { return await callback() } } - diff --git a/src/core/index.js b/src/core/index.js index a94b04c18..a8f48f48a 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -4,10 +4,8 @@ import { PageSnapshot } from "./drive/page_snapshot" import { FrameRenderer } from "./frames/frame_renderer" import { fetch, recentRequests } from "../http/fetch" import { config } from "./config" -import { MorphingPageRenderer } from "./drive/morphing_page_renderer" -import { MorphingFrameRenderer } from "./frames/morphing_frame_renderer" -export { morphChildren, morphElements } from "./morphing" +export { morphChildren, morphElements, morphBodyElements, morphTurboFrameElements } from "./morphing" const session = new Session(recentRequests) const { cache, navigator } = session @@ -120,29 +118,3 @@ export function setFormMode(mode) { ) config.forms.mode = mode } - -/** - * Morph the state of the currentBody based on the attributes and contents of - * the newBody. Morphing body elements may dispatch turbo:morph, - * turbo:before-morph-element, turbo:before-morph-attribute, and - * turbo:morph-element events. - * - * @param currentBody HTMLBodyElement destination of morphing changes - * @param newBody HTMLBodyElement source of morphing changes - */ -export function morphBodyElements(currentBody, newBody) { - MorphingPageRenderer.renderElement(currentBody, newBody) -} - -/** - * Morph the child elements of the currentFrame based on the child elements of - * the newFrame. Morphing turbo-frame elements may dispatch turbo:before-frame-morph, - * turbo:before-morph-element, turbo:before-morph-attribute, and - * turbo:morph-element events. - * - * @param currentFrame FrameElement destination of morphing children changes - * @param newFrame FrameElement source of morphing children changes - */ -export function morphTurboFrameElements(currentFrame, newFrame) { - MorphingFrameRenderer.renderElement(currentFrame, newFrame) -} diff --git a/src/core/morphing.js b/src/core/morphing.js index 21d2b5f2f..67fde94a1 100644 --- a/src/core/morphing.js +++ b/src/core/morphing.js @@ -33,6 +33,65 @@ export function morphChildren(currentElement, newElement, options = {}) { }) } +/** + * Morph the state of the currentBody based on the attributes and contents of + * the newBody. Morphing body elements may dispatch turbo:morph, + * turbo:before-morph-element, turbo:before-morph-attribute, and + * turbo:morph-element events. + * + * @param currentBody HTMLBodyElement destination of morphing changes + * @param newBody HTMLBodyElement source of morphing changes + */ +export function morphBodyElements(currentElement, newElement) { + morphElements(currentElement, newElement, { + callbacks: { + beforeNodeMorphed: (node, newNode) => { + if ( + shouldRefreshFrameWithMorphing(node, newNode) && + !closestFrameReloadableWithMorphing(node) + ) { + node.reload() + return false + } + return true + } + } + }) + + dispatch("turbo:morph", { detail: { currentElement, newElement } }) +} + +/** + * Morph the child elements of the currentFrame based on the child elements of + * the newFrame. Morphing turbo-frame elements may dispatch turbo:before-frame-morph, + * turbo:before-morph-element, turbo:before-morph-attribute, and + * turbo:morph-element events. + * + * @param currentFrame FrameElement destination of morphing children changes + * @param newFrame FrameElement source of morphing children changes + */ +export function morphTurboFrameElements(currentElement, newElement) { + dispatch("turbo:before-frame-morph", { + target: currentElement, + detail: { currentElement, newElement } + }) + + morphChildren(currentElement, newElement, { + callbacks: { + beforeNodeMorphed: (node, newNode) => { + if ( + shouldRefreshFrameWithMorphing(node, newNode) && + closestFrameReloadableWithMorphing(node) === currentElement + ) { + node.reload() + return false + } + return true + } + } + }) +} + export function shouldRefreshFrameWithMorphing(currentFrame, newFrame) { return currentFrame instanceof FrameElement && // newFrame cannot yet be an instance of FrameElement because custom