1 /* Displays Play and Pause buttons, Search Button and Form, Volume Control */ |
1 /* Displays Play and Pause buttons, Search Button and Form, Volume Control */ |
2 |
2 |
3 IriSP.Widgets.Controller = function(player, config) { |
3 IriSP.Widgets.Controller = function(player, config) { |
4 IriSP.Widgets.Widget.call(this, player, config); |
4 IriSP.Widgets.Widget.call(this, player, config); |
5 |
5 this.lastSearchValue = ""; |
6 this._searchLastValue = ""; |
|
7 }; |
6 }; |
8 |
7 |
9 IriSP.Widgets.Controller.prototype = new IriSP.Widgets.Widget(); |
8 IriSP.Widgets.Controller.prototype = new IriSP.Widgets.Widget(); |
10 |
9 |
11 IriSP.Widgets.Controller.prototype.defaults = { |
10 IriSP.Widgets.Controller.prototype.defaults = { |
12 disable_annotate_btn: false, |
11 disable_annotate_btn: false, |
13 disable_search_btn: false |
12 disable_search_btn: false, |
|
13 disable_ctrl_f: false |
14 } |
14 } |
15 |
15 |
16 IriSP.Widgets.Controller.prototype.template = |
16 IriSP.Widgets.Controller.prototype.template = |
17 '<div class="Ldt-Ctrl">' |
17 '<div class="Ldt-Ctrl">' |
18 + '<div class="Ldt-Ctrl-Left">' |
18 + '<div class="Ldt-Ctrl-Left">' |
104 this.$.find(".Ldt-Ctrl-Annotate").click(function() { |
104 this.$.find(".Ldt-Ctrl-Annotate").click(function() { |
105 _this.player.popcorn.trigger("IriSP.CreateAnnotation.toggle"); |
105 _this.player.popcorn.trigger("IriSP.CreateAnnotation.toggle"); |
106 }); |
106 }); |
107 this.$.find(".Ldt-Ctrl-SearchBtn").click(this.functionWrapper("searchButtonHandler")); |
107 this.$.find(".Ldt-Ctrl-SearchBtn").click(this.functionWrapper("searchButtonHandler")); |
108 |
108 |
109 this.$searchInput.keyup(this.functionWrapper("searchHandler") ); |
109 this.$searchInput.keyup(this.functionWrapper("searchHandler")); |
110 |
110 |
111 var _volctrl = this.$.find(".Ldt-Ctrl-Volume-Control"); |
111 var _volctrl = this.$.find(".Ldt-Ctrl-Volume-Control"); |
112 this.$.find('.Ldt-Ctrl-Sound') |
112 this.$.find('.Ldt-Ctrl-Sound') |
113 .click(this.functionWrapper("muteHandler")) |
113 .click(this.functionWrapper("muteHandler")) |
114 .mouseover(function() { |
114 .mouseover(function() { |
120 _volctrl.mouseover(function() { |
120 _volctrl.mouseover(function() { |
121 _volctrl.show(); |
121 _volctrl.show(); |
122 }).mouseout(function() { |
122 }).mouseout(function() { |
123 _volctrl.hide(); |
123 _volctrl.hide(); |
124 }); |
124 }); |
125 |
125 |
|
126 // Handle CTRL-F |
|
127 if (!this.disable_ctrl_f) { |
|
128 var _fKey = "F".charCodeAt(0), |
|
129 _lastCtrlFTime = 0; |
|
130 IriSP.jQuery(document).keydown(function(_event) { |
|
131 if (_event.keyCode === _fKey && (_event.ctrlKey || _event.metaKey)) { |
|
132 var _time = IriSP.jQuery.now(); |
|
133 if (_time - _lastCtrlFTime > 2000) { |
|
134 _this.searchButtonHandler(); |
|
135 } |
|
136 _lastCtrlFTime = _time; |
|
137 return false; |
|
138 } |
|
139 }); |
|
140 } |
126 |
141 |
127 // Allow Volume Cursor Dragging |
142 // Allow Volume Cursor Dragging |
128 this.$volumeBar.slider({ |
143 this.$volumeBar.slider({ |
129 slide: function(event, ui) { |
144 slide: function(event, ui) { |
130 _this.$volumeBar.attr("title",_this.l10n.volume+': ' + ui.value + '%'); |
145 _this.$volumeBar.attr("title",_this.l10n.volume+': ' + ui.value + '%'); |
236 // tell the world the field is open |
251 // tell the world the field is open |
237 this.player.popcorn.trigger("IriSP.search.open"); |
252 this.player.popcorn.trigger("IriSP.search.open"); |
238 }; |
253 }; |
239 |
254 |
240 IriSP.Widgets.Controller.prototype.hideSearchBlock = function() { |
255 IriSP.Widgets.Controller.prototype.hideSearchBlock = function() { |
241 this._searchLastValue = this.$searchInput.val(); |
|
242 this.$searchInput.val(''); |
|
243 this.$searchBlock.animate( { width: 0 }, 200); |
256 this.$searchBlock.animate( { width: 0 }, 200); |
244 |
|
245 this._positiveMatch = false; |
257 this._positiveMatch = false; |
246 |
|
247 this.player.popcorn.trigger("IriSP.search.closed"); |
258 this.player.popcorn.trigger("IriSP.search.closed"); |
248 }; |
259 }; |
249 |
260 |
250 /** react to clicks on the search button */ |
261 /** react to clicks on the search button */ |
251 IriSP.Widgets.Controller.prototype.searchButtonHandler = function() { |
262 IriSP.Widgets.Controller.prototype.searchButtonHandler = function() { |
252 if ( !this.$searchBlock.width() ) { |
263 if ( !this.$searchBlock.width() ) { |
253 this.showSearchBlock(); |
264 this.showSearchBlock(); |
254 this.$searchInput.val(this._searchLastValue); |
265 var _val = this.$searchInput.val(); |
255 this.player.popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural. |
266 if (_val) { |
|
267 this.player.popcorn.trigger("IriSP.search", _val); // trigger the search to make it more natural. |
|
268 } |
256 } else { |
269 } else { |
257 this.hideSearchBlock(); |
270 this.hideSearchBlock(); |
258 } |
271 } |
259 }; |
272 }; |
260 |
273 |
263 IriSP.Widgets.Controller.prototype.searchHandler = function() { |
276 IriSP.Widgets.Controller.prototype.searchHandler = function() { |
264 if ( !this.$searchBlock.width() ) { |
277 if ( !this.$searchBlock.width() ) { |
265 this.$searchBlock.css({ width:"160px" }); |
278 this.$searchBlock.css({ width:"160px" }); |
266 this.$searchInput.css('background-color','#fff'); |
279 this.$searchInput.css('background-color','#fff'); |
267 } |
280 } |
268 this._searchLastValue = this.$searchInput.val(); |
281 var _val = this.$searchInput.val(); |
269 this._positiveMatch = false; |
282 this._positiveMatch = false; |
270 |
283 |
271 // do nothing if the search field is empty, instead of highlighting everything. |
284 // do nothing if the search field is empty, instead of highlighting everything. |
272 if (this._searchLastValue == "") { |
285 if (_val !== this.lastSearchValue) { |
273 this.player.popcorn.trigger("IriSP.search.cleared"); |
286 if (_val) { |
274 this.$searchInput.css('background-color',''); |
287 this.player.popcorn.trigger("IriSP.search", _val); |
275 } else { |
288 } else { |
276 this.player.popcorn.trigger("IriSP.search", this._searchLastValue); |
289 this.player.popcorn.trigger("IriSP.search.cleared"); |
277 } |
290 this.$searchInput.css('background-color',''); |
|
291 } |
|
292 } |
|
293 this.lastSearchValue = _val; |
278 }; |
294 }; |
279 |
295 |
280 /** |
296 /** |
281 handler for the IriSP.search.found message, which is sent by some views when they |
297 handler for the IriSP.search.found message, which is sent by some views when they |
282 highlight a match. |
298 highlight a match. |