$(".tab-pane-Upload").removeClass("disabled");
$(".tab-pane-Upload").attr("data-original-title", "");
$("#Upload-tab").attr("data-toggle", "tab");
+
+ $('.edit-collection-tags').removeClass('disabled');
} else {
// User clicked "no" and so do not unlock
}
$(".tab-pane-Upload").addClass("disabled");
$(".tab-pane-Upload").attr("data-original-title", "Unlock collection to upload files");
$("#Upload-tab").attr("data-toggle", "disabled");
+
+ $('.edit-collection-tags').removeClass('hide');
+ $('.edit-collection-tags').addClass('disabled');
+ $('.collection-tag-add').addClass('hide');
+ $('.collection-tag-remove').addClass('hide');
+ $('.collection-tag-save').addClass('hide');
+ $('.collection-tag-cancel').addClass('hide');
+ $('.collection-tag-field').prop("contenteditable", false);
}
+ }).
+ on('click', '.collection-tag-save, .collection-tag-cancel', function(event) {
+ $('.edit-collection-tags').removeClass('hide');
+ $('.collection-tag-add').addClass('hide');
+ $('.collection-tag-remove').addClass('hide');
+ $('.collection-tag-save').addClass('hide');
+ $('.collection-tag-cancel').addClass('hide');
+ $('.collection-tag-field').prop("contenteditable", false);
+ }).
+ on('click', '.edit-collection-tags', function(event) {
+ $('.edit-collection-tags').addClass('hide');
+ $('.collection-tag-add').removeClass('hide');
+ $('.collection-tag-remove').removeClass('hide');
+ $('.collection-tag-save').removeClass('hide');
+ $('.collection-tag-cancel').removeClass('hide');
+ $('.collection-tag-field').prop("contenteditable", true);
});
+
+jQuery(function($){
+ $(document).on('click', '.collection-tag-remove', function(e) {
+ $(this).parents('tr').detach();
+ });
+
+ $(document).on('click', '.collection-tag-add', function(e) {
+ var $collection_tags = $(this).closest('.collection-tags-container');
+ var $clone = $collection_tags.find('tr.hide').clone(true).removeClass('hide');
+ $collection_tags.find('table').append($clone);
+ });
+});
--- /dev/null
+<%
+ object = @object unless object
+ props = object.properties
+%>
+
+ <div class="collection-tags-container" style="padding-left:2em;padding-right:2em;">
+ <div>
+ <% if object.editable? %>
+ <button type="button" class="btn btn-primary edit-collection-tags disabled" title="Unlock collection to edit tags">Edit</button>
+ <% end %>
+ </div>
+
+ <table class="table table-condensed table-fixedlayout collection-tags-table">
+ <colgroup>
+ <col width="5%" />
+ <col width="25%" />
+ <col width="70%" />
+ </colgroup>
+
+ <thead>
+ <tr>
+ <th></th>
+ <th>Key</th>
+ <th>Value</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <% props.each do |k, v| %>
+ <tr class="collection-tag-<%=k%>">
+ <td>
+ <i class="glyphicon glyphicon-remove collection-tag-remove hide" style="cursor: pointer;"></i>
+ </td>
+ <td class="collection-tag-field">
+ <%= k %>
+ </td>
+ <td class="collection-tag-field">
+ <%= v %>
+ </td>
+ </tr>
+ <% end %>
+
+ <!-- A hidden row to add new tag -->
+ <tr class="collection-tag-hidden hide">
+ <td>
+ <i class="glyphicon glyphicon-remove collection-tag-remove hide" style="cursor: pointer"></i>
+ </td>
+ <td class="collection-tag-field"></td>
+ <td class="collection-tag-field"></td>
+ </tr>
+ </tbody>
+ </table>
+ <i class="glyphicon glyphicon-plus collection-tag-add hide" style="cursor: pointer;">Add new tag</i>
+ <div>
+ <% if object.editable? %>
+ <button type="button" class="btn btn-primary collection-tag-save hide">Save</button>
+ <button type="button" class="btn btn-primary collection-tag-cancel hide">Cancel</button>
+ <% end %>
+ </div>
+ </div>