oxjs/examples/forms/file_selection/js/example.js

/*
...
*/

Ox.load('UI', function() {

    var $menu = Ox.MainMenu({
                menus: [
                    {id: 'file', title: 'File', items: [
                        {id: 'file', title: 'Select File...', file: {
                            maxFiles: 1, width: 96
                        }},
                        {id: 'files', title: 'Select Files...', file: {
                            width: 96
                        }}
                    ]}
                ]
            })
            .bindEvent({
                click: function(data) {
                    showEvent(data);
                    openDialog(data);
                }
            }),
        $main = Ox.Element()
            .append(
                Ox.FileButton({
                    maxFiles: 1,
                    title: 'Select File...',
                    width: 128
                })
                .css({position: 'absolute', left: '16px', top: '16px'})
                .bindEvent({click: showEvent})
            )
            .append(
                Ox.FileButton({
                    title: 'Select Files...',
                    width: 128
                })
                .css({position: 'absolute', left: '16px', top: '48px'})
                .bindEvent({click: showEvent})
            )
            .append(
                Ox.FileInput({
                    maxFiles: 1,
                    maxSize: 1000000,
                    width: 256
                })
                .css({position: 'absolute', left: '16px', top: '80px'})
                .bindEvent({click: showEvent})
            )
            .append(
                Ox.FileInput({
                    maxSize: 1000000,
                    width: 256
                })
                .css({position: 'absolute', left: '16px', top: '112px'})
                .bindEvent({click: showEvent})
            ),
        $list = Ox.TreeList({
            data: {},
            expanded: true,
            width: 256
        }),
        $innerPanel = Ox.SplitPanel({
            elements: [
                {element: $main},
                {element: $list, size: 256}
            ],
            orientation: 'horizontal'
        }),
        $outerPanel = Ox.SplitPanel({
            elements: [
                {element: $menu, size: 20},
                {element: $innerPanel}
            ],
            orientation: 'vertical'
        })
        .appendTo(Ox.$body);    

    function openDialog(data) {
        var $content = Ox.Element()
                .css(getContentCSS(data))
                .append(
                    Ox.FileInput({
                        maxFiles: data.id == 'file' ? 1 : -1,
                        value: data.files,
                        width: 256
                    })
                    .css({
                        position: 'absolute',
                        left: '16px',
                        top: '16px',
                        marginBottom: '16px'
                    })
                    .bindEvent({
                        change: function(data) {
                            showEvent(data);
                            $content.css(getContentCSS(data));
                        }
                    })
                ),
            $dialog = Ox.Dialog({
                    buttons: [
                        Ox.Button({
                            id: 'close',
                            title: 'Close'
                        })
                        .bindEvent({
                            click: function() {
                                $dialog.close();
                            }
                        })
                    ],
                    content: $content,
                    height: 129,
                    keys: {escape: 'close'},
                    title: data.title.replace('...', ''),
                    width: 288 + (data.id == 'file' ? 0 : Ox.UI.SCROLLBAR_SIZE)
                })
                .open();
        function getContentCSS(data) {
            return {height: 49 + (data.files || data.value).length * 16 + 'px'};
        }
    }

    function showEvent(data) {
        var key = data.files ? 'files' : 'value';
        data[key] = data[key].map(function(file) {
            var object = {};
            Object.keys(file).forEach(function(key) {
                object[key] = file[key];
            });
            return object;
        });
        $list.options({data: data});
    }

});