Conditionally display elements within a turbo frame?

1

Consider two separate views:

<h1> Imbox.html.erb </h1>
<turbo-frame id="set_aside_tray" src="/emails/set_aside">  
</turbo-frame>

and another view:

<% # emails/set_aside.html.erb %>
<turbo-frame id="set_aside_tray" src="/emails/set_aside">  
      <button/>
</turbo-frame>

I would like to show the button conditionally: I want to hide it if we are in the imbox,
but i want to SHOW it if we are viewing the set_aside page directly. q: is such a thing possible?

(Right now the only way of showing it “conditionally” is to remove the button and place it outside the turbo-frame tag, which solves both problems. but it is not what I want, because I would be forced to dramatically rearrange items on my page. any pointers would be appreciated)

2

What about using CSS? Something like:

.hide-buttons button { display: none; }

<h1> Imbox.html.erb </h1>
+ <div class="hide-buttons">
  <turbo-frame id="set_aside_tray" src="/emails/set_aside">  
      <button/>
  </turbo-frame>
+ </div>

<% # emails/set_aside.html.erb %>
<turbo-frame id="set_aside_tray" src="/emails/set_aside">  
  <button/>
</turbo-frame>
3

Hey I appreciate the ideas. i thought of doing a css-based approach: hide/show, or otherwise change the position of elements. what i’m really getting at is perhaps there is a concept that is missing (or are there different ways of doing this?):

<-- server .e.g rails server  -->
<%  if turbo_frame_request  %>
      <---- show button        ---->
<%  else       %>
     <----- hide button        ---->
<%  end %>

This would allow someone to selectively return slightly different pages, according to a request. Or perhaps it can be done in a declaritive style:

<div data-turbo-frame-display-only="true" />

I would love to do something like that.

Unfortunately, I have only a very superficial understanding of the library and it’s internal mechanisms, so not sure if this is possible, or whether it even makes sense, or whether there are simpler ways of dealing with it (ie… the css approach you’ve pointed out).

4

There is a private controller method #turbo_frame_request? which you could use (or mimic in a helper):

private

def turbo_frame_request?
  turbo_frame_request_id.present?
end

def turbo_frame_request_id
  request.headers["Turbo-Frame"]
end

see: turbo-rails/app/controllers/turbo/frames/frame_request.rb

3 Likes