Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce FrameElement.getElementById(id: string) #1136

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+22 −15
Open

Introduce FrameElement.getElementById(id: string) #1136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 2 additions & 11 deletions src/core/frames/frame_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,7 +424,7 @@ export class FrameController {

#findFrameElement(element, submitter) {
const id = getAttribute("data-turbo-frame", submitter, element) || this.element.getAttribute("target")
return getFrameElementById(id) ?? this.element
return FrameElement.getElementById(id) ?? this.element
}

async extractForeignFrameElement(container) {
Expand Down Expand Up @@ -468,7 +468,7 @@ export class FrameController {
}

if (id) {
const frameElement = getFrameElementById(id)
const frameElement = FrameElement.getElementById(id)
if (frameElement) {
return !frameElement.disabled
}
Expand Down Expand Up @@ -554,15 +554,6 @@ export class FrameController {
}
}

function getFrameElementById(id) {
if (id != null) {
const element = document.getElementById(id)
if (element instanceof FrameElement) {
return element
}
}
}

function activateElement(element, currentURL) {
if (element) {
const src = element.getAttribute("src")
Expand Down
5 changes: 3 additions & 2 deletions src/core/frames/frame_redirector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,9 @@ export class FrameRedirector {
#findFrameElement(element, submitter) {
const id = submitter?.getAttribute("data-turbo-frame") || element.getAttribute("data-turbo-frame")
if (id && id != "_top") {
const frame = this.element.querySelector(`#${id}:not([disabled])`)
if (frame instanceof FrameElement) {
const frame = FrameElement.getElementById(id)

if (frame && !frame.disabled && this.element.contains(frame)) {
return frame
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/core/session.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,9 +163,9 @@ export class Session {
const frameTarget = element.getAttribute("data-turbo-frame")
const frame = frameTarget == "_top" ?
null :
document.getElementById(frameTarget) || findClosestRecursively(element, "turbo-frame:not([disabled])")
FrameElement.getElementById(frameTarget) || findClosestRecursively(element, "turbo-frame")
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks like it could change the logic – e.g. a nested frame situation where the nearest frame is disabled.

In the old code, the nearest frame would be skipped and the outer frame returned, in the new logic nearest frame would be returned and the subsequent conditional would fail.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
FrameElement.getElementById(frameTarget) || findClosestRecursively(element, "turbo-frame")
FrameElement.getElementById(frameTarget) || findClosestRecursively(element, "turbo-frame:not([disabled])")


if (isUnsafe || isStream || frame instanceof FrameElement) {
if (isUnsafe || isStream || (frame && !frame.disabled)) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sfnelson since FrameElement.getElementById accounts for instanceof FrameElement, does this property check account for the concerns you've shared in https://github.com/hotwired/turbo/pull/1136/files/b750a8f2e44ef3133baf6328e5187c80ae5cf2e1#r1496721094?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the sake of shrinking the diff, both of these lines could likely be reverted in part:

Suggested change
if (isUnsafe || isStream || (frame && !frame.disabled)) {
if (isUnsafe || isStream || frame instanceof FrameElement) {

Copy link

@sfnelson sfnelson Feb 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that looks fine.

Would it make sense to add a static helper for finding the enclosing (non-disabled) FrameElement? In that case the findClosestRecursively could be replaced by e.g. FrameElement.findEnclosingFrame(element) and the check would become if (isUnsafe || isStream || frame) {.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the purposes of code reuse, I can see two additional utility methods that would be helpful:

  • FrameElement.findEnclosingFrame(element) would walk up the tree to find the enclosing frame (if any)
  • FrameElement.findTargetFrame(element) would expose #findFrameElement – given an element it would identify which frame should be targeted – for use with links/forms that target frames for navigation

I think these would bring general utility to downstream consumers of Turbo – both of these cases have come up in our use of Frames to implement modals.

return false
} else {
const location = new URL(element.href)
Expand Down
15 changes: 15 additions & 0 deletions src/elements/frame_element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,21 @@ export class FrameElement extends HTMLElement {
return ["disabled", "loading", "src"]
}

/**
* Returns the `<turbo-frame>` element located by its `[id]` attribute.
* Returns `null` when there is not element with a matching `[id]`, or when
* the element with a matching `[id]` is not a `<turbo-frame>`.
*/
static getElementById(id) {
if (id) {
const element = document.getElementById(id)

if (element instanceof this) {
return element
}
}
}

constructor() {
super()
this.delegate = new FrameElement.delegateConstructor(this)
Expand Down
Loading