hydra-editor 1.0.0.beta1 → 1.0.0.beta2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9a019714d3a9953d60b3ec89910581f30917d704
-  data.tar.gz: 2ea18791705d16c26af05d51aafb692c5d1c99de
+  metadata.gz: bbbf4cde2792c9d9300d1fa47fade355fba8524f
+  data.tar.gz: 3a789723a0779f07cc15ea3679a47d14c93d6d91
 SHA512:
-  metadata.gz: 0b51da1e6c2d35e090980d3540175ce8f39ff083a3d868beb63f45a0f88dcbbc6441ed5bdbbfc53b2f6c78a17c3c4196c6f8250fee8fae7cce32f216e224d019
-  data.tar.gz: 775e159e509e65587cb2bd1d42f25e3a5f5d956be12aeb5521a53ed0ec18112cdc27b725daccb5a6c8fde3b635c9979ef65bf1466425b4cc19d7c23b10262a94
+  metadata.gz: 04413d824a3e627515d9cdb394c7df5078511e0f2c9696adfc15bd5d206448f11c63b87c4eaa30fcc24a30ac8ff36a3789095b2edf134168732d319a7d835a83
+  data.tar.gz: a13b247060e85a4e22f8fc2d2cfaa2323bed61f0d453b7178921efc4e9b6431f17149dcb60a2d04c7d4fc11a0c776cbffbe546d17ed1e4ff1697b45f3725eb2f

data/README.md

@@ -39,9 +39,17 @@ en:
 
 ```
 
-Expects the following interface on your hydra models:
+Create a form object for each of your models.
 
-```terms_for_editing``` returns an array of model attributes to edit
+```ruby
+# app/forms/recorded_audio_form.rb
+class RecordedAudioForm
+  include HydraEditor::Form
+  self.model_class = RecordedAudio
+  self.terms = [] # Terms to be edited
+  self.required_fields = [] # Required fields
+end
+```
 
 Add the javascript by adding this line to your app/assets/javascript/application.js:
 
@@ -55,6 +63,8 @@ Add the stylesheets by adding this line to your app/assets/stylesheets/applicati
  *= require hydra-editor/hydra-editor
 ```
 
+(Note: The Javascript includes require Blacklight and must be put after that.)
+
 ## Other customizations
 
 By default hydra-editor provides a RecordsController with :new, :create, :edit, and :update actions implemented in the included RecordsControllerBehavior module, and a RecordsHelper module with methods implemented in RecordsHelperBehavior.  If you are mounting the engine and using its routes, you can override the controller behaviors by creating your own RecordsController:

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

@@ -1,4 +1,3 @@
-$(function() {
-  $('form.editor').multiForm();
+Blacklight.onLoad(function() {
+  $('.multi_value.form-group').manage_fields();
 });
-

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

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

data/app/assets/javascripts/hydra-editor/keyboard_support.rb

@@ -0,0 +1,14 @@
+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()
+    }
+  });
+});
+

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

@@ -0,0 +1,123 @@
+// 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($){
+
+    var FieldManager = function (element, options) {
+        this.element = $(element);
+        this.options = options;
+
+        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>");
+
+        this.fieldWrapperClass = '.field-wrapper';
+        this.warningClass = '.has-warning';
+        this.listClass = '.listing';
+
+        this.init();
+    }
+
+    FieldManager.prototype = {
+        init: function () {
+            this._addInitialClasses();
+            this._appendControls();
+            this._attachEvents();
+            this._addCallbacks();
+        },
+
+        _addInitialClasses: function () {
+            this.element.addClass("managed");
+            $(this.fieldWrapperClass, this.element).addClass("input-group input-append");
+        },
+
+        _appendControls: function() {
+            $(this.fieldWrapperClass, this.element).append(this.controls);
+            $(this.fieldWrapperClass+':not(:last-child) .field-controls', this.element).append(this.remover);
+            $('.field-controls:last', this.element).append(this.adder);
+        },
+
+        _attachEvents: function() {
+            var _this = this;
+            this.element.on('click', '.remove', function (e) {
+              _this.remove_from_list(e);
+            });
+            this.element.on('click', '.add', function (e) {
+              _this.add_to_list(e);
+            });
+        },
+
+        _addCallbacks: function() {
+            this.element.bind('managed_field:add', this.options.add);
+            this.element.bind('managed_field:remove', this.options.remove);
+        },
+
+        add_to_list: function( event ) {
+          event.preventDefault();
+          var $activeField = $(event.target).parents(this.fieldWrapperClass)
+
+          if ($activeField.children('input').val() === '') {
+              this.displayEmptyWarning();
+          } else {
+            var $listing = $(this.listClass, this.element);
+            this.clearEmptyWarning();
+            $listing.append(this._newField($activeField));
+          }
+        },
+
+        _newField: function($activeField) {
+            var $removeControl = this.remover.clone(),
+                $activeFieldControls = $activeField.children('.field-controls'),
+                $newField = $activeField.clone();
+            $('.add', $activeFieldControls).remove();
+            $activeFieldControls.prepend($removeControl);
+            $newChildren = $newField.children('input');
+            $newChildren.val('').removeProp('required');
+            $newChildren.first().focus();
+            this.element.trigger("managed_field:add", $newChildren.first());
+            return $newField;
+        },
+
+        clearEmptyWarning: function() {
+            $listing = $(this.listClass, this.element),
+            $listing.children(this.warningClass).remove();
+        },
+
+        displayEmptyWarning: function () {
+            $listing = $(this.listClass, this.element)
+            var $warningMessage  = $("<div class=\'message has-warning\'>cannot add new empty field</div>");
+            $listing.children(this.warningClass).remove();
+            $listing.append($warningMessage);
+        },
+
+        remove_from_list: function( event ) {
+          event.preventDefault();
+
+          var field = $(event.target).parents(this.fieldWrapperClass)
+          field.remove();
+
+          this.element.trigger("managed_field:remove", field);
+        },
+
+        destroy: function() {
+          $(this.fieldWrapperClass, this.element).removeClass("input-append");
+          this.element.removeClass( "managed" );
+        }
+    }
+
+    FieldManager.DEFAULTS = {
+        add: null,
+        remove: null
+    }
+
+    $.fn.manage_fields = function(option) {
+        return this.each(function() {
+            var $this = $(this);
+            var data  = $this.data('manage_fields');
+            var options = $.extend({}, FieldManager.DEFAULTS, $this.data(), typeof option == 'object' && option);
+
+            if (!data) $this.data('manage_fields', (data = new FieldManager(this, options)));
+        })
+    }
+})(jQuery);

data/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;
+}

data/app/forms/hydra_editor/form.rb

@@ -27,9 +27,7 @@ module HydraEditor
       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

data/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 @@ module RecordsHelperBehavior
     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 @@ module RecordsHelperBehavior
   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

data/app/inputs/multi_value_input.rb

@@ -0,0 +1,68 @@
+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
+
+    # One blank line at the 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

data/app/views/records/_form.html.erb

@@ -1,9 +1,9 @@
-<%= 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>
@@ -11,7 +11,7 @@
 
   <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>

data/app/views/records/choose_type.html.erb

@@ -1,6 +1,6 @@
 <h1><%= t('hydra_editor.choose_type.title') %></h1>
-<%= bootstrap_form_tag url: hydra_editor.new_record_path, method: :get do |f| %>
+<%= form_tag hydra_editor.new_record_path, method: :get do %>
   <label class="control-label" for="type">Select an object type</label>
   <%= select_tag :type, options_for_select(object_type_options) %>
-  <%= f.primary t('hydra_editor.choose_type.next') %>
+  <%= submit_tag t('hydra_editor.choose_type.next'), class: 'btn btn-primary' %>
 <% end %>

data/app/views/records/edit_fields/_default.html.erb

@@ -1,10 +1,5 @@
-<div class="<%= 'input-group' if f.object.class.multiple?(key) %>" <%  if index == 0 %> id="additional_<%= key.to_s %>_clone" <% end %>>
-        <% required = render_req && index == 0 && f.object.required?(key) %>
-        <%= text_field_tag "#{ActiveModel::Naming.singular(f.object)}[#{key.to_s}][]", v, id: "#{ActiveModel::Naming.singular(f.object)}_#{key.to_s}", class: "form-control", required: required  %>
-        <% if f.object.class.multiple?(key) %>
-          <%= render "records/edit_fields/suffix", {key: key, index: index} %>
-        <% end %>
-      </div>
-      <div id="additional_<%= key %>_elements"></div>
-
-
+<% if f.object.class.multiple? key %>
+  <%= f.input key, as: :multi_value, input_html: { class: 'form-control' }, required: f.object.required?(key) %>
+<% else %>
+  <%= f.input key, required: f.object.required?(key) %>
+<% end %>

data/config/initializers/simple_form.rb

@@ -0,0 +1,31 @@
+require 'simple_form'
+# Use this setup block to configure all options available in SimpleForm.
+SimpleForm.setup do |config|
+  config.wrappers :inline, tag: 'span', class: 'form-group inline', error_class: 'has-error' do |b|
+    b.use :html5
+    b.use :placeholder
+    b.use :label, class: 'control-label'
+    b.use :input, class: 'form-control'
+    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
+  end
+
+  config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+    b.use :html5
+    b.use :placeholder
+    b.use :label, class: 'control-label'
+    b.wrapper tag: 'div' do |ba|
+      ba.use :input, class: 'form-control'
+      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
+      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+    end
+  end
+
+  # Wrappers for forms and inputs using the Twitter Bootstrap toolkit.
+  # Check the Bootstrap docs (http://getbootstrap.com/css/)
+  # to learn about the different styles for forms and inputs,
+  # buttons and other elements.
+  config.default_wrapper = :vertical_form
+
+  config.error_notification_class = 'alert alert-danger'
+  config.button_class = 'btn btn-default'
+end

data/lib/hydra-editor.rb

@@ -1,5 +1,4 @@
 require "hydra_editor/engine"
-require "bootstrap_form"
 
 module HydraEditor
 

data/lib/hydra_editor/version.rb

@@ -1,3 +1,3 @@
 module HydraEditor
-  VERSION = "1.0.0.beta1"
+  VERSION = "1.0.0.beta2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: hydra-editor
 version: !ruby/object:Gem::Version
-  version: 1.0.0.beta1
+  version: 1.0.0.beta2
 platform: ruby
 authors:
 - Justin Coyne
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-12-22 00:00:00.000000000 Z
+date: 2015-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -26,47 +26,47 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '4.1'
 - !ruby/object:Gem::Dependency
-  name: bootstrap_form
+  name: active-fedora
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 2.1.1
+        version: 9.0.0.beta8
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 2.1.1
+        version: 9.0.0.beta8
 - !ruby/object:Gem::Dependency
-  name: active-fedora
+  name: cancancan
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 9.0.0.beta8
+        version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 9.0.0.beta8
+        version: '0'
 - !ruby/object:Gem::Dependency
-  name: cancancan
+  name: simple_form
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 3.1.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 3.1.0
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
@@ -191,23 +191,25 @@ files:
 - Rakefile
 - app/assets/javascripts/hydra-editor/editMetadata.js
 - app/assets/javascripts/hydra-editor/hydra-editor.js
-- app/assets/javascripts/hydra-editor/multiForm.js
+- app/assets/javascripts/hydra-editor/keyboard_support.rb
+- app/assets/javascripts/hydra-editor/manage_repeating_fields.js
 - app/assets/stylesheets/hydra-editor/application.css
 - app/assets/stylesheets/hydra-editor/hydra-editor.css
+- app/assets/stylesheets/hydra-editor/multi_value_fields.scss
 - app/controllers/concerns/records_controller_behavior.rb
 - app/controllers/records_controller.rb
 - app/forms/hydra_editor/form.rb
 - app/helpers/concerns/records_helper_behavior.rb
 - app/helpers/records_helper.rb
+- app/inputs/multi_value_input.rb
 - app/presenters/hydra/presenter.rb
-- app/views/records/_edit_field.html.erb
 - app/views/records/_form.html.erb
 - app/views/records/_form_header.html.erb
 - app/views/records/choose_type.html.erb
 - app/views/records/edit.html.erb
 - app/views/records/edit_fields/_default.html.erb
-- app/views/records/edit_fields/_suffix.html.erb
 - app/views/records/new.html.erb
+- config/initializers/simple_form.rb
 - config/jetty.yml
 - config/locales/hydra_editor.yml
 - config/routes.rb

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

@@ -1,58 +0,0 @@
-(function( $ ){
-
-  $.fn.multiForm = function( options ) {  
-
-    // Create some defaults, extending them with any options that were provided
-    var settings = $.extend( { }, options);
-
-    function addField() {
-      var cloneId = this.id.replace("submit", "clone");
-      var newId = this.id.replace("submit", "elements");
-      var cloneElem = $('#'+cloneId).clone();
-      // change the add button to a remove button
-      var plusbttn = cloneElem.find('#'+this.id);
-      plusbttn.html('-<span class="sr-only">remove this '+ this.name.replace("_", " ") +'</span>');
-      plusbttn.on('click',removeField);
-
-      // remove the help tag on subsequent added fields
-      cloneElem.find('.formHelp').remove();
-      cloneElem.find('i').remove();
-      cloneElem.find('.modal-div').remove();
-
-      //clear out the value for the element being appended
-      //so the new element has a blank value
-      cloneElem.find('input[type=text]').val("");
-      cloneElem.find('input[type=text]').attr("required", false);
-
-      if (settings.afterAdd) {
-        settings.afterAdd(this, cloneElem);
-      }
-
-
-      $('#'+newId).append(cloneElem);
-      cloneElem.find('input[type=text]').focus();
-      return false;
-    }
-
-    function removeField () {
-      // get parent and remove it
-      $(this).parent().parent().remove();
-      return false;
-    }
-
-    return this.each(function() {        
-
-      // Tooltip plugin code here
-      /*
-       * adds additional metadata elements
-       */
-      $('.adder', this).click(addField);
-
-      $('.remover', this).click(removeField);
-
-
-    });
-
-  };
-})( jQuery );  
-

data/app/views/records/_edit_field.html.erb

@@ -1,14 +0,0 @@
-<% render_req ||= true # render_req is true for single file edit, false for batch edit%>
-<%= f.form_group key do %>
-  <% vals =  f.object[key] %>
-  <% if render_req && f.object.required?(key) %>
-    <% tmp = '<span class="error">*</span>' + field_label(key) %>
-    <%= f.label key, tmp.html_safe, class: "control-label"  %>
-  <% else %>
-    <%= f.label key, field_label(key), class: "control-label"%>
-  <% end %>
-
-  <% vals.to_ary.each_with_index do |v, index| %>
-    <%= render_edit_field_partial(key, f: f,  v: v, index: index, render_req: render_req) %>
-  <% end %>
-<% end %>

data/app/views/records/edit_fields/_suffix.html.erb

@@ -1,7 +0,0 @@
-<span class="input-group-btn field-controls">
-  <% if index == 0 %>
-    <%= add_field(key) %>
-  <% else %>
-    <%= subtract_field(key) %>
-  <% end %>
-</span>