allow menu item to trigger native file dialog (see demo, fixes #691)

demos/fileinput/js/fileinput.js

@@ -1,42 +1,155 @@
 Ox.load('UI', function() {
 
-    //Ox.Theme('modern');
+    var files,
 
-    Ox.FileInput({
+        $menu = Ox.MainMenu({
-            maxFiles: 1,
+                menus: [
-            width: 256
+                    {
-        })
+                        id: 'file', title: 'File', items: [
-        .css({
+                            {id: 'mount', title: 'Mount Volume...', icon: Ox.UI.getImageURL('symbolMount'), checked: true, disabled: true, keyboard: 'control m'},
-            position: 'absolute',
+                            {id: 'select', title: 'Select Files...', icon: Ox.UI.getImageURL('symbolVolume'), file: {maxFiles: -1, maxSize: -1, width: 96}, keyboard: 'control f'},
-            left: '16px',
+                            {id: 'unmount', title: 'Unmount Volume', icon: Ox.UI.getImageURL('symbolUnmount'), keyboard: 'control u'}
-            top: '16px'
+                        ]
-        })
+                    }
-        .appendTo(Ox.$body);
+                ]
+            })
+            .bindEvent({
+                click: function(data) {
+                    if (data.id == 'select') {
+                        files = data.files;
+                        openDialog();
+                    }
+                }
+            }),
 
-    Ox.FileButton({
+        $main = Ox.Element()
-            title: 'Select Files...',
+            .append(
-            width: 256
+                Ox.Label({
-        })
+                    textAlign: 'center',
-        .bindEvent({
+                    title: 'File Button',
-            click: function(data) {
+                    width: 128
-                this.options({disabled: true});
+                })
+                .css({
+                    position: 'absolute',
+                    left: '16px',
+                    top: '16px'
+                })
+            )
+            .append(
+                Ox.FileButton({
+                    maxFiles: 1,
+                    title: 'Select File...',
+                    width: 128
+                })
+                .css({
+                    position: 'absolute',
+                    left: '160px',
+                    top: '16px'
+                })
+            )
+            .append(
+                Ox.Label({
+                    textAlign: 'center',
+                    title: 'File Input',
+                    width: 128
+                })
+                .css({
+                    position: 'absolute',
+                    left: '16px',
+                    top: '48px'
+                })
+            )
+            .append(
                 Ox.FileInput({
-                        value: data.files,
+                    maxFiles: 1,
-                        width: 256
+                    width: 256
-                    })
+                })
-                    .css({
+                .css({
-                        position: 'absolute',
+                    position: 'absolute',
-                        left: '16px',
+                    left: '160px',
-                        top: '80px'
+                    top: '48px'
-                    })
+                })
-                    .appendTo(Ox.$body);
+            )
-            }
+            .append(
-        })
+                Ox.FileInput({
-        .css({
+                    width: 256
-            position: 'absolute',
+                })
-            left: '16px',
+                .css({
-            top: '48px'
+                    position: 'absolute',
-        })
+                    left: '160px',
-        .appendTo(Ox.$body);
+                    top: '80px'
+                })
+            ),
+
+        $panel = Ox.SplitPanel({
+                elements: [
+                    {
+                        element: $menu,
+                        size: 20
+                    },
+                    {
+                        element: $main
+                    }
+                ],
+                orientation: 'vertical'
+            })
+            .appendTo(Ox.$body);
+
+    function openDialog() {
+
+        var $content,
+
+            $dialog = Ox.Dialog({
+                buttons: [
+                    Ox.Button({
+                            id: 'cancel',
+                            title: 'Cancel'
+                        })
+                        .bindEvent({
+                            click: function() {
+                                $dialog.close();
+                            }
+                        }),
+                    Ox.Button({
+                            id: 'upload',
+                            title: 'Upload'
+                        })
+                        .bindEvent({
+                            click: function() {
+                                $dialog.close();
+                            }
+                        })
+                ],
+                content: $content = Ox.Element()
+                    .css(getContentCSS())
+                    .append(
+                        Ox.FileInput({
+                                value: files,
+                                width: 256
+                            })
+                            .css({
+                                position: 'absolute',
+                                left: '16px',
+                                top: '16px',
+                                marginBottom: '16px'
+                            })
+                            .bindEvent({
+                                change: function(data) {
+                                    files = data.value;
+                                    $content.css(getContentCSS())
+                                }
+                            })
+                    ),
+                title: 'Files',
+                width: 288 + Ox.UI.SCROLLBAR_SIZE,
+                height: 129
+            })
+            .open();
+
+    }
+
+    function getContentCSS() {
+        return {height: 49 + files.length * 16 + 'px'}
+    }
 
 });

source/Ox.UI/css/Ox.UI.css

@@ -733,6 +733,18 @@ input.OxCheckbox {
 }
 /*
 --------------------------------------------------------------------------------
+OxFileButton
+--------------------------------------------------------------------------------
+*/
+.OxMenu .OxFileButton > .OxButton {
+    height: 16px;
+    margin: -1px 0 0 -6px;
+    border-width: 0;
+    background: transparent;
+    text-align: left;
+}
+/*
+--------------------------------------------------------------------------------
 OxFileInput
 --------------------------------------------------------------------------------
 */

source/Ox.UI/js/Form/Ox.FileButton.js

@@ -32,26 +32,7 @@ Ox.FileButton = function(options, self) {
         })
         .appendTo(that);
 
-    self.$input = $('<input>')
+    self.$input = renderInput();
-        .attr(
-            Ox.extend({
-                title: self.multiple ? 'Add Files' : 'Select File',
-                type: 'file'
-            }, self.multiple ? {
-                multiple: true
-            } : {})
-        )
-        .css({
-            float: 'left',
-            width: self.options.width + 'px',
-            height: '16px',
-            marginLeft: -self.options.width + 'px',
-            opacity: 0
-        })
-        .bind({
-            change: selectFiles
-        })
-        .appendTo(that);
     self.options.disabled && self.$input.hide();
 
     function selectFiles(e) {
@@ -71,7 +52,7 @@ Ox.FileButton = function(options, self) {
         }).forEach(function(file) {
             if ((
                 self.options.maxFiles == -1
-                || self.options.value.length < self.options.maxFiles
+                || self.files.length < self.options.maxFiles
             ) && (
                 self.options.maxSize == -1
                 || self.size + file.size < self.options.maxSize
@@ -80,11 +61,36 @@ Ox.FileButton = function(options, self) {
                 self.size += file.size;
             }
         });
+        self.$input = renderInput();
         if (self.files.length) {
             that.triggerEvent('click', {files: self.files});
         }
     }
 
+    function renderInput() {
+        self.$input && self.$input.remove();
+        return $('<input>')
+            .attr(
+                Ox.extend({
+                    title: self.multiple ? 'Add Files' : 'Select File',
+                    type: 'file'
+                }, self.multiple ? {
+                    multiple: true
+                } : {})
+            )
+            .css({
+                float: 'left',
+                width: self.options.width + 'px',
+                height: '16px',
+                marginLeft: -self.options.width + 'px',
+                opacity: 0
+            })
+            .bind({
+                change: selectFiles
+            })
+            .appendTo(that);
+    }
+
     self.setOption = function(key, value) {
         if (key == 'disabled') {
             self.$button.options({disabled: value});

source/Ox.UI/js/Form/Ox.FileInput.js

@@ -65,29 +65,7 @@ Ox.FileInput = function(options, self) {
         })
         .appendTo(self.$bar);
 
-    self.$input = Ox.Element({
+    self.$input = renderInput();
-            element: '<input>'
-            //tooltip: self.multiple ? 'Add Files' : 'Select File'
-        })
-        .attr(
-            Ox.extend({
-                title: self.multiple ? 'Add Files' : 'Select File',
-                type: 'file'
-            }, self.multiple ? {
-                multiple: true
-            } : {})
-        )
-        .css({
-            float: 'left',
-            width: '16px',
-            height: '14px',
-            margin: '-1px -7px 0 -16px',
-            opacity: 0
-        })
-        .bind({
-            change: addFiles
-        })
-        .appendTo(self.$bar);
 
     if (self.multiple) {
         self.$files = $('<div>')
@@ -128,11 +106,6 @@ Ox.FileInput = function(options, self) {
                                     click: function() {
                                         self.$list.options({selected: [value]});
                                         removeFiles([value]);
-                                        /*
-                                        setTimeout(function() {
-                                            self.$list.options({selected: []});
-                                        }, 25);
-                                        */
                                     }
                                 });
                         },
@@ -174,6 +147,7 @@ Ox.FileInput = function(options, self) {
             // try to add small files first
             return a.size - b.size;
         }).forEach(function(file) {
+            Ox.print('::', file, exists(file), self.options.value)
             if (!exists(file) && (
                 self.options.maxFiles == -1
                 || self.options.value.length < self.options.maxFiles
@@ -200,9 +174,10 @@ Ox.FileInput = function(options, self) {
             ) {
                 self.$button.options({disabled: true});
             }
+            self.$input = renderInput();
         } else {
             self.$button.options({title: 'close'}).attr({title: 'Clear'});
-            self.$input.hide();
+            self.$input.remove();
         }
         that.triggerEvent('change', {value: self.options.value});
     }
@@ -213,7 +188,7 @@ Ox.FileInput = function(options, self) {
         self.$title.html(getTitleText());
         self.$size.html(getSizeText());
         self.$button.options({title: 'add'}).attr({title: ''});
-        self.$input.show();
+        self.$input = renderInput();
         that.triggerEvent('change', {value: self.options.value});
     }
 
@@ -277,5 +252,29 @@ Ox.FileInput = function(options, self) {
         that.triggerEvent('change', {value: self.options.value});
     }
 
+    function renderInput() {
+        self.$input && self.$input.remove();
+        return $('<input>')
+            .attr(
+                Ox.extend({
+                    title: self.multiple ? 'Add Files' : 'Select File',
+                    type: 'file'
+                }, self.multiple ? {
+                    multiple: true
+                } : {})
+            )
+            .css({
+                float: 'left',
+                width: '16px',
+                height: '14px',
+                margin: '-1px -7px 0 -16px',
+                opacity: 0
+            })
+            .bind({
+                change: addFiles
+            })
+            .appendTo(self.$bar);
+    }
+
     return that;
 };

source/Ox.UI/js/Menu/Ox.Menu.js

@@ -116,7 +116,7 @@ Ox.Menu = function(options, self) {
         }
     }
 
-    function clickItem(position) {
+    function clickItem(position, files) {
         var item = that.items[position],
             group = item.options('group'),
             menu = self.options.mainmenu || self.options.parent || that,
@@ -156,10 +156,10 @@ Ox.Menu = function(options, self) {
                     });
                 }
             } else {
-                menu.triggerEvent('click', {
+                menu.triggerEvent('click', Ox.extend({
                     id: item.options('id'),
                     title: Ox.stripTags(item.options('title')[0])
-                });
+                }, files ? {files: files} : {}));
             }
             if (item.options('title').length == 2) {
                 item.toggleTitle();
@@ -236,10 +236,14 @@ Ox.Menu = function(options, self) {
         var item,
             position,
             $target = $(event.target),
-            $parent = $target.parent();
+            $parent = $target.parent(),
+            $grandparent = $parent.parent();
         if ($parent.is('.OxCell')) {
             $target = $parent;
             $parent = $target.parent();
+        } else if ($grandparent.is('.OxCell')) {
+            $target = $grandparent;
+            $parent = $target.parent();
         }
         if ($target.is('.OxCell')) {
             position = $parent.data('position');
@@ -617,6 +621,10 @@ Ox.Menu = function(options, self) {
         }
     };
 
+    that.clickItem = function(position, files) {
+        clickItem(position, files);
+    };
+
     /*@
     getItem <f>
     @*/

source/Ox.UI/js/Menu/Ox.MenuItem.js

@@ -28,7 +28,6 @@ Ox.MenuItem = function(options, self) {
                 bind: [], // fixme: what's this?
                 checked: null,
                 disabled: false,
-                file: false,
                 group: '',
                 icon: '',
                 id: '',
@@ -38,6 +37,7 @@ Ox.MenuItem = function(options, self) {
                 menu: null, // fixme: is passing the menu to 100s of menu items really memory-neutral?
                 position: 0,
                 title: [],
+                type: ''
             })
             .options(Ox.extend(Ox.clone(options), {
                 keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
@@ -55,7 +55,6 @@ Ox.MenuItem = function(options, self) {
         self.options.checked = false;
     }
 
-    // construct
     that.append(
             that.$status = $('<td>')
                 .addClass('OxCell OxStatus')
@@ -79,13 +78,25 @@ Ox.MenuItem = function(options, self) {
                     : {}
                 )
                 .html(
-                    Ox.isString(self.options.title[0])
+                    self.options.file
-                    ? self.options.title[0]
+                        ?
-                    : $('<div>').html(self.options.title[0]).html()
+                            Ox.FileButton(Ox.extend(Ox.clone(self.options.file), {
+                                title: self.options.title[0],
+                                width: self.options.file.width
+                            })).bindEvent({
+                                click: function(data) {
+                                    self.options.menu.clickItem(self.options.position, data.files);
+                                }
+                            })
+                        : (
+                            Ox.isString(self.options.title[0])
+                            ? self.options.title[0]
+                            : $('<div>').html(self.options.title[0]).html()
+                        )
                 )
         )
         .append(
-            $('<td>')
+            that.$modifiers = $('<td>')
                 .addClass('OxCell OxModifiers')
                 .html(
                     self.options.keyboard.modifiers.map(function(modifier) {
@@ -94,7 +105,7 @@ Ox.MenuItem = function(options, self) {
                 )
         )
         .append(
-            $('<td>')
+            that.$key = $('<td>')
                 .addClass(
                     'OxCell Ox' + (self.options.items.length ? 'Submenu' : 'Key')
                 )