resolve focus issues with video player find element
This commit is contained in:
parent
6480bddd4f
commit
ec7ec4d707
4 changed files with 48 additions and 35 deletions
|
@ -3,7 +3,7 @@
|
|||
Ox.Focus <o> 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;
|
||||
}
|
||||
};
|
||||
}();
|
||||
}());
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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() {
|
||||
|
|
Loading…
Reference in a new issue