hydra-editor 2.0.0 → 3.0.0.beta1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a4b9156e8136c594af4e76af76ea7fe527a1b972
-  data.tar.gz: 0d9d6a7c2c63353b27c5a059531c1ed37dd2b2c7
+  metadata.gz: ae1264f3bb248877d4bb16d74eea0136075dffbe
+  data.tar.gz: 3aeb4937cbc2cfea2b3124187f1720393ac90753
 SHA512:
-  metadata.gz: 341432004b0c7624c3f60bae5830511f54372af022e79642482fbc618fc2bc59cd4536c101402dadbf91ef8e22eb10c0c0090a4e5adbe35679aae881cc391465
-  data.tar.gz: c9bfeba5d7ff247557fee88700fb38a7f9b10df123eb065711abef9d0a80f9dbe53fe9a8d7baba7eec34d6cae01a37910926b4396d8e14dca9b400f4fc54bf97
+  metadata.gz: cae0f7bd208b58511724e4192a8241808dee3b5f8be1a5be074bb612d46f590624cb9e4ab5a2c76456a97d440495466ce5e9807333b53f627d67e06ce16d56d3
+  data.tar.gz: a424534ddced8cd2a29217f66e9d93294886dad16d5f135f9eb933b94acaf0fa48540b24007ea9f385a2a0b937f42edc81146737a0546b701fc45bbed18cd90b

data/app/assets/javascripts/hydra-editor/field_manager.es6

@@ -0,0 +1,149 @@
+export class FieldManager {
+    constructor(element, options) {
+        this.element = $(element);
+        this.options = options;
+
+        this.options.label = this.getFieldLabel(this.element, options)
+
+        this.adder    = this.createAddHtml(this.options);
+        this.remover  = this.createRemoveHtml(this.options);
+
+        this.controls = $(options.controlsHtml);
+        this.fieldWrapperClass = options.fieldWrapperClass;
+        this.warningClass = options.warningClass;
+        this.listClass = options.listClass;
+
+        this.init();
+    }
+
+    init() {
+        this._addInitialClasses();
+        this._addAriaLiveRegions()
+        this._appendControls();
+        this._attachEvents();
+        this._addCallbacks();
+    }
+
+    _addInitialClasses() {
+        this.element.addClass("managed");
+        $(this.fieldWrapperClass, this.element).addClass("input-group input-append");
+    }
+
+    _addAriaLiveRegions() {
+        $(this.element).find('.listing').attr('aria-live', 'polite')
+    }
+
+    _appendControls() {
+        $(this.fieldWrapperClass, this.element).append(this.controls);
+        $(this.fieldWrapperClass + ' .field-controls', this.element).append(this.remover);
+
+        if ($(this.element).find('.add').length == 0) {
+            $(this.element).find(this.listClass).after(this.adder);
+        }
+    }
+
+    _attachEvents() {
+        this.element.on('click', '.remove', (e) => this.removeFromList(e));
+        this.element.on('click', '.add', (e) =>this.addToList(e));
+    }
+
+    _addCallbacks() {
+        this.element.bind('managed_field:add', this.options.add);
+        this.element.bind('managed_field:remove', this.options.remove);
+    }
+
+    _manageFocus() {
+        $(this.element).find(this.listClass).children('li').last().find('.form-control').focus();
+    }
+
+    addToList( event ) {
+        event.preventDefault();
+        let $listing = $(event.target).closest('.multi_value').find(this.listClass)
+        let $activeField = $listing.children('li').last()
+
+        if (this.inputIsEmpty($activeField)) {
+            this.displayEmptyWarning();
+        } else {
+            this.clearEmptyWarning();
+            $listing.append(this._newField($activeField));
+        }
+
+        this._manageFocus()
+    }
+
+    inputIsEmpty($activeField) {
+        return $activeField.children('input.multi-text-field').val() === '';
+    }
+
+    _newField ($activeField) {
+        var $newField = this.createNewField($activeField);
+        return $newField;
+    }
+
+    createNewField($activeField) {
+        let $newField = $activeField.clone();
+        let $newChildren = $newField.children('input');
+        $newChildren.val('').removeProp('required');
+        $newChildren.first().focus();
+        this.element.trigger("managed_field:add", $newChildren.first());
+        return $newField;
+    }
+
+    _changeControlsToRemove($activeField) {
+        var $removeControl = this.remover.clone();
+        $activeFieldControls = $activeField.children('.field-controls');
+        $('.add', $activeFieldControls).remove();
+        $activeFieldControls.prepend($removeControl);
+    }
+
+    clearEmptyWarning() {
+        let $listing = $(this.listClass, this.element)
+        $listing.children(this.warningClass).remove();
+    }
+
+    displayEmptyWarning() {
+        let $listing = $(this.listClass, this.element)
+        var $warningMessage  = $("<div class=\'message has-warning\'>cannot add another with empty field</div>");
+        $listing.children(this.warningClass).remove();
+        $listing.append($warningMessage);
+    }
+
+    removeFromList( event ) {
+        event.preventDefault();
+        var $listing = $(event.target).closest('.multi_value').find(this.listClass)
+        var $field = $(event.target).parents(this.fieldWrapperClass).remove();
+        this.element.trigger("managed_field:remove", $field);
+
+        this._manageFocus();
+    }
+
+    destroy() {
+        $(this.fieldWrapperClass, this.element).removeClass("input-append");
+        this.element.removeClass("managed");
+    }
+
+    getFieldLabel($element, options) {
+        var label = '';
+        var $label = $element.find("label");
+
+        if ($label.size && options.labelControls) {
+          var label = $label.data('label') || $.trim($label.contents().filter(function() { return this.nodeType === 3; }).text());
+          label = ' ' + label;
+        }
+
+        return label;
+    }
+
+    createAddHtml(options) {
+        var $addHtml  = $(options.addHtml);
+        $addHtml.find('.controls-add-text').html(options.addText + options.label);
+        return $addHtml;
+    }
+
+    createRemoveHtml(options) {
+        var $removeHtml = $(options.removeHtml);
+        $removeHtml.find('.controls-remove-text').html(options.removeText);
+        $removeHtml.find('.controls-field-name-text').html(options.label);
+        return $removeHtml;
+    }
+}

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

@@ -1,3 +1,5 @@
+//= require almond
+//= require hydra-editor/field_manager
 //= require hydra-editor/manage_repeating_fields
 //= require hydra-editor/editMetadata
 

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

@@ -2,150 +2,35 @@
 // There are a lot of assumptions about the structure of the classes and elements.
 // These assumptions are reflected in the MultiValueInput class.
 
-var HydraEditor = (function($) {
-      var FieldManager = function (element, options) {
-          this.element = $(element);
-          this.options = options;
-
-          this.controls = $(options.controlsHtml);
-          this.remover  = $(options.removeButtonHtml);
-          this.adder    = $(options.addButtonHtml);
-
-          this.fieldWrapperClass = options.fieldWrapperClass;
-          this.warningClass = options.warningClass;
-          this.listClass = options.listClass;
-
-          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.removeFromList(e);
-              });
-              this.element.on('click', '.add', function (e) {
-                _this.addToList(e);
-              });
-          },
-
-          _addCallbacks: function() {
-              this.element.bind('managed_field:add', this.options.add);
-              this.element.bind('managed_field:remove', this.options.remove);
-          },
-
-          addToList: function( event ) {
-            event.preventDefault();
-            var $activeField = $(event.target).parents(this.fieldWrapperClass)
-
-            if (this.inputIsEmpty($activeField)) {
-                this.displayEmptyWarning();
-            } else {
-                var $listing = $(this.listClass, this.element);
-                this.clearEmptyWarning();
-                $listing.append(this._newField($activeField));
-            }
-          },
-
-          inputIsEmpty: function($activeField) {
-              return $activeField.children('input.multi-text-field').val() === '';
-          },
-
-          _newField: function ($activeField) {
-              var $newField = this.createNewField($activeField);
-              // _changeControlsToRemove must come after createNewField
-              // or the new field will not have an add button
-              this._changeControlsToRemove($activeField);
-              return $newField;
-          },
-
-          createNewField: function($activeField) {
-              $newField = $activeField.clone();
-              $newChildren = $newField.children('input');
-              $newChildren.val('').removeProp('required');
-              $newChildren.first().focus();
-              this.element.trigger("managed_field:add", $newChildren.first());
-              return $newField
-          },
-
-          _changeControlsToRemove: function($activeField) {
-              var $removeControl = this.remover.clone();
-              $activeFieldControls = $activeField.children('.field-controls');
-              $('.add', $activeFieldControls).remove();
-              $activeFieldControls.prepend($removeControl);
-          },
-
-          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);
-          },
-
-          removeFromList: 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" );
-          }
-      }
+(function($){
+    var DEFAULTS = {
+        /* callback to run after add is called */
+        add:    null,
+        /* callback to run after remove is called */
+        remove: null,
 
-      FieldManager.DEFAULTS = {
-          /* callback to run after add is called */
-          add:    null,
-          /* callback to run after remove is called */
-          remove: null,
+        controlsHtml:      '<span class=\"input-group-btn field-controls\">',
+        fieldWrapperClass: '.field-wrapper',
+        warningClass:      '.has-warning',
+        listClass:         '.listing',
 
+        addHtml:           '<button type=\"button\" class=\"btn btn-link add\"><span class=\"glyphicon glyphicon-plus\"></span><span class="controls-add-text"></span></button>',
+        addText:           'Add another',
 
-          controlsHtml:      "<span class=\"input-group-btn field-controls\">",
-          addButtonHtml:     "<button type=\"button\" class=\"btn btn-success add\"><i class=\"icon-white glyphicon-plus\"></i><span>More</span></button>",
-          removeButtonHtml:  "<button type=\"button\" class=\"btn btn-danger remove\"><i class=\"icon-white glyphicon-minus\"></i><span>Remove</span></button>",
-          warningClass:      '.has-warning',
-          listClass:         '.listing',
-          fieldWrapperClass: '.field-wrapper'
-      }
+        removeHtml:        '<button type=\"button\" class=\"btn btn-link remove\"><span class=\"glyphicon glyphicon-remove\"></span><span class="controls-remove-text"></span> <span class=\"sr-only\"> previous <span class="controls-field-name-text">field</span></span></button>',
+        removeText:         'Remove',
 
-      return { FieldManager: FieldManager };
-})(jQuery);
+        labelControls:      true,
+    }
 
-(function($){
     $.fn.manage_fields = function(option) {
+        var hydra_editor = require('hydra-editor/field_manager')
         return this.each(function() {
             var $this = $(this);
             var data  = $this.data('manage_fields');
-            var options = $.extend({}, HydraEditor.FieldManager.DEFAULTS, $this.data(), typeof option == 'object' && option);
+            var options = $.extend({}, DEFAULTS, $this.data(), typeof option == 'object' && option);
 
-            if (!data) $this.data('manage_fields', (data = new HydraEditor.FieldManager(this, options)));
+            if (!data) $this.data('manage_fields', (data = new hydra_editor.FieldManager(this, options)));
         })
     }
 })(jQuery);

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

@@ -1,6 +1,14 @@
 .multi_value {
-  .btn.add, .btn.remove {
-    width: 6em;
+  .btn.remove {
+    color: $brand-danger;
+  }
+
+  .btn.remove, .btn.add {
+    text-decoration: underline;
+  }
+
+  .btn.add {
+    padding-left: 0;
   }
 
   .field-wrapper {
@@ -11,20 +19,19 @@
     margin-left: 0;
     max-width: 40em;
     padding-left: 0px;
-    .input-group {
-      margin-bottom: 1px;
-    }
-  }
-
-  .field-controls span {
-    margin-left:.2em;
+    margin-bottom: 0;
   }
 
   .field-controls {
     margin-left: 2em;
   }
 
-  .message{
+  .remove .glyphicon-remove,
+  .add .glyphicon-plus {
+    margin-right: 0.3rem
+  }
+
+  .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%,
@@ -39,7 +46,7 @@
     border-radius: $border-radius-base;
   }
 
-  .has-error{
+  .has-error {
     background-color: #de4343;
     border-color: #c43d3d;
   }
@@ -48,6 +55,22 @@
     background-color: #eaaf51;
     border-color: #d99a36;
   }
+
+  .listing li:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+
+  .listing li:only-of-type {
+    width: 100%;
+
+    input {
+      border-radius: 4px;
+    }
+
+    .remove {
+      display: none;
+    }
+  }
 }
 
 // The contributor listing needs some normalization

data/lib/hydra_editor/engine.rb

@@ -1,6 +1,8 @@
 module HydraEditor
   class Engine < ::Rails::Engine
     require 'simple_form'
+    require 'sprockets/es6'
+    require 'almond-rails'
     engine_name 'hydra_editor'
     config.eager_load_paths += %W(
        #{config.root}/app/helpers/concerns
@@ -8,6 +10,7 @@ module HydraEditor
     )
     initializer 'hydra-editor.initialize' do
       require 'cancan'
+      Sprockets::ES6.configuration = { 'modules' => 'amd', 'moduleIds' => true }
     end
   end
 end

data/lib/hydra_editor/version.rb

@@ -1,3 +1,3 @@
 module HydraEditor
-  VERSION = '2.0.0'
+  VERSION = '3.0.0.beta1'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: hydra-editor
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 3.0.0.beta1
 platform: ruby
 authors:
 - Justin Coyne
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-04-28 00:00:00.000000000 Z
+date: 2016-06-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -67,6 +67,34 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 3.1.0
+- !ruby/object:Gem::Dependency
+  name: sprockets-es6
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: almond-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.0.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.0.2
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
@@ -218,6 +246,7 @@ files:
 - README.md
 - Rakefile
 - app/assets/javascripts/hydra-editor/editMetadata.js
+- app/assets/javascripts/hydra-editor/field_manager.es6
 - app/assets/javascripts/hydra-editor/hydra-editor.js
 - app/assets/javascripts/hydra-editor/manage_repeating_fields.js
 - app/assets/stylesheets/hydra-editor/hydra-editor.scss
@@ -259,9 +288,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.5.1