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

'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;
    
};