use native select folder dialog

static/js/importExportDialog.js

@@ -217,14 +217,7 @@ oml.ui.importExportDialog = function() {
         var $element = Ox.Element(),
             $form = Ox.Form({
                 items: selected == 'import' ? [
-                    Ox.Input({
-                        autocomplete: function(value, callback) {
-                            oml.api.autocompleteFolder({path: value}, function(result) {
-                                callback(result.data.items);
-                            });
-                        },
-                        autocompleteSelect: true,
-                        changeOnKeypress: true,
+                    oml.ui.selectFolder({
                         id: 'path',
                         label: 'Source Path',
                         labelWidth: 128,
@@ -256,14 +249,7 @@ oml.ui.importExportDialog = function() {
                         width: 480
                     })
                 ] : [
-                    Ox.Input({
-                        autocomplete: function(value, callback) {
-                            oml.api.autocompleteFolder({path: value}, function(result) {
-                                callback(result.data.items);
-                            });
-                        },
-                        autocompleteSelect: true,
-                        changeOnKeypress: true,
+                    oml.ui.selectFolder({
                         id: 'path',
                         label: 'Destination Path',
                         labelWidth: 128,
@@ -296,6 +282,7 @@ oml.ui.importExportDialog = function() {
             .bindEvent({
                 change: function(data) {
                     var values = $form.values();
+                    console.log(values)
                     $activityButton[selected].options({
                         disabled: !values.path
                     });

static/js/preferencesPanel.js

@@ -25,24 +25,14 @@ oml.ui.preferencesPanel = function() {
                 {
                     id: 'libraryPath',
                     title: 'Library Path',
-                    autocomplete: function(value, callback) {
-                        oml.api.autocompleteFolder({path: value}, function(result) {
-                            callback(result.data.items);
-                        });
-                    },
-                    autocompleteSelect: true,
+                    type: 'selectfolder',
                     value: preferences.libraryPath,
                     help: 'The directory in which your "Books" folder is located. This is where your media files are stored. It can be on your local machine, but just as well on an external drive or networked volume.'
                 },
                 {
                     id: 'importPath',
                     title: 'Import Path',
-                    autocomplete: function(value, callback) {
-                        oml.api.autocompleteFolder({path: value}, function(result) {
-                            callback(result.data.items);
-                        });
-                    },
-                    autocompleteSelect: true,
+                    type: 'selectfolder',
                     value: preferences.importPath,
                     help: 'Any media files that you put in this folder will be added to your library. Once added, they will be removed from this folder.'
                 }
@@ -347,6 +337,15 @@ oml.ui.preferencesPanel = function() {
                             value: item.value,
                             width: 384
                         })
+                        : item.type == 'selectfolder'
+                        ? oml.ui.selectFolder({
+                            label: Ox._(item.title),
+                            labelWidth: 128,
+                            placeholder: item.placeholder || '',
+                            style: 'squared',
+                            title: oml.user.preferences[item.id] || item.value || '',
+                            width: 384 - !!item.unit * 48
+                        })
                         : Ox.Input({
                             autocomplete: item.autocomplete || null,
                             autocompleteSelect: item.autocompleteSelect || false,
@@ -357,7 +356,6 @@ oml.ui.preferencesPanel = function() {
                             value: oml.user.preferences[item.id] || item.value || '',
                             width: 384 - !!item.unit * 48
                         })
-
                     ].concat(item.unit ? [
                         Ox.Label({
                             overlap: 'left',

static/js/selectFolder.js

@@ -0,0 +1,46 @@
+'use strict';
+
+oml.ui.selectFolder = function(options, self) {
+    options.width = options.width - options.labelWidth
+    options = Ox.extend({
+        title: '...',
+        textAlign: 'left'
+    }, options);
+    var $button = Ox.Button(options, self).bindEvent({
+            click: function(event) {
+                oml.api.selectFolder({
+                    base: $button.value()
+                }, function(result) {
+                    if (result.data.path) {
+                        $button.value(result.data.path);
+                        $button.options({
+                            title: result.data.path
+                        });
+                        $button.triggerEvent('change', result.data.path);
+                    }
+                })
+            }
+        }),
+        that = Ox.FormElementGroup({
+            id: options.id,
+            elements: [
+                Ox.Label({
+                    style: options.style,
+                    textAlign: 'right',
+                    overlap: 'right',
+                    title: options.label,
+                    width: options.labelWidth
+                }),
+                $button
+            ],
+        }, self);
+
+    that.value = function() {
+        return $button.value()
+    }
+
+    if (options.title && options.title != '...') {
+        $button.value(options.title)
+    }
+    return that;
+}

static/json/js.json

@@ -58,6 +58,7 @@
     "rightPanel.js",
     "sectionButtons.js",
     "sectionbar.js",
+    "selectFolder.js",
     "sortElement.js",
     "statusIcon.js",
     "statusbar.js",