http://www.mediawiki.org/wiki/Special:Code/MediaWiki/72934
Revision: 72934
Author: dale
Date: 2010-09-13 22:01:39 +0000 (Mon, 13 Sep 2010)
Log Message:
-----------
* improved transition edit support
* refactored transition library for improved clarity in public methods
* fix bug in transition overlay name that prevented it from being hidden.
Modified Paths:
--------------
branches/MwEmbedStandAlone/components/mw.Api.js
branches/MwEmbedStandAlone/modules/Sequencer/Sequencer.i18n.php
branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTools.js
branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js
branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js
branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js
branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilTransitions.js
Modified: branches/MwEmbedStandAlone/components/mw.Api.js
===================================================================
--- branches/MwEmbedStandAlone/components/mw.Api.js 2010-09-13 21:15:46 UTC
(rev 72933)
+++ branches/MwEmbedStandAlone/components/mw.Api.js 2010-09-13 22:01:39 UTC
(rev 72934)
@@ -178,7 +178,7 @@
}
}, mw.getConfig( 'defaultRequestTimeout' ) * 1000 );
- mw.log("run getJSON: " + mw.replaceUrlParams( url, data ) );
+ //mw.log("run getJSON: " + mw.replaceUrlParams( url, data ) );
// Check if the request requires a "post"
if( mw.checkRequestPost( data ) ) {
Modified: branches/MwEmbedStandAlone/modules/Sequencer/Sequencer.i18n.php
===================================================================
--- branches/MwEmbedStandAlone/modules/Sequencer/Sequencer.i18n.php
2010-09-13 21:15:46 UTC (rev 72933)
+++ branches/MwEmbedStandAlone/modules/Sequencer/Sequencer.i18n.php
2010-09-13 22:01:39 UTC (rev 72934)
@@ -54,6 +54,7 @@
'mwe-sequencer-tools-transitions-desc' => 'Set in and out Transitions',
'mwe-sequencer-tools-transitions-transIn' => 'Transition in',
'mwe-sequencer-tools-transitions-transOut' => 'Transition out',
+ 'mwe-sequencer-tools-transitions-color' => 'Color',
'mwe-sequencer-clip-cancel-edit' => 'Cancel clip edit',
'mwe-sequencer-preview' => 'Preview',
Modified: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTools.js
===================================================================
--- branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTools.js
2010-09-13 21:15:46 UTC (rev 72933)
+++ branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTools.js
2010-09-13 22:01:39 UTC (rev 72934)
@@ -252,7 +252,7 @@
'editType' : 'hidden'
},
'dur' : {
- 'value' : '2s',
+ 'value' : '0:02',
'editType' : 'time'
},
},
@@ -292,8 +292,8 @@
buildAttributeSet: function( transitionType ){
var attributes = {};
for( var i in this.transitionTypes[
transitionType ] ){
- if( i == 'extends' ){
- $j.extend( attributes,
this.buildAttributeSet( i ) );
+ if( i == 'extends' ){
+ $j.extend( attributes,
this.buildAttributeSet( this.transitionTypes[ transitionType ][i] ) );
} else {
attributes[ i ] =
this.transitionTypes[ transitionType ][i];
}
@@ -308,8 +308,21 @@
// but in the sequencer context we want unique
transitions so that each can be customized
// independently.
return $j( smilElement ).attr('id') + '_' +
transitionType;
- },
+ },
+ // Get a transition element ( if it does not exist add
it )
+ getTransitionElement: function( _this, smilElement,
transitionType ){
+ var $smilDom = _this.sequencer.getSmil().$dom;
+ var transId = this.getTransitionId(
smilElement, transitionType );
+ if( $smilDom.find( '#' + transId ).length == 0
){
+ $smilDom.find('head').append(
+ $j('<transition />')
+ .attr('id', transId )
+ );
+ }
+ return $smilDom.find( '#' + transId );
+ },
+
getSelectedTransitionType: function(smilElement,
transitionDirection ){
var attributeValue = $j( smilElement ).attr(
transitionDirection );
if( !attributeValue )
@@ -318,43 +331,90 @@
},
getBindedTranstionEdit: function( _this, smilElement,
transitionType ){
- var $smilDom = _this.sequencer.getSmil().$dom;
- var $editTransitionsSet = $j('<span />');
+ var _editTransitions = this;
+ var $editTransitionsSet = $j('<div />');
+ // return the empty div on empty transtionType
+ if( transitionType == '' ){
+ return $editTransitionsSet
+ }
+
// Get the smil transition element
- var $smilTransitionElement = $smilDom.find( '#'
+ this.getTransitionId( smilElement, transitionType ) );
+ var $smilTransitionElement =
this.getTransitionElement( _this, smilElement, transitionType )
// Get all the editable attributes for
transitionName
var attributeSet = this.buildAttributeSet(
transitionType );
- for( var i in attributeSet ){
- var transitionAttribute =
attributeSet[i];
+
+ $j.each( attributeSet, function( attributeKey,
transitionAttribute ){
// Skip setup attributes
- if( i == 'extends' || i == 'selectable'
){
- continue;
+ if( attributeKey == 'extends' ||
attributeKey == 'selectable' ){
+ return true;
}
+ var initialValue =
$smilTransitionElement.attr( attributeKey );
+ // Set to the default value if the
transition attribute has no attribute key
+ if( !initialValue){
+ initialValue =
transitionAttribute.value
+ $smilTransitionElement.attr(
attributeKey, transitionAttribute.value )
+ }
+
if( transitionAttribute.editType ==
'time' ){
$editTransitionsSet.append(
- $j('<input />')
- .attr('size', 5)
- .change(function(){
- var timeValue =
mw.pa$j(this).val();
+ _this.getInputBox({
+ 'title' :
gM('mwe-sequencer-tools-duration'),
+ 'inputSize' : 5,
+ 'initialValue'
:initialValue,
+ 'change':
function(){
+ //
parse smil time
+ var
time = _this.sequencer.getSmil().parseTime( $j(this).val() );
+ //
Check if time > clip duration
+ if(
time > $j( smilElement ).attr('dur') ){
+
time = $j( smilElement ).attr('dur');
+ }
+ if(
time < 0 )
+
time = 0;
+ //
Update the input value
+ $j(
this ).val( mw.seconds2npt( time ) );
+ //
Update the smil attribute
+
$smilTransitionElement.attr( attributeKey, time );
+ // run
the onChange action
+
_editTransitions.onChange( _this, smilElement );
+ }
})
)
+ } else if (
transitionAttribute.editType == 'color' ){
+ $inputBox = _this.getInputBox({
+ 'title' :
gM('mwe-sequencer-tools-transitions-color'),
+ 'inputSize' : 8,
+ 'initialValue' :
initialValue,
+ 'change': function(){
+ var cat =
$j(this).val();
+ debugger;
+ }
+ })
+ // xxx add the color picker:
+ $editTransitionsSet.append(
$inputBox );
}
-
-
- }
+ })
+ return $editTransitionsSet;
},
- 'onChange': function( _this, smilElement, target ){
+ 'onChange': function( _this, smilElement ){
+ // Update the sequence duration :
+ _this.sequencer.getEmbedPlayer().getDuration(
true );
+ // Seek to "this clip"
+
_this.sequencer.getEmbedPlayer().setCurrentTime(
+ $j( smilElement ).data('startOffset')
+ );
},
'draw': function( _this, target, smilElement ){
// draw the two attribute types
- $transitionWidget = $j('<div />');
+ var _editTransitions = this;
+ var $transitionWidget = $j('<div />');
var transitionDirections = ['transIn',
'transOut'];
- for( var i in transitionDirections ){
- var transitionDirection =
transitionTypes[i];
+ $j.each(transitionDirections, function( inx,
transitionDirection ){
$transitionWidget.append(
+ $j('<div />').css('clear',
'both')
+ ,
$j('<h3 />').text(
gM('mwe-sequencer-tools-transitions-' + transitionDirection ))
)
// Output the top level empty select
@@ -362,50 +422,65 @@
$j('<option />')
.attr('value', '')
);
- var selectedTransitionType =
this.getSelectedTransitionType(smilElement, transitionDirection);
- for( var j in this.transitionTypes ){
- if(
this.transitionTypes[j].selectable
+ var selectedTransitionType =
_editTransitions.getSelectedTransitionType( smilElement, transitionDirection);
+ for( var transitionType in
_editTransitions.transitionTypes ){
+ if(
_editTransitions.transitionTypes[ transitionType ].selectable
&&
- $j.inArray(
transitionType, this.transitionTypes[j].selectable ) !== -1 )
+ $j.inArray(
transitionDirection,
_editTransitions.transitionTypes[transitionType].selectable ) !== -1 )
{
- // output the item if
its selecteable for the current transitionType
+ // Output the item if
its selectable for the current transitionType
var $option =
$j("<option />")
- .attr('value',
this.transitionTypes[j])
- .text(
this.transitionTypes[j] )
+ .attr('value',
transitionType )
+ .text( transitionType )
// Add selected
attribute if selected:
- if(
selectedTransitionType == this.transitionTypes[j] ){
+ if(
selectedTransitionType == transitionType ){
$option.attr('selected', 'true');
}
$transSelect.append(
$option );
}
}
- // add the select
- $transitionWidget.append( $transSelect
);
+ $transSelect.change( function(){
+ var transitionType =
$j(this).val();
+ $transitionWidget.find( '#' +
transitionDirection + '_attributeContainer' ).html(
+
_editTransitions.getBindedTranstionEdit(
+ _this,
smilElement, transitionType
+ )
+ )
+ // Update the smil attribute:
+ $j( smilElement ).attr(
+ transitionDirection,
+
_editTransitions.getTransitionId( smilElement, transitionType )
+ )
+ // Update the player on select
change
+ _editTransitions.onChange(
_this, smilElement );
+ });
+
+ // Add the select to the
$transitionWidget
+ $transitionWidget.append( $transSelect
);
// Set up the transConfig container:
var $transConfig = $j('<span />')
- .addClass('transConfig');
+ .attr('id', transitionDirection
+ '_attributeContainer');
+
// If a given transition type is
selected output is editable attributes
if( selectedTransitionType != '' ) {
- $transConfig.append(
-
this.getBindedTranstionEdit(
- smilElement,
selectedTransitionType
- )
+ $transConfig.append(
+
_editTransitions.getBindedTranstionEdit(
+ _this,
smilElement, selectedTransitionType
+ )
)
}
+ $transitionWidget.append( $transConfig
);
- $transitionWidget.append( $transConfig
);
- }
-
- return $transitionWidget;
- },
- 'drawTransitionType':function( attributeType ){
-
- }
-
+ // update the player for the default
selected set.
+ _editTransitions.onChange( _this,
smilElement );
+ });
+ // add the transition widget to the target
+ $j( target ).append( $transitionWidget );
+ }
},
'editTemplate':{
- 'onChange' : function( _this, smilElement, target ){
+ 'onChange' : function( _this, smilElement ){
// Clear the smilElement template cache:
$j( smilElement ).data('templateHtmlCache',
null);
// Re draw the smilElement in the player
@@ -428,7 +503,7 @@
_this.sequencer
.getServer()
.getTemplateText( $j(
smilElement).attr('apititlekey'), function( templateText ){
- mw.log("GotTemplateText: " +
templateText );
+ //mw.log("GotTemplateText: " +
templateText );
if( ! templateText || typeof
templateText != 'string' ){
mw.log("Error: could not get
wikitext form titlekey: " + $j( smilElement).attr('apititlekey'))
return ;
@@ -467,8 +542,7 @@
.change(function(){
_this.editWidgets.editTemplate.onChange(
_this,
-
smilElement,
- target
+
smilElement
)
})
.parent()
@@ -483,7 +557,7 @@
}
},
'panzoom' : {
- 'onChange': function( _this, smilElement, target ){
+ 'onChange': function( _this, smilElement ){
var panZoomVal = $j('#'
+_this.getEditToolInputId( 'panzoom', 'panZoom')).val();
mw.log("panzoom change:" + panZoomVal );
@@ -629,7 +703,7 @@
// Restore original css for the
layout helper
$j(this).css( orginalHelperCss )
// trigger the 'change'
-
_this.editWidgets.panzoom.onChange( _this, smilElement, target );
+
_this.editWidgets.panzoom.onChange( _this, smilElement );
}
})
.css('cursor', 'move')
@@ -651,14 +725,14 @@
// Restore original css
$j(this).css( orginalHelperCss )
// trigger the change
-
_this.editWidgets.panzoom.onChange( _this, smilElement, target );
+
_this.editWidgets.panzoom.onChange( _this, smilElement);
}
})
}
},
'trimTimeline' : {
- 'onChange': function( _this, smilElement, target){
+ 'onChange': function( _this, smilElement ){
var smil = _this.sequencer.getSmil();
// Update the preview thumbs
@@ -717,7 +791,7 @@
var onInputChange = function( sliderIndex,
timeValue ){
// Register the change
-
_this.editWidgets.trimTimeline.onChange( _this, smilElement, target);
+
_this.editWidgets.trimTimeline.onChange( _this, smilElement );
// Update the slider
if( fullClipDuration ){
$j('#'+_this.sequencer.id +
'_trimTimeline' )
@@ -744,7 +818,7 @@
});
// Update the thumbnails:
- _this.editWidgets.trimTimeline.onChange( _this,
smilElement, target);
+ _this.editWidgets.trimTimeline.onChange( _this,
smilElement );
// Get the clip full duration to build out the
timeline selector
smil.getBody().getClipAssetDuration(
smilElement, function( clipDuration ) {
@@ -790,7 +864,7 @@
_this.editableTypes['time'].update( _this, smilElement, 'dur', sliderToTime(
ui.values[ 1 ]- ui.values[0] ) );
// update the
widget display
-
_this.editWidgets.trimTimeline.onChange( _this, smilElement, target);
+
_this.editWidgets.trimTimeline.onChange( _this, smilElement );
// Register the
edit state for undo / redo
_this.sequencer.getActionsEdit().registerEdit();
@@ -902,12 +976,14 @@
)
var $toolContainer = $toolsContainer.find( '#tooltab_'
+ toolId );
- // Build out the attribute list for the given tool:
- for( var i=0; i < tool.editableAttributes.length ; i++
){
- attributeName = tool.editableAttributes[i];
- $toolContainer.append(
- _this.getEditableAttribute(
smilElement, toolId, attributeName )
- );
+ // Build out the attribute list for the given tool ( if
the tool has directly editable attributes )
+ if( tool.editableAttributes ){
+ for( var i=0; i <
tool.editableAttributes.length ; i++ ){
+ attributeName =
tool.editableAttributes[i];
+ $toolContainer.append(
+ _this.getEditableAttribute(
smilElement, toolId, attributeName )
+ );
+ }
}
// Output a float divider:
@@ -1030,7 +1106,7 @@
'inputId' : _this.getEditToolInputId( toolId, updateKey
),
'inputSize': inputSize,
'initialValue' : initialValue,
- 'inputChange': function(){
+ 'change': function(){
// Run the editableType update function:
_this.editableTypes[ editType ].update(
_this,
@@ -1066,7 +1142,7 @@
.data('initialValue', config.initialValue )
.sequencerInput( _this.sequencer )
.val( config.initialValue )
- .change( options.inputChange )
+ .change( config.change )
);
}
}
Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js
===================================================================
--- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js
2010-09-13 21:15:46 UTC (rev 72933)
+++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js
2010-09-13 22:01:39 UTC (rev 72934)
@@ -286,7 +286,7 @@
// Reset the pausedForBuffer flag:
this.pausedForBuffer = false;
- //mw.log( "Call animateTime: " + this.smilPlayTime);
+ mw.log( "Call animateTime: " + this.smilPlayTime);
// Issue an animate time request with monitorDelta
this.smil.animateTime( this.smilPlayTime,
this.monitorRate );
}
Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js
===================================================================
--- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js
2010-09-13 21:15:46 UTC (rev 72933)
+++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js
2010-09-13 22:01:39 UTC (rev 72934)
@@ -74,7 +74,7 @@
*/
animateTransform: function( smilElement, animateTime, deltaTime ){
var _this = this;
- //mw.log("SmilAnimate::animateTransform:" + smilElement.id + '
AnimateTime: ' + animateTime + ' delta:' + deltaTime);
+ //mw.log("SmilAnimate::animateTransform:" + $j(
smilElement).attr('id') + ' AnimateTime: ' + animateTime + ' delta:' +
deltaTime);
// Check for deltaTime to animate over, if zero
if( !deltaTime || deltaTime === 0 ){
@@ -145,6 +145,13 @@
checkForTransformUpdate: function( smilElement, animateTime, deltaTime
){
// Get the node type:
var refType = this.smil.getRefType( smilElement )
+ // Check for transtion in range
+ if( refType != 'audio'
+ &&
+ this.smil.getTransitions().hasTransitionInRange(
smilElement, animateTime )
+ ){
+ return true;
+ }
// Let transition check for updates
if( refType == 'img' || refType=='video' ){
@@ -187,15 +194,15 @@
* Transform Element in an inner animation loop
*/
transformAnimateFrame: function( smilElement, animateTime ){
- // Audio / Video has no inner animation per-frame transforms
- if( this.smil.getRefType( smilElement ) != 'video'
- &&
- this.smil.getRefType( smilElement ) != 'audio'
- ){
+ var refType = this.smil.getRefType( smilElement );
+ // Audio / Video has no inner animation per-frame transforms (
aside from
+ if( refType != 'video' && refType != 'audio' ){
this.transformElement( smilElement, animateTime );
}
- // Update the smil Element transition:
- this.smil.getTransitions().transformTransitionOverlay(
smilElement, animateTime );
+ // Update the smil Element transition ( applies to all visual
media types )
+ if( refType != 'audio' ){
+ this.smil.getTransitions().transformTransitionOverlay(
smilElement, animateTime );
+ }
},
/**
@@ -214,11 +221,9 @@
this.transformImageForTime( smilElement,
animateTime );
break;
case 'video':
+ case 'audio':
this.transformMediaForTime( smilElement,
animateTime );
break;
- case 'audio':
- // audio has no frame transform ( only playback
)
- break;
}
},
Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js
===================================================================
--- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js
2010-09-13 21:15:46 UTC (rev 72933)
+++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js
2010-09-13 22:01:39 UTC (rev 72934)
@@ -88,8 +88,8 @@
// Get all the draw elements from the body this time:
this.getElementsForTime( time ,
/* SMIL Element in Range */
- function( smilElement) {
- //mw.log("SmilBody::renderTime: Element in
Range" + $j( smilElement ).attr('id'));
+ function( smilElement) {
+ //mw.log("SmilBody::renderTime: Element in
Range:" + $j( smilElement ).attr('id'));
// var relativeTime = time -
smilElement.parentTimeOffset;
var relativeTime = time - $j( smilElement
).data ( 'startOffset' );
@@ -101,7 +101,7 @@
},
/* SMIL Element out of range */
function( smilElement ){
- //mw.log("SmilBody::renderTime: Element out of
Range" + $j( smilElement ).attr('id'));
+ //mw.log("SmilBody::renderTime: Element out of
Range:" + $j( smilElement ).attr('id'));
// Stop the animation or playback
_this.smil.getAnimate().pauseAnimation(
smilElement )
@@ -112,7 +112,7 @@
$j( smilElement ).data('activePlayback', false)
// Expire transitions if needed
- _this.smil.getTransitions().elementOutOfRange(
smilElement, time );
+
_this.smil.getTransitions().hideTransitionElements( smilElement, time );
}
);
},
@@ -247,12 +247,12 @@
var startOffset = $node.data( 'startOffset' );
var nodeDuration = _this.getClipDuration( $node );
- /*
- * mw.log("Checking if ref: " + $node.attr('id') + ' is
in range:' + time + ' >= ' +
+
+ /*mw.log("Checking if ref: " + $node.attr('id') + ' is
in range:' + time + ' >= ' +
$node.data( 'startOffset' ) + ' && '+
time +' < ' +startOffset + ' + ' + nodeDuration + "\n" +
' inrage cb: ' + typeof inRangeCallback
+ ' eval::' +
- ( time >= startOffset && time < (
startOffset + nodeDuration) ) + "\n\n" );
- */
+ ( time >= startOffset && time < (
startOffset + nodeDuration) ) + "\n\n" );*/
+
// Check if element is in range:
if( time >= startOffset && time < ( startOffset +
nodeDuration) ){
if( typeof inRangeCallback == 'function' ){
Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilTransitions.js
===================================================================
--- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilTransitions.js
2010-09-13 21:15:46 UTC (rev 72933)
+++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilTransitions.js
2010-09-13 22:01:39 UTC (rev 72934)
@@ -10,57 +10,68 @@
this.smil = smilObject;
},
+ getTransitionInRange: function( smilElement, animateTime ) {
+ var _this = this;
+ var inRangeTransitions = [];
+ var transitionDirections = ['transIn', 'transOut'];
+ $j.each( transitionDirections, function(inx,
transitionDirection ){
+ if( $j( smilElement ).attr( transitionDirection ) ){
+ $transition = _this.smil.$dom.find( '#' + $j(
smilElement ).attr( transitionDirection) );
+ var transitionDuration = _this.smil.parseTime(
$transition.attr('dur') );
+ // Check if the transition is in range
+ var percent = false;
+ if( transitionDirection == 'transIn' ){
+ if ( transitionDuration > animateTime
){
+ percent = animateTime /
transitionDuration;
+ }
+ }
+ if( transitionDirection == 'transOut' ){
+ var nodeDuration =
_this.smil.getBody().getClipDuration( smilElement );
+ if( animateTime > ( nodeDuration -
transitionDuration ) ){
+ percent = animateTime - (
nodeDuration - transitionDuration ) / transitionDuration;
+ }
+ // Invert the percentage for "transOut"
+ percent = 1 - percent;
+ }
+ if( percent !== false ){
+ inRangeTransitions.push( {
+ 'transition': $transition,
+ 'percent': percent
+ })
+ }
+ }
+ });
+ return inRangeTransitions;
+ },
+
+ // Returns true if a transition is in rage false if not
+ hasTransitionInRange : function( smilElement, animateTime ) {
+ return ( this.getTransitionInRange( smilElement, animateTime )
!= 0 );
+ },
+
+ // hide any associative transition overlays ( ie the element is no
longer displayed )
+ hideElementOverlays: function( smilElement ){
+
+ },
+
// Generates a transition overlay based on the transition type
transformTransitionOverlay: function( smilElement, animateTime ) {
+ var _this = this;
/*mw.log('SmilTransitions::transformTransitionOverlay:' +
animateTime +
' tIn:' + $j( smilElement ).attr( 'transIn' )
+
- ' tOut:' + $j( smilElement ).attr( 'transOut' )
);
- */
- // Get the transition type and id:
- var transitionInRange = false;
+ ' tOut:' + $j( smilElement ).attr( 'transOut' )
);*/
- if( $j( smilElement ).attr( 'transIn' ) ){
- $transition = this.smil.$dom.find( '#' + $j(
smilElement ).attr( 'transIn' ) );
- // Check if the transition is in range
- var transitionDuration = this.smil.parseTime(
$transition.attr('dur') );
- //mw.log("SmilTransitions: test: td:" +
transitionDuration + ' > ' + animateTime);
- if( transitionDuration > animateTime ){
- var percent = animateTime / transitionDuration;
- /* mw.log("SmilTransitions: " + $j( smilElement
).attr( 'transIn' ) + " in range for " +
-
this.smil.getSmilElementPlayerID( smilElement ) + " draw:" + percent );
- */
- this.drawTransition( percent, $transition,
smilElement );
- transitionInRange = true;
- } else {
- // Out of range hide this overlay
- $j( '#' + this.getTransitionOverlayId(
$transition, smilElement ) ).hide();
- }
- }
-
- if( $j( smilElement ).attr( 'transOut' ) ){
- $transition = this.smil.$dom.find( '#' + $j(
smilElement ).attr( 'transOut' ) );
- // Check if the transition is in range
- var duration = this.smil.parseTime(
$transition.attr('dur') );
- var nodeDuration = this.smil.getBody().getClipDuration(
smilElement );
- if( animateTime > ( nodeDuration - duration ) ){
- var percent = animateTime - ( nodeDuration -
duration ) / duration;
- // Invert the percentage for "transOut"
- percent = 1 - percent;
-
- this.drawTransition( percent, $transition,
smilElement );
- transitionInRange = true;
- } else {
- // Hide this overlay
- $j( '#' + this.getTransitionOverlayId(
$transition, smilElement ) ).hide();
- }
- }
- return transitionInRange;
+ // Get the transition in range
+ var transitionInRange = this.getTransitionInRange( smilElement,
animateTime );
+ $j.each( transitionInRange, function(inx, tran){
+ _this.drawTransition( tran.percent, tran.transition,
smilElement );
+ });
},
/**
- * elementOutOfRange check if an elements transition overlays are out
of range and hide them
+ * hideTransitionElements hides transition overlays that are out of
range
*/
- elementOutOfRange: function ( smilElement, time ){
+ hideTransitionElements: function ( smilElement ){
// for now just hide
if( $j( smilElement ).attr( 'transIn' ) ){
$j( '#' +
@@ -118,7 +129,7 @@
transitionFunctionMap : {
'fade' : {
'fadeFromColor': function( _this, percent, $transition,
smilElement ){
- // Add the overlay if missing
+ // Add the overlay if missing
var transitionOverlayId =
_this.getTransitionOverlayId( $transition, smilElement );
if( $j( '#' + transitionOverlayId ).length ==
0 ){
@@ -138,7 +149,7 @@
percent = 1 - percent;
// Update the overlay opacity
- $j( '#' + transitionOverlayId ).css(
'opacity', percent );
+ $j( '#' + transitionOverlayId ).show().css(
'opacity', percent );
},
'crossfade': function( _this, percent, $transition,
smilElement ){
// fade "ourselves" ... in cases of overlapping
timelines this will create a true cross fade
_______________________________________________
MediaWiki-CVS mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
