[Fixes browsermedia#656] Multiple Attachments widget

* Upload Attachment now opens a modal dialog. * Show attachments in properly styled table. * Constraint attachment thumbnails size in preview table. * Add Delete button for each row. * Show message if there are no attachments. * Delete attachment no longer uses deprecated link_to_function from delete (deprecated) * Preview image opens a new tab (allows New blocks to continue safely) * Removed custom 'loading' image (should have a CMS wide consistent one if needed) * Add Never Mind button for modal. * Fixed Jquery missing errors for inline page editing. Catalog Updates: * Catalog - Slug is now correctly based of the name field.

Author: peakpg

app/assets/javascripts/cms/attachment_manager.js.erb renamed to app/assets/javascripts/cms/attachment_manager.js

@@ -3,12 +3,11 @@
 $(function () {
  $.cms.AttachmentManager = {
  upload:function (file) {
- var assetName = $('#asset_types').val()
+ var assetName = $('#attachment_attachable_type').val()
  , attachableClass = $('#asset_attachable_class').val()
- , attachableIDField = $('#asset_attachable_id')
- , attachableID = attachableIDField.val()
+// , attachableIDField = $('#asset_attachable_id')
+ , attachableID = $('#asset_attachable_id').val()
  , file = $('#asset_add_file')
- , clone = file.clone()
  , form = $('<form target="asset_add_uploader" method="post" action="/cms/attachments" enctype="multipart/form-data" style="visibility:hidden">')
  , fields = '';
 
@@ -21,21 +20,24 @@ $(function () {
  $('body').append(form);
  form.append(fields);
  form.append(file);
- attachableIDField.after(clone);
+ $('label[for="asset_add_file"]').after(file.clone());
 
  var inp = $('<input type="file" name="attachment[data]" id="asset_add_file" onchange="$.cms.AttachmentManager.upload(this)" />');
 
- clone.after($('<img>')
- .css({position:'static', margin:'5px 0 0 5px', 'verticalAlign':'middle'})
- .attr({'id':'file-asset-uploader', 'src':'<%= asset_path 'cms/file-uploading.gif' %>'}));
- clone.replaceWith(inp);
-
  form.submit();
 
- $('div.buttons').hide();
-
+ $('#upload-attachment').modal('hide');
+ },
+ enableDeleteButtons:function(){
+ // Handle delete attachment button
+ var delete_attachments_btns = $("a[data-purpose='delete-attachment']");
+ if(delete_attachments_btns.exists()){
+ delete_attachments_btns.off('click').on('click', function(){
+ var id = $(this).data('id');
+ $.cms.AttachmentManager.destroy(id);
+ });
+ }
  },
-
  // @param [Integer] id The id of the attachment to delete.
  destroy:function (id) {
  if (confirm("Are you sure want to delete this attachment?")) {
@@ -78,5 +80,9 @@ $(function () {
  $('#assets_table > table').append(asset).show();
  $('div.buttons').show();
  }
+ $('.empty-row').hide();
+ $.cms.AttachmentManager.enableDeleteButtons();
  });
+
+ $.cms.AttachmentManager.enableDeleteButtons();
 });

app/assets/javascripts/cms/page_editor.js

@@ -1,3 +1,4 @@
+//= require 'jquery'
 //= require 'jquery_ujs'
 //= require 'cms/core_library'
 //= require 'bootstrap/modal'

app/assets/stylesheets/cms/_assets.css.scss

@@ -52,4 +52,9 @@
 }
 }
 }
+}
+
+// Iframe for attachments
+#asset_add_uploader {
+ display: none;
 }

app/assets/stylesheets/cms/_main-area.css.scss

@@ -1,5 +1,5 @@
 /* MAIN FORM AREA */
-.main-content {
+.main-content, .modal-body {
 @include rem(margin-top,1rem);
 
 .add-link {

app/assets/stylesheets/cms/styles/_images.css.scss

@@ -11,6 +11,10 @@ img[data-type="image_block"] {
  max-width: 100%;
 }
 
+// For multiple attachments in the table
+img[data-purpose='attachment'] {
+ width:60px;
+}
 .img-rounded {
 @include border-radius(6px);
 }

app/views/cms/attachments/_attachment.html.erb

@@ -1,14 +1,16 @@
 <%
-  show_delete = true
-  show_delete = can_delete if defined?(can_delete)
+ show_delete = true
+ show_delete = can_delete if defined?(can_delete)
 %>
-<tr id="<%= dom_id(attachment)%>">
+<tr id="<%= dom_id(attachment) %>">
  <% if attachment.is_image? %>
- <td><%= link_to image_tag(attachment_path_for(attachment), :size => '60x60', :data=>{:purpose=>'attachment'}), attachment_path_for(attachment) %></td>
+  <td><%= link_to(image_tag(attachment_path_for(attachment), :size => '60x60', :data => {:purpose => 'attachment'}), attachment_path_for(attachment), target: "_blank") %></td>
  <% else %>
- <td><%= image_tag "cms/icons/file_types/#{attachment.icon}.png" %>
+  <td><%= image_tag "cms/icons/file_types/#{attachment.icon}.png" %>
  <% end %>
  <td><%= attachment.attachment_name.singularize.capitalize %></td>
  <td><%= number_to_human_size(attachment.size) %></td>
- <td><%= link_to_function "Delete", "$.cms.AttachmentManager.destroy(#{attachment.id})" if show_delete %></td>
+ <td><%= link_to("Delete", '#',
+ data: {purpose: 'delete-attachment', id: attachment.id},
+ class: 'btn btn-mini btn-danger') if show_delete %></td>
 </tr>

app/views/cms/attachments/_attachment_manager.html.erb

@@ -1,22 +1,39 @@
 <%= render :partial => 'cms/attachments/attachment_table', :locals => {:block => @block, :can_delete => true} %>
-<div class="fields">
- <p>Upload a new attachment:</p>
-</div>
+<%= link_to 'Upload a New Attachment', "#", class: 'btn btn-primary', data: {toggle: "modal", target: "#upload-attachment"} %>
 
-<div class="fields select_fields">
- <%= label_tag "Attachment Type" %>
- <%= select_tag :asset_types, options_for_select(asset_types) %>
-</div>
-<%= f.hidden_field :attachment_id_list, :id => "attachment_manager_ids_list" %>
-<%= f.hidden_field :attachments_changed, :id => "attachments_manager_changed" %>
+<% content_for :before_main_content do
+ # Must be outside main form, since we can't have a form within a form.
+%>
+ <div class="modal fade" id="upload-attachment">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+ <h4 class="modal-title">Upload a New Attachment</h4>
+ </div>
+ <div class="modal-body">
+ <%= simple_form_for Cms::Attachment.new do |af| %>
+ <%= af.input :attachable_type, collection: asset_types, label: 'Type', include_blank: false %>
+ <%= hidden_field_tag :attachment_id_list, "", :id => "attachment_manager_ids_list" %>
+ <%= hidden_field_tag :attachments_changed, "", :id => "attachments_manager_changed" %>
 
-<div id="asset_add" class="fields file_fields" style="display:<%= asset_types.size > 1 ? "none" : "block" %>">
- <label for="asset_add">Choose file</label>
+ <%= af.input :data, label: 'File', input_html: {id: 'asset_add_file', onchange: "$.cms.AttachmentManager.upload(this)"} %>
+ <input type="hidden" id="asset_attachable_id" name="asset[attachable_id]" value="<%= object.id %>"/>
+ <input type="hidden" id="asset_attachable_class" value="<%= object.class.name %>"/>
+
+ <div id="asset_add" class="fields file_fields" style="display:<%= asset_types.size > 1 ? "none" : "block" %>">
+
+ <div id="asset_add_div">
+ <iframe src="javascript:false" name="asset_add_uploader" id="asset_add_uploader"></iframe>
+ </div>
+ </div>
+ <% end %>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-small" data-dismiss="modal">Never Mind</button>
+ </div>
+ </div>
+ </div>
+ </div>
+<% end %>
 
- <div id="asset_add_div">
- <input type="file" name="attachment[data]" id="asset_add_file" onchange="$.cms.AttachmentManager.upload(this)"/>
- <input type="hidden" id="asset_attachable_id" name="asset[attachable_id]" value="<%= object.id %>"/>
- <input type="hidden" id="asset_attachable_class" value="<%= object.class.name %>"/>
- <iframe src="javascript:false" name="asset_add_uploader" id="asset_add_uploader"></iframe>
- </div>
-</div>

app/views/cms/attachments/_attachment_table.html.erb

@@ -1,17 +1,22 @@
 <div class="fields" id="assets_table">
- <label><span id="asset-name"><%= block.class.name %></span> Attachments</label>
- <br /><br />
- <table style="display:<%= block.multiple_attachments.empty? ? "none" : "block"%>">
+ <table class="table table-bordered assets">
+ <thead>
  <tr>
  <th>Preview</th>
  <th>Type</th>
  <th>Size</th>
- <th></th>
+ <th>Actions</th>
  <tr>
+ </thead>
+ <tbody>
+ <% if @block.multiple_attachments.empty? %>
+ <tr class='empty-row'><td colspan="4" >There are no attachments yet.</td></tr>
+ <% end %>
  <% for attachment in block.multiple_attachments %>
- <% unless attachment.new_record? %>
- <%= render :partial => "cms/attachments/attachment", :locals => { :attachment => attachment, :can_delete => can_delete } %>
- <% end %>
+  <% unless attachment.new_record? %>
+  <%= render :partial => "cms/attachments/attachment", :locals => {:attachment => attachment, :can_delete => can_delete} %>
+  <% end %>
  <% end %>
+ </tbody>
  </table>
 </div>

app/views/layouts/cms/application.html.erb

@@ -11,6 +11,9 @@
 </nav>
 <%= render 'cms/sites/flash' %>
 <section class="container center-column main-container bottom-form-btn clearfix">
+ <% if content_for?(:before_main_content) %>
+ <%= yield :before_main_content %>
+ <% end %>
  <%= yield %>
  <div class="padded row-fluid">
  <div class="span12"><%= render :partial => 'layouts/cms/footer' %></div>

features/ckeditor.feature

@@ -7,4 +7,3 @@ Feature: CKEditor
  When I request /cms/content_library
  And I click on "create_new_html_block"
  Then I should see a widget to select which editor to use
- And  I should see the CKEditor