In the mercury-rails/wickedpdf application, I wanted to make a simple additions to limit the pages that people can go to.
I wanted the index page to display a tiny image representation of the pdf they have and then have an edit, pdf preview and destroy option.
I could have done this through a route, but i figured that it is best to just keep it in my index. My table loop is below. The preview just takes the template and appends .pdf at the end. The edit link apends /editor before the template/id so that it opens up the mercury rails.
[code]
% @templates.each do |template| %>
<tr>
<td><%= template.name %></td>
<td><%= link_to ‘Preview PDF’, "/templates/#{template.id}.pdf", :target => "_blank" %></td>–>
<td><%= link_to ‘Edit’, "/editor/templates/" + template.id.to_s %></td>
<!–<td><= link_to ‘Edit’, edit_template_path(template) %></td>–>
<td><%= link_to ‘Destroy’, template, method: :delete, data: { confirm: ‘Are you sure, this is not reversible?’ } %></td>
</tr>
<% end %>
[/code]
Now that part was pretty easy. The next step is fairly straightfoward too. I liked the way the ‘Preview’ button functioned, so I edited that button in mercury.js to look like this.
[code]
preview: [‘Preview PDF’, ‘Preview this page’],
[/code]
Then at the end of our mercury.js file I added an event that binds an action to the preview button
[code]
$(window).bind(‘mercury:ready’, function() {
$(‘.mercury-preview-button’).click(function() {
alert(‘foo’);
});
});
[/code]
Now that this looks like we want and the foo is alerting when we click the Preview PDF button, we just have to change the alert to redirect and
When i click that button after adding the code, foo alerts.
Then change the above code to
[code]
$(window).bind(‘mercury:ready’, function() {
$(‘.mercury-preview-button’).click(function() {
//grabs the last item in the request URL which is our template id
var template_id = window.location.pathname.split("/").pop();
var path = ‘/templates/’ + template_id + ‘.pdf’;
window.open(path, ‘_blank’)
});
});
[/code]
This opens a new window for when the Preview PDF button is clicked that has the PDF representation of our edited document. This feels like a hack, but when i renamed mercury.js to have a .erb and used @template.id I was getting some weird errors that I didn’t want to spend time tracing down. The request ID is coming through in the URL and we already have security in place to prevent URL hacking, so this gives us the functionality we want.
Our final bind event for mercury.js that allows for custom saving and pdf redirection looks like this.
[code]
$(window).bind(‘mercury:ready’, function() {
var link = $(‘#mercury_iframe’).contents().find(‘#edit_link’);
Mercury.saveURL = link.data(‘save-url’);
link.hide();
//opens new page when Preview PDF is clicked in mercury.js
$(‘.mercury-preview-button’).click(function() {
//grabs the last item in the request URL which is our template id
var template_id = window.location.pathname.split("/").pop();
var path = ‘/templates/’ + template_id + ‘.pdf’;
window.open(path, ‘_blank’)
});
});
//redirects after a save
$(window).bind(‘mercury:saved’, function() {
alert(‘Template Saved!’);
});
[/code]