From ec7ec4d7070c26bd5e16ae41b54cee28b6b3e593 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sat, 29 Oct 2011 10:01:28 +0000 Subject: [PATCH] resolve focus issues with video player find element --- source/Ox.UI/js/Core/Ox.Focus.js | 4 +- source/Ox.UI/js/Form/Ox.Input.js | 36 +++++++++--------- source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js | 3 ++ source/Ox.UI/js/Video/Ox.VideoPlayer.js | 40 +++++++++++++------- 4 files changed, 48 insertions(+), 35 deletions(-) diff --git a/source/Ox.UI/js/Core/Ox.Focus.js b/source/Ox.UI/js/Core/Ox.Focus.js index 37a6f450..6abee86b 100644 --- a/source/Ox.UI/js/Core/Ox.Focus.js +++ b/source/Ox.UI/js/Core/Ox.Focus.js @@ -3,7 +3,7 @@ Ox.Focus Basic focus handler @*/ -Ox.Focus = function() { +Ox.Focus = (function() { var stack = []; return { _print: function() { @@ -50,4 +50,4 @@ Ox.Focus = function() { return stack.length ? stack[stack.length - 1] : null; } }; -}(); +}()); diff --git a/source/Ox.UI/js/Form/Ox.Input.js b/source/Ox.UI/js/Form/Ox.Input.js index 060968fd..10ccaf69 100644 --- a/source/Ox.UI/js/Form/Ox.Input.js +++ b/source/Ox.UI/js/Form/Ox.Input.js @@ -185,12 +185,12 @@ Ox.Input = function(options, self) { ] } - Ox.extend(self, { - bindKeyboard: self.options.autocomplete || self.options.autovalidate || - self.options.changeOnKeypress, - hasPasswordPlaceholder: self.options.type == 'password' && self.options.placeholder, - inputWidth: getInputWidth() - }); + self.bindKeyboard = self.options.autocomplete + || self.options.autovalidate + || self.options.changeOnKeypress; + self.hasPasswordPlaceholder = self.options.type == 'password' + && self.options.placeholder; + self.inputWidth = getInputWidth(); if (self.options.clear) { self.$button = Ox.Button({ @@ -578,7 +578,6 @@ Ox.Input = function(options, self) { self.options.validate && validate(); if (self.bindKeyboard) { Ox.UI.$document.unbind('keydown', keydown); - //Ox.UI.$document.unbind('keypress', keypress); } // fixme: for some reason, if options.type is set, no change event fires // as a workaround, blur sends a value. remove later... @@ -662,9 +661,8 @@ Ox.Input = function(options, self) { } function focus() { - //Ox.print('focus()') if ( - that.hasClass('OxFocus') || // fixme: this is just a workaround, since for some reason, focus() gets called twice on focus + // that.hasClass('OxFocus') || // fixme: this is just a workaround, since for some reason, focus() gets called twice on focus (self.$autocompleteMenu && self.$autocompleteMenu.is(':visible')) || (self.hasPasswordPlaceholder && self.$input.is(':visible')) ) { @@ -675,7 +673,6 @@ Ox.Input = function(options, self) { that.is('.OxError') && that.removeClass('OxError'); self.options.placeholder && setPlaceholder(); if (self.bindKeyboard) { - //Ox.print('binding...') // fixme: different in webkit and firefox (?), see keyboard handler, need generic function Ox.UI.$document.keydown(keydown); //Ox.UI.$document.keypress(keypress); @@ -698,10 +695,11 @@ Ox.Input = function(options, self) { newValue = oldValue.substr(0, oldCursor[0] - 1), hasDeletedSelectedEnd = (event.keyCode == 8 || event.keyCode == 46) && oldCursor[0] < oldCursor[1] && oldCursor[1] == oldValue.length; + Ox.print('CHANGE ON KEYPRESS', self.options.changeOnKeypress); if ( - event.keyCode != 9 && - (self.options.type == 'textarea' || event.keyCode != 13) && - event.keyCode != 27 + event.keyCode != 9 // tab + && (self.options.type == 'textarea' || event.keyCode != 13) // enter + && event.keyCode != 27 // escape ) { // fixme: can't 13 and 27 return false? setTimeout(function() { // wait for val to be set var value = self.$input.val(); @@ -723,9 +721,9 @@ Ox.Input = function(options, self) { }, 0); } if ( - (event.keyCode == 38 || event.keyCode == 40) && - self.options.autocompleteSelect && - self.$autocompleteMenu.is(':visible') + (event.keyCode == 38 || event.keyCode == 40) // up/down + && self.options.autocompleteSelect + && self.$autocompleteMenu.is(':visible') ) { //return false; } @@ -843,6 +841,7 @@ Ox.Input = function(options, self) { } that.focusInput = function(select) { + // fixme: don't we have a convention that booleans are false by default? select = Ox.isUndefined(select) ? true : select; self.$input.focus(); if (select) { @@ -1407,8 +1406,8 @@ Ox.InputElement_ = function(options, self) { //Ox.print('InputElement self.options', self.options) - self.bindKeyboard = self.options.autocomplete || self.options.autocorrect || - self.options.autosuggest || self.options.autovalidate; + self.bindKeyboard = self.options.autocomplete || self.options.autocorrect + || self.options.autosuggest || self.options.autovalidate; if (self.options.autosuggest) { self.autosuggestId = self.options.id + 'Menu'; // fixme: we do this in other places ... are we doing it the same way? var name? @@ -1588,7 +1587,6 @@ Ox.InputElement_ = function(options, self) { } if (self.bindKeyboard) { Ox.UI.$document.unbind('keydown', keydown); - //Ox.UI.$document.unbind('keypress', keypress); } } diff --git a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js index d2e86b58..60f6eb69 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js @@ -86,6 +86,9 @@ Ox.VideoPanelPlayer = function(options, self) { width: getPlayerWidth() }) .bindEvent({ + find: function(data) { + self.$timeline.options({find: data.find}); + }, position: setPosition, muted: function(data) { that.triggerEvent('muted', data); diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index 6d12252f..e4f04082 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -224,7 +224,15 @@ Ox.VideoPlayer = function(options, self) { }); } else { that.bind({ - click: that.gainFocus + click: function() { + var focused = Ox.Focus.focused(); + if ( + !focused + || !Ox.UI.elements[focused].is('.OxInput') + ) { + that.gainFocus(); + } + } }); } } @@ -1427,19 +1435,24 @@ Ox.VideoPlayer = function(options, self) { function goToNextResult(direction) { var found = false, position = 0; - direction == -1 && self.results.reverse(); - Ox.forEach(self.results, function(v) { - if (direction == 1 ? v['in'] > self.options.position : v.out < self.options.position) { - position = v['in']; - found = true; - return false; + if (self.results.length) { + direction == -1 && self.results.reverse(); + Ox.forEach(self.results, function(v) { + if (direction == 1 ? v['in'] > self.options.position : v.out < self.options.position) { + position = v['in']; + found = true; + return false; + } + }); + direction == -1 && self.results.reverse(); + if (!found) { + position = self.results[direction == 1 ? 0 : self.results.length - 1]['in']; } - }); - direction == -1 && self.results.reverse(); - if (!found) { - position = self.results[direction == 1 ? 0 : self.results.length - 1]['in']; + setPosition(position + self.secondsPerFrame); + that.triggerEvent('position', { + position: self.options.position + }); } - setPosition(position + self.secondsPerFrame); } function goToPoint() { @@ -1956,10 +1969,8 @@ Ox.VideoPlayer = function(options, self) { } function submitFindInput(value, hasPressedEnter) { - //Ox.print('submitFindInput', value, hasPressedEnter) self.options.find = value; self.results = find(self.options.find); - //Ox.print('results', self.results.length); if (self.$find) { self.$results.html(self.results.length); self.$previousResultButton.options({ @@ -1980,6 +1991,7 @@ Ox.VideoPlayer = function(options, self) { if (hasPressedEnter) { self.results.length ? goToNextResult(1) : self.$findInput.focusInput(); } + that.triggerEvent('find', {find: self.options.find}); } function submitPositionInput() {