From df03bf1841c5786cdbaa2e1707646b2b3f0c1092 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sat, 24 Mar 2012 10:13:33 +0000 Subject: [PATCH] allow menu item to trigger native file dialog (see demo, fixes #691) --- demos/fileinput/js/fileinput.js | 183 +++++++++++++++++++++----- source/Ox.UI/css/Ox.UI.css | 12 ++ source/Ox.UI/js/Form/Ox.FileButton.js | 48 ++++--- source/Ox.UI/js/Form/Ox.FileInput.js | 59 ++++----- source/Ox.UI/js/Menu/Ox.Menu.js | 16 ++- source/Ox.UI/js/Menu/Ox.MenuItem.js | 25 +++- 6 files changed, 246 insertions(+), 97 deletions(-) diff --git a/demos/fileinput/js/fileinput.js b/demos/fileinput/js/fileinput.js index 1e184de4..0ac36170 100644 --- a/demos/fileinput/js/fileinput.js +++ b/demos/fileinput/js/fileinput.js @@ -1,42 +1,155 @@ Ox.load('UI', function() { - //Ox.Theme('modern'); + var files, - Ox.FileInput({ - maxFiles: 1, - width: 256 - }) - .css({ - position: 'absolute', - left: '16px', - top: '16px' - }) - .appendTo(Ox.$body); + $menu = Ox.MainMenu({ + menus: [ + { + id: 'file', title: 'File', items: [ + {id: 'mount', title: 'Mount Volume...', icon: Ox.UI.getImageURL('symbolMount'), checked: true, disabled: true, keyboard: 'control m'}, + {id: 'select', title: 'Select Files...', icon: Ox.UI.getImageURL('symbolVolume'), file: {maxFiles: -1, maxSize: -1, width: 96}, keyboard: 'control f'}, + {id: 'unmount', title: 'Unmount Volume', icon: Ox.UI.getImageURL('symbolUnmount'), keyboard: 'control u'} + ] + } + ] + }) + .bindEvent({ + click: function(data) { + if (data.id == 'select') { + files = data.files; + openDialog(); + } + } + }), - Ox.FileButton({ - title: 'Select Files...', - width: 256 - }) - .bindEvent({ - click: function(data) { - this.options({disabled: true}); + $main = Ox.Element() + .append( + Ox.Label({ + textAlign: 'center', + title: 'File Button', + width: 128 + }) + .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, - width: 256 - }) - .css({ - position: 'absolute', - left: '16px', - top: '80px' - }) - .appendTo(Ox.$body); - } - }) - .css({ - position: 'absolute', - left: '16px', - top: '48px' - }) - .appendTo(Ox.$body); + maxFiles: 1, + width: 256 + }) + .css({ + position: 'absolute', + left: '160px', + top: '48px' + }) + ) + .append( + Ox.FileInput({ + width: 256 + }) + .css({ + position: 'absolute', + left: '160px', + 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'} + } }); \ No newline at end of file diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index e600e2f3..e4ba2928 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/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 -------------------------------------------------------------------------------- */ diff --git a/source/Ox.UI/js/Form/Ox.FileButton.js b/source/Ox.UI/js/Form/Ox.FileButton.js index 3307d135..457224b3 100644 --- a/source/Ox.UI/js/Form/Ox.FileButton.js +++ b/source/Ox.UI/js/Form/Ox.FileButton.js @@ -32,26 +32,7 @@ Ox.FileButton = function(options, self) { }) .appendTo(that); - self.$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.$input = renderInput(); 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 $('') + .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}); diff --git a/source/Ox.UI/js/Form/Ox.FileInput.js b/source/Ox.UI/js/Form/Ox.FileInput.js index 6500291f..5396d3ef 100644 --- a/source/Ox.UI/js/Form/Ox.FileInput.js +++ b/source/Ox.UI/js/Form/Ox.FileInput.js @@ -65,29 +65,7 @@ Ox.FileInput = function(options, self) { }) .appendTo(self.$bar); - self.$input = Ox.Element({ - element: '' - //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); + self.$input = renderInput(); if (self.multiple) { self.$files = $('
') @@ -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 $('') + .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; }; diff --git a/source/Ox.UI/js/Menu/Ox.Menu.js b/source/Ox.UI/js/Menu/Ox.Menu.js index be73e602..96200d81 100644 --- a/source/Ox.UI/js/Menu/Ox.Menu.js +++ b/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 @*/ diff --git a/source/Ox.UI/js/Menu/Ox.MenuItem.js b/source/Ox.UI/js/Menu/Ox.MenuItem.js index c5445f91..e261c36c 100644 --- a/source/Ox.UI/js/Menu/Ox.MenuItem.js +++ b/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 = $('') .addClass('OxCell OxStatus') @@ -79,13 +78,25 @@ Ox.MenuItem = function(options, self) { : {} ) .html( - Ox.isString(self.options.title[0]) - ? self.options.title[0] - : $('
').html(self.options.title[0]).html() + self.options.file + ? + 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] + : $('
').html(self.options.title[0]).html() + ) ) ) .append( - $('') + that.$modifiers = $('') .addClass('OxCell OxModifiers') .html( self.options.keyboard.modifiers.map(function(modifier) { @@ -94,7 +105,7 @@ Ox.MenuItem = function(options, self) { ) ) .append( - $('') + that.$key = $('') .addClass( 'OxCell Ox' + (self.options.items.length ? 'Submenu' : 'Key') )