Ruby- Change the layout on button release without changing the URL - ruby-on-rails

I would like to have my Flash animation in fullscreen when I press a html button under the animation. I have a ../views/layout/viewer.rhtml (this one loads all menus). I have ./views/layout/fullscreen.rhtml (this one do not have menus, it has only 100% width and 100% height and the flash object). I would like to avoid Javascript method.
I have a show_controller:
layout "viewer"
def index
h = Histoire.find_by_label(params[:story_name])
# Checks if current_user has a subscription which allows the story whose ID is passed by param to be seen
if h.price != 0 && (current_user.nil? || current_user.abonnement.histoires.delete_if{|histoire| histoire.label != params[:story_name]}.length == 0)
flash[:notice] = "Sorry, your subscription doesn't allow you to access this story, please contact sales service"
redirect_to index_url
else
#histoire = Histoire.find_by_label(params[:story_name])
render :action => :show
end
end
I have a flash object:
My flash Animation need to have a fixed URL to run: /show/Story_Name, the current layout is viewer. When I press FullScreen button, I'd like Ruby to change the layout from "viewer" to "fullscreen".
Is there a way to change the layout from viewer to fullscreen when a button is pressed?
I'm beginner in this matter. Thanks a lot to the one who will help me.

Ruby code is executed on the server side, it won't do anything unless you reload the page to make another call to your controller, for example using a "layout_mode" parameter you may use in your view template.
I would use an unobtrusive javascript approach :
use a link to reload the page and change the layout_mode to fullscreen. This behavior allows user with Javascript disabled to access he fullscreen switch feature
use jQuery to modify this link so it changes the layout on click without reloading the page for the regular users
Side note : I would advice you to avoid naming your model objects in French, as Rails is strongly convention-oriented and makes an extensive use of english-inflections : Rails will consider stories as a collection and story as an individual member. It would work with "gourou" and "joujou" but won't with "hibou", "caillou", "chou"... ;)

Related

Rails how to remember the navbar status between clicks?

I have a rails app with a nice navbar that can fold and unfold. The navbar contains links that point to different controllers and actions.
Every time a user clicks on one of the links, the browser goes to the new page and the navbar gets reset to its initial state.
I need to maintain the fold/unfold status of the navbar between calls (that is better user experience).
I'm not sure how to do so.
I thought to add in the javascript that handles the folding a URL parameter so that the next view can dig it and load the menu in the previous state. This parameter would be completely handled in the view, so no changes in the controllers.
I'm not sure this is the best way to approach this.
I've been suggested to use the session object. but I think that this will still require some sort of passing params (still via URL), and would require changing the controllers (there are many, I'm not very happy to change them all and after all this is a purely user interface matter).
Would it be reasonable to use the window.local/session storage for this?
any suggestions?
You could have a boolean in your database that gets updated every time the user clicks a link in the navbar and then redirect to the appropriate view.
The view decides which status of the navbar to show (folded or unfolded) based on the value of the boolean.
In the end I went for using localStorage,
It was rather simple to implement, and it's a purely JS solution, the only side effect is that when the page load there's an extremely fast flicker when the navbar is open (the navbar is loaded closed, then JS opens it).
the code just runs down to these few lines of code:
$('.chevrons .open').click(function(event) {
localStorage.setItem('navbar', 'open')
....
});
$('.chevrons .close').click(function(event) {
localStorage.setItem('navbar', 'closed')
....
});
if (localStorage.getItem('navbar') === 'open') {
$('.chevrons .open').trigger('click')
}

Why's is format.turbo_stream causing the page to jump to the top?

I have a table that makes up a very complex schedule. Each tr has a unique dom id. As the schedule is rendered, the duration of a schedule's time span dictates a colspan attribute. For example, a 9 day schedule span will colspan 9 tds and look like one section. That's too much info, really.
Each colspan td has a simple dropdown menu offering a few shortcuts like edit and delete. The entire table is wrapped in a turbo_frame_tag, so all links (without turbo_frame: '_top') will respond to turbo_stream format. The delete link is a button_to....to trigger the turbo_stream response in the destroy action.
The functionality of all this actually works perfectly. If a user clicks on the dropdown for a given schedule block, clicks the delete link...the :destroy action is hit, the record is destroyed, and the action responds to turbo_stream...which replaces the entire table row.
The problem is...for some reason, the content is not updated right before my eyes. Instead, the page jumps back to the top (without a page refresh), and if I scroll back down to where I was...the content has been updated via TURBO. I remember having issues like this in old school JS, but why would turbo_stream also do this? And, is there anything I can do to prevent it?
Using div's inside a table like this doesn't violate any standards, but I can't help but think I might be better off converting this to a sudo table built out of tags, etc. I'm wondering if doing that might also help the above issue. I'm not sure why it would, but manipulating tables seems to do weird things sometimes.
Thanks!
respond_to do |format|
format.turbo_stream {
render turbo_stream: turbo_stream.replace(
"user_#{ user_id }_crew_schedule_row",
partial: 'crew_schedules/partials/schedule_row',
locals: { user: #crew_schedule.user }
)
}
format.html { redirect_to redirect_path }
end

How to set an initial value for my object in ruby on rails

I am still pretty new to Rails and am working on a basic app and have run into a problem, which I can't seem to get around, sorry if this question has already been answered, but searching didn't yield me any results.
Basically I am creating an app that catalogues all of someones's clothes, Now the main page is the index page of everything they have logged, and each picture is linked to the show page where more information is revealed. I want to use AJAX to bring that show page to the side of the main index page. I am working off of another tutorial to figure this out but have run into a problem. On the initial load of my index page, I need to define a variable for that show page so that it can be rendered using a partial, but I can't use find(params[:id]) since the user hasn't selected anything yet. So my question is how do I set that initial value to either just the first item in the catalogue or not have anything appear, and then when someone does click the link, the sidebar shows the more detailed description of the piece of clothing.
Thanks for any help.
#object = params[:id] ? MyModel.find(params[:id]) : MyModel.first
But I think there's some problem with design of application.
You might have some luck working with the ruby gem 'PJAX'. Here is a screen cast showing you how to get that AJAX sidebar you want. Good luck
It sounds like you can just print the container element as normal, but leave it empty when the page is generated. Optionally, hide it via CSS. Then, when you load its content with AJAX, set it to visible or just populate it as normal.
Alternatively, if you really want to set it to the first item in the catalog (or in any ActiveRecord) you can use .first e.g. Products.first, and use that value to populate its initial contents.

Rails 3 render partial without reloading images

I have a view 'edit.html.erb' which renders a partial.
<div id="exerciseslist"><%= render 'exerciseslist' %></div>
Inside 'edit.js.erb', I have the following line which reloads the partial each time something is updated.
$('#exerciseslist').html('<%= escape_javascript(render("exerciseslist")) %>');
The partial is a table with a bunch of items including images for each one and some buttons. All that is changing in the partial is the button. If a submit is successful, the button toggles state indicating that it has been added.
It's working fine, the problem is I don't like the way the images flash as the request happens, the items are also inside a scrollable section which looses it's state each time.
Is there a good way to just load the state of the buttons without rendering the full partial? Or is there a simple way to stop the client requesting the images each time?
I have done some reading and found pjax and backbone.js, are either of them a good way or is there a simpler rails way to do this?
Thanks,
Mike
Without seeing code, it's hard to be sure, but I think it could be done with just Rails. Instead of re-rendering the exerciseslist partial on submission, you could write an AJAX request to handle submission of the new data and on success, have the callback change the button state, rather than reload the partial.

Adding a preview step to the rails create and update actions

This is a part of an app allowing the user to create HTML newsletters. After making edits, I'd like to let them preview the final look before saving the edits.
The preview page would display the preview and add the data in a hidden field to get resubmitted on approval. On "back to editing," the hidden field data would be passed back to the edit view.
I would have to add a "preview" action to the controller.
Is there a simpler way or best practice for this pattern?
In my opinion it would be good to add a kind of "preview" - Attribute to the model. When you klick on "Preview" you could copy the record or set "preview" to "true" and show it as static page when tis is the case. If the preview is ok, then you could set preview to false and that would state, that the Newsletter is ready to send.
Hope it is clear how i mean it, kinda late for me ;)

Resources