| Index: branches/js2-work/phase3/js/mwEmbed/skins/ctrlBuilder.js |
| — | — | @@ -72,17 +72,16 @@ |
| 73 | 73 | embedPlayer.$interface.find('.control-bar').remove(); |
| 74 | 74 | |
| 75 | 75 | // Add some space to control_wrap for the control bar: |
| 76 | | - embedPlayer.$interface.css({ |
| | 76 | + embedPlayer.$interface.css( { |
| 77 | 77 | 'height' : parseInt( embedPlayer.height ) + parseInt( this.height) |
| 78 | | - }); |
| | 78 | + } ); |
| 79 | 79 | embedPlayer.$interface.append( |
| 80 | 80 | $j('<div>') |
| 81 | 81 | .addClass( 'ui-state-default ui-widget-header ui-helper-clearfix control-bar' ) |
| 82 | | - .html( |
| 83 | | - this.buildControls() |
| 84 | | - ) |
| 85 | 82 | .css('display', 'block') |
| 86 | | - ); |
| | 83 | + ); |
| | 84 | + //Add the Controls with their bindings |
| | 85 | + this.addControlComponents(); |
| 87 | 86 | // Add hooks once Controls are in DOM |
| 88 | 87 | this.addControlHooks(); |
| 89 | 88 | }, |
| — | — | @@ -91,12 +90,15 @@ |
| 92 | 91 | * Builds the interface controls |
| 93 | 92 | * @returns the interface html string |
| 94 | 93 | */ |
| 95 | | - buildControls: function(){ |
| | 94 | + addControlComponents: function( ) { |
| 96 | 95 | var _this = this; |
| 97 | 96 | mw.log( 'f:controlsBuilder:: opt:' + this.options ); |
| 98 | 97 | // Set up local pointer to the embedPlayer |
| 99 | 98 | var embedPlayer = this.embedPlayer; |
| 100 | 99 | |
| | 100 | + //Set up local var to control container: |
| | 101 | + var $controlBar = embedPlayer.$interface.find( '.control-bar' ); |
| | 102 | + |
| 101 | 103 | this.available_width = embedPlayer.getPlayerWidth(); |
| 102 | 104 | |
| 103 | 105 | // Make pointer to the embedPlayer |
| — | — | @@ -113,45 +115,47 @@ |
| 114 | 116 | if ( this.external_options && $j( '#mv_vid_options_' + this.id ).length == 0 ){ |
| 115 | 117 | $j( 'body' ).append( this.components[ 'options_menu' ].o( this ) ); |
| 116 | 118 | } |
| 117 | | - |
| 118 | | - var s = ''; |
| 119 | 119 | |
| 120 | 120 | // Build component output: |
| 121 | | - for ( var i in this.components ) { |
| | 121 | + for ( var component_id in this.components ) { |
| 122 | 122 | // Make sure the given components is supported: |
| 123 | | - if ( this.supportedComponets[ i ] ) { |
| 124 | | - if ( this.available_width > this.components[i].w ) { |
| 125 | | - // Special case with playhead don't add unless we have 50px |
| 126 | | - if ( i == 'play_head' && this.available_width < 30 ) |
| | 123 | + if ( this.supportedComponets[ component_id ] ) { |
| | 124 | + if ( this.available_width > this.components[ component_id ].w ) { |
| | 125 | + // Special case with playhead don't add unless we have 30px |
| | 126 | + if ( component_id == 'play_head' && this.available_width < 30 ){ |
| 127 | 127 | continue; |
| 128 | | - s += this.components[i].o( this ); |
| 129 | | - this.available_width -= this.components[i].w; |
| | 128 | + } |
| | 129 | + // Append the component |
| | 130 | + $controlBar.append( |
| | 131 | + _this.getComponent( component_id ) |
| | 132 | + ); |
| | 133 | + |
| | 134 | + this.available_width -= this.components[ component_id ].w; |
| 130 | 135 | } else { |
| 131 | | - mw.log( 'not enough space for control component:' + i ); |
| | 136 | + mw.log( 'Not enough space for control component:' + component_id ); |
| 132 | 137 | } |
| 133 | 138 | } |
| 134 | 139 | } |
| 135 | | - return s; |
| 136 | 140 | }, |
| 137 | | - |
| | 141 | + |
| 138 | 142 | /** |
| 139 | 143 | * Get minimal width for interface overlay |
| 140 | 144 | */ |
| 141 | | - getOverlayWidth: function(){ |
| | 145 | + getOverlayWidth: function( ) { |
| 142 | 146 | return ( this.embedPlayer.getPlayerWidth() < 300 )? 300 : this.embedPlayer.getPlayerWidth(); |
| 143 | 147 | }, |
| 144 | 148 | |
| 145 | 149 | /** |
| 146 | 150 | * Get minimal height for interface overlay |
| 147 | 151 | */ |
| 148 | | - getOverlayHeight: function(){ |
| | 152 | + getOverlayHeight: function( ) { |
| 149 | 153 | return ( this.embedPlayer.getPlayerHeight() < 200 )? 200 : this.embedPlayer.getPlayerHeight(); |
| 150 | 154 | }, |
| 151 | 155 | |
| 152 | 156 | /** |
| 153 | 157 | * Get the control bar height: |
| 154 | 158 | */ |
| 155 | | - getControlBarHeight: function(){ |
| | 159 | + getControlBarHeight: function( ) { |
| 156 | 160 | return this.height; |
| 157 | 161 | }, |
| 158 | 162 | |
| — | — | @@ -159,7 +163,7 @@ |
| 160 | 164 | * addControlHooks |
| 161 | 165 | * Adds control hooks once controls are in the DOM |
| 162 | 166 | */ |
| 163 | | - addControlHooks:function( ) { |
| | 167 | + addControlHooks: function( ) { |
| 164 | 168 | // Set up local pointer to the embedPlayer |
| 165 | 169 | var embedPlayer = this.embedPlayer; |
| 166 | 170 | var _this = this; |
| — | — | @@ -167,77 +171,11 @@ |
| 168 | 172 | // Setup target shortcut to control-bar |
| 169 | 173 | $target = embedPlayer.$interface; |
| 170 | 174 | |
| 171 | | - // Add play hook: |
| 172 | | - $target.find( '.play-btn,.play-btn-large' ).unbind().buttonHover().click( function() { |
| 173 | | - embedPlayer.play(); |
| 174 | | - } ); |
| | 175 | + |
| 175 | 176 | |
| 176 | 177 | // Add recommend firefox if we have non-native playback: |
| 177 | | - if ( _this.doNativeWarningCheck() ) { |
| 178 | | - $j( '#dc_' + embedPlayer.id ).hover( |
| 179 | | - function() { |
| 180 | | - if ( $j( '#gnp_' + embedPlayer.id ).length == 0 ) { |
| 181 | | - var toppos = ( embedPlayer.instanceOf == 'mvPlayList' ) ? 25 : 10; |
| 182 | | - |
| 183 | | - $j( this ).append( |
| 184 | | - $j('<div />') |
| 185 | | - .attr({ |
| 186 | | - 'id': "gnp_" + embedPlayer.id |
| 187 | | - }) |
| 188 | | - .addClass( 'ui-state-highlight ui-corner-all' ) |
| 189 | | - .css({ |
| 190 | | - 'position':'absolute', |
| 191 | | - 'display':'none', |
| 192 | | - 'background':'#FFF', |
| 193 | | - 'color':'#111', |
| 194 | | - 'top' : toppos + 'px', |
| 195 | | - 'left' : '10px', |
| 196 | | - 'right' : '10px' |
| 197 | | - }) |
| 198 | | - .html( gM( 'mwe-for_best_experience' ) ) |
| 199 | | - ); |
| 200 | | - $target_warning = $j( '#gnp_' + embedPlayer.id ); |
| 201 | | - |
| 202 | | - $target_warning.append( |
| 203 | | - $j('<br />') |
| 204 | | - ); |
| 205 | | - |
| 206 | | - |
| 207 | | - $target_warning.append( |
| 208 | | - $j( '<input />' ) |
| 209 | | - .attr({ |
| 210 | | - 'id' : 'ffwarn_' + embedPlayer.id, |
| 211 | | - 'type' : "checkbox", |
| 212 | | - 'name' : 'ffwarn_' + embedPlayer.id |
| 213 | | - }) |
| 214 | | - .click( function() { |
| 215 | | - if ( $j( this ).is( ':checked' ) ) { |
| 216 | | - // Set up a cookie for 7 days: |
| 217 | | - $j.cookie( 'show_player_warning', false, { expires: 7 } ); |
| 218 | | - // Set the current instance |
| 219 | | - mw.setConfig( 'show_player_warning', false ); |
| 220 | | - $j( '#gnp_' + embedPlayer.id ).fadeOut( 'slow' ); |
| 221 | | - } else { |
| 222 | | - mw.setConfig( 'show_player_warning', true ); |
| 223 | | - $j.cookie( 'show_player_warning', true ); |
| 224 | | - } |
| 225 | | - } ) |
| 226 | | - ); |
| 227 | | - $target_warning.append( |
| 228 | | - $j('<span />') |
| 229 | | - .text( gM( 'mwe-do_not_warn_again' ) ) |
| 230 | | - ) |
| 231 | | - } |
| 232 | | - |
| 233 | | - // Only show the warning if cookie and config are true |
| 234 | | - if ( mw.getConfig( 'show_player_warning' ) === true ){ |
| 235 | | - $j( '#gnp_' + embedPlayer.id ).fadeIn( 'slow' ); |
| 236 | | - } |
| 237 | | - }, |
| 238 | | - function() { |
| 239 | | - $j( '#gnp_' + embedPlayer.id ).fadeOut( 'slow' ); |
| 240 | | - } |
| 241 | | - ); |
| | 178 | + if ( _this.checkNativeWarning( ) ) { |
| | 179 | + _this.doNativeWarning(); |
| 242 | 180 | } |
| 243 | 181 | |
| 244 | 182 | if ( $j.browser.msie && $j.browser.version <= 6 ) { |
| — | — | @@ -354,12 +292,13 @@ |
| 355 | 293 | } ); |
| 356 | 294 | return false; // onclick action return false |
| 357 | 295 | }, |
| | 296 | + |
| 358 | 297 | /** |
| 359 | | - * check if a warning should be issued to non-native playback systems |
| | 298 | + * Check if a warning should be issued to non-native playback systems |
| 360 | 299 | * |
| 361 | 300 | * dependent on mediaElement being setup |
| 362 | 301 | */ |
| 363 | | - doNativeWarningCheck: function( ) { |
| | 302 | + checkNativeWarning: function( ) { |
| 364 | 303 | // Check cookie to see if user requested to hide it |
| 365 | 304 | if ( $j.cookie( 'show_player_warning' ) == 'false' ) { |
| 366 | 305 | return false; |
| — | — | @@ -395,9 +334,83 @@ |
| 396 | 335 | }, |
| 397 | 336 | |
| 398 | 337 | /** |
| | 338 | + * Does a native warning check binding to the player on mouse over. |
| | 339 | + */ |
| | 340 | + doNativeWarning: function( ) { |
| | 341 | + // Set up local pointer to the embedPlayer |
| | 342 | + var embedPlayer = this.embedPlayer; |
| | 343 | + var _this = this; |
| | 344 | + |
| | 345 | + $j( '#dc_' + embedPlayer.id ).hover( |
| | 346 | + function() { |
| | 347 | + if ( $j( '#gnp_' + embedPlayer.id ).length == 0 ) { |
| | 348 | + var toppos = ( embedPlayer.instanceOf == 'mvPlayList' ) ? 25 : 10; |
| | 349 | + |
| | 350 | + $j( this ).append( |
| | 351 | + $j('<div />') |
| | 352 | + .attr({ |
| | 353 | + 'id': "gnp_" + embedPlayer.id |
| | 354 | + }) |
| | 355 | + .addClass( 'ui-state-highlight ui-corner-all' ) |
| | 356 | + .css({ |
| | 357 | + 'position':'absolute', |
| | 358 | + 'display':'none', |
| | 359 | + 'background':'#FFF', |
| | 360 | + 'color':'#111', |
| | 361 | + 'top' : toppos + 'px', |
| | 362 | + 'left' : '10px', |
| | 363 | + 'right' : '10px' |
| | 364 | + }) |
| | 365 | + .html( gM( 'mwe-for_best_experience' ) ) |
| | 366 | + ); |
| | 367 | + $target_warning = $j( '#gnp_' + embedPlayer.id ); |
| | 368 | + |
| | 369 | + $target_warning.append( |
| | 370 | + $j('<br />') |
| | 371 | + ); |
| | 372 | + |
| | 373 | + |
| | 374 | + $target_warning.append( |
| | 375 | + $j( '<input />' ) |
| | 376 | + .attr({ |
| | 377 | + 'id' : 'ffwarn_' + embedPlayer.id, |
| | 378 | + 'type' : "checkbox", |
| | 379 | + 'name' : 'ffwarn_' + embedPlayer.id |
| | 380 | + }) |
| | 381 | + .click( function() { |
| | 382 | + if ( $j( this ).is( ':checked' ) ) { |
| | 383 | + // Set up a cookie for 7 days: |
| | 384 | + $j.cookie( 'show_player_warning', false, { expires: 7 } ); |
| | 385 | + // Set the current instance |
| | 386 | + mw.setConfig( 'show_player_warning', false ); |
| | 387 | + $j( '#gnp_' + embedPlayer.id ).fadeOut( 'slow' ); |
| | 388 | + } else { |
| | 389 | + mw.setConfig( 'show_player_warning', true ); |
| | 390 | + $j.cookie( 'show_player_warning', true ); |
| | 391 | + } |
| | 392 | + } ) |
| | 393 | + ); |
| | 394 | + $target_warning.append( |
| | 395 | + $j('<span />') |
| | 396 | + .text( gM( 'mwe-do_not_warn_again' ) ) |
| | 397 | + ) |
| | 398 | + } |
| | 399 | + |
| | 400 | + // Only show the warning if cookie and config are true |
| | 401 | + if ( mw.getConfig( 'show_player_warning' ) === true ){ |
| | 402 | + $j( '#gnp_' + embedPlayer.id ).fadeIn( 'slow' ); |
| | 403 | + } |
| | 404 | + }, |
| | 405 | + function() { |
| | 406 | + $j( '#gnp_' + embedPlayer.id ).fadeOut( 'slow' ); |
| | 407 | + } |
| | 408 | + ); |
| | 409 | + }, |
| | 410 | + |
| | 411 | + /** |
| 399 | 412 | * Binds the volume controls |
| 400 | 413 | */ |
| 401 | | - doVolumeBinding:function() { |
| | 414 | + doVolumeBinding: function( ) { |
| 402 | 415 | var embedPlayer = this.embedPlayer; |
| 403 | 416 | var _this = this; |
| 404 | 417 | embedPlayer.$interface.find( '.volume_control' ).unbind().buttonHover().click( function() { |
| — | — | @@ -454,8 +467,9 @@ |
| 455 | 468 | } |
| 456 | 469 | } |
| 457 | 470 | |
| 458 | | - if ( this.volume_layout == 'vertical' ) |
| | 471 | + if ( this.volume_layout == 'vertical' ) { |
| 459 | 472 | sliderConf[ 'orientation' ] = "vertical"; |
| | 473 | + } |
| 460 | 474 | |
| 461 | 475 | embedPlayer.$interface.find( '.volume-slider' ).slider( sliderConf ); |
| 462 | 476 | }, |
| — | — | @@ -474,9 +488,9 @@ |
| 475 | 489 | * |
| 476 | 490 | * @param {String} component Component key to grab html output |
| 477 | 491 | */ |
| 478 | | - getComponent:function( component ) { |
| 479 | | - if ( this.components[ component ] ) { |
| 480 | | - return this.components[ component ].o( this ); |
| | 492 | + getComponent: function( component_id ) { |
| | 493 | + if ( this.components[ component_id ] ) { |
| | 494 | + return this.components[ component_id ].o( this ); |
| 481 | 495 | } else { |
| 482 | 496 | return false; |
| 483 | 497 | } |
| — | — | @@ -484,29 +498,38 @@ |
| 485 | 499 | |
| 486 | 500 | /** |
| 487 | 501 | * Components Object |
| 488 | | - * Take in the embedPlayer and return some html for the given component. |
| | 502 | + * Take in the embedPlayer and return some html for the given component. |
| 489 | 503 | * |
| 490 | 504 | * components can be overwritten by skin javascript |
| | 505 | + * |
| | 506 | + * Component JSON structure is as follows: |
| | 507 | + * 'o' Function to return a binded jQuery object ( accepts the ctrlObject as a parameter ) |
| | 508 | + * 'w' The width of the component |
| | 509 | + * 'h' The height of the component ( if height is undefined the height of the control bar is used ) |
| 491 | 510 | */ |
| 492 | 511 | components: { |
| 493 | | - /* |
| | 512 | + /** |
| 494 | 513 | * The large play button in center of the player |
| 495 | 514 | */ |
| 496 | 515 | 'play-btn-large': { |
| 497 | 516 | 'w' : 130, |
| 498 | 517 | 'h' : 96, |
| 499 | | - 'o':function( ctrlObj ) { |
| | 518 | + 'o' : function( ctrlObj ) { |
| 500 | 519 | // Get dynamic position for big play button |
| 501 | | - return $j( '<div/>' ).attr( { |
| 502 | | - 'title' : gM( 'mwe-play_clip' ), |
| 503 | | - 'class' : "ui-state-default play-btn-large" |
| 504 | | - } ) |
| 505 | | - .css( { |
| 506 | | - 'left' : ( ( ctrlObj.embedPlayer.getPlayerWidth() - this.w ) / 2 ), |
| 507 | | - 'top' : ( ( ctrlObj.embedPlayer.getPlayerHeight() - this.h ) / 2 ) |
| 508 | | - } ) |
| 509 | | - .wrap( '<div/>' ).parent().html(); |
| 510 | | - } |
| | 520 | + return $j( '<div/>' ) |
| | 521 | + .attr( { |
| | 522 | + 'title' : gM( 'mwe-play_clip' ), |
| | 523 | + 'class' : "ui-state-default play-btn-large" |
| | 524 | + } ) |
| | 525 | + .css( { |
| | 526 | + 'left' : ( ( ctrlObj.embedPlayer.getPlayerWidth() - this.w ) / 2 ), |
| | 527 | + 'top' : ( ( ctrlObj.embedPlayer.getPlayerHeight() - this.h ) / 2 ) |
| | 528 | + } ) |
| | 529 | + // Add play hook: |
| | 530 | + .buttonHover().click( function() { |
| | 531 | + ctrlObj.embedPlayer.play(); |
| | 532 | + } ); |
| | 533 | + } |
| 511 | 534 | }, |
| 512 | 535 | |
| 513 | 536 | /** |
| — | — | @@ -514,8 +537,8 @@ |
| 515 | 538 | * download, and share options |
| 516 | 539 | */ |
| 517 | 540 | 'options_menu': { |
| 518 | | - 'w':0, |
| 519 | | - 'o':function( ctrlObj ) { |
| | 541 | + 'w' : 0, |
| | 542 | + 'o' : function( ctrlObj ) { |
| 520 | 543 | var o = '<div id="mv_vid_options_' + ctrlObj.embedPlayer.id + '" class="videoOptions">' + |
| 521 | 544 | '<div class="videoOptionsTop"></div>' + |
| 522 | 545 | '<div class="videoOptionsBox">' + |
| — | — | @@ -543,11 +566,15 @@ |
| 544 | 567 | * The options button, invokes display of the options menu |
| 545 | 568 | */ |
| 546 | 569 | 'options': { |
| 547 | | - 'w':28, |
| 548 | | - 'o':function( ctrlObj ) { |
| 549 | | - return '<div title="' + gM( 'mwe-player_options' ) + '" class="ui-state-default ui-corner-all ui-icon_link rButton options-btn">' + |
| 550 | | - '<span class="ui-icon ui-icon-wrench"></span>' + |
| 551 | | - '</div>'; |
| | 570 | + 'w': 28, |
| | 571 | + 'o': function( ctrlObj ) { |
| | 572 | + return $j( '<div />' ) |
| | 573 | + .attr( 'title', gM( 'mwe-player_options' ) ) |
| | 574 | + .addClass( 'ui-state-default ui-corner-all ui-icon_link rButton options-btn' ) |
| | 575 | + .append( |
| | 576 | + $j('<span />') |
| | 577 | + .addClass( 'ui-icon ui-icon-wrench' ) |
| | 578 | + ) |
| 552 | 579 | } |
| 553 | 580 | }, |
| 554 | 581 | |
| — | — | @@ -555,59 +582,91 @@ |
| 556 | 583 | * The fullscreen button for displaying the video fullscreen |
| 557 | 584 | */ |
| 558 | 585 | 'fullscreen': { |
| 559 | | - 'w':28, |
| 560 | | - 'o':function( ctrlObj ) { |
| 561 | | - return '<div title="' + gM( 'mwe-player_fullscreen' ) + '" class="ui-state-default ui-corner-all ui-icon_link rButton fullscreen-btn">' + |
| 562 | | - '<span class="ui-icon ui-icon-arrow-4-diag"></span>' + |
| 563 | | - '</div>' |
| | 586 | + 'w': 28, |
| | 587 | + 'o': function( ctrlObj ) { |
| | 588 | + return $j( '<div />' ) |
| | 589 | + .attr( 'title', gM( 'mwe-player_fullscreen' ) ) |
| | 590 | + .addClass( "ui-state-default ui-corner-all ui-icon_link rButton fullscreen-btn" ) |
| | 591 | + .append( |
| | 592 | + $j( '<span />' ) |
| | 593 | + .addClass( "ui-icon ui-icon-arrow-4-diag" ) |
| | 594 | + ) |
| 564 | 595 | } |
| 565 | 596 | }, |
| 566 | 597 | |
| 567 | 598 | |
| 568 | 599 | /** |
| 569 | | - * The pause button |
| | 600 | + * The pause / play button |
| 570 | 601 | */ |
| 571 | 602 | 'pause': { |
| 572 | | - 'w':28, |
| 573 | | - 'o':function( ctrlObj ) { |
| 574 | | - return '<div title="' + gM( 'mwe-play_clip' ) + '" class="ui-state-default ui-corner-all ui-icon_link lButton play-btn">' + |
| 575 | | - '<span class="ui-icon ui-icon-play"/>' + |
| 576 | | - '</div>'; |
| | 603 | + 'w': 28, |
| | 604 | + 'o': function( ctrlObj ) { |
| | 605 | + return $j( '<div />' ) |
| | 606 | + .attr( 'title', gM( 'mwe-play_clip' ) ) |
| | 607 | + .addClass ( "ui-state-default ui-corner-all ui-icon_link lButton play-btn" ) |
| | 608 | + .append( |
| | 609 | + $j( '<span />' ) |
| | 610 | + .addClass( "ui-icon ui-icon-play" ) |
| | 611 | + ) |
| 577 | 612 | } |
| 578 | 613 | }, |
| 579 | 614 | |
| 580 | | - /* |
| | 615 | + /** |
| 581 | 616 | * The closed captions button |
| 582 | 617 | */ |
| 583 | 618 | 'timed_text': { |
| 584 | | - 'w':28, |
| 585 | | - 'o':function( ctrlObj ) { |
| 586 | | - return '<div title="' + gM( 'mwe-timed_text' ) + '" class="ui-state-default ui-corner-all ui-icon_link rButton timed-text">' + |
| 587 | | - '<span class="ui-icon ui-icon-comment"></span>' + |
| 588 | | - '</div>' |
| | 619 | + 'w': 28, |
| | 620 | + 'o': function( ctrlObj ) { |
| | 621 | + return $j( '<div />' ) |
| | 622 | + .attr( 'title', gM( 'mwe-timed_text' ) ) |
| | 623 | + .addClass( "ui-state-default ui-corner-all ui-icon_link rButton timed-text" ) |
| | 624 | + .append( |
| | 625 | + $j( '<span />' ) |
| | 626 | + .addClass( "ui-icon ui-icon-comment" ) |
| | 627 | + ) |
| 589 | 628 | } |
| 590 | 629 | }, |
| 591 | 630 | |
| 592 | | - /* |
| | 631 | + /** |
| 593 | 632 | * The volume control interface html |
| 594 | 633 | */ |
| 595 | 634 | 'volume_control': { |
| 596 | | - 'w':28, |
| 597 | | - 'o':function( ctrlObj ) { |
| 598 | | - var o = ''; |
| 599 | | - if ( ctrlObj.volume_layout == 'horizontal' ) |
| 600 | | - o += '<div class="ui-slider ui-slider-horizontal rButton volume-slider"></div>'; |
| 601 | | - |
| 602 | | - o += '<div title="' + gM( 'mwe-volume_control' ) + '" class="ui-state-default ui-corner-all ui-icon_link rButton volume_control">' + |
| 603 | | - '<span class="ui-icon ui-icon-volume-on"></span>'; |
| | 635 | + 'w' : 28, |
| | 636 | + 'o' : function( ctrlObj ) { |
| | 637 | + $volumeOut = $j( '<div />' ); |
| | 638 | + if ( ctrlObj.volume_layout == 'horizontal' ) { |
| | 639 | + $volumeOut.append( |
| | 640 | + $j( '<div />' ) |
| | 641 | + .addClass( "ui-slider ui-slider-horizontal rButton volume-slider" ) |
| | 642 | + ); |
| | 643 | + } |
| | 644 | + // Add the volume control icon |
| | 645 | + $volumeOut.append( |
| | 646 | + $j('<div />') |
| | 647 | + .attr( 'title', gM( 'mwe-volume_control' ) ) |
| | 648 | + .addClass( "ui-state-default ui-corner-all ui-icon_link rButton volume_control" ) |
| | 649 | + .append( |
| | 650 | + $j( '<span />' ) |
| | 651 | + .addClass( "ui-icon ui-icon-volume-on" ) |
| | 652 | + ) |
| | 653 | + ); |
| 604 | 654 | |
| 605 | 655 | if ( ctrlObj.volume_layout == 'vertical' ) { |
| 606 | | - o += '<div style="position:absolute;display:none;left:0px;" class="vol_container ui-corner-all">' + |
| 607 | | - '<div class="volume-slider" ></div>' + |
| 608 | | - '</div>'; |
| 609 | | - } |
| 610 | | - o += '</div>'; |
| 611 | | - return o; |
| | 656 | + $volumeOut.append( |
| | 657 | + $j( '<div />' ) |
| | 658 | + .css( { |
| | 659 | + 'position' : 'absolute', |
| | 660 | + 'display' : 'none', |
| | 661 | + 'left' : '0px;' |
| | 662 | + }) |
| | 663 | + .addClass( "vol_container ui-corner-all" ) |
| | 664 | + .append( |
| | 665 | + $j( '<div />' ) |
| | 666 | + .addClass ( "volume-slider" ) |
| | 667 | + ) |
| | 668 | + ); |
| | 669 | + } |
| | 670 | + return $volumeOut; |
| 612 | 671 | } |
| 613 | 672 | }, |
| 614 | 673 | |
| — | — | @@ -617,7 +676,12 @@ |
| 618 | 677 | 'time_display': { |
| 619 | 678 | 'w':90, |
| 620 | 679 | 'o':function( ctrlObj ) { |
| 621 | | - return '<div class="ui-widget time-disp">' + ctrlObj.embedPlayer.getTimeRange() + '</div>'; |
| | 680 | + return $j( '<div />' ) |
| | 681 | + .addClass( "ui-widget time-disp" ) |
| | 682 | + .append( |
| | 683 | + ctrlObj.embedPlayer.getTimeRange() |
| | 684 | + ) |
| | 685 | + |
| 622 | 686 | } |
| 623 | 687 | }, |
| 624 | 688 | /* |
| — | — | @@ -626,7 +690,9 @@ |
| 627 | 691 | 'play_head': { |
| 628 | 692 | 'w':0, // special case (takes up remaining space) |
| 629 | 693 | 'o':function( ctrlObj ) { |
| 630 | | - return '<div class="play_head" style="width: ' + ( ctrlObj.available_width - 20 ) + 'px;"></div>'; |
| | 694 | + return $j( '<div />' ) |
| | 695 | + .addClass ( "play_head" ) |
| | 696 | + .css( "width", parseInt( ctrlObj.available_width - 20 ) + 'px' ) |
| 631 | 697 | } |
| 632 | 698 | } |
| 633 | 699 | } |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/AddMedia/loader.js |
| — | — | @@ -2,7 +2,7 @@ |
| 3 | 3 | * Loader for libAddMedia module: |
| 4 | 4 | */ |
| 5 | 5 | |
| 6 | | -// Scope everythign in "mw" ( keeps the global namespace clean ) |
| | 6 | +// Scope everything in "mw" ( keeps the global namespace clean ) |
| 7 | 7 | ( function( mw ) { |
| 8 | 8 | |
| 9 | 9 | mw.addMessages( { |
| — | — | @@ -86,7 +86,8 @@ |
| 87 | 87 | * |
| 88 | 88 | * Includes both firefogg & firefogg "GUI" which share some loading logic: |
| 89 | 89 | */ |
| 90 | | - |
| | 90 | + |
| | 91 | + // Clone the baseUploadlibs array |
| 91 | 92 | var mwBaseFirefoggReq = baseUploadlibs.slice( 0 ) |
| 92 | 93 | mwBaseFirefoggReq[0].push('mw.Firefogg'); |
| 93 | 94 | |
| Index: branches/js2-work/phase3/js/mwEmbed/mwEmbed.js |
| — | — | @@ -1807,7 +1807,6 @@ |
| 1808 | 1808 | * Wrapper for jQuery getScript, |
| 1809 | 1809 | * Uses the scriptLoader if enabled |
| 1810 | 1810 | * |
| 1811 | | - * If jQuery is not ready load it. |
| 1812 | 1811 | * |
| 1813 | 1812 | * @param {String} scriptRequest The requested path or classNames for the scriptLoader |
| 1814 | 1813 | * @param {Function} callback Function to call once script is loaded |
| — | — | @@ -1817,13 +1816,15 @@ |
| 1818 | 1817 | // Set the base url based scriptLoader availability & type of scriptRequest |
| 1819 | 1818 | // ( presently script loader only handles "classes" not relative urls: |
| 1820 | 1819 | var slpath = mw.getScriptLoaderPath(); |
| 1821 | | - // Check if its a relative path name, ( ie does not start with "/" and does not include :// |
| 1822 | | - var isRelativePath = ( scriptRequest.indexOf('://') == -1 && scriptRequest.indexOf('/') !== 0 )? true : false; |
| 1823 | | - if( slpath && isRelativePath ) { |
| | 1820 | + |
| | 1821 | + // Check if its a class name, ( ie does not start with "/" and does not include :// |
| | 1822 | + var isClassName = ( scriptRequest.indexOf('://') == -1 && scriptRequest.indexOf('/') !== 0 )? true : false; |
| | 1823 | + |
| | 1824 | + if( slpath && isClassName ) { |
| 1824 | 1825 | url = slpath + '?class=' + scriptRequest; |
| 1825 | 1826 | }else{ |
| 1826 | 1827 | // Add the mwEmbed path if a relative path request |
| 1827 | | - url = ( isRelativePath )? mw.getMwEmbedPath() : ''; |
| | 1828 | + url = ( isClassName ) ? mw.getMwEmbedPath() : ''; |
| 1828 | 1829 | url+= scriptRequest; |
| 1829 | 1830 | } |
| 1830 | 1831 | |
| — | — | @@ -1835,7 +1836,7 @@ |
| 1836 | 1837 | mw.log( 'mw.getScript: ' + url ); |
| 1837 | 1838 | // If jQuery is available and debug is off load the scirpt via jQuery |
| 1838 | 1839 | //( will use XHR if on same domain ) |
| 1839 | | - if( mw.isset( 'window.jQuery' ) && mw.getConfig( 'debug' ) === false ) { |
| | 1840 | + if( mw.isset( 'window.jQuery' ) && mw.getConfig( 'debug' ) === false ) { |
| 1840 | 1841 | $j.getScript( url, function(){ |
| 1841 | 1842 | if( callback ) |
| 1842 | 1843 | callback( scriptRequest ); |
| — | — | @@ -2126,7 +2127,6 @@ |
| 2127 | 2128 | |
| 2128 | 2129 | // If we're in debug mode, get a fresh unique request key and pass on "debug" param |
| 2129 | 2130 | if ( mw.parseUri( mwEmbedSrc ).queryKey['debug'] == 'true' ) { |
| 2130 | | - |
| 2131 | 2131 | mw.setConfig( 'debug', true ); |
| 2132 | 2132 | var d = new Date(); |
| 2133 | 2133 | req_param += 'urid=' + d.getTime() + '&debug=true'; |