update file selection example

examples/forms/file_selection/css/example.css

@@ -1,3 +1,5 @@
+.OxDialog .OxFileButton,
+.OxDialog .OxFileInput,
 .OxSplitPanel .OxFileButton,
 .OxSplitPanel .OxFileInput {
     position: absolute;

examples/forms/file_selection/js/example.js

@@ -5,7 +5,7 @@ in Ox.UI.
 'use strict';
 
 /*
-Load the UI module.
+Load the `UI` module.
 */
 Ox.load('UI', function() {
 
@@ -40,9 +40,8 @@ Ox.load('UI', function() {
             <pre>
             $fileButton.bindEvent({
                 click: function(data) {
-                    data.files.forEach(function(file) {
-                        // ...
-                    });
+                    // Print array of files
+                    Ox.print(data.files);
                 }
             });
             </pre>
@@ -68,16 +67,15 @@ Ox.load('UI', function() {
                 width: 128
             }),
             /*
-            Ox.FileInput is a form element, so it has a value and fires a
-            `change` event. Its options are similar to Ox.FileButton, without
-            `image`, `title` and `type`, and we can bind to its `change` event
-            like this:
+            Ox.FileInput is a form element, so it has a value option and fires a
+            `change` event. Its other options are similar to Ox.FileButton,
+            without `image`, `title` and `type`, and we can bind to its `change`
+            event like this:
             <pre>
             $fileInput.bindEvent({
                 change: function(data) {
-                    data.value.forEach(function(file) {
-                        // ...
-                    });
+                    // Print array of files
+                    Ox.print(data.value);
                 }
             });
             </pre>
@@ -105,9 +103,8 @@ Ox.load('UI', function() {
         $mainMenu.bindEvent({
             click: function(data) {
                 if (data.id == 'foo') {
-                    data.files.forEach(function(file) {
-                        // ...
-                    });
+                    // Print array of files
+                    Ox.print(data.files);
                 }
             }
         });
@@ -185,6 +182,10 @@ Ox.load('UI', function() {
             .appendTo($main);
     });    
 
+    /*
+    When the user selects one or more files via the menu, we open a dialog. This
+    dialog contains an Ox.FileInput that is populated with the selected file(s).
+    */
     function openDialog(data) {
         var $button = Ox.Button({
                     id: 'close',
@@ -195,27 +196,20 @@ Ox.load('UI', function() {
                         $dialog.close();
                     }
                 }),
-            $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));
-                        }
-                    })
-                ),
+            $content = Ox.Element().css(getContentCSS(data)),
+            $input = Ox.FileInput({
+                    maxFiles: data.id == 'file' ? 1 : -1,
+                    value: data.files,
+                    width: 256
+                })
+                .css({top: '16px', marginBottom: '16px'})
+                .bindEvent({
+                    change: function(data) {
+                        showEvent(data);
+                        $content.css(getContentCSS(data));
+                    }
+                })
+                .appendTo($content),
             $dialog = Ox.Dialog({
                     buttons: [$button],
                     content: $content,
@@ -230,6 +224,12 @@ Ox.load('UI', function() {
         }
     }
 
+    /*
+    Whenever any of our FileButtons fires a `click` event, or any of our
+    FileInputs fires a `change` event, we display the event data. Note that we
+    have to transform the file object to a regular object before we can pass it
+    to the list.
+    */
     function showEvent(data) {
         var key = data.files ? 'files' : 'value';
         data[key] = data[key].map(function(file) {