add FormPanel

source/Ox.UI/js/Form/Ox.FormPanel.js

@@ -0,0 +1,157 @@
+'use strict';
+
+Ox.FormPanel = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            form: []
+        })
+        .options(options || {});
+
+    self.sections = self.options.form.map(function(section) {
+        return section.title;
+    });
+    self.section = 0;
+    self.sectionTitle = self.sections[self.section].title;
+    self.$list = Ox.TextList({
+        columns: [
+            {
+                format: function(value) {
+                    return $('<img>')
+                        .attr({
+                            src: Ox.UI.getImageURL('symbolCheck')
+                        })
+                        .css({
+                            width: '10px',
+                            height: '10px',
+                            margin: '2px 2px 2px 0',
+                            opacity: value ? 1 : 0.1
+                        })
+                },
+                id: 'valid',
+                title: 'Valid',
+                visible: true,
+                width: 16
+            },
+            {
+                format: function(value) {
+                    return (getSectionIndexByTitle(value) + 1) + '. ' + value;
+                },
+                id: 'title',
+                title: 'Title',
+                unique: true,
+                visible: true,
+                width: 240
+            }
+        ],
+        items: function(data, callback) {
+            setTimeout(function() {
+                callback({
+                    data: {
+                        items: Ox.isEmpty(data)
+                            ? self.sections.length
+                            : self.options.form.map(function(section) {
+                                return {title: section.title, valid: section.valid};
+                            })
+                    }
+                });
+            }, 250);
+        },
+        max: 1,
+        min: 1,
+        selected: [self.sections[0].id],
+        sort: [{key: 'id', operator: '+'}],
+        width: 256
+    }).bindEvent({
+        select: function(data) {
+            self.$sections[self.section].hide();
+            Ox.forEach(self.options.form, function(section, i) {
+                if (section.title == data.ids[0]) {
+                    self.section = i;
+                    return false;
+                }
+            });
+            self.$sections[self.section].show();
+        }
+    });
+
+    self.$section = $('<div>')
+        .css({overflowY: 'auto'});
+    self.$forms = [];
+    self.$sections = self.options.form.map(function(section, i) {
+        return $('<div>')
+            .css({
+                width: (
+                    section.descriptionWidth || section.items[0].options('width')
+                ) + 'px',
+                margin: '16px'
+            })
+            .append(
+                $('<div>')
+                    .css({marginBottom: '8px', fontWeight: 'bold'})
+                    .html(section.title)
+            )
+            .append(
+                $('<div>')
+                    .css({marginBottom: '16px', WebkitUserSelect: 'text'})
+                    .html(section.description)
+            )
+            .append(
+                self.$forms[i] = Ox.Form({
+                    items: section.items
+                })
+                .bindEvent({
+                    change: function(data) {
+                        var valid = section.validate(section.title, data);
+                        self.$list.value(section.title, 'valid', valid);
+                        that.triggerEvent('change', data);
+                    },
+                    validate: function(data) {
+                        Ox.print('VALIDATE', data);
+                    }
+                })
+            )
+            .hide()
+            .appendTo(self.$section);
+    });
+
+    self.$sections[0].show();
+
+    that.$element = Ox.SplitPanel({
+        elements: [
+            {
+                element: self.$list,
+                resizable: true,
+                resize: [256],
+                size: 256
+            },
+            {
+                element: self.$section
+            }
+        ],
+        orientation: 'horizontal'
+    });
+
+    function getSectionIndexByTitle(title) {
+        var index = -1;
+        Ox.forEach(self.options.form, function(section, i) {
+            if (section.title == title) {
+                index = i;
+                return false;
+            }
+        });
+        return index;
+    }
+
+    that.values = function() {
+        var values = {};
+        self.options.form.forEach(function(section, i) {
+            values[section.title] = self.$forms[i].values();
+        });
+        return values;
+    };
+
+    return that;
+    
+};