add find-as-you-type to video player
This commit is contained in:
parent
2842ec8d09
commit
8e8b9c18a4
2 changed files with 34 additions and 24 deletions
|
@ -19,6 +19,7 @@ Ox.Input <f:Ox.Element> Input Element
|
|||
<f> function(key, value, blur, callback), returns value
|
||||
autovalidate <f> --remote validation--
|
||||
clear <b> if true, has clear button
|
||||
changeOnKeypress <b> if true, fire change event while typing
|
||||
disabled <b> if true, is disabled
|
||||
height <n> px (for type='textarea' and type='range' with orientation='horizontal')
|
||||
id <s> element id
|
||||
|
@ -70,6 +71,7 @@ Ox.Input = function(options, self) {
|
|||
autocompleteSelectHighlight: false,
|
||||
autocompleteSelectSubmit: false,
|
||||
autovalidate: null,
|
||||
changeOnKeypress: false,
|
||||
clear: false,
|
||||
disabled: false,
|
||||
key: '',
|
||||
|
@ -173,7 +175,7 @@ Ox.Input = function(options, self) {
|
|||
}
|
||||
|
||||
$.extend(self, {
|
||||
bindKeyboard: self.options.autocomplete || self.options.autovalidate,
|
||||
bindKeyboard: self.options.autocomplete || self.options.autovalidate || self.options.changeOnKeypress,
|
||||
hasPasswordPlaceholder: self.options.type == 'password' && self.options.placeholder,
|
||||
inputWidth: getInputWidth()
|
||||
});
|
||||
|
@ -391,20 +393,20 @@ Ox.Input = function(options, self) {
|
|||
oldCursor = arguments[1];
|
||||
}
|
||||
|
||||
if(Ox.isFunction(self.options.autovalidate)) {
|
||||
if(self.options.key) {
|
||||
self.options.autovalidate(self.options.key, self.options.value,
|
||||
blur, autovalidateCallback);
|
||||
if (Ox.isFunction(self.options.autovalidate)) {
|
||||
if (self.options.key) {
|
||||
self.options.autovalidate(
|
||||
self.options.key, self.options.value, blur, autovalidateCallback
|
||||
);
|
||||
} else {
|
||||
self.options.autovalidate(self.options.value, blur,
|
||||
autovalidateCallback);
|
||||
self.options.autovalidate(
|
||||
self.options.value, blur, autovalidateCallback
|
||||
);
|
||||
}
|
||||
} else {
|
||||
if(Ox.isRegExp(self.options.autovalidate)) {
|
||||
} else if (Ox.isRegExp(self.options.autovalidate)) {
|
||||
autovalidateCallback(autovalidateFunction(self.options.value));
|
||||
} else {
|
||||
autovalidateTypeFunction(self.options.type, self.options.value);
|
||||
}
|
||||
} else {
|
||||
autovalidateTypeFunction(self.options.type, self.options.value);
|
||||
}
|
||||
|
||||
function autovalidateFunction(value) {
|
||||
|
@ -635,6 +637,11 @@ Ox.Input = function(options, self) {
|
|||
self.options.value = value;
|
||||
self.options.autocomplete && autocomplete(oldValue, oldCursor);
|
||||
self.options.autovalidate && autovalidate(oldValue, oldCursor);
|
||||
self.options.changeOnKeypress && that.triggerEvent({
|
||||
change: {
|
||||
value: self.options.value
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
|
|
@ -430,6 +430,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
.appendTo(self.$find);
|
||||
|
||||
self.$findInput = Ox.Input({
|
||||
changeOnKeypress: true,
|
||||
value: self.options.find
|
||||
})
|
||||
.css({
|
||||
|
@ -439,15 +440,18 @@ Ox.VideoPlayer = function(options, self) {
|
|||
WebkitBoxShadow: '0 0 0'
|
||||
})
|
||||
.bindEvent({
|
||||
focus: function() {
|
||||
self.inputHasFocus = true;
|
||||
},
|
||||
blur: function() {
|
||||
self.inputHasFocus = false;
|
||||
},
|
||||
submit: function() {
|
||||
focus: function() {
|
||||
self.inputHasFocus = true;
|
||||
},
|
||||
change: function(data) {
|
||||
submitFindInput(data.value, false);
|
||||
},
|
||||
submit: function(data) {
|
||||
self.inputHasFocus = false;
|
||||
submitFindInput();
|
||||
submitFindInput(data.value, true);
|
||||
}
|
||||
})
|
||||
.appendTo(self.$find);
|
||||
|
@ -1044,7 +1048,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
}
|
||||
}
|
||||
|
||||
function find(query) {
|
||||
function find(query, hasPressedEnter) {
|
||||
var results = [];
|
||||
Ox.print(query)
|
||||
if (query.length) {
|
||||
|
@ -1055,8 +1059,7 @@ Ox.VideoPlayer = function(options, self) {
|
|||
out: subtitle.out
|
||||
} : null;
|
||||
});
|
||||
if (results.length == 0) {
|
||||
// fixme: doesn't happen
|
||||
if (results.length == 0 && hasPressedEnter) {
|
||||
self.$findInput.focusInput();
|
||||
}
|
||||
}
|
||||
|
@ -1679,15 +1682,15 @@ Ox.VideoPlayer = function(options, self) {
|
|||
}).show();
|
||||
}
|
||||
|
||||
function submitFindInput() {
|
||||
self.options.find = self.$findInput.options('value');
|
||||
self.results = find(self.options.find);
|
||||
function submitFindInput(value, hasPressedEnter) {
|
||||
self.options.find = value;
|
||||
self.results = find(self.options.find, hasPressedEnter);
|
||||
self.$results.html(self.results.length);
|
||||
self.$timeline && self.$timeline.options({
|
||||
find: self.options.find,
|
||||
results: self.results
|
||||
});
|
||||
if (self.results.length) {
|
||||
if (hasPressedEnter && self.results.length) {
|
||||
goToNextResult(1);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue