diff --git a/couchpotato/static/scripts/page/settings.js b/couchpotato/static/scripts/page/settings.js index b9f72aba..c8e0a5e4 100644 --- a/couchpotato/static/scripts/page/settings.js +++ b/couchpotato/static/scripts/page/settings.js @@ -634,6 +634,7 @@ Option.Directory = new Class({ browser: null, save_on_change: false, use_cache: false, + current_dir: '', create: function(){ var self = this; @@ -645,8 +646,17 @@ Option.Directory = new Class({ 'click': self.showBrowser.bind(self) } }).adopt( - self.input = new Element('span', { - 'text': self.getSettingValue() + self.input = new Element('input', { + 'value': self.getSettingValue(), + 'events': { + 'change': self.filterDirectory.bind(self), + 'keydown': function(e){ + if(e.key == 'enter' || e.key == 'tab') + (e).stop(); + }, + 'keyup': self.filterDirectory.bind(self), + 'paste': self.filterDirectory.bind(self) + } }) ) ); @@ -654,10 +664,55 @@ Option.Directory = new Class({ self.cached = {}; }, + filterDirectory: function(e){ + var self = this, + value = self.getValue(), + path_sep = Api.getOption('path_sep'), + active_selector = 'li:not(.blur):not(.empty)'; + + if(e.key == 'enter' || e.key == 'tab'){ + (e).stop(); + + var first = self.dir_list.getElement(active_selector); + if(first){ + self.selectDirectory(first.get('data-value')); + } + } + else { + + // New folder + if(value.substr(-1) == path_sep){ + if(self.current_dir != value) + self.selectDirectory(value) + } + else { + var pd = self.getParentDir(value); + if(self.current_dir != pd) + self.getDirs(pd); + + var folder_filter = value.split(path_sep).getLast() + self.dir_list.getElements('li').each(function(li){ + var valid = li.get('text').substr(0, folder_filter.length).toLowerCase() != folder_filter.toLowerCase() + li[valid ? 'addClass' : 'removeClass']('blur') + }); + + var first = self.dir_list.getElement(active_selector); + if(first){ + if(!self.dir_list_scroll) + self.dir_list_scroll = new Fx.Scroll(self.dir_list, { + 'transition': 'quint:in:out' + }); + + self.dir_list_scroll.toElement(first); + } + } + } + }, + selectDirectory: function(dir){ var self = this; - self.input.set('text', dir); + self.input.set('value', dir); self.getDirs() }, @@ -668,9 +723,28 @@ Option.Directory = new Class({ self.selectDirectory(self.getParentDir()) }, + caretAtEnd: function(){ + var self = this; + + self.input.focus(); + + if (typeof self.input.selectionStart == "number") { + self.input.selectionStart = self.input.selectionEnd = self.input.get('value').length; + } else if (typeof el.createTextRange != "undefined") { + self.input.focus(); + var range = self.input.createTextRange(); + range.collapse(false); + range.select(); + } + }, + showBrowser: function(){ var self = this; + // Move caret to back of the input + if(!self.browser || self.browser && !self.browser.isVisible()) + self.caretAtEnd() + if(!self.browser){ self.browser = new Element('div.directory_list').adopt( new Element('div.pointer'), @@ -686,7 +760,9 @@ Option.Directory = new Class({ }).adopt( self.show_hidden = new Element('input[type=checkbox].inlay', { 'events': { - 'change': self.getDirs.bind(self) + 'change': function(){ + self.getDirs() + } } }) ) @@ -707,7 +783,7 @@ Option.Directory = new Class({ 'text': 'Clear', 'events': { 'click': function(e){ - self.input.set('text', ''); + self.input.set('value', ''); self.hideBrowser(e, true); } } @@ -735,7 +811,7 @@ Option.Directory = new Class({ new Form.Check(self.show_hidden); } - self.initial_directory = self.input.get('text'); + self.initial_directory = self.input.get('value'); self.getDirs(); self.browser.show(); @@ -749,7 +825,7 @@ Option.Directory = new Class({ if(save) self.save(); else - self.input.set('text', self.initial_directory); + self.input.set('value', self.initial_directory); self.browser.hide(); self.el.removeEvents('outerClick') @@ -757,21 +833,21 @@ Option.Directory = new Class({ }, fillBrowser: function(json){ - var self = this; + var self = this, + v = self.getValue(); self.data = json; - var v = self.getValue(); - var previous_dir = self.getParentDir(); + var previous_dir = json.parent; if(v == '') - self.input.set('text', json.home); + self.input.set('value', json.home); - if(previous_dir != v && previous_dir.length >= 1 && !json.is_root){ + if(previous_dir.length >= 1 && !json.is_root){ var prev_dirname = self.getCurrentDirname(previous_dir); if(previous_dir == json.home) - prev_dirname = 'Home'; + prev_dirname = 'Home Folder'; else if(previous_dir == '/' && json.platform == 'nt') prev_dirname = 'Computer'; @@ -801,12 +877,13 @@ Option.Directory = new Class({ new Element('li.empty', { 'text': 'Selected folder is empty' }).inject(self.dir_list) + + self.caretAtEnd(); }, - getDirs: function(){ - var self = this; - - var c = self.getValue(); + getDirs: function(dir){ + var self = this, + c = dir || self.getValue(); if(self.cached[c] && self.use_cache){ self.fillBrowser() @@ -817,7 +894,10 @@ Option.Directory = new Class({ 'path': c, 'show_hidden': +self.show_hidden.checked }, - 'onComplete': self.fillBrowser.bind(self) + 'onComplete': function(json){ + self.current_dir = c; + self.fillBrowser(json); + } }) } }, @@ -831,8 +911,8 @@ Option.Directory = new Class({ var v = dir || self.getValue(); var sep = Api.getOption('path_sep'); var dirs = v.split(sep); - if(dirs.pop() == '') - dirs.pop(); + if(dirs.pop() == '') + dirs.pop(); return dirs.join(sep) + sep }, @@ -845,7 +925,7 @@ Option.Directory = new Class({ getValue: function(){ var self = this; - return self.input.get('text'); + return self.input.get('value'); } }); diff --git a/couchpotato/static/style/settings.css b/couchpotato/static/style/settings.css index 7fb1df29..e84d3814 100644 --- a/couchpotato/static/style/settings.css +++ b/couchpotato/static/style/settings.css @@ -302,15 +302,19 @@ font-family: 'Elusive-Icons'; color: #f5e39c; } - .page form .directory > span { + .page form .directory > input { height: 25px; display: inline-block; float: right; text-align: right; white-space: nowrap; cursor: pointer; + background: none; + border: 0; + color: #FFF; + width: 100%; } - .page form .directory span:empty:before { + .page form .directory input:empty:before { content: 'No folder selected'; font-style: italic; opacity: .3; @@ -353,6 +357,11 @@ white-space: nowrap; text-overflow: ellipsis; } + + .page .directory_list li.blur { + opacity: .3; + } + .page .directory_list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }