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

31
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 <f> function(key, value, blur, callback), returns value
autovalidate <f> --remote validation-- autovalidate <f> --remote validation--
clear <b> if true, has clear button clear <b> if true, has clear button
changeOnKeypress <b> if true, fire change event while typing
disabled <b> if true, is disabled disabled <b> if true, is disabled
height <n> px (for type='textarea' and type='range' with orientation='horizontal') height <n> px (for type='textarea' and type='range' with orientation='horizontal')
id <s> element id id <s> element id
@ -70,6 +71,7 @@ Ox.Input = function(options, self) {
autocompleteSelectHighlight: false, autocompleteSelectHighlight: false,
autocompleteSelectSubmit: false, autocompleteSelectSubmit: false,
autovalidate: null, autovalidate: null,
changeOnKeypress: false,
clear: false, clear: false,
disabled: false, disabled: false,
key: '', key: '',
@ -173,7 +175,7 @@ Ox.Input = function(options, self) {
} }
$.extend(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, hasPasswordPlaceholder: self.options.type == 'password' && self.options.placeholder,
inputWidth: getInputWidth() inputWidth: getInputWidth()
}); });
@ -391,20 +393,20 @@ Ox.Input = function(options, self) {
oldCursor = arguments[1]; oldCursor = arguments[1];
} }
if(Ox.isFunction(self.options.autovalidate)) { if (Ox.isFunction(self.options.autovalidate)) {
if(self.options.key) { if (self.options.key) {
self.options.autovalidate(self.options.key, self.options.value, self.options.autovalidate(
blur, autovalidateCallback); self.options.key, self.options.value, blur, autovalidateCallback
);
} else { } else {
self.options.autovalidate(self.options.value, blur, self.options.autovalidate(
autovalidateCallback); self.options.value, blur, autovalidateCallback
);
} }
} else { } else if (Ox.isRegExp(self.options.autovalidate)) {
if(Ox.isRegExp(self.options.autovalidate)) {
autovalidateCallback(autovalidateFunction(self.options.value)); autovalidateCallback(autovalidateFunction(self.options.value));
} else { } else {
autovalidateTypeFunction(self.options.type, self.options.value); autovalidateTypeFunction(self.options.type, self.options.value);
}
} }
function autovalidateFunction(value) { function autovalidateFunction(value) {
@ -635,6 +637,11 @@ Ox.Input = function(options, self) {
self.options.value = value; self.options.value = value;
self.options.autocomplete && autocomplete(oldValue, oldCursor); self.options.autocomplete && autocomplete(oldValue, oldCursor);
self.options.autovalidate && autovalidate(oldValue, oldCursor); self.options.autovalidate && autovalidate(oldValue, oldCursor);
self.options.changeOnKeypress && that.triggerEvent({
change: {
value: self.options.value
}
});
} }
}, 0); }, 0);
} }

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

@ -430,6 +430,7 @@ Ox.VideoPlayer = function(options, self) {
.appendTo(self.$find); .appendTo(self.$find);
self.$findInput = Ox.Input({ self.$findInput = Ox.Input({
changeOnKeypress: true,
value: self.options.find value: self.options.find
}) })
.css({ .css({
@ -439,15 +440,18 @@ Ox.VideoPlayer = function(options, self) {
WebkitBoxShadow: '0 0 0' WebkitBoxShadow: '0 0 0'
}) })
.bindEvent({ .bindEvent({
focus: function() {
self.inputHasFocus = true;
},
blur: function() { blur: function() {
self.inputHasFocus = false; self.inputHasFocus = false;
}, },
submit: function() { focus: function() {
self.inputHasFocus = true;
},
change: function(data) {
submitFindInput(data.value, false);
},
submit: function(data) {
self.inputHasFocus = false; self.inputHasFocus = false;
submitFindInput(); submitFindInput(data.value, true);
} }
}) })
.appendTo(self.$find); .appendTo(self.$find);
@ -1044,7 +1048,7 @@ Ox.VideoPlayer = function(options, self) {
} }
} }
function find(query) { function find(query, hasPressedEnter) {
var results = []; var results = [];
Ox.print(query) Ox.print(query)
if (query.length) { if (query.length) {
@ -1055,8 +1059,7 @@ Ox.VideoPlayer = function(options, self) {
out: subtitle.out out: subtitle.out
} : null; } : null;
}); });
if (results.length == 0) { if (results.length == 0 && hasPressedEnter) {
// fixme: doesn't happen
self.$findInput.focusInput(); self.$findInput.focusInput();
} }
} }
@ -1679,15 +1682,15 @@ Ox.VideoPlayer = function(options, self) {
}).show(); }).show();
} }
function submitFindInput() { function submitFindInput(value, hasPressedEnter) {
self.options.find = self.$findInput.options('value'); self.options.find = value;
self.results = find(self.options.find); self.results = find(self.options.find, hasPressedEnter);
self.$results.html(self.results.length); self.$results.html(self.results.length);
self.$timeline && self.$timeline.options({ self.$timeline && self.$timeline.options({
find: self.options.find, find: self.options.find,
results: self.results results: self.results
}); });
if (self.results.length) { if (hasPressedEnter && self.results.length) {
goToNextResult(1); goToNextResult(1);
} }
} }