4 * for now just simple single stack transition control
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"
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
23 'parent_ct': null, //parent container
24 'pSeq': null, //parent sequence Object
26 'edit_action': null, //the requested edit action
29 var mvTimedEffectsEdit =function(iObj
) {
30 return this.init(iObj
);
32 //set up the mvSequencer object
33 mvTimedEffectsEdit
.prototype = {
34 //the menu_items Object contains: default html, js setup/loader functions
37 'title':gM('mwe-transition_in'),
38 'clip_attr':'transIn',
39 'doEdit':function(_this
){
40 _this
.doTransitionDisplayEdit('transin');
44 'title':gM('mwe-transition_out'),
45 'clip_attr':'transOut',
46 'doEdit':function(_this
){
47 _this
.doTransitionDisplayEdit('transout');
51 'title':gM('mwe-effects'),
52 'clip_attr':'Effects',
53 'doEdit':function(_this
){
55 _this
.doEditEffectDisplayEdit();
61 for(var i
in default_timed_effect_values
){
68 doEditMenu:function(){
69 js_log('mvTimedEffects : doEditMenu::');
71 //add in subMenus if set
72 //check for submenu and add to item container
74 //update the default edit display (if we have a target)
75 var tTarget
= 'transin';
76 if(this.rObj
.transOut
)
83 o
+= '<div id="mv_submenu_timedeffect">';
87 $j
.each(this.menu_items
, function(sInx
, mItem
){
91 //check if the given editType is valid for our given media type
93 '<a id="mv_te_'+sInx
+'" href="#te_' + sInx
+ '">' + mItem
.title
+ '</a>'+
95 tabc
+= '<div id="te_' + sInx
+ '" style="overflow:auto;" ></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
);
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_', '') );
109 }).addClass('ui-tabs-vertical ui-helper-clearfix');
111 $j("#mv_submenu_clipedit li").removeClass('ui-corner-top').addClass('ui-corner-left');
112 _this
.doDisplayEdit(tTarget
);
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
);
120 //use the menu_item config to map to function display
121 this.menu_items
[tab_id
].doEdit(this);
124 doEditEffectDisplayEdit:function(){
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() );
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(){
141 var imgElm
= $j( '.clip_container:visible img').get(0);
142 PixasticEditor
.load(imgElm
);
145 setTimeout(isPixasticReady
, 100)
150 doTransitionDisplayEdit:function(target_item
){
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
);
160 var cTran
= this.rObj
[ this.menu_items
[ target_item
].clip_attr
];
161 var o
='<h3>' + gM('mwe-edit_'+target_item
) + '</h3>';
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>';
169 o
+='<span class="te_subtype_container"></span>';
171 //add html and select bindings
172 $j(apendTarget
).html(o
).children('.te_select_type')
174 var selectedType
= $j(this).val();
175 //update subtype listing:
176 _this
.getSubTypeControl(target_item
, selectedType
, apendTarget
+ ' .te_subtype_container' );
178 //add subtype control
179 _this
.getSubTypeControl( target_item
, cTran
.type
, apendTarget
+ ' .te_subtype_container' );
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')
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();
195 getSubTypeControl:function(target_item
, transition_type
, htmlTarget
){
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>';
204 $j(htmlTarget
).html(o
)
205 .children('.te_subtype_select')
207 //update the property
208 cTran
.subtype
= $j(this).val();
209 //re-gen timeline / playlist
210 _this
.pSeq
.do_refresh_timeline();
212 _this
.getSubTypeControl(target_item
, transition_type
, htmlTarget
);
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
]
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' );
225 $j(htmlTarget
+ ' .colorSelector').ColorPicker({
227 onShow: function (colpkr
) {
228 //make sure its ontop:
229 $j(colpkr
).css("zIndex", "12");
230 $j(colpkr
).fadeIn(500);
233 onHide: function (colpkr
) {
234 $j(colpkr
).fadeOut(500);
235 _this
.pSeq
.plObj
.setCurrentTime(0, function(){
236 js_log("render ready");
240 onChange: function (hsb
, hex
, rgb
) {
241 $j(htmlTarget
+ ' .colorIndicator').css('backgroundColor', '#' + hex
);
242 //update the transition
243 cTran
['fadeColor'] = '#' + hex
;
249 //and finally add effect timeline scrubber (for timed effects this also stores keyframes)
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
)+ '">';
264 $j(target_out
).html(o
);