js2/mwEmbed/skins/kskin/kskin.js

   1 /*
   2 * skin js allows you to override contrlBuilder html/class output
   3 */
   4
   5 var kskinConfig = {
   6         pClass: 'k-player',
   7         //display time progres
   8         long_time_disp: false,
   9         body_options: false,
  10         volume_layout: 'horizontal',
  11         components:{
  12                 'play-btn-large' : {
  13                         'h' : 55
  14                 },
  15                 'options':{
  16                         'w':50,
  17                         'o':function(){
  18                                 return '<div class="ui-state-default ui-corner-bl rButton k-options" title="'+ gM('mwe-player_options') + '" >' +
  19                                                         '<span>' + gM('mwe-menu_btn') + '</span>' +
  20                                                 '</div>'
  21                         }
  22                 },
  23                 'time_display':{
  24                         'w':70
  25                 },
  26                 'mv_embedded_options':{
  27                         'w':0,
  28                         'o':function( ctrlObj ){
  29                                 var embedObj = ctrlObj.embedObj;
  30                                 var o= '' +
  31                                 '<div class="k-menu ui-widget-content" ' +
  32                                         'style="width:' + embedObj.playerPixelWidth() + 'px; height:' + embedObj.playerPixelHeight() + 'px;">' +
  33                                                 '<ul class="k-menu-bar">';
  34                                                         //output menu item containers:
  35                                                         for(i=0; i < ctrlObj.menu_items.length; i++){
  36                                                                 var mk = ctrlObj.menu_items[i];
  37                                                                 o+= '<li class="k-' + mk + '-btn" rel="' + mk + '">' +
  38                                                                                 '<a href="#" title="' + gM( 'mwe-' + mk ) +'">' + gM( 'mwe-' + mk ) +'</a></li>';
  39                                                         }
  40                                                 o+='</ul>' +
  41                                                 //we have to substract the width of the k-menu-bar
  42                                                 '<div class="k-menu-screens" style="width:' + ( embedObj.playerPixelWidth() -75) +
  43                                                         'px; height:' + (embedObj.playerPixelHeight() - ctrlBuilder.height) + 'px;">';
  44
  45                                                 //output menu item containers:
  46                                                 for(i=0; i < ctrlObj.menu_items.length; i++){
  47                                                         o+= '<div class="menu-screen menu-' + ctrlObj.menu_items[i] + '"></div>';
  48                                                 }
  49                                                 '</div>' +
  50                                         '</div>';
  51                                 return o;
  52                         }
  53                 }
  54         },
  55         addSkinControlHooks: function(){
  56                 var embedObj = this.embedObj;
  57                 var _this = this;
  58                 var $tp=$j('#' + embedObj.id);
  59
  60                 //adds options and bindings: (we do this onClick for faster vidoe tag startup times)
  61                 var addMvOptions = function(){
  62                         if($j('#' + embedObj.id + ' .k-menu').length != 0 )
  63                                 return false;
  64
  65                         $j('#' + embedObj.id + ' .' + _this.pClass).prepend( _this.components['mv_embedded_options'].o( $tp.get(0).ctrlBuilder ));
  66
  67                         //by default its hidden:
  68                         $tp.find('.k-menu').hide();
  69
  70                         //output menu-items:
  71                         for(i=0; i < _this.menu_items.length ; i++){
  72                         $tp.find('.k-' +  _this.menu_items[i] + '-btn').click(function(){
  73                                 var mk = $j(this).attr('rel');
  74                                 $target = $j('#' + embedObj.id  + ' .menu-'+mk).hide();
  75                                 //gennerate the menu html not already done:
  76                                 if( $target.children().length == 0 ){
  77                                                 //call the function show{Menuitem} with target:
  78                                                 embedObj['show' + mk.charAt(0).toUpperCase() + mk.substring(1)](
  79                                                         $j('#' + embedObj.id + ' .menu-'+mk)
  80                                                 );
  81                                 }
  82                                 //slide out the others
  83                                  $j('#' + embedObj.id  + ' .menu-screen').hide();
  84                                  $target.fadeIn("fast");
  85                                         //don't follow the # link
  86                             return false;
  87                                 });
  88                         }
  89                 }
  90                 //options menu display:
  91                 $tp.find('.k-options').click(function(){
  92                         if($j('#' + embedObj.id + ' .k-menu').length == 0 ){
  93                                 //stop the player if it does not support overlays:
  94                                 if(!embedObj.supports['overlays'])
  95                                         $tp.get(0).stop();
  96                         //add the options
  97                                 addMvOptions();
  98                         }
  99                         //set up the text and menu:
 100                         var $ktxt = $j(this);
 101                         var $kmenu = $tp.find('.k-menu');
 102                         if( $kmenu.is(':visible') ){
 103                                 $kmenu.fadeOut("fast",function(){
 104                                         $ktxt.find('span').html ( gM('mwe-menu_btn') );
 105                                 });
 106                                 $tp.find('.play-btn-large').fadeIn('fast');
 107                         }else{
 108                                 $kmenu.fadeIn("fast", function(){
 109                                         $ktxt.find('span').html ( gM('mwe-close_btn') );
 110                                 });
 111                                 $tp.find('.play-btn-large').fadeOut('fast');
 112                         }
 113                 });
 114
 115         }
 116 }