updated the playerWidget to use classes instead of id's in its elements.
--- a/src/js/widgets/playerWidget.js Wed Nov 16 10:47:00 2011 +0100
+++ b/src/js/widgets/playerWidget.js Wed Nov 16 10:47:30 2011 +0100
@@ -36,17 +36,18 @@
this.selector.children("#Ldt-ShowAnnotation-audio").width(width - 10);
this.selector.children("#Ldt-ShowAnnotation-video").width(width - 10);
this.selector.children("#Ldt-SaKeyword").width(width - 10);
- this.selector.children("#Ldt-controler").width(width - 10);
- this.selector.children("#Ldt-Control").attr("z-index", "100");
+ this.selector.children(".Ldt-controler").width(width - 10);
+ /*
+ this.selector.children("#Ldt-Control").attr("z-index", "100");
this.selector.children("#Ldt-controler").hide();
-
+ */
this.selector.children("#Ldt-ShowAnnotation-audio").append(IriSP.annotation_loading_template);
if(this._config.mode=='radio'){
this.selector.children("#Ldt-load-container").attr("width",this.width);
}
- this.selector.children("#Ldt-controler").show();
+ this.selector.children(".Ldt-controler").show();
//__IriSP.jQuery("#Ldt-Root").css('display','visible');
this.selector.children("#Ldt-ShowAnnotation").click( function () {
//__IriSP.jQuery(this).slideUp();
@@ -60,7 +61,8 @@
this._Popcorn.listen("pause", IriSP.wrap(this, this.playButtonUpdater));
this.selector.children("#amount").val(this.selector.children("#slider-range-min").slider("value")+" s");
- this.selector.children(".Ldt-Control1 button:first").button({
+
+ this.selector.find(".ldt-CtrlPlay").button({
icons: {
primary: 'ui-icon-play'
},
@@ -72,23 +74,25 @@
},
text: false
});
- this.selector.children(".Ldt-Control2 button:first").button({
+
+ this.selector.find(".ldt-CtrlSearch").button({
icons: {
primary: 'ui-icon-search'//,
//secondary: 'ui-icon-volume-off'
},
text: false
- }).click(function() { self.searchButtonHandler.call(self); })
- .next().button({
+ }).click(function() { self.searchButtonHandler.call(self); });
+
+ this.selector.find('.ldt-CtrlSound').button({
icons: {
primary: 'ui-icon-volume-on'
},
text: false
}).click(function() { self.muteHandler.call(self); } );
- this.selector.children("#ldt-CtrlPlay").attr( "style", "background-color:#CD21C24;" );
+ this.selector.find(".ldt-CtrlPlay").attr( "style", "background-color:#CD21C24;" );
- this.selector.children("#Ldt-load-container").hide();
+ // this.selector.children("#Ldt-load-container").hide();
if( this._config.mode=="radio" & IriSP.jQuery.browser.msie != true ) {
IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" );
@@ -106,10 +110,10 @@
if ( status == true ){
this.selector.find(".ui-icon-play").css( "background-position", "-16px -160px" );
- this.selector.find("#ldt-CtrlPlay").attr("title", "Play");
+ this.selector.find(".ldt-CtrlPlay").attr("title", "Play");
} else {
this.selector.find(".ui-icon-play").css( "background-position","0px -160px" );
- this.selector.find("#ldt-CtrlPlay").attr("title", "Pause");
+ this.selector.find(".ldt-CtrlPlay").attr("title", "Pause");
}
};
@@ -143,27 +147,27 @@
if ( this._searchBlockOpen == false ) {
this.selector.find( ".ui-icon-search" ).css( "background-position", "-144px -112px" );
- this.selector.find("#LdtSearch").show(100);
+ this.selector.find(".LdtSearch").show(100);
- this.selector.find("#LdtSearchInput").css('background-color','#fff');
- this.selector.find("#LdtSearchInput").focus();
- this.selector.find("#LdtSearchInput").attr('value', this._searchLastValue);
+ this.selector.find(".LdtSearchInput").css('background-color','#fff');
+ this.selector.find(".LdtSearchInput").focus();
+ this.selector.find(".LdtSearchInput").attr('value', this._searchLastValue);
this._Popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural.
this._searchBlockOpen = true;
- this.selector.find("#LdtSearchInput").bind('keyup', null, function() { self.searchHandler.call(self); } );
+ this.selector.find(".LdtSearchInput").bind('keyup', null, function() { self.searchHandler.call(self); } );
// tell the world the field is open
this._Popcorn.trigger("IriSP.search.open");
} else {
- this._searchLastValue = this.selector.find("#LdtSearchInput").attr('value');
- this.selector.find("#LdtSearchInput").attr('value','');
+ this._searchLastValue = this.selector.find(".LdtSearchInput").attr('value');
+ this.selector.find(".LdtSearchInput").attr('value','');
this.selector.find(".ui-icon-search").css("background-position","-160px -112px");
- this.selector.find("#LdtSearch").hide(100);
+ this.selector.find(".LdtSearch").hide(100);
// unbind the watcher event.
- this.selector.find("#LdtSearchInput").unbind('keypress set');
+ this.selector.find(".LdtSearchInput").unbind('keypress set');
this._searchBlockOpen = false;
this._Popcorn.trigger("IriSP.search.closed");
@@ -173,7 +177,7 @@
/* this handler is called whenever the content of the search
field changes */
IriSP.PlayerWidget.prototype.searchHandler = function() {
- this._searchLastValue = this.selector.find("#LdtSearchInput").attr('value');
+ this._searchLastValue = this.selector.find(".LdtSearchInput").attr('value');
// do nothing if the search field is empty, instead of highlighting everything.
if (this._searchLastValue == "") {
@@ -188,11 +192,11 @@
highlight a match.
*/
IriSP.PlayerWidget.prototype.searchMatch = function() {
- this.selector.find("#LdtSearchInput").css('background-color','#e1ffe1');
+ this.selector.find(".LdtSearchInput").css('background-color','#e1ffe1');
}
/* the same, except that no value could be found */
IriSP.PlayerWidget.prototype.searchNoMatch = function() {
- this.selector.find("#LdtSearchInput").css('background-color','#e1ffe1');
+ this.selector.find(".LdtSearchInput").css('background-color','#e1ffe1');
}
--- a/src/templates/search.html Wed Nov 16 10:47:00 2011 +0100
+++ b/src/templates/search.html Wed Nov 16 10:47:30 2011 +0100
@@ -1,9 +1,9 @@
{{! template for the search container }}
-<div id='LdtSearchContainer'
+<div class='LdtSearchContainer'
style='margin-left: 445px; position: absolute; margin-top: -26px;'>
- <div id='LdtSearch'
+ <div class='LdtSearch'
style='display: none; background-color: #EEE; width: 165px; boder: 1px; border-color: #CFCFCF; position: absolute; text-align: center;'>
- <input id='LdtSearchInput'
+ <input class='LdtSearchInput'
style='margin-top: 2px; margin-bottom: 2px;' />
</div>
</div>
--- a/unittests/tests/widgets/playerWidget.js Wed Nov 16 10:47:00 2011 +0100
+++ b/unittests/tests/widgets/playerWidget.js Wed Nov 16 10:47:30 2011 +0100
@@ -42,8 +42,8 @@
player.draw();
- player.selector.find("#ldt-CtrlPlay").trigger("click");
- player.selector.find("#ldt-CtrlPlay").trigger("click");
+ player.selector.find(".ldt-CtrlPlay").trigger("click");
+ player.selector.find(".ldt-CtrlPlay").trigger("click");
ok(player.playHandler.calledTwice, "play handler called");
ok(spy_callback2.calledOnce, "test if pause callback has been called");
});
@@ -56,12 +56,11 @@
this.Popcorn.listen("volumechange", spy_callback);
player.draw();
-
- // IriSP.jQuery("#ldt-CtrlSound").trigger("click");
- player.selector.find(".Ldt-Control2 button:first").next().trigger("click");
+
+ player.selector.find(".ldt-CtrlSound").trigger("click");
ok(this.Popcorn.muted(), "the player is muted");
- player.selector.find("#ldt-CtrlSound").trigger("click");
+ player.selector.find(".ldt-CtrlSound").trigger("click");
ok(!this.Popcorn.muted(), "the player is un muted");
ok(spy_handler.called, "handling function has been called");
});
@@ -84,20 +83,20 @@
player.draw();
- player.selector.find("#ldt-CtrlSearch").trigger("click");
- player.selector.find("#LdtSearchInput").attr('value', searchTerm);
- player.selector.find("#LdtSearchInput").trigger('keyup');
+ player.selector.find(".ldt-CtrlSearch").trigger("click");
+ player.selector.find(".LdtSearchInput").attr('value', searchTerm);
+ player.selector.find(".LdtSearchInput").trigger('keyup');
ok(spy_handler.called, "search button handling function has been called");
ok(spy_open.called, "open signal has been sent");
- ok(spy_callback.called, "search typeahead function has been called");
+ ok(spy_callback.called, "search typeahead function has been called");
ok(spy_callback.calledWith(searchTerm), "popcorn message sent with the right parameters");
- player.selector.find("#LdtSearchInput").attr('value', "");
- player.selector.find("#LdtSearchInput").trigger('keyup');
+ player.selector.find(".LdtSearchInput").attr('value', "");
+ player.selector.find(".LdtSearchInput").trigger('keyup');
ok(spy_cleared.called, "clear message has been sent");
- player.selector.find("#ldt-CtrlSearch").trigger("click");
+ player.selector.find(".ldt-CtrlSearch").trigger("click");
ok(spy_closed.called, "closed signal has been sent");
});