js2/mwEmbed/skins/kskin/kskin.js

   1 /*
   2 * skin js allows you to override contrlBuilder html/class output
   3 */
   4
   5 loadGM( {
   6         "mwe-credit-title" : "Title: $1",
   7         "mwe-kaltura-platform-title" : "Kaltura open source video platform"
   8 } );
   9
  10 var kskinConfig = {
  11         pClass: 'k-player',
  12         // display time progress
  13         long_time_disp: false,
  14         body_options: false,
  15         volume_layout: 'horizontal',
  16         menu_items:[
  17                 'playerselect',
  18                 'download',
  19                 'share',
  20                 'credits',
  21         ],
  22         components: {
  23                 'play-btn-large' : {
  24                         'h' : 55
  25                 },
  26                 'options': {
  27                         'w':50,
  28                         'o':function() {
  29                                 return '<div class="ui-state-default ui-corner-bl rButton k-options" title="' + gM( 'mwe-player_options' ) + '" >' +
  30                                                         '<span>' + gM( 'mwe-menu_btn' ) + '</span>' +
  31                                                 '</div>'
  32                         }
  33                 },
  34                 'time_display': {
  35                         'w':70
  36                 },
  37                 'mv_embedded_options': {
  38                         'w':0,
  39                         'o':function( ctrlObj ) {
  40                                 var embedObj = ctrlObj.embedObj;
  41                                 var o = '' +
  42                                 '<div class="k-menu ui-widget-content" ' +
  43                                         'style="width:' + embedObj.playerPixelWidth() + 'px; height:' + embedObj.playerPixelHeight() + 'px;">' +
  44                                                 '<ul class="k-menu-bar">';
  45                                                         // output menu item containers:
  46                                                         for ( i = 0; i < ctrlObj.menu_items.length; i++ ) {
  47                                                                 var mk = ctrlObj.menu_items[i];
  48                                                                 o += '<li class="k-' + mk + '-btn" rel="' + mk + '">' +
  49                                                                                 '<a href="#" title="' + gM( 'mwe-' + mk ) + '">' + gM( 'mwe-' + mk ) + '</a></li>';
  50                                                         }
  51                                                 o += '</ul>' +
  52                                                 // We have to subtract the width of the k-menu-bar
  53                                                 '<div class="k-menu-screens" style="width:' + ( embedObj.playerPixelWidth() - 75 ) +
  54                                                         'px; height:' + ( embedObj.playerPixelHeight() - ctrlBuilder.height ) + 'px;">';
  55
  56                                                 // Output menu item containers:
  57                                                 for ( i = 0; i < ctrlObj.menu_items.length; i++ ) {
  58                                                         o += '<div class="menu-screen menu-' + ctrlObj.menu_items[i] + '"></div>';
  59                                                 }
  60                                                 '</div>' +
  61                                         '</div>';
  62                                 return o;
  63                         }
  64                 }
  65         },
  66         /**
  67         * Adds the skin Control Bindings
  68         */
  69         addSkinControlBindings: function() {
  70                 var embedObj = this.embedObj;
  71                 var _this = this;
  72                 var $tp = $j( '#' + embedObj.id );
  73
  74                 // Adds options and bindings: (we do this onClick )
  75                 var addMvOptions = function() {
  76                         if ( $j( '#' + embedObj.id + ' .k-menu' ).length != 0 )
  77                                 return false;
  78
  79                         $j( '#' + embedObj.id + ' .' + _this.pClass ).prepend(
  80                                 _this.components['mv_embedded_options'].o( $tp.get( 0 ).ctrlBuilder )
  81                         );
  82
  83                         // By default its hidden:
  84                         $tp.find( '.k-menu' ).hide();
  85
  86                         // Output menu-items:
  87                         for ( i = 0; i < _this.menu_items.length ; i++ ) {
  88                         $tp.find( '.k-' +  _this.menu_items[i] + '-btn' ).click( function() {
  89                                 var mk = $j( this ).attr( 'rel' );
  90                                 $target = $j( '#' + embedObj.id  + ' .menu-' + mk ).hide();
  91                                 // Generate the menu html not already done:
  92                                 if ( $target.children().length == 0 ) {
  93                                                 // call the function show{Menuitem} with target:
  94                                                 _this.showMenuItem(     mk );
  95                                 }
  96                                 // Slide out the others
  97                                  $j( '#' + embedObj.id  + ' .menu-screen' ).hide();
  98                                  $target.fadeIn( "fast" );
  99                                         // don't follow the # link
 100                             return false;
 101                                 } );
 102                         }
 103                 }
 104
 105                 // Options menu display:
 106                 $tp.find( '.k-options' ).click( function() {
 107                         if ( $j( '#' + embedObj.id + ' .k-menu' ).length == 0 ) {
 108                                 // Stop the player if it does not support overlays:
 109                                 if ( !embedObj.supports['overlay'] )
 110                                         $tp.get( 0 ).stop();
 111                                 // Add the options
 112                                 addMvOptions();
 113                         }
 114                         // Set up the text and menu:
 115                         var $ktxt = $j( this );
 116                         var $kmenu = $tp.find( '.k-menu' );
 117                         if ( $kmenu.is( ':visible' ) ) {
 118                                 $kmenu.fadeOut( "fast", function() {
 119                                         $ktxt.find( 'span' ).html ( gM( 'mwe-menu_btn' ) );
 120                                 } );
 121                                 $tp.find( '.play-btn-large' ).fadeIn( 'fast' );
 122                         } else {
 123                                 $kmenu.fadeIn( "fast", function() {
 124                                         $ktxt.find( 'span' ).html ( gM( 'mwe-close_btn' ) );
 125                                 } );
 126                                 $tp.find( '.play-btn-large' ).fadeOut( 'fast' );
 127                         }
 128                 } );
 129
 130         },
 131         showMenuItem:function( menu_item ) {
 132                 //handle special k-skin specific display;
 133                 if( menu_item == 'credits'){
 134                         this.showCredits();
 135                 }else{
 136                         //call the base embedObj "show{Item}"
 137                         this.embedObj['show' + menu_item.charAt( 0 ).toUpperCase() + menu_item.substring( 1 )](
 138                                 $j( '#' + this.embedObj.id + ' .menu-' + menu_item )
 139                         );
 140                 }
 141         },
 142         // Do the credit screen (presently specific to kaltura skin:)
 143         showCredits:function() {
 144                 //set up the shortcuts:
 145                 embedObj = this.embedObj;
 146                 var _this = this;
 147                 $target = $j( '#' + embedObj.id + ' .menu-credits' );
 148
 149                 $target.html( '<h2>' + gM( 'mwe-credits' ) + '</h2>'  +
 150                         '<div class="credits_box ui-corner-all">' +
 151                                 mv_get_loading_img() +
 152                         '</div>'
 153                 );
 154
 155                 if( mw.conf.k_attribution == true ){
 156                         $target.append(
 157                                 $j('<div/>').addClass( 'k-attribution' )
 158                                 .attr({
 159                                         'title': gM('mwe-kaltura-platform-title')
 160                                 })
 161                                 .click( function(){
 162                                         window.location = 'http://kaltura.com';
 163                                 })
 164                         );
 165                 }
 166
 167                 if( !embedObj.wikiTitleKey ){
 168                         $target.find('.credits_box').text(
 169                                 'Error: no title key to grab credits with'
 170                         );
 171                         return ;
 172                 }
 173                 // Do the api request to populate the credits via the wikiTitleKey ( tied to "commons" )
 174                 var reqObj = {
 175                         'action' : 'query',
 176                         // Normalize the File NS (ie sometimes its present in wikiTitleKey other times not
 177                         'titles' : 'File:' + embedObj.wikiTitleKey.replace(/File:|Image:/, '' ),
 178                     'prop' : 'revisions',
 179                     'rvprop' : 'content'
 180                 };
 181                 var req_categories = new Array();
 182             do_api_req( {
 183                 'url'   : mw.commons_api_url,
 184                         'data'  : reqObj
 185             }, function( data ) {
 186                         if( !data || !data.query || !data.query.pages ){
 187                                 $target.find('.credits_box').text(
 188                                         'Error: title key: ' + embedObj.wikiTitleKey + ' not found'
 189                                 );
 190                                 return false;
 191                         }
 192                         var pages = data.query.pages;
 193                         for(var i in pages){
 194                                 page = pages[ i ];
 195                                 if( page[ 'revisions' ] && page[ 'revisions' ][0]['*'] ){
 196                                         $target.find('.credits_box').html(
 197                                                 _this.doCreditLineFromWikiText( page[ 'revisions' ][0]['*'] )
 198                                         );
 199                                 }
 200                         }
 201             } );
 202         },
 203         doCreditLineFromWikiText:function ( wikiText ){
 204                 var embedObj = this.embedObj;
 205
 206                 // Get the title str
 207                 var titleStr = embedObj.wikiTitleKey.replace(/_/g, ' ');
 208                 var titleLink = 'http://commons.wikimedia.org/wiki/File:' + embedObj.wikiTitleKey;
 209
 210                 // @@FIXME Do a quick check for source line:
 211                 return $j( '<div/>' ).addClass( 'creditline' )
 212                         .append(
 213                                 $j('<a/>').attr({
 214                                         'href' : titleLink,
 215                                         'title' :  titleStr
 216                                 }).html(
 217                                         $j('<img/>').attr( {
 218                                                 'border': 0,
 219                                                 'src' : embedObj.thumbnail,
 220                                         } )
 221                                 )
 222                         )
 223                         .append(
 224                                 $j('<span>').html(
 225                                         gM( 'mwe-credit-title' ,
 226                                                 // We use a div container to easialy get at the built out link
 227                                                 $j('<div>').html(
 228                                                         $j('<a/>').attr({
 229                                                                 'href' : titleLink,
 230                                                                 'title' :  titleStr
 231                                                         }).text( titleStr )
 232                                                 ).html()
 233                                         )
 234                                 )
 235                         );
 236         }
 237 }