From 8e8b9c18a437657e8c710f5d59466f52c3579461 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Tue, 17 May 2011 21:08:25 +0200
Subject: [PATCH] add find-as-you-type to video player

---
 source/Ox.UI/js/Form/Ox.Input.js        | 31 +++++++++++++++----------
 source/Ox.UI/js/Video/Ox.VideoPlayer.js | 27 +++++++++++----------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/source/Ox.UI/js/Form/Ox.Input.js b/source/Ox.UI/js/Form/Ox.Input.js
index 529eb102..cba68b5e 100644
--- a/source/Ox.UI/js/Form/Ox.Input.js
+++ b/source/Ox.UI/js/Form/Ox.Input.js
@@ -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);
         }
diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
index a1872ab6..ed56e529 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
@@ -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);
         }
     }