0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

resolve focus issues with video player find element

Browse source
This commit is contained in:
rlx 2011-10-29 10:01:28 +00:00
parent 6480bddd4f
commit ec7ec4d707
4 changed files with 48 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
source/Ox.UI/js/Core/Ox.Focus.js
View file

@ -3,7 +3,7 @@
Ox.Focus <o> Basic focus handler Ox.Focus <o> Basic focus handler
@*/ @*/
Ox.Focus = function() { Ox.Focus = (function() {
var stack = []; var stack = [];
return { return {
_print: function() { _print: function() {
@ -50,4 +50,4 @@ Ox.Focus = function() {
return stack.length ? stack[stack.length - 1] : null; return stack.length ? stack[stack.length - 1] : null;
} }
}; };
}(); }());

36
source/Ox.UI/js/Form/Ox.Input.js
View file

@ -185,12 +185,12 @@ Ox.Input = function(options, self) {
] ]
} }
Ox.extend(self, { self.bindKeyboard = self.options.autocomplete
bindKeyboard: self.options.autocomplete || self.options.autovalidate || || self.options.autovalidate
self.options.changeOnKeypress, || self.options.changeOnKeypress;
hasPasswordPlaceholder: self.options.type == 'password' && self.options.placeholder, self.hasPasswordPlaceholder = self.options.type == 'password'
inputWidth: getInputWidth() && self.options.placeholder;
}); self.inputWidth = getInputWidth();
if (self.options.clear) { if (self.options.clear) {
self.$button = Ox.Button({ self.$button = Ox.Button({
@ -578,7 +578,6 @@ Ox.Input = function(options, self) {
self.options.validate && validate(); self.options.validate && validate();
if (self.bindKeyboard) { if (self.bindKeyboard) {
Ox.UI.$document.unbind('keydown', keydown); 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 // fixme: for some reason, if options.type is set, no change event fires
// as a workaround, blur sends a value. remove later... // as a workaround, blur sends a value. remove later...
@ -662,9 +661,8 @@ Ox.Input = function(options, self) {
} }
function focus() { function focus() {
//Ox.print('focus()')
if ( 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.$autocompleteMenu && self.$autocompleteMenu.is(':visible')) ||
(self.hasPasswordPlaceholder && self.$input.is(':visible')) (self.hasPasswordPlaceholder && self.$input.is(':visible'))
) { ) {
@ -675,7 +673,6 @@ Ox.Input = function(options, self) {
that.is('.OxError') && that.removeClass('OxError'); that.is('.OxError') && that.removeClass('OxError');
self.options.placeholder && setPlaceholder(); self.options.placeholder && setPlaceholder();
if (self.bindKeyboard) { if (self.bindKeyboard) {
//Ox.print('binding...')
// fixme: different in webkit and firefox (?), see keyboard handler, need generic function // fixme: different in webkit and firefox (?), see keyboard handler, need generic function
Ox.UI.$document.keydown(keydown); Ox.UI.$document.keydown(keydown);
//Ox.UI.$document.keypress(keypress); //Ox.UI.$document.keypress(keypress);
@ -698,10 +695,11 @@ Ox.Input = function(options, self) {
newValue = oldValue.substr(0, oldCursor[0] - 1), newValue = oldValue.substr(0, oldCursor[0] - 1),
hasDeletedSelectedEnd = (event.keyCode == 8 || event.keyCode == 46) && hasDeletedSelectedEnd = (event.keyCode == 8 || event.keyCode == 46) &&
oldCursor[0] < oldCursor[1] && oldCursor[1] == oldValue.length; oldCursor[0] < oldCursor[1] && oldCursor[1] == oldValue.length;
Ox.print('CHANGE ON KEYPRESS', self.options.changeOnKeypress);
if ( if (
event.keyCode != 9 && event.keyCode != 9 // tab
(self.options.type == 'textarea' || event.keyCode != 13) && && (self.options.type == 'textarea' || event.keyCode != 13) // enter
event.keyCode != 27 && event.keyCode != 27 // escape
) { // fixme: can't 13 and 27 return false? ) { // fixme: can't 13 and 27 return false?
setTimeout(function() { // wait for val to be set setTimeout(function() { // wait for val to be set
var value = self.$input.val(); var value = self.$input.val();
@ -723,9 +721,9 @@ Ox.Input = function(options, self) {
}, 0); }, 0);
} }
if ( if (
(event.keyCode == 38 || event.keyCode == 40) && (event.keyCode == 38 || event.keyCode == 40) // up/down
self.options.autocompleteSelect && && self.options.autocompleteSelect
self.$autocompleteMenu.is(':visible') && self.$autocompleteMenu.is(':visible')
) { ) {
//return false; //return false;
} }
@ -843,6 +841,7 @@ Ox.Input = function(options, self) {
} }
that.focusInput = function(select) { that.focusInput = function(select) {
// fixme: don't we have a convention that booleans are false by default?
select = Ox.isUndefined(select) ? true : select; select = Ox.isUndefined(select) ? true : select;
self.$input.focus(); self.$input.focus();
if (select) { if (select) {
@ -1407,8 +1406,8 @@ Ox.InputElement_ = function(options, self) {
//Ox.print('InputElement self.options', self.options) //Ox.print('InputElement self.options', self.options)
self.bindKeyboard = self.options.autocomplete || self.options.autocorrect || self.bindKeyboard = self.options.autocomplete || self.options.autocorrect
self.options.autosuggest || self.options.autovalidate; || self.options.autosuggest || self.options.autovalidate;
if (self.options.autosuggest) { 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? 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) { if (self.bindKeyboard) {
Ox.UI.$document.unbind('keydown', keydown); Ox.UI.$document.unbind('keydown', keydown);
//Ox.UI.$document.unbind('keypress', keypress);
} }
} }

3
source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js
View file

@ -86,6 +86,9 @@ Ox.VideoPanelPlayer = function(options, self) {
width: getPlayerWidth() width: getPlayerWidth()
}) })
.bindEvent({ .bindEvent({
find: function(data) {
self.$timeline.options({find: data.find});
},
position: setPosition, position: setPosition,
muted: function(data) { muted: function(data) {
that.triggerEvent('muted', data); that.triggerEvent('muted', data);

40
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -224,7 +224,15 @@ Ox.VideoPlayer = function(options, self) {
}); });
} else { } else {
that.bind({ 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) { function goToNextResult(direction) {
var found = false, var found = false,
position = 0; position = 0;
direction == -1 && self.results.reverse(); if (self.results.length) {
Ox.forEach(self.results, function(v) { direction == -1 && self.results.reverse();
if (direction == 1 ? v['in'] > self.options.position : v.out < self.options.position) { Ox.forEach(self.results, function(v) {
position = v['in']; if (direction == 1 ? v['in'] > self.options.position : v.out < self.options.position) {
found = true; position = v['in'];
return false; found = true;
return false;
}
});
direction == -1 && self.results.reverse();
if (!found) {
position = self.results[direction == 1 ? 0 : self.results.length - 1]['in'];
} }
}); setPosition(position + self.secondsPerFrame);
direction == -1 && self.results.reverse(); that.triggerEvent('position', {
if (!found) { position: self.options.position
position = self.results[direction == 1 ? 0 : self.results.length - 1]['in']; });
} }
setPosition(position + self.secondsPerFrame);
} }
function goToPoint() { function goToPoint() {
@ -1956,10 +1969,8 @@ Ox.VideoPlayer = function(options, self) {
} }
function submitFindInput(value, hasPressedEnter) { function submitFindInput(value, hasPressedEnter) {
//Ox.print('submitFindInput', value, hasPressedEnter)
self.options.find = value; self.options.find = value;
self.results = find(self.options.find); self.results = find(self.options.find);
//Ox.print('results', self.results.length);
if (self.$find) { if (self.$find) {
self.$results.html(self.results.length); self.$results.html(self.results.length);
self.$previousResultButton.options({ self.$previousResultButton.options({
@ -1980,6 +1991,7 @@ Ox.VideoPlayer = function(options, self) {
if (hasPressedEnter) { if (hasPressedEnter) {
self.results.length ? goToNextResult(1) : self.$findInput.focusInput(); self.results.length ? goToNextResult(1) : self.$findInput.focusInput();
} }
that.triggerEvent('find', {find: self.options.find});
} }
function submitPositionInput() { function submitPositionInput() {