js2/mwEmbed/libSequencer/mvTimedEffectsEdit.js

   1 /*
   2 * mvTimedEffectsEdit
   3 *
   4 * for now just simple single stack transition control
   5 *
   6 */
   7
   8 // add our local msgs
   9 loadGM( {
  10         "mwe-transition_in" : "Transition in",
  11         "mwe-transition_out" : "Transition out",
  12         "mwe-effects" : "Effects stack",
  13         "mwe-remove_transition" : "Remove transition",
  14         "mwe-edit_transin" : "Edit transition into clip",
  15         "mwe-edit_transout" : "Edit transition out of clip",
  16         "mwe-add-transition" : "Add a transition"
  17 } );
  18
  19 var default_timed_effect_values = {
  20         'rObj': null,            // the resource object
  21         'clip_disp_ct':null, // target clip disp
  22         'control_ct':null,       // control container
  23
  24         'parent_ct': null,       // parent container
  25         'pSeq': null,    // parent sequence Object
  26
  27         'edit_action': null, // the requested edit action
  28 };
  29
  30 var mvTimedEffectsEdit = function( iObj ) {
  31         return this.init( iObj );
  32 };
  33 // set up the mvSequencer object
  34 mvTimedEffectsEdit.prototype = {
  35         // the menu_items Object contains: default html, js setup/loader functions
  36         menu_items : {
  37                 'transin': {
  38                         'title':gM( 'mwe-transition_in' ),
  39                         'clip_attr':'transIn',
  40                         'doEdit':function( _this ) {
  41                                 _this.doTransitionDisplayEdit( 'transin' );
  42                         }
  43                 },
  44                 'transout': {
  45                         'title':gM( 'mwe-transition_out' ),
  46                         'clip_attr':'transOut',
  47                         'doEdit':function( _this ) {
  48                                 _this.doTransitionDisplayEdit( 'transout' );
  49                         }
  50                 },
  51                 'effects': {
  52                         'title':gM( 'mwe-effects' ),
  53                         'clip_attr':'Effects',
  54                         'doEdit':function( _this ) {
  55                                 // display
  56                                 _this.doEditEffectDisplayEdit();
  57                         }
  58                 }
  59         },
  60         init:function( iObj ) {
  61                 // init object:
  62                 for ( var i in default_timed_effect_values ) {
  63                         if ( iObj[i] ) {
  64                                 this[i] = iObj[i];
  65                         }
  66                 }
  67                 this.doEditMenu();
  68         },
  69         doEditMenu:function() {
  70                 js_log( 'mvTimedEffects : doEditMenu::' );
  71                 var _this = this;
  72                 // add in subMenus if set
  73                 // check for submenu and add to item container
  74
  75                 // update the default edit display (if we have a target)
  76                 var tTarget = 'transin';
  77                 if ( this.rObj.transOut )
  78                         tTarget = 'transout';
  79                 if ( this.rObj.effects )
  80                         tTarget = 'effects';
  81
  82                 var o = '';
  83                 var tabc = '';
  84                 o += '<div id="mv_submenu_timedeffect">';
  85                 o += '<ul>';
  86                 var inx = 0;
  87                 var selected_tab = 0;
  88                 $j.each( this.menu_items, function( sInx, mItem ) {
  89                         if ( sInx == tTarget ) {
  90                                 selected_tab = inx;
  91                         }
  92                         // check if the given editType is valid for our given media type
  93                         o +=    '<li>' +
  94                                         '<a id="mv_te_' + sInx + '" href="#te_' + sInx + '">' + mItem.title + '</a>' +
  95                                 '</li>';
  96                         tabc += '<div id="te_' + sInx + '" style="overflow:auto;" ></div>';
  97                         inx++;
  98                 } );
  99                 o += '</ul>' + tabc;
 100                 o += '</div>';
 101                 // add sub menu container with menu html:
 102                 $j( '#' + this.control_ct ).html( o ) ;
 103                 js_log( 'should have set: #' + this.control_ct + ' to: ' + o );
 104                 // set up bindins:
 105                 $j( '#mv_submenu_timedeffect' ).tabs( {
 106                         selected: selected_tab,
 107                         select: function( event, ui ) {
 108                                 _this.doDisplayEdit( $j( ui.tab ).attr( 'id' ).replace( 'mv_te_', '' ) );
 109                         }
 110                 } ).addClass( 'ui-tabs-vertical ui-helper-clearfix' );
 111                 // close left:
 112                 $j( "#mv_submenu_clipedit li" ).removeClass( 'ui-corner-top' ).addClass( 'ui-corner-left' );
 113                 _this.doDisplayEdit( tTarget );
 114         },
 115         doDisplayEdit:function( tab_id ) {
 116                 // @@todo fix the double display of doDisplayEdit
 117                 js_log( "doDisplayEdit::" );
 118                 if ( !this.menu_items[ tab_id ] ) {
 119                         js_log( 'error: doDisplayEdit missing item:' + tab_id );
 120                 } else {
 121                         // use the menu_item config to map to function display
 122                         this.menu_items[tab_id].doEdit( this );
 123                 }
 124         },
 125         doEditEffectDisplayEdit:function() {
 126                 var _this = this;
 127                 var appendTarget = '#te_effects';
 128                 js_log( 'type:' + _this.rObj['type'] );
 129                 $j( appendTarget ).html( gM( 'mwe-loading_txt' ) );
 130                 // @@todo integrate into core and loading system:
 131                 loadExternalJs( mv_embed_path + 'libClipEdit/pixastic-editor/editor.js?' + getMwReqParam() );
 132                 loadExternalJs( mv_embed_path + 'libClipEdit/pixastic-editor/pixastic.all.js?' + getMwReqParam() );
 133                 loadExternalJs( mv_embed_path + 'libClipEdit/pixastic-editor/ui.js?' + getMwReqParam() );
 134                 loadExternalJs( mv_embed_path + 'libClipEdit/pixastic-editor/uidata.js?' + getMwReqParam() );
 135                 loadExternalCss( mv_embed_path + 'libClipEdit/pixastic-editor/pixastic.all.js?' + getMwReqParam() );
 136
 137                 var isPixasticReady = function() {
 138                         if ( typeof PixasticEditor != 'undefined' ) {
 139                                 $j( appendTarget ).html( '<a href="#" class="run_effect_demo">Run Pixastic Editor Demo</a> (not yet fully integrated/ super alpha)<br> best to view <a href="http://www.pixastic.com/editor-test/">stand alone</a>' );
 140                                 $j( appendTarget + ' .run_effect_demo' ).click( function() {
 141                                         var cat = _this;
 142                                         var imgElm = $j( '.clip_container:visible  img' ).get( 0 );
 143                                         PixasticEditor.load( imgElm );
 144                                 } );
 145                         } else {
 146                                 setTimeout( isPixasticReady, 100 )
 147                         }
 148                 }
 149                 isPixasticReady();
 150         },
 151         doTransitionDisplayEdit:function( target_item ) {
 152                 var _this = this;
 153                 js_log( "doTransitionDisplayEdit: " + target_item );
 154                 var apendTarget = '#te_' + target_item;
 155                 // check if we have a transition of type clip_attr
 156                 if ( !this.rObj[ this.menu_items[ target_item ].clip_attr ] ) {
 157                         // empty append the transition list:
 158                         this.getTransitionListControl( apendTarget );
 159                         return ;
 160                 }
 161                 var cTran = this.rObj[ this.menu_items[ target_item ].clip_attr ];
 162                 var o = '<h3>' + gM( 'mwe-edit_' + target_item ) + '</h3>';
 163                 o += 'Type: ' +
 164                         '<select class="te_select_type">';
 165                 for ( var typeKey in mvTransLib.type ) {
 166                         var selAttr = ( cTran.type == typeKey ) ? ' selected':'';
 167                         o += '<option   value="' + typeKey + '"' + selAttr + '>' + typeKey + '</option>';
 168                 }
 169                 o += '</select><br>';
 170                 o += '<span class="te_subtype_container"></span>';
 171
 172                 // add html and select bindings
 173                 $j( apendTarget ).html( o ).children( '.te_select_type' )
 174                         .change( function() {
 175                                 var selectedType = $j( this ).val();
 176                                 // update subtype listing:
 177                                 _this.getSubTypeControl( target_item, selectedType, apendTarget + ' .te_subtype_container' );
 178                         } );
 179                 // add subtype control
 180                 _this.getSubTypeControl( target_item, cTran.type, apendTarget + ' .te_subtype_container' );
 181
 182                 // add remove transition button:
 183                 $j( apendTarget ).append( '<br><br>' + $j.btnHtml( gM( 'mwe-remove_transition' ), 'te_remove_transition', 'close'  ) )
 184                         .children( '.te_remove_transition' )
 185                         .click( function() {
 186                                 // remove the transtion from the playlist
 187                                 _this.pSeq.plObj.transitions[cTran.id] = null;
 188                                 // remove the transtion from the clip:
 189                                 _this.rObj[ _this.menu_items[ target_item ].clip_attr ] = null;
 190                                 // update the interface:
 191                                 _this.doTransitionDisplayEdit( target_item );
 192                                 // update the sequence
 193                                 _this.pSeq.do_refresh_timeline();
 194                         } );
 195         },
 196         getSubTypeControl:function( target_item, transition_type, htmlTarget ) {
 197                 var _this = this;
 198                 var cTran = this.rObj[ this.menu_items[ target_item ].clip_attr ];
 199                 var o = 'Sub Type:<select class="te_subtype_select">';
 200                 for ( var subTypeKey in mvTransLib.type[ transition_type ] ) {
 201                         var selAttr = ( cTran.subtype == subTypeKey ) ? ' selected' : '';
 202                         o += '<option   value="' + subTypeKey + '"' + selAttr + '>' + subTypeKey + '</option>';
 203                 }
 204                 o += '</select><br>';
 205                 $j( htmlTarget ).html( o )
 206                         .children( '.te_subtype_select' )
 207                         .change( function() {
 208                                 // update the property
 209                                 cTran.subtype = $j( this ).val();
 210                                 // re-gen timeline / playlist
 211                                 _this.pSeq.do_refresh_timeline();
 212                                 // (re-select self?)
 213                                 _this.getSubTypeControl( target_item, transition_type, htmlTarget );
 214                 } );
 215                 var o = '';
 216                 // check for extra properties control:
 217                 for ( var i = 0; i < mvTransLib.type[ transition_type ][ cTran.subtype ].attr.length; i++ ) {
 218                         var tAttr = mvTransLib.type[ transition_type ][ cTran.subtype ].attr[i]
 219                         switch( tAttr ) {
 220                                 case 'fadeColor':
 221                                         var cColor = ( cTran['fadeColor'] ) ? cTran['fadeColor']:'';
 222                                         $j( htmlTarget ).append( 'Select Color: <div class="colorSelector"><div class="colorIndicator" style="background-color: ' + cColor + '"></div></div>' );
 223                                         js_log( 'cs target: ' + htmlTarget + ' .colorSelector' );
 224
 225
 226                                         $j( htmlTarget + ' .colorSelector' ).ColorPicker( {
 227                                                 color: cColor,
 228                                                 onShow: function ( colpkr ) {
 229                                                         // make sure its ontop:
 230                                                         $j( colpkr ).css( "zIndex", "12" );
 231                                                         $j( colpkr ).fadeIn( 500 );
 232                                                         return false;
 233                                                 },
 234                                                 onHide: function ( colpkr ) {
 235                                                         $j( colpkr ).fadeOut( 500 );
 236                                                         _this.pSeq.plObj.setCurrentTime( 0, function() {
 237                                                                 js_log( "render ready" );
 238                                                         } );
 239                                                         return false;
 240                                                 },
 241                                                 onChange: function ( hsb, hex, rgb ) {
 242                                                         $j( htmlTarget + ' .colorIndicator' ).css( 'backgroundColor', '#' + hex );
 243                                                         // update the transition
 244                                                         cTran['fadeColor'] =  '#' + hex;
 245                                                 }
 246                                         } )
 247                                 break;
 248                         }
 249                 }
 250                 // and finally add effect timeline scruber (for timed effects this also stores keyframes)
 251
 252         },
 253         getTransitionListControl : function( target_out ) {
 254                 js_log( "getTransitionListControl" );
 255                 var o = '<h3>' + gM( 'mwe-add-transition' ) + '</h3>';
 256                 for ( var type in mvTransLib['type'] ) {
 257                         js_log( 'on tran type: ' + i );
 258                         var base_trans_name = i;
 259                         var tLibSet = mvTransLib['type'][ type ];
 260                         for ( var subtype in tLibSet ) {
 261                                 o += '<img style="float:left;padding:10px;" ' +
 262                                         'src="' + mvTransLib.getTransitionIcon( type, subtype ) + '">';
 263                         }
 264                 }
 265                 $j( target_out ).html( o );
 266         }
 267 };