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