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: self.options.form.map(function(section) {
            return {title: section.title, valid: false};
        }),
        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((i + 1) + '. ' + section.title)
            )
            .append(
                $('<div>')
                    .css({marginBottom: '16px', WebkitUserSelect: 'text'})
                    .html(section.description)
            )
            .append(
                self.$forms[i] = Ox.Form({
                    items: section.items,
                    validate: section.validate
                })
                .bindEvent({
                    change: function(data) {
                        Ox.Log('FORM', '---CHANGE---', data, self.$forms[i].valid())
                        self.$list.value(section.title, 'valid', self.$forms[i].valid());
                        that.triggerEvent('change', {
                            section: section.title,
                            data: data
                        });
                    },
                    validate: function(data) {
                        self.$list.value(section.title, 'valid', data.valid);
                        that.triggerEvent('validate', {
                            section: section.title,
                            data: data
                        });
                    }
                })
            )
            .hide()
            .appendTo(self.$section);
    });

    self.$forms.forEach(function($form, i) {
        //Ox.print(self.sections[i], 'valid', $form.valid());
        self.$list.value(self.sections[i], 'valid', $form.valid());        
    });

    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.renderPrintVersion = function(title) {
        var $printVersion = $('<div>').css({overflowY: 'auto'});
        $printVersion.append(
            $('<div>')
                .addClass('OxFormSectionTitle')
                .css({
                    height: '16px',
                    padding: '16px 16px 8px 16px',
                    fontWeight: 'bold'
                })
                .html(title)
        );
        self.$sections.forEach(function($section, i) {
            // jQuery bug: textarea html/val does not survive cloning
            // http://bugs.jquery.com/ticket/3016
            var $clone = $section.clone(true),
                textareas = {
                    section: $section.find('textarea'),
                    clone: $clone.find('textarea')
                };
            textareas.section.each(function(i) {
                $(textareas.clone[i]).val($(this).val());
            });
            $printVersion
                .append(
                    $('<div>').css({
                        height: '1px',
                        margin: '8px 0 8px 0',
                        background: 'rgb(128, 128, 128)'
                    })
                )
                .append(
                    $clone.show()
                );
        });
        return $printVersion;
    };

    that.values = function() {
        var values = {};
        self.options.form.forEach(function(section, i) {
            values[section.title] = self.$forms[i].values();
        });
        return values;
    };

    return that;
    
};