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

add find-as-you-type to video player

Browse source
This commit is contained in:
rolux 2011-05-17 21:08:25 +02:00
parent 2842ec8d09
commit 8e8b9c18a4
2 changed files with 34 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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,21 +393,21 @@ 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);
}
}
function autovalidateFunction(value) {
var regexp = new RegExp(self.options.autovalidate);
@ -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);
}

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

@ -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);
}
}