effective_bootstrap 0.9.9 → 0.9.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2db71ddfb367e9c0aba19eb1b05cd145a4cef6743bc63151ca7eb9c118c313c9
-  data.tar.gz: 823eea41c096624761741d233d39db5431824f2a37e43f2e0797c0bc91c8cf54
+  metadata.gz: 5092faff38f399976a16a668ef167ca4b9f2103db81cb03617a5165a05731c6b
+  data.tar.gz: 3168ab3c1c38bff6e1f6020a0aea2dadc5e6f2917ffef79827054415cb6b1198
 SHA512:
-  metadata.gz: 18716b0514719e0d48b7cfe84efb5169bca2be5fbbb79c585ac5d7e86d570e795cb1228a498cf6705c7b559bcd717f6f8868070cba757d720b7b3c93b295c5bd
-  data.tar.gz: d493815d79bfed154f0b982689ae3e4713c283f83f75ac5a21ef4be93184ccc3e2dd7bb42f221097d923ad66bebf87fe24b582151b679acd2bba25a84b7d5423
+  metadata.gz: ff0e00b34d8101166e8eb0d895634e2e5099366953232fa4063c20dd504bfe10641738fb5ed90c99599de0c9f3f3d6a3d029d1cc35548ef8eab0fdb7fcbb27c6
+  data.tar.gz: e24803d6584be1ff0a1aea39a6790528186c5189974a1a69af5ef95a295665b932e74af3734ec1735a2a82e5ee75ed9d5dbf98af4e6352f71971d250590a68fa

data/README.md

@@ -42,8 +42,8 @@ Add the following to your `application.js`:
 And to your `application.scss`:
 
 ```sass
-@import 'bootstrap';
-@import 'effective_bootstrap';
+@import 'bootstrap'
+@import 'effective_bootstrap'
 ```
 
 ## View Helpers
@@ -362,6 +362,48 @@ And then in any form, instead of a text area:
 = f.editor :body
 ```
 
+## Custom has_many
+
+This custom form input was inspired by [cocoon](https://github.com/nathanvda/cocoon) but works with more magic.
+
+This nested form builder allows has_many resources to be created, updated, destroyed and reordered.
+
+Just add `has_many` and `accepts_nested_attributes_for` like normal and then use it in the form:
+
+```ruby
+class Author < ApplicationRecord
+  has_many :books
+  accepts_nested_attributes_for :books, allow_destroy: true
+end
+```
+
+and
+
+```haml
+= effective_form_with(model: author) do |f|
+  = f.text_field :name
+
+  = f.has_many :books do |fb|
+    = fb.text_field :title
+    = fb.date_field :published_at
+```
+
+If `Book` has an integer `position` field, there will be reorder buttons to drag & drop reorder the items.
+
+If `allow_destroy: true` there will be remove buttons.
+
+You can customize the has many behaviour by passing the following:
+
+```haml
+= f.has_many :books, add: true, remove: true, reorder: true
+```
+
+or add an html class:
+
+```haml
+= f.has_many :books, class: 'tight'
+```
+
 ## Custom percent_field
 
 This custom form input uses no 3rd party jQuery plugins.

data/app/assets/javascripts/effective_bootstrap.js

@@ -15,6 +15,7 @@
 //= require ./effective_ck_editor/input
 
 //= require ./effective_file/input
+//= require ./effective_has_many/input
 //= require ./effective_integer/input
 //= require ./effective_number_text/input
 //= require ./effective_percent/input

data/app/assets/javascripts/effective_has_many/initialize.js.coffee

@@ -0,0 +1,74 @@
+assignPositions = (target) ->
+  $hasMany = $(target)
+  return unless $hasMany.length > 0
+
+  $fields = $hasMany.children('.has-many-fields:not(.marked-for-destruction)')
+  positions = $fields.find("input[name$='[position]']").map(-> this.value).get()
+
+  if positions.length > 0
+    index = Math.min.apply(Math, positions) || 0
+
+    $fields.each((i, obj) ->
+      $(obj).find("input[name$='[position]']").first().val(index)
+      index = index + 1
+    )
+
+  true
+
+(this.EffectiveBootstrap || {}).effective_has_many = ($element, options) ->
+  if options.sortable
+    $element.sortable(
+      containerSelector: '.form-has-many',
+      itemSelector: '.has-many-fields',
+      handle: '.has-many-move'
+      placeholder: "<div class='has-many-placeholder' />",
+      onDrop: ($item, container, _super) =>
+        assignPositions(container.target)
+        _super($item, container)
+    )
+
+$(document).on 'click', '[data-effective-form-has-many-add]', (event) ->
+  event.preventDefault()
+
+  $obj = $(event.currentTarget)
+  $hasMany = $obj.closest('.form-has-many')
+  return unless $hasMany.length > 0
+
+  uid = (new Date).valueOf()
+  template = $obj.data('effective-form-has-many-template').replace(/HASMANYINDEX/g, uid)
+
+  $fields = $(template).hide().fadeIn('slow')
+  EffectiveBootstrap.initialize($fields)
+  $obj.closest('.has-many-links').before($fields)
+
+  assignPositions($hasMany)
+  true
+
+$(document).on 'click', '[data-effective-form-has-many-remove]', (event) ->
+  event.preventDefault()
+
+  $obj = $(event.currentTarget)
+  $hasMany = $obj.closest('.form-has-many')
+  return unless $hasMany.length > 0
+
+  $input = $obj.siblings("input[name$='[_destroy]']").first()
+  $fields = $obj.closest('.has-many-fields').first()
+
+  if $input.length > 0
+    $input.val('true')
+    $fields.addClass('marked-for-destruction').fadeOut('slow')
+  else
+    $fields.fadeOut('slow', -> this.remove())
+
+  assignPositions($hasMany)
+  true
+
+$(document).on 'click', '[data-effective-form-has-many-reorder]', (event) ->
+  event.preventDefault()
+
+  $obj = $(event.currentTarget)
+  $hasMany = $obj.closest('.form-has-many')
+  return unless $hasMany.length > 0
+
+  $hasMany.toggleClass('reordering')
+  true

data/app/assets/javascripts/effective_has_many/input.js

@@ -0,0 +1,2 @@
+//= require ./jquery.sortable
+//= require ./initialize

data/app/assets/javascripts/effective_has_many/jquery.sortable.js

@@ -0,0 +1,696 @@
+/* ===================================================
+ *  jquery-sortable.js v0.9.13
+ *  http://johnny.github.com/jquery-sortable/
+ * ===================================================
+ *  Copyright (c) 2012 Jonas von Andrian
+ *  All rights reserved.
+ *
+ *  Redistribution and use in source and binary forms, with or without
+ *  modification, are permitted provided that the following conditions are met:
+ *  * Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ *  * Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *  * The name of the author may not be used to endorse or promote products
+ *    derived from this software without specific prior written permission.
+ *
+ *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ *  ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ *  WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ *  DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+ *  DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ *  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ *  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ *  ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ *  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ *  SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ * ========================================================== */
+
+
+!function ( $, window, pluginName, undefined){
+  var containerDefaults = {
+    // If true, items can be dragged from this container
+    drag: true,
+    // If true, items can be dropped onto this container
+    drop: true,
+    // Exclude items from being draggable, if the
+    // selector matches the item
+    exclude: "",
+    // If true, search for nested containers within an item.If you nest containers,
+    // either the original selector with which you call the plugin must only match the top containers,
+    // or you need to specify a group (see the bootstrap nav example)
+    nested: true,
+    // If true, the items are assumed to be arranged vertically
+    vertical: true
+  }, // end container defaults
+  groupDefaults = {
+    // This is executed after the placeholder has been moved.
+    // $closestItemOrContainer contains the closest item, the placeholder
+    // has been put at or the closest empty Container, the placeholder has
+    // been appended to.
+    afterMove: function ($placeholder, container, $closestItemOrContainer) {
+    },
+    // The exact css path between the container and its items, e.g. "> tbody"
+    containerPath: "",
+    // The css selector of the containers
+    containerSelector: "ol, ul",
+    // Distance the mouse has to travel to start dragging
+    distance: 0,
+    // Time in milliseconds after mousedown until dragging should start.
+    // This option can be used to prevent unwanted drags when clicking on an element.
+    delay: 0,
+    // The css selector of the drag handle
+    handle: "",
+    // The exact css path between the item and its subcontainers.
+    // It should only match the immediate items of a container.
+    // No item of a subcontainer should be matched. E.g. for ol>div>li the itemPath is "> div"
+    itemPath: "",
+    // The css selector of the items
+    itemSelector: "li",
+    // The class given to "body" while an item is being dragged
+    bodyClass: "dragging",
+    // The class giving to an item while being dragged
+    draggedClass: "dragged",
+    // Check if the dragged item may be inside the container.
+    // Use with care, since the search for a valid container entails a depth first search
+    // and may be quite expensive.
+    isValidTarget: function ($item, container) {
+      return true
+    },
+    // Executed before onDrop if placeholder is detached.
+    // This happens if pullPlaceholder is set to false and the drop occurs outside a container.
+    onCancel: function ($item, container, _super, event) {
+    },
+    // Executed at the beginning of a mouse move event.
+    // The Placeholder has not been moved yet.
+    onDrag: function ($item, position, _super, event) {
+      $item.css(position)
+    },
+    // Called after the drag has been started,
+    // that is the mouse button is being held down and
+    // the mouse is moving.
+    // The container is the closest initialized container.
+    // Therefore it might not be the container, that actually contains the item.
+    onDragStart: function ($item, container, _super, event) {
+      $item.css({
+        height: $item.outerHeight(),
+        width: $item.outerWidth()
+      })
+      $item.addClass(container.group.options.draggedClass)
+      $("body").addClass(container.group.options.bodyClass)
+    },
+    // Called when the mouse button is being released
+    onDrop: function ($item, container, _super, event) {
+      $item.removeClass(container.group.options.draggedClass).removeAttr("style")
+      $("body").removeClass(container.group.options.bodyClass)
+      // START MONKEY PATCH (for submitting form when heading positions are changed on touchscreen)
+      $item.trigger('movimento:drop:complete', $item)
+      // END MONKEY PATCH
+    },
+    // Called on mousedown. If falsy value is returned, the dragging will not start.
+    // Ignore if element clicked is input, select or textarea
+    onMousedown: function ($item, _super, event) {
+      if (!event.target.nodeName.match(/^(input|select|textarea)$/i)) {
+        event.preventDefault()
+        return true
+      }
+    },
+    // The class of the placeholder (must match placeholder option markup)
+    placeholderClass: "placeholder",
+    // Template for the placeholder. Can be any valid jQuery input
+    // e.g. a string, a DOM element.
+    // The placeholder must have the class "placeholder"
+    placeholder: '<li class="placeholder"></li>',
+    // If true, the position of the placeholder is calculated on every mousemove.
+    // If false, it is only calculated when the mouse is above a container.
+    pullPlaceholder: true,
+    // Specifies serialization of the container group.
+    // The pair $parent/$children is either container/items or item/subcontainers.
+    serialize: function ($parent, $children, parentIsContainer) {
+      var result = $.extend({}, $parent.data())
+
+      if(parentIsContainer)
+        return [$children]
+      else if ($children[0]){
+        result.children = $children
+      }
+
+      delete result.subContainers
+      delete result.sortable
+
+      return result
+    },
+    // Set tolerance while dragging. Positive values decrease sensitivity,
+    // negative values increase it.
+    tolerance: 0
+  }, // end group defaults
+  containerGroups = {},
+  groupCounter = 0,
+  emptyBox = {
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right:0
+  },
+  eventNames = {
+    start: "touchstart.sortable mousedown.sortable",
+    drop: "touchend.sortable touchcancel.sortable mouseup.sortable",
+    drag: "touchmove.sortable mousemove.sortable",
+    scroll: "scroll.sortable"
+  },
+  subContainerKey = "subContainers"
+
+  /*
+   * a is Array [left, right, top, bottom]
+   * b is array [left, top]
+   */
+  function d(a,b) {
+    var x = Math.max(0, a[0] - b[0], b[0] - a[1]),
+    y = Math.max(0, a[2] - b[1], b[1] - a[3])
+    return x+y;
+  }
+
+  function setDimensions(array, dimensions, tolerance, useOffset) {
+    var i = array.length,
+    offsetMethod = useOffset ? "offset" : "position"
+    tolerance = tolerance || 0
+
+    while(i--){
+      var el = array[i].el ? array[i].el : $(array[i]),
+      // use fitting method
+      pos = el[offsetMethod]()
+      pos.left += parseInt(el.css('margin-left'), 10)
+      pos.top += parseInt(el.css('margin-top'),10)
+      dimensions[i] = [
+        pos.left - tolerance,
+        pos.left + el.outerWidth() + tolerance,
+        pos.top - tolerance,
+        pos.top + el.outerHeight() + tolerance
+      ]
+    }
+  }
+
+  function getRelativePosition(pointer, element) {
+    var offset = element.offset()
+    return {
+      left: pointer.left - offset.left,
+      top: pointer.top - offset.top
+    }
+  }
+
+  function sortByDistanceDesc(dimensions, pointer, lastPointer) {
+    pointer = [pointer.left, pointer.top]
+    lastPointer = lastPointer && [lastPointer.left, lastPointer.top]
+
+    var dim,
+    i = dimensions.length,
+    distances = []
+
+    while(i--){
+      dim = dimensions[i]
+      distances[i] = [i,d(dim,pointer), lastPointer && d(dim, lastPointer)]
+    }
+    distances = distances.sort(function  (a,b) {
+      return b[1] - a[1] || b[2] - a[2] || b[0] - a[0]
+    })
+
+    // last entry is the closest
+    return distances
+  }
+
+  function ContainerGroup(options) {
+    this.options = $.extend({}, groupDefaults, options)
+    this.containers = []
+
+    if(!this.options.rootGroup){
+      this.scrollProxy = $.proxy(this.scroll, this)
+      this.dragProxy = $.proxy(this.drag, this)
+      this.dropProxy = $.proxy(this.drop, this)
+      this.placeholder = $(this.options.placeholder)
+
+      if(!options.isValidTarget)
+        this.options.isValidTarget = undefined
+    }
+  }
+
+  ContainerGroup.get = function  (options) {
+    if(!containerGroups[options.group]) {
+      if(options.group === undefined)
+        options.group = groupCounter ++
+
+      containerGroups[options.group] = new ContainerGroup(options)
+    }
+
+    return containerGroups[options.group]
+  }
+
+  ContainerGroup.prototype = {
+    dragInit: function  (e, itemContainer) {
+      this.$document = $(itemContainer.el[0].ownerDocument)
+
+      // get item to drag
+      var closestItem = $(e.target).closest(this.options.itemSelector);
+      // using the length of this item, prevents the plugin from being started if there is no handle being clicked on.
+      // this may also be helpful in instantiating multidrag.
+      if (closestItem.length) {
+        this.item = closestItem;
+        this.itemContainer = itemContainer;
+        if (this.item.is(this.options.exclude) || !this.options.onMousedown(this.item, groupDefaults.onMousedown, e)) {
+            return;
+        }
+        this.setPointer(e);
+        this.toggleListeners('on');
+        this.setupDelayTimer();
+        this.dragInitDone = true;
+      }
+    },
+    drag: function  (e) {
+      if(!this.dragging){
+        if(!this.distanceMet(e) || !this.delayMet)
+          return
+
+        this.options.onDragStart(this.item, this.itemContainer, groupDefaults.onDragStart, e)
+        this.item.before(this.placeholder)
+        this.dragging = true
+      }
+
+      this.setPointer(e)
+      // place item under the cursor
+      this.options.onDrag(this.item,
+                          getRelativePosition(this.pointer, this.item.offsetParent()),
+                          groupDefaults.onDrag,
+                          e)
+
+      var p = this.getPointer(e),
+      box = this.sameResultBox,
+      t = this.options.tolerance
+
+      if(!box || box.top - t > p.top || box.bottom + t < p.top || box.left - t > p.left || box.right + t < p.left)
+        if(!this.searchValidTarget()){
+          this.placeholder.detach()
+          this.lastAppendedItem = undefined
+        }
+    },
+    drop: function  (e) {
+      this.toggleListeners('off')
+
+      this.dragInitDone = false
+
+      if(this.dragging){
+        // processing Drop, check if placeholder is detached
+        if(this.placeholder.closest("html")[0]){
+          this.placeholder.before(this.item).detach()
+        } else {
+          this.options.onCancel(this.item, this.itemContainer, groupDefaults.onCancel, e)
+        }
+        this.options.onDrop(this.item, this.getContainer(this.item), groupDefaults.onDrop, e)
+
+        // cleanup
+        this.clearDimensions()
+        this.clearOffsetParent()
+        this.lastAppendedItem = this.sameResultBox = undefined
+        this.dragging = false
+      }
+    },
+    searchValidTarget: function  (pointer, lastPointer) {
+      if(!pointer){
+        pointer = this.relativePointer || this.pointer
+        lastPointer = this.lastRelativePointer || this.lastPointer
+      }
+
+      var distances = sortByDistanceDesc(this.getContainerDimensions(),
+                                         pointer,
+                                         lastPointer),
+      i = distances.length
+
+      while(i--){
+        var index = distances[i][0],
+        distance = distances[i][1]
+
+        if(!distance || this.options.pullPlaceholder){
+          var container = this.containers[index]
+          if(!container.disabled){
+            if(!this.$getOffsetParent()){
+              var offsetParent = container.getItemOffsetParent()
+              pointer = getRelativePosition(pointer, offsetParent)
+              lastPointer = getRelativePosition(lastPointer, offsetParent)
+            }
+            if(container.searchValidTarget(pointer, lastPointer))
+              return true
+          }
+        }
+      }
+      if(this.sameResultBox)
+        this.sameResultBox = undefined
+    },
+    movePlaceholder: function  (container, item, method, sameResultBox) {
+      var lastAppendedItem = this.lastAppendedItem
+      if(!sameResultBox && lastAppendedItem && lastAppendedItem[0] === item[0])
+        return;
+
+      item[method](this.placeholder)
+      this.lastAppendedItem = item
+      this.sameResultBox = sameResultBox
+      this.options.afterMove(this.placeholder, container, item)
+    },
+    getContainerDimensions: function  () {
+      if(!this.containerDimensions)
+        setDimensions(this.containers, this.containerDimensions = [], this.options.tolerance, !this.$getOffsetParent())
+      return this.containerDimensions
+    },
+    getContainer: function  (element) {
+      return element.closest(this.options.containerSelector).data(pluginName)
+    },
+    $getOffsetParent: function  () {
+      if(this.offsetParent === undefined){
+        var i = this.containers.length - 1,
+        offsetParent = this.containers[i].getItemOffsetParent()
+
+        if(!this.options.rootGroup){
+          while(i--){
+            if(offsetParent[0] != this.containers[i].getItemOffsetParent()[0]){
+              // If every container has the same offset parent,
+              // use position() which is relative to this parent,
+              // otherwise use offset()
+              // compare #setDimensions
+              offsetParent = false
+              break;
+            }
+          }
+        }
+
+        this.offsetParent = offsetParent
+      }
+      return this.offsetParent
+    },
+    setPointer: function (e) {
+      var pointer = this.getPointer(e)
+
+      if(this.$getOffsetParent()){
+        var relativePointer = getRelativePosition(pointer, this.$getOffsetParent())
+        this.lastRelativePointer = this.relativePointer
+        this.relativePointer = relativePointer
+      }
+
+      this.lastPointer = this.pointer
+      this.pointer = pointer
+    },
+    distanceMet: function (e) {
+      var currentPointer = this.getPointer(e)
+      return (Math.max(
+        Math.abs(this.pointer.left - currentPointer.left),
+        Math.abs(this.pointer.top - currentPointer.top)
+      ) >= this.options.distance)
+    },
+    getPointer: function(e) {
+      var o = e.originalEvent || e.originalEvent.touches && e.originalEvent.touches[0]
+      return {
+        left: e.pageX || o.pageX,
+        top: e.pageY || o.pageY
+      }
+    },
+    setupDelayTimer: function () {
+      var that = this
+      this.delayMet = !this.options.delay
+
+      // init delay timer if needed
+      if (!this.delayMet) {
+        clearTimeout(this._mouseDelayTimer);
+        this._mouseDelayTimer = setTimeout(function() {
+          that.delayMet = true
+        }, this.options.delay)
+      }
+    },
+    scroll: function  (e) {
+      this.clearDimensions()
+      this.clearOffsetParent() // TODO is this needed?
+    },
+    toggleListeners: function (method) {
+      var that = this,
+      events = ['drag','drop','scroll']
+
+      $.each(events,function  (i,event) {
+        that.$document[method](eventNames[event], that[event + 'Proxy'])
+      })
+    },
+    clearOffsetParent: function () {
+      this.offsetParent = undefined
+    },
+    // Recursively clear container and item dimensions
+    clearDimensions: function  () {
+      this.traverse(function(object){
+        object._clearDimensions()
+      })
+    },
+    traverse: function(callback) {
+      callback(this)
+      var i = this.containers.length
+      while(i--){
+        this.containers[i].traverse(callback)
+      }
+    },
+    _clearDimensions: function(){
+      this.containerDimensions = undefined
+    },
+    _destroy: function () {
+      containerGroups[this.options.group] = undefined
+    }
+  }
+
+  function Container(element, options) {
+    this.el = element
+    this.options = $.extend( {}, containerDefaults, options)
+
+    this.group = ContainerGroup.get(this.options)
+    this.rootGroup = this.options.rootGroup || this.group
+    this.handle = this.rootGroup.options.handle || this.rootGroup.options.itemSelector
+
+    var itemPath = this.rootGroup.options.itemPath
+    this.target = itemPath ? this.el.find(itemPath) : this.el
+
+    this.target.on(eventNames.start, this.handle, $.proxy(this.dragInit, this))
+
+    if(this.options.drop)
+      this.group.containers.push(this)
+  }
+
+  Container.prototype = {
+    dragInit: function  (e) {
+      var rootGroup = this.rootGroup
+
+      if( !this.disabled &&
+          !rootGroup.dragInitDone &&
+          this.options.drag &&
+          this.isValidDrag(e)) {
+        rootGroup.dragInit(e, this)
+      }
+    },
+    isValidDrag: function(e) {
+      return e.which == 1 ||
+        e.type == "touchstart" && e.originalEvent.touches.length == 1
+    },
+    searchValidTarget: function  (pointer, lastPointer) {
+      var distances = sortByDistanceDesc(this.getItemDimensions(),
+                                         pointer,
+                                         lastPointer),
+      i = distances.length,
+      rootGroup = this.rootGroup,
+      validTarget = !rootGroup.options.isValidTarget ||
+        rootGroup.options.isValidTarget(rootGroup.item, this)
+
+      if(!i && validTarget){
+        rootGroup.movePlaceholder(this, this.target, "append")
+        return true
+      } else
+        while(i--){
+          var index = distances[i][0],
+          distance = distances[i][1]
+          if(!distance && this.hasChildGroup(index)){
+            var found = this.getContainerGroup(index).searchValidTarget(pointer, lastPointer)
+            if(found)
+              return true
+          }
+          else if(validTarget){
+            this.movePlaceholder(index, pointer)
+            return true
+          }
+        }
+    },
+    movePlaceholder: function  (index, pointer) {
+      var item = $(this.items[index]),
+      dim = this.itemDimensions[index],
+      method = "after",
+      width = item.outerWidth(),
+      height = item.outerHeight(),
+      offset = item.offset(),
+      sameResultBox = {
+        left: offset.left,
+        right: offset.left + width,
+        top: offset.top,
+        bottom: offset.top + height
+      }
+      if(this.options.vertical){
+        var yCenter = (dim[2] + dim[3]) / 2,
+        inUpperHalf = pointer.top <= yCenter
+        if(inUpperHalf){
+          method = "before"
+          sameResultBox.bottom -= height / 2
+        } else
+          sameResultBox.top += height / 2
+      } else {
+        var xCenter = (dim[0] + dim[1]) / 2,
+        inLeftHalf = pointer.left <= xCenter
+        if(inLeftHalf){
+          method = "before"
+          sameResultBox.right -= width / 2
+        } else
+          sameResultBox.left += width / 2
+      }
+      if(this.hasChildGroup(index))
+        sameResultBox = emptyBox
+      this.rootGroup.movePlaceholder(this, item, method, sameResultBox)
+    },
+    getItemDimensions: function  () {
+      if(!this.itemDimensions){
+        this.items = this.$getChildren(this.el, "item").filter(
+          ":not(." + this.group.options.placeholderClass + ", ." + this.group.options.draggedClass + ")"
+        ).get()
+        setDimensions(this.items, this.itemDimensions = [], this.options.tolerance)
+      }
+      return this.itemDimensions
+    },
+    getItemOffsetParent: function  () {
+      var offsetParent,
+      el = this.el
+      // Since el might be empty we have to check el itself and
+      // can not do something like el.children().first().offsetParent()
+      if(el.css("position") === "relative" || el.css("position") === "absolute"  || el.css("position") === "fixed")
+        offsetParent = el
+      else
+        offsetParent = el.offsetParent()
+      return offsetParent
+    },
+    hasChildGroup: function (index) {
+      return this.options.nested && this.getContainerGroup(index)
+    },
+    getContainerGroup: function  (index) {
+      var childGroup = $.data(this.items[index], subContainerKey)
+      if( childGroup === undefined){
+        var childContainers = this.$getChildren(this.items[index], "container")
+        childGroup = false
+
+        if(childContainers[0]){
+          var options = $.extend({}, this.options, {
+            rootGroup: this.rootGroup,
+            group: groupCounter ++
+          })
+          childGroup = childContainers[pluginName](options).data(pluginName).group
+        }
+        $.data(this.items[index], subContainerKey, childGroup)
+      }
+      return childGroup
+    },
+    $getChildren: function (parent, type) {
+      var options = this.rootGroup.options,
+      path = options[type + "Path"],
+      selector = options[type + "Selector"]
+
+      parent = $(parent)
+      if(path)
+        parent = parent.find(path)
+
+      return parent.children(selector)
+    },
+    _serialize: function (parent, isContainer) {
+      var that = this,
+      childType = isContainer ? "item" : "container",
+
+      children = this.$getChildren(parent, childType).not(this.options.exclude).map(function () {
+        return that._serialize($(this), !isContainer)
+      }).get()
+
+      return this.rootGroup.options.serialize(parent, children, isContainer)
+    },
+    traverse: function(callback) {
+      $.each(this.items || [], function(item){
+        var group = $.data(this, subContainerKey)
+        if(group)
+          group.traverse(callback)
+      });
+
+      callback(this)
+    },
+    _clearDimensions: function  () {
+      this.itemDimensions = undefined
+    },
+    _destroy: function() {
+      var that = this;
+
+      this.target.off(eventNames.start, this.handle);
+      this.el.removeData(pluginName)
+
+      if(this.options.drop)
+        this.group.containers = $.grep(this.group.containers, function(val){
+          return val != that
+        })
+
+      $.each(this.items || [], function(){
+        $.removeData(this, subContainerKey)
+      })
+    }
+  }
+
+  var API = {
+    enable: function() {
+      this.traverse(function(object){
+        object.disabled = false
+      })
+    },
+    disable: function (){
+      this.traverse(function(object){
+        object.disabled = true
+      })
+    },
+    serialize: function () {
+      return this._serialize(this.el, true)
+    },
+    refresh: function() {
+      this.traverse(function(object){
+        object._clearDimensions()
+      })
+    },
+    destroy: function () {
+      this.traverse(function(object){
+        object._destroy();
+      })
+    }
+  }
+
+  $.extend(Container.prototype, API)
+
+  /**
+   * jQuery API
+   *
+   * Parameters are
+   *   either options on init
+   *   or a method name followed by arguments to pass to the method
+   */
+  $.fn[pluginName] = function(methodOrOptions) {
+    var args = Array.prototype.slice.call(arguments, 1)
+
+    return this.map(function(){
+      var $t = $(this),
+      object = $t.data(pluginName)
+
+      if(object && API[methodOrOptions])
+        return API[methodOrOptions].apply(object, args) || this
+      else if(!object && (methodOrOptions === undefined ||
+                          typeof methodOrOptions === "object"))
+        $t.data(pluginName, new Container($t, methodOrOptions))
+
+      return this
+    });
+  };
+
+}(jQuery, window, 'sortable');

data/app/assets/stylesheets/effective_bootstrap.scss

@@ -3,6 +3,7 @@
 @import 'effective_checks/input';
 @import 'effective_datetime/input';
 @import 'effective_file/input';
+@import 'effective_has_many/input';
 @import 'effective_rich_text_area/input';
 @import 'effective_select/input';
 @import 'effective_select_or_text/input';

data/app/assets/stylesheets/effective_has_many/input.scss

@@ -0,0 +1,42 @@
+body.dragging,
+body.dragging * {
+  cursor: move !important;
+}
+
+.form-has-many {
+  .has-many-placeholder {
+    position: relative;
+    height: 2rem;
+
+    &:before {
+      position: absolute;
+      content: '';
+      background-image: asset-data-url('icons/arrow-right-circle.svg');
+      background-repeat: no-repeat;
+      height: 2rem;
+      width: 2rem;
+    }
+  }
+
+  .has-many-fields.dragged {
+    position: absolute;
+    opacity: 0;
+    z-index: 2000;
+    .has-many-move { display: none; }
+  }
+
+  .has-many-move svg { margin-top: 6px; }
+  .has-many-move { display: none; }
+
+  .has-many-remove { margin-top: 1.5rem; }
+  .has-many-move { margin-top: 1.5rem; }
+}
+
+.form-has-many.reordering {
+  .has-many-move { display: inline-block; }
+}
+
+.form-has-many.tight {
+  .has-many-remove { margin-top: 0; }
+  .has-many-move { margin-top: 0; }
+}

data/app/models/effective/form_builder.rb

@@ -203,5 +203,19 @@ module Effective
       Effective::FormLogics::ShowIfAny.new(*args, builder: self).to_html(&block)
     end
 
+    # Has Many
+    def has_many(name, collection = nil, options = {}, &block)
+      association = object.class.reflect_on_all_associations.find { |a| a.name == name }
+      raise("expected #{object.class.name} to has_many :#{name}") if association.blank?
+
+      nested_attributes_options = (object.class.nested_attributes_options || {})[name]
+      raise("expected #{object.class.name} to accepts_nested_attributes_for :#{name}") if nested_attributes_options.blank?
+
+      options = collection if collection.kind_of?(Hash)
+      options.merge!(collection: collection) if collection && !collection.kind_of?(Hash)
+
+      Effective::FormInputs::HasMany.new(name, options, builder: self).to_html(&block)
+    end
+
   end
 end

data/app/models/effective/form_inputs/has_many.rb

@@ -0,0 +1,175 @@
+module Effective
+  module FormInputs
+    class HasMany < Effective::FormInput
+      BLANK = ''.html_safe
+
+      def to_html(&block)
+        content_tag(:div, options[:input]) do
+          has_many_fields_for(block) + has_many_links_for(block)
+        end
+      end
+
+      def input_html_options
+        { class: 'form-has-many mb-4' }
+      end
+
+      def input_js_options
+        { sortable: true }
+      end
+
+      def collection
+        Array(options[:input][:collection] || object.send(name))
+      end
+
+      # cards: true
+      def display
+        @display ||= (options[:input].delete(:cards) ? :cards : :rows)
+      end
+
+      # add: false
+      def add?
+        return @add unless @add.nil?
+
+        @add ||= begin
+          add = options[:input].delete(:add)
+          add.nil? ? true : add
+        end
+      end
+
+      # remove: false
+      def remove?
+        return @remove unless @remove.nil?
+
+        @remove ||= begin
+          remove = options[:input].delete(:remove)
+
+          if remove != nil
+            remove
+          else
+            opts = (object.class.nested_attributes_options[name] || {})
+            opts[:update_only] != true && opts[:allow_destroy] != false
+          end
+        end
+      end
+
+      # reorder: true
+      def reorder?
+        return @reorder unless @reorder.nil?
+
+        @reorder ||= begin
+          reorder = options[:input].delete(:reorder)
+
+          if reorder != nil
+            reorder
+          else
+            build_resource().class.columns_hash['position']&.type == :integer
+          end
+        end
+      end
+
+      private
+
+      def has_many_fields_for(block)
+        collection.map { |resource| render_resource(resource, block) }.join.html_safe
+      end
+
+      def has_many_links_for(block)
+        return BLANK unless add? || reorder?
+
+        content_tag(:div, class: 'has-many-links text-center mt-2') do
+          [(link_to_add(block) if add?), (link_to_reorder(block) if reorder?)].compact.join(' ').html_safe
+        end
+      end
+
+      def render_resource(resource, block)
+        remove = BLANK
+
+        content = @builder.fields_for(name, resource) do |form|
+          fields = block.call(form)
+
+          remove += form.super_hidden_field(:_destroy) if remove? && resource.persisted?
+          remove += form.super_hidden_field(:position) if reorder? && !fields.include?('][position]')
+
+          fields
+        end
+
+        remove += link_to_remove(resource) if remove?
+
+        content_tag(:div, render_fields(content, remove), class: 'has-many-fields')
+      end
+
+      def render_fields(content, remove)
+        case display
+        when :rows
+          content_tag(:div, class: 'form-row') do
+            (reorder? ? content_tag(:div, has_many_move, class: 'col-auto') : BLANK) +
+            content_tag(:div, content, class: 'col mr-auto') +
+            content_tag(:div, remove, class: 'col-auto')
+          end
+        when :cards
+          raise('unsupported')
+        else
+          content + remove
+        end
+      end
+
+      def render_template(block)
+        resource = build_resource()
+        index = object.send(name).index(resource)
+
+        html = render_resource(resource, block)
+        html.gsub!("#{name}_attributes][#{index}]", "#{name}_attributes][HASMANYINDEX]")
+        html.gsub!("#{name}_attributes_#{index}_", "#{name}_attributes_HASMANYINDEX_")
+
+        html.html_safe
+      end
+
+      def link_to_add(block)
+        content_tag(
+          :button,
+          icon('plus-circle') + 'Add Another',
+          class: 'has-many-add btn btn-secondary',
+          title: 'Add Another',
+          data: {
+            'effective-form-has-many-add': true,
+            'effective-form-has-many-template': render_template(block)
+          }
+        )
+      end
+
+      def link_to_reorder(block)
+        content_tag(
+          :button,
+          icon('list') + 'Reorder',
+          class: 'has-many-reorder btn btn-secondary',
+          title: 'Reorder',
+          data: {
+            'effective-form-has-many-reorder': true,
+          }
+        )
+      end
+
+      def link_to_remove(resource)
+        content_tag(
+          :button,
+          icon('trash-2') + 'Remove',
+          class: 'has-many-remove btn btn-danger',
+          title: 'Remove',
+          data: {
+            'confirm': "Remove #{resource}?",
+            'effective-form-has-many-remove': true,
+          }
+        )
+      end
+
+      def has_many_move
+        @has_many_move ||= content_tag(:span, icon('move'), class: 'has-many-move')
+      end
+
+      def build_resource
+        @build_resource ||= object.send(name).build().tap { |resource| object.send(name).delete(resource) }
+      end
+
+    end
+  end
+end

data/lib/effective_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module EffectiveBootstrap
-  VERSION = '0.9.9'.freeze
+  VERSION = '0.9.10'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: effective_bootstrap
 version: !ruby/object:Gem::Version
-  version: 0.9.9
+  version: 0.9.10
 platform: ruby
 authors:
 - Code and Effect
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-11-20 00:00:00.000000000 Z
+date: 2021-01-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -419,6 +419,9 @@ files:
 - app/assets/javascripts/effective_editor/quill.js
 - app/assets/javascripts/effective_file/initialize.js.coffee
 - app/assets/javascripts/effective_file/input.js
+- app/assets/javascripts/effective_has_many/initialize.js.coffee
+- app/assets/javascripts/effective_has_many/input.js
+- app/assets/javascripts/effective_has_many/jquery.sortable.js
 - app/assets/javascripts/effective_integer/initialize.js.coffee
 - app/assets/javascripts/effective_integer/input.js
 - app/assets/javascripts/effective_number_text/initialize.js.coffee
@@ -584,6 +587,7 @@ files:
 - app/assets/stylesheets/effective_editor/overrides.scss
 - app/assets/stylesheets/effective_editor/quill.scss
 - app/assets/stylesheets/effective_file/input.scss
+- app/assets/stylesheets/effective_has_many/input.scss
 - app/assets/stylesheets/effective_radio/input.scss
 - app/assets/stylesheets/effective_rich_text_area/input.scss
 - app/assets/stylesheets/effective_select/bootstrap-theme.css
@@ -613,6 +617,7 @@ files:
 - app/models/effective/form_inputs/file_field.rb
 - app/models/effective/form_inputs/float_field.rb
 - app/models/effective/form_inputs/form_group.rb
+- app/models/effective/form_inputs/has_many.rb
 - app/models/effective/form_inputs/hidden_field.rb
 - app/models/effective/form_inputs/integer_field.rb
 - app/models/effective/form_inputs/number_field.rb