From 10281e3c8f14411735acd107fdabe2216c305cd4 Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 17 Jun 2012 19:16:52 +0200 Subject: [PATCH] add file input example --- examples/selecting_files/index.html | 12 +++ examples/selecting_files/js/example.js | 139 +++++++++++++++++++++++++ 2 files changed, 151 insertions(+) create mode 100644 examples/selecting_files/index.html create mode 100644 examples/selecting_files/js/example.js diff --git a/examples/selecting_files/index.html b/examples/selecting_files/index.html new file mode 100644 index 00000000..c2e86ce6 --- /dev/null +++ b/examples/selecting_files/index.html @@ -0,0 +1,12 @@ + + + + Selecting Files + + + + + + + + \ No newline at end of file diff --git a/examples/selecting_files/js/example.js b/examples/selecting_files/js/example.js new file mode 100644 index 00000000..97c0ebc9 --- /dev/null +++ b/examples/selecting_files/js/example.js @@ -0,0 +1,139 @@ +/* +... +*/ + +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}); + } + +});