From 50f41fe0c4778929ff077fbd89f2e5dcbdfd20ad Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Fri, 13 Feb 2015 10:48:38 +0000
Subject: [PATCH] ArrayInput: support FormElementGroups as Inputs; fire 'add'
 and 'remove' events

---
 source/UI/js/Form/ArrayInput.js | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/source/UI/js/Form/ArrayInput.js b/source/UI/js/Form/ArrayInput.js
index fda531c3..51d5036c 100644
--- a/source/UI/js/Form/ArrayInput.js
+++ b/source/UI/js/Form/ArrayInput.js
@@ -3,8 +3,10 @@
 /*@
 Ox.ArrayInput <f> Array input
     options <o> Options object
+        getInput    <f> Optional function that returns input element
         label       <s> string, ''
         max         <n> integer, maximum number of items, 0 for all
+        setWidth    <f> Optional function to set input element width
         sort        <b> fixme: this should probably be removed
         value       <[]>    value
         width       <n|256> width
@@ -18,8 +20,10 @@ Ox.ArrayInput = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
         .defaults({
+            getInput: null,
             label: '',
             max: 0,
+            setWidth: null,
             sort: false, // fixme: this should probably be removed
             value: [],
             width: 256
@@ -30,6 +34,7 @@ Ox.ArrayInput = function(options, self) {
             width: setWidths
         });
 
+    self.options.getInput = self.options.getInput || Ox.Input;
     self.options.value = self.options.value || [];
 
     if (self.options.label) {
@@ -65,8 +70,8 @@ Ox.ArrayInput = function(options, self) {
         } else {
             self.$element[index].insertAfter(self.$element[index - 1]);
         }
-        self.$input.splice(index, 0, Ox.Input({
-                value: value,
+        self.$input.splice(
+            index, 0, self.options.getInput({
                 width: self.options.width - 48
             })
             .css({float: 'left'})
@@ -80,7 +85,9 @@ Ox.ArrayInput = function(options, self) {
                 }
             })
             .appendTo(self.$element[index]));
-        focus && self.$input[index].focusInput(true);
+        if (focus && self.$input[index].focusInput) {
+            self.$input[index].focusInput(true);
+        }
         self.$removeButton.splice(index, 0, Ox.Button({
                 title: self.$input.length == 1 ? 'close' : 'remove',
                 type: 'image'
@@ -97,9 +104,12 @@ Ox.ArrayInput = function(options, self) {
                         });
                     }
                     if (self.$input.length == 1) {
-                        self.$input[0].focusInput(true);
+                        if (self.$input[0].focusInput) {
+                            self.$input[0].focusInput(true);
+                        }
                     } else {
                         removeInput(index);
+                        that.triggerEvent('remove');
                     }
                 }
             })
@@ -114,6 +124,7 @@ Ox.ArrayInput = function(options, self) {
                 click: function() {
                     var index = $(this).parent().data('index');
                     addInput(index + 1, '', true);
+                    that.triggerEvent('add');
                 }
             })
             .appendTo(self.$element[index]));
@@ -155,7 +166,11 @@ Ox.ArrayInput = function(options, self) {
         self.$label && self.$label.options({width: self.options.width});
         self.$element.forEach(function($element, i) {
             $element.css({width: self.options.width + 'px'});
-            self.$input[i].options({width: self.options.width - 48});
+            if (self.options.setWidth) {
+                self.options.setWidth(self.options.width - 48);
+            } else {
+                self.$input[i].options({width: self.options.width - 48});
+            }
         });
     }