gallery-2011.06.15-19-18 ghinch gallery-form

src/gallery-form/js/button.js

@@ -1,13 +1,7 @@
 Y.FormButton = Y.Base.create('button-field', Y.FormField, [Y.WidgetChild], {
-    _renderButtonNode : function () {
-        var contentBox = this.get('contentBox'), bn;
-
-        bn = Y.Node.create(Y.FormButton.NODE_TEMPLATE);
-        contentBox.appendChild(bn);
-        this._fieldNode = bn;
-    },
 
-    _syncLabelNode: function () {},
+    FIELD_TEMPLATE : '<button></button>',
+    LABEL_TEMPLATE: '',
 
     _syncFieldNode : function () {
         this._fieldNode.setAttrs({
@@ -23,17 +17,26 @@ Y.FormButton = Y.Base.create('button-field', Y.FormField, [Y.WidgetChild], {
             return;
         }
 
-        var oc = this.get('onclick');
         Y.Event.purgeElement(this._fieldNode, true, 'click');
-        Y.on('click', Y.bind(oc.fn, oc.scope, true), this._fieldNode);
+        Y.on('click', Y.bind(this._promptConfirm, this), this._fieldNode);
     },
 
-    renderUI : function () {
-        this._renderButtonNode();
+    _promptConfirm: function(event) {
+        event.preventDefault();
+        var message = this.get("message"),
+            onclick = this.get("onclick");
+
+        if (message) {
+            if (!this.get("confirm")(message)) {
+                return;
+            }
+        }
+        onclick.fn.apply(onclick.scope);
     },
 
     bindUI : function () {
         this.after('onclickChange', Y.bind(this._setClickHandler, this, true));
+        this.after('disabledChange', this._syncDisabled, this);
         this._setClickHandler();
     }
 }, {
@@ -59,8 +62,32 @@ Y.FormButton = Y.Base.create('button-field', Y.FormField, [Y.WidgetChild], {
                 val.argument = val.argument || {};
                 return val;
             }
-        }
-    },
+        },
+
+        /** 
+         * @attribute message
+         * @type String
+         * @default null
+         * @description Optional confirmation message to be passed to the
+         *     confirm function.
+         */
+        message: {
+            validator : Y.Lang.isString,
+            value: null
+        },
 
-    NODE_TEMPLATE : '<button></button>'
+        /** 
+         * @attribute confirm
+         * @type Function
+         * @default null
+         * @description Optional confirmation function called when the button
+         *     is clicked. It will be be passed the string set in the 'message'
+         *     attribute. If it returns 'true' the the onclick handler will be
+         *     called, otherwise it will be skipped.
+         */
+        confirm:  {
+            validator : Y.Lang.isFunction,
+            value: null
+        }
+    }
 });

src/gallery-form/js/choice-field.js

@@ -7,6 +7,11 @@
  * selection of choices
  */
 Y.ChoiceField = Y.Base.create('choice-field', Y.FormField, [Y.WidgetParent, Y.WidgetChild], {
+
+    LABEL_TEMPLATE: '<span></span>',
+    SINGLE_CHOICE: Y.RadioField,
+    MULTI_CHOICE: Y.CheckboxField,
+
     /**
      * @method _validateChoices
      * @protected
@@ -45,22 +50,16 @@ Y.ChoiceField = Y.Base.create('choice-field', Y.FormField, [Y.WidgetParent, Y.Wi
         return true;
     },
 
-    _renderLabelNode: function() {
-        var contentBox = this.get('contentBox'),
-        titleNode = Y.Node.create('<span></span>');
-
-        titleNode.set('innerHTML', this.get('label'));
-        contentBox.appendChild(titleNode);
-
-        this._labelNode = titleNode;
-    },
-
     _renderFieldNode: function() {
         var contentBox = this.get('contentBox'),
-        choices = this.get('choices'),
-        multiple = this.get('multi'),
-        fieldType = (multiple === true ? Y.CheckboxField: Y.RadioField);
+            parent = contentBox.one("." + this.FIELD_CLASS),
+            choices = this.get('choices'),
+            multiple = this.get('multi'),
+            fieldType = (multiple === true ? this.MULTI_CHOICE: this.SINGLE_CHOICE);
 
+        if (!parent) {
+            parent = contentBox;
+        }
         Y.Array.each(choices,
         function(c, i, a) {
             var cfg = {
@@ -71,9 +70,9 @@ Y.ChoiceField = Y.Base.create('choice-field', Y.FormField, [Y.WidgetParent, Y.Wi
             },
             field = new fieldType(cfg);
 
-            field.render(contentBox);
+            field.render(parent);
         }, this);
-        this._fieldNode = contentBox.all('input');
+        this._fieldNode = parent.all('input');
     },
 
     _syncFieldNode: function() {
@@ -91,6 +90,17 @@ Y.ChoiceField = Y.Base.create('choice-field', Y.FormField, [Y.WidgetParent, Y.Wi
         }
     },
 
+    /**
+     * @method _afterChoiceChange
+     * @description When the available choices for the choice field change,
+     *     the old ones are removed and the new ones are rendered.
+     */
+    _afterChoicesChange: function(event) {
+        var contentBox = this.get("contentBox");
+        contentBox.all(".yui3-form-field").remove();
+        this._renderFieldNode();
+    },
+
     clear: function() {
         this._fieldNode.each(function(node, index, list) {
             node.set('checked', false);
@@ -114,6 +124,7 @@ Y.ChoiceField = Y.Base.create('choice-field', Y.FormField, [Y.WidgetParent, Y.Wi
             this.set('value', value);
         },
         this));
+        this.after('choicesChange', this._afterChoicesChange);
     }
 
 },

src/gallery-form/js/file-field.js

@@ -6,18 +6,4 @@
  * @description A file field node
  */
 
-Y.FileField = Y.Base.create('file-field', Y.FormField, [Y.WidgetChild], {
-    _renderFieldNode : function () {
-        var contentBox = this.get('contentBox'),
-            field = contentBox.one('#' + this.get('id'));
-
-        if (!field) {
-            field = Y.Node.create(Y.FileField.FILE_INPUT_TEMPLATE);
-            contentBox.appendChild(field);
-        }
-
-        this._fieldNode = field;
-    }
-}, {
-    FILE_INPUT_TEMPLATE : '<input type="file" />'
-});
+Y.FileField = Y.Base.create('file-field', Y.FormField, [Y.WidgetChild]);