| Index: branches/MwEmbedStandAlone/modules/Sequencer/Sequencer.i18n.php |
| — | — | @@ -52,8 +52,8 @@ |
| 53 | 53 | |
| 54 | 54 | 'mwe-sequencer-tools-transitions' => 'Transitions', |
| 55 | 55 | 'mwe-sequencer-tools-transitions-desc' => 'Set in and out Transitions', |
| 56 | | - 'mwe-sequencer-clip-transin' => 'Transition in', |
| 57 | | - 'mwe-sequencer-clip-transout' => 'Transition out', |
| | 56 | + 'mwe-sequencer-tools-transitions-transIn' => 'Transition in', |
| | 57 | + 'mwe-sequencer-tools-transitions-transOut' => 'Transition out', |
| 58 | 58 | |
| 59 | 59 | 'mwe-sequencer-clip-cancel-edit' => 'Cancel clip edit', |
| 60 | 60 | 'mwe-sequencer-preview' => 'Preview', |
| Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTools.js |
| — | — | @@ -2,7 +2,7 @@ |
| 3 | 3 | * Handles the "tools" window top level component driver |
| 4 | 4 | */ |
| 5 | 5 | |
| 6 | | -//Wrap in mw closure to avoid global leakage |
| | 6 | +// Wrap in mw closure to avoid global leakage |
| 7 | 7 | ( function( mw ) { |
| 8 | 8 | |
| 9 | 9 | mw.SequencerTools = function( sequencer ) { |
| — | — | @@ -38,13 +38,13 @@ |
| 39 | 39 | 'contentTypes': [ 'img'], // xxx todo add video support |
| 40 | 40 | 'animate' : 'true' |
| 41 | 41 | }, |
| 42 | | - 'templateedit':{ |
| 43 | | - 'editWidgets' : ['edittemplate'], |
| | 42 | + 'templateedit' : { |
| | 43 | + 'editWidgets' : ['editTemplate'], |
| 44 | 44 | 'editableAttributes' : [ 'apititlekey' ], |
| 45 | 45 | 'contentTypes' : ['mwtemplate'] |
| 46 | 46 | }, |
| 47 | | - 'transitions' : { |
| 48 | | - 'editableAttributes' : [ 'transIn', 'transOut' ], |
| | 47 | + 'transitions' : { |
| | 48 | + 'editWidgets' : ['editTransitions'], |
| 49 | 49 | 'contentTypes': ['video', 'img', 'mwtemplate' ] |
| 50 | 50 | } |
| 51 | 51 | }, |
| — | — | @@ -68,14 +68,6 @@ |
| 69 | 69 | 'inputSize' : 30, |
| 70 | 70 | 'title' : gM('mwe-sequencer-template-name' ) |
| 71 | 71 | }, |
| 72 | | - 'transIn' : { |
| 73 | | - 'type' : 'select', |
| 74 | | - 'selectValues' : [ 'fadeFromColor' ] |
| 75 | | - }, |
| 76 | | - 'transOut' : { |
| 77 | | - 'type' : 'select', |
| 78 | | - 'selectValues' : [ 'fadeFromColor', 'crossfade' ] |
| 79 | | - }, |
| 80 | 72 | // Special child node type |
| 81 | 73 | 'param' : { |
| 82 | 74 | 'type' : 'childParam', |
| — | — | @@ -166,8 +158,8 @@ |
| 167 | 159 | $j( clickButton ) |
| 168 | 160 | .attr({ |
| 169 | 161 | 'href': _this.sequencer.getServer().getAssetViewUrl( |
| 170 | | - $j(smilElement).find("param[name='apiTitleKey']").attr('value') |
| 171 | | - ) |
| | 162 | + _this.sequencer.getSmil().getTitleKey( smilElement ) |
| | 163 | + ) |
| 172 | 164 | , |
| 173 | 165 | 'target' : '_new' |
| 174 | 166 | }) |
| — | — | @@ -252,7 +244,167 @@ |
| 253 | 245 | } |
| 254 | 246 | }, |
| 255 | 247 | editWidgets: { |
| 256 | | - 'edittemplate':{ |
| | 248 | + 'editTransitions' : { |
| | 249 | + 'transitionTypes' : { |
| | 250 | + 'fade':{ |
| | 251 | + 'type' : { |
| | 252 | + 'value' : 'fade', |
| | 253 | + 'editType' : 'hidden' |
| | 254 | + }, |
| | 255 | + 'dur' : { |
| | 256 | + 'value' : '2s', |
| | 257 | + 'editType' : 'time' |
| | 258 | + }, |
| | 259 | + }, |
| | 260 | + 'fadeColor':{ |
| | 261 | + 'extends':'fade', |
| | 262 | + 'fadeColor' : { |
| | 263 | + 'value' : '#000', |
| | 264 | + 'editType' : 'color' |
| | 265 | + } |
| | 266 | + }, |
| | 267 | + // Set high level select attribute default |
| | 268 | + 'fadeFromColor' : { |
| | 269 | + 'extends': 'fadeColor', |
| | 270 | + 'selectable' : ['transIn'], |
| | 271 | + 'subtype' : { |
| | 272 | + 'value' : 'fadeFromColor', |
| | 273 | + 'editType' : 'hidden' |
| | 274 | + } |
| | 275 | + }, |
| | 276 | + 'fadeToColor' : { |
| | 277 | + 'extends': 'fadeColor', |
| | 278 | + 'selectable' : ['transOut'], |
| | 279 | + 'subtype' : { |
| | 280 | + 'value' : 'fadeToColor', |
| | 281 | + 'editType' : 'hidden' |
| | 282 | + } |
| | 283 | + }, |
| | 284 | + 'crossfade' : { |
| | 285 | + 'extends': 'fade', |
| | 286 | + 'selectable' : ['transIn', 'transOut'], |
| | 287 | + 'subtype' : { |
| | 288 | + 'value' : 'crossfade', |
| | 289 | + 'editType' : 'hidden' |
| | 290 | + } |
| | 291 | + } |
| | 292 | + }, |
| | 293 | + buildAttributeSet: function( transitionType ){ |
| | 294 | + var attributes = {}; |
| | 295 | + for( var i in this.transitionTypes[ transitionType ] ){ |
| | 296 | + if( i == 'extends' ){ |
| | 297 | + $j.extend( attributes, this.buildAttributeSet( i ) ); |
| | 298 | + } else { |
| | 299 | + attributes[ i ] = this.transitionTypes[ transitionType ][i]; |
| | 300 | + } |
| | 301 | + } |
| | 302 | + return attributes; |
| | 303 | + }, |
| | 304 | + |
| | 305 | + getTransitionId: function( smilElement, transitionType ){ |
| | 306 | + // Transition name is packed from attributeValue via striping the smilElement id |
| | 307 | + // This is a consequence of smil's strange transition dom placement in the head of the |
| | 308 | + // document instead of as child nodes. The idea with smil is the transition can be 'reused' |
| | 309 | + // but in the sequencer context we want unique transitions so that each can be customized |
| | 310 | + // independently. |
| | 311 | + return $j( smilElement ).attr('id') + '_' + transitionType; |
| | 312 | + }, |
| | 313 | + |
| | 314 | + getSelectedTransitionType: function(smilElement, transitionDirection ){ |
| | 315 | + var attributeValue = $j( smilElement ).attr( transitionDirection ); |
| | 316 | + if( !attributeValue ) |
| | 317 | + return ''; |
| | 318 | + return attributeValue.replace( $j( smilElement ).attr('id') + '_', '' ); |
| | 319 | + }, |
| | 320 | + |
| | 321 | + getBindedTranstionEdit: function( _this, smilElement, transitionType ){ |
| | 322 | + var $smilDom = _this.sequencer.getSmil().$dom; |
| | 323 | + var $editTransitionsSet = $j('<span />'); |
| | 324 | + // Get the smil transition element |
| | 325 | + var $smilTransitionElement = $smilDom.find( '#' + this.getTransitionId( smilElement, transitionType ) ); |
| | 326 | + // Get all the editable attributes for transitionName |
| | 327 | + var attributeSet = this.buildAttributeSet( transitionType ); |
| | 328 | + for( var i in attributeSet ){ |
| | 329 | + var transitionAttribute = attributeSet[i]; |
| | 330 | + // Skip setup attributes |
| | 331 | + if( i == 'extends' || i == 'selectable' ){ |
| | 332 | + continue; |
| | 333 | + } |
| | 334 | + if( transitionAttribute.editType == 'time' ){ |
| | 335 | + $editTransitionsSet.append( |
| | 336 | + $j('<input />') |
| | 337 | + .attr('size', 5) |
| | 338 | + .change(function(){ |
| | 339 | + var timeValue = mw.pa$j(this).val(); |
| | 340 | + }) |
| | 341 | + ) |
| | 342 | + } |
| | 343 | + |
| | 344 | + |
| | 345 | + } |
| | 346 | + }, |
| | 347 | + |
| | 348 | + 'onChange': function( _this, smilElement, target ){ |
| | 349 | + |
| | 350 | + }, |
| | 351 | + 'draw': function( _this, target, smilElement ){ |
| | 352 | + // draw the two attribute types |
| | 353 | + $transitionWidget = $j('<div />'); |
| | 354 | + |
| | 355 | + var transitionDirections = ['transIn', 'transOut']; |
| | 356 | + for( var i in transitionDirections ){ |
| | 357 | + var transitionDirection = transitionTypes[i]; |
| | 358 | + $transitionWidget.append( |
| | 359 | + $j('<h3 />').text( gM('mwe-sequencer-tools-transitions-' + transitionDirection )) |
| | 360 | + ) |
| | 361 | + // Output the top level empty select |
| | 362 | + $transSelect = $j('<select />').append( |
| | 363 | + $j('<option />') |
| | 364 | + .attr('value', '') |
| | 365 | + ); |
| | 366 | + var selectedTransitionType = this.getSelectedTransitionType(smilElement, transitionDirection); |
| | 367 | + for( var j in this.transitionTypes ){ |
| | 368 | + if( this.transitionTypes[j].selectable |
| | 369 | + && |
| | 370 | + $j.inArray( transitionType, this.transitionTypes[j].selectable ) !== -1 ) |
| | 371 | + { |
| | 372 | + // output the item if its selecteable for the current transitionType |
| | 373 | + var $option = $j("<option />") |
| | 374 | + .attr('value', this.transitionTypes[j]) |
| | 375 | + .text( this.transitionTypes[j] ) |
| | 376 | + // Add selected attribute if selected: |
| | 377 | + if( selectedTransitionType == this.transitionTypes[j] ){ |
| | 378 | + $option.attr('selected', 'true'); |
| | 379 | + } |
| | 380 | + $transSelect.append( $option ); |
| | 381 | + } |
| | 382 | + } |
| | 383 | + // add the select |
| | 384 | + $transitionWidget.append( $transSelect ); |
| | 385 | + |
| | 386 | + // Set up the transConfig container: |
| | 387 | + var $transConfig = $j('<span />') |
| | 388 | + .addClass('transConfig'); |
| | 389 | + // If a given transition type is selected output is editable attributes |
| | 390 | + if( selectedTransitionType != '' ) { |
| | 391 | + $transConfig.append( |
| | 392 | + this.getBindedTranstionEdit( |
| | 393 | + smilElement, selectedTransitionType |
| | 394 | + ) |
| | 395 | + ) |
| | 396 | + } |
| | 397 | + |
| | 398 | + $transitionWidget.append( $transConfig ); |
| | 399 | + } |
| | 400 | + |
| | 401 | + return $transitionWidget; |
| | 402 | + }, |
| | 403 | + 'drawTransitionType':function( attributeType ){ |
| | 404 | + |
| | 405 | + } |
| | 406 | + |
| | 407 | + }, |
| | 408 | + 'editTemplate':{ |
| 257 | 409 | 'onChange' : function( _this, smilElement, target ){ |
| 258 | 410 | // Clear the smilElement template cache: |
| 259 | 411 | $j( smilElement ).data('templateHtmlCache', null); |
| — | — | @@ -282,7 +434,7 @@ |
| 283 | 435 | return ; |
| 284 | 436 | } |
| 285 | 437 | $j( target ).empty().append( |
| 286 | | - $j('<h3 />').text( gM('mwe-sequencer-edittemplate-params') ) |
| | 438 | + $j('<h3 />').text( gM('mwe-sequencer-editTemplate-params') ) |
| 287 | 439 | ) |
| 288 | 440 | |
| 289 | 441 | // This is not supposed to be perfect .. |
| — | — | @@ -306,14 +458,14 @@ |
| 307 | 459 | $j( target ).append( |
| 308 | 460 | _this.getEditableAttribute( |
| 309 | 461 | smilElement, |
| 310 | | - 'edittemplate', |
| | 462 | + 'editTemplate', |
| 311 | 463 | 'param', |
| 312 | 464 | paramName |
| 313 | 465 | ) |
| 314 | 466 | .find('input') |
| 315 | 467 | // Bind the change event: |
| 316 | 468 | .change(function(){ |
| 317 | | - _this.editWidgets.edittemplate.onChange( |
| | 469 | + _this.editWidgets.editTemplate.onChange( |
| 318 | 470 | _this, |
| 319 | 471 | smilElement, |
| 320 | 472 | target |
| — | — | @@ -848,6 +1000,8 @@ |
| 849 | 1001 | mw.log("Error: editableAttributes : " + attributeName + ' not found'); |
| 850 | 1002 | return; |
| 851 | 1003 | } |
| | 1004 | + |
| | 1005 | + |
| 852 | 1006 | var _this = this; |
| 853 | 1007 | var editAttribute = this.editableAttributes[ attributeName ]; |
| 854 | 1008 | var editType = editAttribute.type; |
| — | — | @@ -855,6 +1009,7 @@ |
| 856 | 1010 | mw.log(" Error: No editableTypes interface for " + editType); |
| 857 | 1011 | return ; |
| 858 | 1012 | } |
| | 1013 | + |
| 859 | 1014 | // Set the update key to the paramName if provided: |
| 860 | 1015 | var updateKey = ( paramName ) ? paramName : attributeName; |
| 861 | 1016 | |
| — | — | @@ -870,41 +1025,50 @@ |
| 871 | 1026 | // Set paramName based attributes: |
| 872 | 1027 | var attributeTitle = ( editAttribute.title ) ? editAttribute.title : paramName + ':'; |
| 873 | 1028 | |
| 874 | | - return $j( '<div />' ) |
| 875 | | - .css({ |
| 876 | | - 'float': 'left', |
| 877 | | - 'font-size': '12px', |
| 878 | | - 'border': 'solid thin #999', |
| 879 | | - 'background-color': '#EEE', |
| 880 | | - 'padding' : '2px', |
| 881 | | - 'margin' : '5px' |
| | 1029 | + return _this.getInputBox({ |
| | 1030 | + 'title' : attributeTitle, |
| | 1031 | + 'inputId' : _this.getEditToolInputId( toolId, updateKey ), |
| | 1032 | + 'inputSize': inputSize, |
| | 1033 | + 'initialValue' : initialValue, |
| | 1034 | + 'inputChange': function(){ |
| | 1035 | + // Run the editableType update function: |
| | 1036 | + _this.editableTypes[ editType ].update( |
| | 1037 | + _this, |
| | 1038 | + smilElement, |
| | 1039 | + updateKey, |
| | 1040 | + $j( this ).val() |
| | 1041 | + ); |
| | 1042 | + } |
| | 1043 | + }) |
| | 1044 | + }, |
| | 1045 | + getInputBox: function( config ){ |
| | 1046 | + var _this = this; |
| | 1047 | + return $j( '<div />' ) |
| | 1048 | + .css({ |
| | 1049 | + 'float': 'left', |
| | 1050 | + 'font-size': '12px', |
| | 1051 | + 'border': 'solid thin #999', |
| | 1052 | + 'background-color': '#EEE', |
| | 1053 | + 'padding' : '2px', |
| | 1054 | + 'margin' : '5px' |
| | 1055 | + }) |
| | 1056 | + .addClass('ui-corner-all') |
| | 1057 | + .append( |
| | 1058 | + $j('<span />') |
| | 1059 | + .css('margin', '5px') |
| | 1060 | + .text( config.title ), |
| | 1061 | + |
| | 1062 | + $j('<input />') |
| | 1063 | + .attr( { |
| | 1064 | + 'id' : config.inputId , |
| | 1065 | + 'size': config.inputSize |
| 882 | 1066 | }) |
| 883 | | - .addClass('ui-corner-all') |
| 884 | | - .append( |
| 885 | | - $j('<span />') |
| 886 | | - .css('margin', '5px') |
| 887 | | - .text( attributeTitle ), |
| 888 | | - |
| 889 | | - $j('<input />') |
| 890 | | - .attr( { |
| 891 | | - 'id' : _this.getEditToolInputId( toolId, updateKey ), |
| 892 | | - 'size': inputSize |
| 893 | | - }) |
| 894 | | - .data('initialValue', initialValue ) |
| 895 | | - .sequencerInput( _this.sequencer ) |
| 896 | | - .val( initialValue ) |
| 897 | | - .change(function(){ |
| 898 | | - // Run the editableType update function: |
| 899 | | - _this.editableTypes[ editType ].update( |
| 900 | | - _this, |
| 901 | | - smilElement, |
| 902 | | - updateKey, |
| 903 | | - $j( this ).val() |
| 904 | | - ); |
| 905 | | - // widgets can bind directly to this change action. |
| 906 | | - }) |
| 907 | | - ); |
| 908 | | - } |
| | 1067 | + .data('initialValue', config.initialValue ) |
| | 1068 | + .sequencerInput( _this.sequencer ) |
| | 1069 | + .val( config.initialValue ) |
| | 1070 | + .change( options.inputChange ) |
| | 1071 | + ); |
| | 1072 | + } |
| 909 | 1073 | } |
| 910 | 1074 | |
| 911 | 1075 | } )( window.mw ); |
| \ No newline at end of file |
| Index: branches/MwEmbedStandAlone/modules/Sequencer/remotes/mw.MediaWikiRemoteSequencer.js |
| — | — | @@ -108,12 +108,14 @@ |
| 109 | 109 | seqTitle = seqTitle.substr(0, seqTitle.length -4 ); |
| 110 | 110 | // not ideal details page builder but 'should work' :: |
| 111 | 111 | editLink = mw.getApiProviderURL( embedPlayer.apiProvider ).replace( 'api.php', 'index.php' ); |
| 112 | | - editLink = mw.replaceUrlParams( editLink, |
| 113 | | - { |
| 114 | | - 'title' : seqTitle, |
| 115 | | - 'action' : 'edit' |
| 116 | | - } |
| 117 | | - ); |
| | 112 | + editLink = mw.getRemoteSequencerLink ( |
| | 113 | + mw.replaceUrlParams( editLink, |
| | 114 | + { |
| | 115 | + 'title' : seqTitle, |
| | 116 | + 'action' : 'edit' |
| | 117 | + } |
| | 118 | + ) |
| | 119 | + ); |
| 118 | 120 | } |
| 119 | 121 | var kalturaLinkAttr = { |
| 120 | 122 | 'href': 'http://kaltura.com', |