Use the worthwhile editor

.travis.yml

@@ -3,8 +3,11 @@ rvm:
   - 2.1
 
 env:
-  - "RAILS_VERSION=4.2.0"
-  - "RAILS_VERSION=4.1.8"
+  matrix:
+    - "RAILS_VERSION=4.2.0"
+    - "RAILS_VERSION=4.1.8"
+  global:
+    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true
 
 notifications:
   irc: "irc.freenode.org#projecthydra"

Gemfile

@@ -5,9 +5,7 @@ source "https://rubygems.org"
 # development dependencies will be added by default to the :development group.
 gemspec path: File.expand_path('..', __FILE__)
 
-# To use debugger
-# gem 'debugger'
-#
+gem 'slop', '~> 3.6.0' # This just helps us generate a valid Gemfile.lock when Rails 4.2 is installed (which requires byebug which has a dependency on slop)
 
 file = File.expand_path("Gemfile", ENV['ENGINE_CART_DESTINATION'] || ENV['RAILS_ROOT'] || File.expand_path("../spec/internal", __FILE__))
 if File.exists?(file)

app/assets/javascripts/hydra-editor/editMetadata.js

@@ -1,4 +1,15 @@
-$(function() {
-  $('form.editor').multiForm();
-});
+Blacklight.onLoad(function() {
+  $('body').on('keypress', '.multi-text-field', function(event) {
+    var $activeField = $(event.target).parents('.field-wrapper'),
+        $activeFieldControls = $activeField.children('.field-controls'),
+        $addControl = $activeFieldControls.children('.add'),
+        $removeControl = $activeFieldControls.children('.remove');
+    if (event.keyCode == 13) {
+      event.preventDefault();
+      $addControl.click()
+      $removeControl.click()
+    }
+  });
 
+  $('.multi_value.form-group').manage_fields();
+});

app/assets/javascripts/hydra-editor/hydra-editor.js

@@ -1,2 +1,3 @@
-//= require hydra-editor/multiForm
+//= require hydra-editor/manage_repeating_fields
 //= require hydra-editor/editMetadata
+

app/assets/javascripts/hydra-editor/manage_repeating_fields.js

@@ -0,0 +1,74 @@
+// This widget manages the adding and removing of repeating fields.
+// There are a lot of assumptions about the structure of the classes and elements.
+// These assumptions are reflected in the MultiValueInput class.
+
+(function($){
+  $.widget( "curate.manage_fields", {
+    options: {
+      change: null,
+      add: null,
+      remove: null
+    },
+
+    _create: function() {
+      this.element.addClass("managed");
+      $('.field-wrapper', this.element).addClass("input-group input-append");
+
+      this.controls = $("<span class=\"input-group-btn field-controls\">");
+      this.remover  = $("<button class=\"btn btn-danger remove\"><i class=\"icon-white glyphicon-minus\"></i><span>Remove</span></button>");
+      this.adder    = $("<button class=\"btn btn-success add\"><i class=\"icon-white glyphicon-plus\"></i><span>Add</span></button>");
+
+      $('.field-wrapper', this.element).append(this.controls);
+      $('.field-wrapper:not(:last-child) .field-controls', this.element).append(this.remover);
+      $('.field-controls:last', this.element).append(this.adder);
+
+      this._on( this.element, {
+        "click .remove": "remove_from_list",
+        "click .add": "add_to_list"
+      });
+    },
+
+    add_to_list: function( event ) {
+      event.preventDefault();
+
+      var $activeField = $(event.target).parents('.field-wrapper'),
+          $activeFieldControls = $activeField.children('.field-controls'),
+          $removeControl = this.remover.clone(),
+          $newField = $activeField.clone(),
+          $listing = $('.listing', this.element),
+          $warningMessage  = $("<div class=\'message has-warning\'>cannot add new empty field</div>");
+      if ($activeField.children('input').val() === '') {
+          $listing.children('.has-warning').remove();
+          $listing.append($warningMessage);
+      }
+      else{
+        $listing.children('.has-warning').remove();
+        $('.add', $activeFieldControls).remove();
+        $activeFieldControls.prepend($removeControl);
+        $newChildren = $newField.children('input');
+        $newChildren.
+          val('').
+          removeProp('required');
+        $listing.append($newField);
+        $newChildren.first().focus();
+        this._trigger("add");
+      }
+    },
+
+    remove_from_list: function( event ) {
+      event.preventDefault();
+
+      $(event.target)
+        .parents('.field-wrapper')
+        .remove();
+
+      this._trigger("remove");
+    },
+
+    _destroy: function() {
+      this.actions.remove();
+      $('.field-wrapper', this.element).removeClass("input-append");
+      this.element.removeClass( "managed" );
+    }
+  });
+})(jQuery);

app/assets/stylesheets/hydra-editor/multi_value_fields.scss

@@ -0,0 +1,52 @@
+.multi_value {
+  .field-wrapper {
+    list-style-type:none;
+  }
+
+  .listing {
+    margin-left: 0;
+    max-width: 40em;
+    padding-left: 0px;
+    .input-group {
+      margin-bottom: 1px;
+    }
+  }
+
+  .field-controls span {
+    margin-left:.2em;
+  }
+
+  .field-controls {
+    margin-left: 2em;
+  }
+
+  .message{
+    background-size: 40px 40px;
+    background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
+    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
+    transparent 75%, transparent);
+    box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
+    width: 100%;
+    border: 1px solid;
+    color: #fff;
+    padding: 10px;
+    text-shadow: 0 1px 0 rgba(0,0,0,.5);
+    animation: animate-bg 5s linear infinite;
+    border-radius: $border-radius-base;
+  }
+
+  .has-error{
+    background-color: #de4343;
+    border-color: #c43d3d;
+  }
+
+  .has-warning{
+    background-color: #eaaf51;
+    border-color: #d99a36;
+  }
+}
+
+// The contributor listing needs some normalization
+#contributors .listing {
+  max-width:20em;
+}

app/forms/hydra_editor/form.rb

@@ -27,9 +27,7 @@ module ClassMethods
       def model_attributes(form_params)
         clean_params = sanitize_params(form_params)
         terms.each do |key|
-          if clean_params[key] == ['']
-            clean_params[key] = []
-          end
+          clean_params[key].delete('') if clean_params[key]
         end
         clean_params
       end

app/helpers/concerns/records_helper_behavior.rb

@@ -1,13 +1,4 @@
 module RecordsHelperBehavior
-
-  def metadata_help(key)
-    I18n.t("hydra_editor.form.metadata_help.#{key}", default: key.to_s.humanize)
-  end
-
-  def field_label(key)
-    I18n.t("hydra_editor.form.field_label.#{key}", default: key.to_s.humanize)
-  end
-
   def model_label(key)
     I18n.t("hydra_editor.form.model_label.#{key}", default: key.to_s.humanize)
   end
@@ -25,14 +16,6 @@ def render_edit_field_partial(field_name, locals)
     render_edit_field_partial_with_action(collection, field_name, locals)
   end
 
-  def add_field (key)
-    more_or_less_button(key, 'adder', '+')
-  end
-
-  def subtract_field (key)
-    more_or_less_button(key, 'remover', '-')
-  end
-
   def record_form_action_url(record)
     router = respond_to?(:hydra_editor) ? hydra_editor : self
     record.persisted? ? router.record_path(record) : router.records_path
@@ -70,14 +53,4 @@ def find_edit_field_partial(record_type, field_name)
   def partial_exists?(partial)
     lookup_context.find_all(partial).any?
   end
-
-  def more_or_less_button(key, html_class, symbol)
-    # TODO, there could be more than one element with this id on the page, but the fuctionality doesn't work without it.
-    content_tag('button', class: "#{html_class} btn btn-default", id: "additional_#{key}_submit", name: "additional_#{key}") do
-      (symbol +
-      content_tag('span', class: 'sr-only') do
-        "add another #{key.to_s}"
-      end).html_safe
-    end
-  end
 end

app/inputs/multi_value_input.rb

@@ -0,0 +1,67 @@
+class MultiValueInput < SimpleForm::Inputs::CollectionInput
+  def input(wrapper_options)
+    @rendered_first_element = false
+    input_html_classes.unshift("string")
+    input_html_options[:name] ||= "#{object_name}[#{attribute_name}][]"
+    markup = <<-HTML
+
+
+        <ul class="listing">
+    HTML
+
+    collection.each do |value|
+      unless value.to_s.strip.blank?
+        markup << <<-HTML
+          <li class="field-wrapper">
+            #{build_text_field(value)}
+          </li>
+        HTML
+      end
+    end
+
+    markup << <<-HTML
+          <li class="field-wrapper">
+            #{build_text_field('')}
+          </li>
+        </ul>
+
+    HTML
+  end
+
+  private
+
+    def build_text_field(value)
+      options = input_html_options.dup
+
+      options[:value] = value
+      if @rendered_first_element
+        options[:id] = nil
+        options[:required] = nil
+      else
+        options[:id] ||= input_dom_id
+      end
+      options[:class] ||= []
+      options[:class] += ["#{input_dom_id} form-control multi-text-field"]
+      options[:'aria-labelledby'] = label_id
+      @rendered_first_element = true
+      if options.delete(:type) == 'textarea'.freeze
+        @builder.text_area(attribute_name, options)
+      else
+        @builder.text_field(attribute_name, options)
+      end
+    end
+
+    def label_id
+      input_dom_id + '_label'
+    end
+
+    def input_dom_id
+      input_html_options[:id] || "#{object_name}_#{attribute_name}"
+    end
+
+    def collection
+      @collection ||= Array.wrap(object[attribute_name])
+    end
+
+    def multiple?; true; end
+end

app/views/records/_form.html.erb

@@ -1,17 +1,17 @@
-<%= bootstrap_form_for form, url: record_form_action_url(form), html: {class: 'form-inline editor'} do |f| %>
+<%= simple_form_for form, url: record_form_action_url(form), html: {class: 'form-inline editor'} do |f| %>
   <div id="descriptions_display">
 	<%= render 'records/form_header' %>
     <div class="well">
       <% f.object.terms.each do |term| %>
-        <%= render "records/edit_field", f: f, render_req: true, key: term %>
+        <%= render_edit_field_partial(term, f: f) %>
       <% end %>
     </div> <!-- /well -->
   </div>
   <%= hidden_field_tag :type, params[:type] %>
 
   <div class="form-actions">
     <div class="primary-actions">
-      <%= f.primary 'Save' %>
+      <%= f.submit 'Save', class: 'btn btn-primary' %>
       <%= link_to t(:'helpers.action.cancel'), main_app.root_path, class: 'btn btn-link' %>
     </div>
   </div>