r79204 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r79203‎ \| r79204 \| r79205 >
Date:	21:23, 29 December 2010
Author:	dale
Status:	deferred
Tags:
Comment:	refactored sequence tools into respective tool class files
Modified paths:	/branches/MwEmbedStandAlone/modules/EmbedPlayer/mw.EmbedPlayer.js (modified) (history) /branches/MwEmbedStandAlone/modules/EmbedPlayer/skins/mw.PlayerControlBuilder.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/loader.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerKeyBindings.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerServer.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTimeline.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolDuration.js (added) (history) /branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolEditTemplate.js (added) (history) /branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolPanzoom.js (added) (history) /branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolTransitions.js (added) (history) /branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolTrim.js (added) (history) /branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerTools.js (modified) (history) /branches/MwEmbedStandAlone/remotes/mediaWiki.js (modified) (history)

Diff [purge]

Index: branches/MwEmbedStandAlone/modules/EmbedPlayer/mw.EmbedPlayer.js
—	—	@@ -2041,7 +2041,7 @@
2042	2042	.css({
2043	2043	'width' : this.width + 'px',
2044	2044	'height' : this.height + 'px',
2045		~~- 'position' : 'relative',~~
	2045	+ 'position' : 'relative'
2046	2046	})
2047	2047	)
2048	2048	// position the "player" absolute inside the relative interface
—	—	@@ -2069,7 +2069,7 @@
2070	2070	}
2071	2071	if( !this.useNativePlayerControls() && !this.isPersistentNativePlayer() && !_this.controlBuilder.checkOverlayControls() ){
2072	2072	// give the interface more space for the controls:
2073		~~- this.$interface.css('height', this.height + _this.controlBuilder.height );~~
	2073	+ this.$interface.css('height', this.height + _this.controlBuilder.height )
2074	2074	}
2075	2075
2076	2076	// Update Thumbnail for the "player"
Index: branches/MwEmbedStandAlone/modules/EmbedPlayer/skins/mw.PlayerControlBuilder.js
—	—	@@ -123,12 +123,12 @@
124	124	} );
125	125
126	126	// Check for overlay controls:
127		~~- if( ! _this.checkOverlayControls() && ! embedPlayer.controls === false ) {~~
	127	+ /*if( ! _this.checkOverlayControls() && ! embedPlayer.controls === false ) {
128	128	// Add some space to interface for the control bar ( if not overlaying controls )
129	129	$j( embedPlayer ).css( {
130	130	'height' : parseInt( embedPlayer.height ) - parseInt( this.height )
131	131	} );
132		~~- }~~
	132	+ }*/
133	133	// Make room for audio controls in the interface:
134	134	if( embedPlayer.isAudio() && embedPlayer.$interface.height() == 0 ){
135	135	embedPlayer.$interface.css( {
—	—	@@ -569,12 +569,14 @@
570	570	$interface.unbind();
571	571
572	572	var bindFirstPlay = false;
	573	+
573	574	// Bind into play.ctrl namespace ( so we can unbind without affecting other play bindings )
574	575	$j(embedPlayer).unbind('play.ctrl').bind('play.ctrl', function() { //Only bind once played
575	576	if(bindFirstPlay) {
576	577	return ;
577	578	}
578	579	bindFirstPlay = true;
	580	+
579	581	var dblClickTime = 300;
580	582	var lastClickTime = 0;
581	583	var didDblClick = false;
—	—	@@ -628,6 +630,12 @@
629	631	.hover( bindSpaceUp, bindSpaceDown );
630	632
631	633	} else { // hide show controls:
	634	+
	635	+ // Show controls on click:
	636	+ $j(embedPlayer).unbind('click.showCtrlBar').bind('click.showCtrlBar', function(){
	637	+ _this.showControlBar();
	638	+ });
	639	+
632	640	//$interface.css({'background-color': 'red'});
633	641	// Bind a startTouch to show controls
634	642	$interface.bind( 'touchstart', function() {
Index: branches/MwEmbedStandAlone/modules/Sequencer/loader.js
—	—	@@ -23,7 +23,14 @@
24	24	"mw.SequencerPlayer" : "mw.SequencerPlayer.js",
25	25	"mw.SequencerTimeline" : "mw.SequencerTimeline.js",
26	26	"mw.SequencerKeyBindings" : "mw.SequencerKeyBindings.js",
	27	+
27	28	"mw.SequencerTools" : "tools/mw.SequencerTools.js",
	29	+ "mw.SequencerToolDuration" : "tools/mw.SequencerToolDuration.js",
	30	+ "mw.SequencerToolEditTemplate" : "tools/mw.SequencerToolEditTemplate.js",
	31	+ "mw.SequencerToolPanzoom" : "tools/mw.SequencerToolPanzoom.js",
	32	+ "mw.SequencerToolTransitions" : "tools/mw.SequencerToolTransitions.js",
	33	+ "mw.SequencerToolTrim" : "tools/mw.SequencerToolTrim.js",
	34	+
28	35	"mw.SequencerMenu" : "mw.SequencerMenu.js",
29	36
30	37	"mw.SequencerActionsSequence" : "actions/mw.SequencerActionsSequence.js",
—	—	@@ -72,7 +79,14 @@
73	80
74	81	'mw.SequencerTimeline',
75	82	'mw.SequencerKeyBindings',
76		~~- 'mw.SequencerTools',~~
	83	+
	84	+ "mw.SequencerTools",
	85	+ "mw.SequencerToolDuration",
	86	+ "mw.SequencerToolEditTemplate",
	87	+ "mw.SequencerToolPanzoom",
	88	+ "mw.SequencerToolTransitions" ,
	89	+ "mw.SequencerToolTrim",
	90	+
77	91	"$j.fn.jPicker",
78	92	"mw.style.jPicker",
79	93
Index: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolTrim.js
—	—	@@ -0,0 +1,190 @@
	2	+
	3	+/**
	4	+ * Extend the base tools prototype with Trim function:
	5	+ * @dependency ToolDuration
	6	+ */
	7	+$j.extend( mw.SequencerTools.prototype, {
	8	+ tools: {
	9	+ 'trim': {
	10	+ 'editWidgets' : [ 'trimTimeline' ],
	11	+ 'editableAttributes' : ['clipBegin','dur' ],
	12	+ 'contentTypes': ['video', 'audio']
	13	+ }
	14	+ },
	15	+ editableAttributes : {
	16	+ 'dur' :{
	17	+ 'type': 'time',
	18	+ 'title' : gM('mwe-sequencer-clip-duration' )
	19	+ },
	20	+ 'clipBegin': {
	21	+ 'type': 'time',
	22	+ 'title' : gM('mwe-sequencer-start-time' )
	23	+ }
	24	+ },
	25	+ editWidgets: {
	26	+ 'trimTimeline' : {
	27	+ 'onChange': function( _this, smilElement ){
	28	+ var smil = _this.sequencer.getSmil();
	29	+ // Update the preview thumbs
	30	+ var $target = $j( '#editWidgets_trimTimeline' );
	31	+ /**
	32	+ * Currently we disable thumb preview updates since multiple seeks are costly
	33	+ */
	34	+ /*var updateDurationThumb = function(){
	35	+ // Check the duration:
	36	+ var clipDur = $j('#editTool_trim_dur').val();
	37	+ if( clipDur ){
	38	+ // Render a thumbnail for the updated duration
	39	+ smil.getLayout().drawSmilElementToTarget(
	40	+ smilElement,
	41	+ $target.find('.trimEndThumb'),
	42	+ clipDur
	43	+ );
	44	+ }
	45	+ }
	46	+
	47	+ var clipBeginTime = $j('#editTool_trim_clipBegin').val();
	48	+ if( !clipBeginTime ){
	49	+ $target.find('.trimStartThumb').hide();
	50	+ } else {
	51	+ mw.log("Should update trimStartThumb::" + $j(smilElement).attr('clipBegin') );
	52	+ // Render a thumbnail for relative start time = 0
	53	+ smil.getLayout().drawSmilElementToTarget(
	54	+ smilElement,
	55	+ $target.find('.trimStartThumb'),
	56	+ 0,
	57	+ updateDurationThumb()
	58	+ )
	59	+ }
	60	+ */
	61	+
	62	+ // Register the edit state for undo / redo
	63	+ _this.sequencer.getActionsEdit().registerEdit();
	64	+ },
	65	+ // Return the trimTimeline edit widget
	66	+ 'draw': function( _this, target, smilElement ){
	67	+ var smil = _this.sequencer.getSmil();
	68	+ var sliderScale = 2000 // assume slider is never more than 2000 pixles wide.
	69	+ // check if thumbs are supported
	70	+ /*if( _this.sequencer.getSmil().getRefType( smilElement ) == 'video' ){
	71	+ $j(target).append(
	72	+ $j('<div />')
	73	+ .addClass( 'trimStartThumb ui-corner-all' ),
	74	+ $j('<div />')
	75	+ .addClass( 'trimEndThumb ui-corner-all' ),
	76	+ $j('<div />').addClass('ui-helper-clearfix')
	77	+ )
	78	+ }*/
	79	+ // The local scope fullClipDuration
	80	+ var fullClipDuration = null;
	81	+
	82	+ // Some slider functions
	83	+ var sliderToTime = function( sliderval ){
	84	+ return parseInt( fullClipDuration * ( sliderval / sliderScale ) );
	85	+ }
	86	+ var timeToSlider = function( time ){
	87	+ return parseInt( ( time / fullClipDuration ) * sliderScale );
	88	+ }
	89	+
	90	+ // Special flag to prevent slider updates from propgating if the change was based on user input
	91	+ var onInputChangeFlag = false;
	92	+ var onInputChange = function( sliderIndex, timeValue ){
	93	+ onInputChangeFlag = true;
	94	+ if( fullClipDuration ){
	95	+ // Update the slider
	96	+ var sliderTime = ( sliderIndex == 0 )? timeToSlider( timeValue ) :
	97	+ timeToSlider( timeValue + smil.parseTime( $j('#' + _this.getEditToolInputId( 'trim', 'clipBegin') ).val() ) );
	98	+
	99	+ $j('#'+_this.sequencer.id + '_trimTimeline' )
	100	+ .slider(
	101	+ "values",
	102	+ sliderIndex,
	103	+ sliderTime
	104	+ );
	105	+ }
	106	+ // restore the onInputChangeFlag
	107	+ onInputChangeFlag = false;
	108	+
	109	+ // Directly update the smil xml from the user Input
	110	+ if( sliderIndex == 0 ){
	111	+ // Update clipBegin
	112	+ _this.editableTypes['time'].update( _this, smilElement, 'clipBegin', timeValue );
	113	+ } else {
	114	+ // Update dur
	115	+ _this.editableTypes['time'].update( _this, smilElement, 'dur', timeValue );
	116	+ }
	117	+ mw.log(' should update inx:' + sliderIndex + ' set to: ' + timeValue);
	118	+
	119	+ // Register the change
	120	+ _this.editWidgets.trimTimeline.onChange( _this, smilElement );
	121	+ };
	122	+
	123	+ // Add a trim binding:
	124	+ $j('#' + _this.getEditToolInputId( 'trim', 'clipBegin') )
	125	+ .change( function(){
	126	+ var timeValue = smil.parseTime( $j(this).val() );
	127	+ onInputChange( 0, timeValue);
	128	+ });
	129	+
	130	+ $j('#' + _this.getEditToolInputId( 'trim', 'dur') )
	131	+ .change( function(){
	132	+ var timeValue = smil.parseTime( $j(this).val() );
	133	+ onInputChange( 1, timeValue );
	134	+ });
	135	+
	136	+ // Update the thumbnails:
	137	+ _this.editWidgets.trimTimeline.onChange( _this, smilElement );
	138	+
	139	+ // Get the clip full duration to build out the timeline selector
	140	+ smil.getBody().getClipAssetDuration( smilElement, function( clipDuration ) {
	141	+ // update the local scope global
	142	+ fullClipDuration = clipDuration;
	143	+
	144	+ var startSlider = timeToSlider( smil.parseTime( $j('#editTool_trim_clipBegin').val() ) );
	145	+ var sliderValues = [
	146	+ startSlider,
	147	+ startSlider + timeToSlider( smil.parseTime( $j('#editTool_trim_dur').val() ) )
	148	+ ];
	149	+ // Return a trim tool binded to smilElement id update value events.
	150	+ $j(target).append(
	151	+ $j('<div />')
	152	+ .attr( 'id', _this.sequencer.id + '_trimTimeline' )
	153	+ .css({
	154	+ 'position': 'absolute',
	155	+ 'left' : '25px',
	156	+ 'right' : '35px',
	157	+ 'margin': '5px'
	158	+ })
	159	+ .slider({
	160	+ range: true,
	161	+ min: 0,
	162	+ max: sliderScale,
	163	+ values: sliderValues,
	164	+ slide: function(event, ui) {
	165	+
	166	+ $j('#' + _this.getEditToolInputId( 'trim', 'clipBegin') ).val(
	167	+ mw.seconds2npt( sliderToTime( ui.values[0] ), true )
	168	+ );
	169	+ $j('#' + _this.getEditToolInputId( 'trim', 'dur') ).val(
	170	+ mw.seconds2npt( sliderToTime( ui.values[1] - ui.values[0] ), true )
	171	+ );
	172	+ },
	173	+ change: function( event, ui ) {
	174	+ if( ! onInputChangeFlag ){
	175	+ // Update clipBegin
	176	+ _this.editableTypes['time'].update( _this, smilElement, 'clipBegin', sliderToTime( ui.values[ 0 ] ) );
	177	+
	178	+ // Update dur
	179	+ _this.editableTypes['time'].update( _this, smilElement, 'dur', sliderToTime( ui.values[ 1 ]- ui.values[0] ) );
	180	+
	181	+ // update the widget display
	182	+ _this.editWidgets.trimTimeline.onChange( _this, smilElement );
	183	+ }
	184	+ }
	185	+ })
	186	+ );
	187	+ });
	188	+ }
	189	+ }
	190	+ }
	191	+});
Property changes on: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolTrim.js
___________________________________________________________________
Added: svn:mime-type
1	192	+ text/plain
Index: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolTransitions.js
—	—	@@ -0,0 +1,343 @@
	2	+/**
	3	+ * Extend the base tools prototype with transition tool
	4	+ */
	5	+$j.extend( mw.SequencerTools.prototype, {
	6	+ tools : {
	7	+ 'transitions' : {
	8	+ 'editWidgets' : ['editTransitions'],
	9	+ 'contentTypes': ['video', 'img', 'cdata_html', 'mwtemplate' ]
	10	+ }
	11	+ },
	12	+ editWidgets:{
	13	+ 'editTransitions' : {
	14	+ 'transitionTypes' : {
	15	+ 'fade':{
	16	+ 'type' : {
	17	+ 'value' : 'fade',
	18	+ 'editType' : 'hidden'
	19	+ },
	20	+ 'dur' : {
	21	+ 'value' : '0:02',
	22	+ 'editType' : 'time'
	23	+ }
	24	+ },
	25	+ 'fadeColor':{
	26	+ 'extends':'fade',
	27	+ 'fadeColor' : {
	28	+ 'value' : '#000',
	29	+ 'editType' : 'color'
	30	+ }
	31	+ },
	32	+ // Set high level select attribute default
	33	+ 'fadeFromColor' : {
	34	+ 'extends': 'fadeColor',
	35	+ 'selectable' : ['transIn'],
	36	+ 'subtype' : {
	37	+ 'value' : 'fadeFromColor',
	38	+ 'editType' : 'hidden'
	39	+ }
	40	+ },
	41	+ 'fadeToColor' : {
	42	+ 'extends': 'fadeColor',
	43	+ 'selectable' : ['transOut'],
	44	+ 'subtype' : {
	45	+ 'value' : 'fadeToColor',
	46	+ 'editType' : 'hidden'
	47	+ }
	48	+ }
	49	+ // crossfade presently not supported
	50	+ /*,
	51	+ 'crossfade' : {
	52	+ 'extends': 'fade',
	53	+ 'selectable' : ['transIn', 'transOut'],
	54	+ 'subtype' : {
	55	+ 'value' : 'crossfade',
	56	+ 'editType' : 'hidden'
	57	+ }
	58	+ }*/
	59	+ },
	60	+ buildAttributeSet: function( transitionType ){
	61	+ var attributes = {};
	62	+ for( var i in this.transitionTypes[ transitionType ] ){
	63	+ if( i == 'extends' ){
	64	+ $j.extend( attributes, this.buildAttributeSet( this.transitionTypes[ transitionType ][i] ) );
	65	+ } else {
	66	+ attributes[ i ] = this.transitionTypes[ transitionType ][i];
	67	+ }
	68	+ }
	69	+ return attributes;
	70	+ },
	71	+
	72	+ getTransitionId: function( smilElement, transitionType ){
	73	+ // Transition name is packed from attributeValue via striping the smilElement id
	74	+ // This is a consequence of smil's strange transition dom placement in the head of the
	75	+ // document instead of as child nodes. The idea with smil is the transition can be 'reused'
	76	+ // but in the sequencer context we want unique transitions so that each can be customized
	77	+ // independently.
	78	+ return $j( smilElement ).attr('id') + '_' + transitionType;
	79	+ },
	80	+
	81	+ // Get a transition element ( if it does not exist add it )
	82	+ getTransitionElement: function( _this, smilElement, transitionType ){
	83	+ var $smilDom = _this.sequencer.getSmil().$dom;
	84	+ var transId = this.getTransitionId( smilElement, transitionType );
	85	+ if( $smilDom.find( '#' + transId ).length == 0 ){
	86	+ $smilDom.find('head').append(
	87	+ $j('<transition />')
	88	+ .attr('id', transId )
	89	+ );
	90	+ }
	91	+ return $smilDom.find( '#' + transId );
	92	+ },
	93	+
	94	+ getSelectedTransitionType: function(smilElement, transitionDirection ){
	95	+ var attributeValue = $j( smilElement ).attr( transitionDirection );
	96	+ if( !attributeValue )
	97	+ return '';
	98	+ return attributeValue.replace( $j( smilElement ).attr('id') + '_', '' );
	99	+ },
	100	+
	101	+ getBindedTranstionEdit: function( _this, smilElement, transitionType ){
	102	+ var _editTransitions = this;
	103	+ var $editTransitionsSet = $j('<div />');
	104	+ // Return the empty div on empty transtionType
	105	+ if( transitionType == '' ){
	106	+ return $editTransitionsSet
	107	+ }
	108	+
	109	+ // Get the smil transition element
	110	+ var $smilTransitionElement = this.getTransitionElement( _this, smilElement, transitionType )
	111	+ // Get all the editable attributes for transitionName
	112	+ var attributeSet = this.buildAttributeSet( transitionType );
	113	+
	114	+ $j.each( attributeSet, function( attributeKey, transitionAttribute ){
	115	+ // Skip setup attributes
	116	+ if( attributeKey == 'extends' \|\| attributeKey == 'selectable' ){
	117	+ return true;
	118	+ }
	119	+ var initialValue = $smilTransitionElement.attr( attributeKey );
	120	+ // Set to the default value if the transition attribute has no attribute key
	121	+ if( !initialValue){
	122	+ initialValue = transitionAttribute.value
	123	+ $smilTransitionElement.attr( attributeKey, transitionAttribute.value )
	124	+ }
	125	+
	126	+ if( transitionAttribute.editType == 'time' ){
	127	+ $editTransitionsSet.append(
	128	+ _this.getInputBox({
	129	+ 'title' : gM('mwe-sequencer-tools-duration'),
	130	+ 'inputSize' : 5,
	131	+ 'initialValue' :initialValue,
	132	+ 'change': function(){
	133	+ // parse smil time
	134	+ var time = _this.sequencer.getSmil().parseTime( $j(this).val() );
	135	+
	136	+ // Check if time > clip duration
	137	+ if( time > $j( smilElement ).attr('dur') ){
	138	+ time = $j( smilElement ).attr('dur');
	139	+ }
	140	+ if( time < 0 )
	141	+ time = 0;
	142	+
	143	+ // Update the input value
	144	+ $j( this ).val( mw.seconds2npt( time ) );
	145	+ // Update the smil attribute
	146	+ $smilTransitionElement.attr( attributeKey, time );
	147	+ // run the onChange action
	148	+ _editTransitions.onChange( _this, smilElement );
	149	+ }
	150	+ })
	151	+ )
	152	+ } else if ( transitionAttribute.editType == 'color' ){
	153	+ // Add the color picker:
	154	+ $editTransitionsSet.append(
	155	+ _this.getInputBox({
	156	+ 'title' : gM('mwe-sequencer-tools-transitions-color'),
	157	+ 'inputSize' : 8,
	158	+ 'initialValue' : initialValue
	159	+ })
	160	+ .addClass("jColorPicker")
	161	+ );
	162	+ $editTransitionsSet.find('.jColorPicker input').jPicker(
	163	+ _editTransitions.colorPickerConfig,
	164	+ function(color){
	165	+ // commit color ( update undo / redo )
	166	+
	167	+ },
	168	+ function(color){
	169	+ // live preview of selection ( update player )
	170	+ //mw.log('update: ' + attributeKey + ' set to: #' + color.val('hex'));
	171	+ $smilTransitionElement.attr( attributeKey, '#' + color.val('hex') );
	172	+ _editTransitions.onChange( _this, smilElement );
	173	+ }
	174	+ )
	175	+ // adjust the position of the color button:
	176	+ $editTransitionsSet.find('.jColorPicker .Icon').css('top', '-5px');
	177	+ }
	178	+ })
	179	+ return $editTransitionsSet;
	180	+ },
	181	+ /**
	182	+ * Could move to a more central location if we use the color picker other places
	183	+ */
	184	+ colorPickerConfig: {
	185	+ 'window' : {
	186	+ 'expandable': true,
	187	+ 'effects' : {
	188	+ 'type' : 'show'
	189	+ },
	190	+ 'position' : {
	191	+ 'x' : '10px',
	192	+ 'y' : 'bottom'
	193	+ }
	194	+ },
	195	+ 'images' : {
	196	+ 'clientPath' : mw.getMwEmbedPath() + 'modules/Sequencer/tools/jPicker/images/'
	197	+ },
	198	+ 'localization' : {
	199	+ 'text' : {
	200	+ 'title' : gM('mwe-sequencer-color-picker-title'),
	201	+ 'newColor' : gM('mwe-sequencer-menu-sequence-new'),
	202	+ 'currentColor' : gM('mwe-sequencer-color-picker-current'),
	203	+ 'ok' : gM('mwe-ok'),
	204	+ 'cancel': gM('mwe-cancel')
	205	+ },
	206	+ 'tooltips':{
	207	+ 'colors':
	208	+ {
	209	+ 'newColor': gM('mwe-sequencer-color-picker-new-color'),
	210	+ 'currentColor': gM('mwe-sequencer-color-picker-currentColor')
	211	+ },
	212	+ 'buttons':
	213	+ {
	214	+ ok: gM('mwe-sequencer-color-picker-commit' ),
	215	+ cancel: gM('mwe-sequencer-color-picker-cancel-desc')
	216	+ },
	217	+ 'hue':
	218	+ {
	219	+ radio: gM('mwe-sequencer-color-picker-hue-desc'),
	220	+ textbox: gM('mwe-sequencer-color-picker-hue-textbox')
	221	+ },
	222	+ 'saturation':
	223	+ {
	224	+ radio: gM('mwe-sequencer-color-picker-saturation-desc'),
	225	+ textbox: gM('mwe-sequencer-color-picker-saturation-textbox')
	226	+ },
	227	+ 'value':
	228	+ {
	229	+ radio: gM('mwe-sequencer-color-picker-value-desc'),
	230	+ textbox: gM('mwe-sequencer-color-picker-value-textbox')
	231	+ },
	232	+ 'red':
	233	+ {
	234	+ radio: gM('mwe-sequencer-color-picker-red-desc'),
	235	+ textbox: gM('mwe-sequencer-color-picker-red-textbox')
	236	+ },
	237	+ 'green':
	238	+ {
	239	+ radio: gM('mwe-sequencer-color-picker-green-desc'),
	240	+ textbox: gM('mwe-sequencer-color-picker-green-textbox')
	241	+ },
	242	+ 'blue':
	243	+ {
	244	+ radio: gM('mwe-sequencer-color-picker-blue-desc'),
	245	+ textbox: gM('mwe-sequencer-color-picker-blue-textbox')
	246	+ },
	247	+ 'alpha':
	248	+ {
	249	+ radio: gM('mwe-sequencer-color-picker-alpha-desc'),
	250	+ textbox: gM('mwe-sequencer-color-picker-alpha-textbox')
	251	+ },
	252	+ 'hex':
	253	+ {
	254	+ textbox: gM('mwe-sequencer-color-picker-hex-desc'),
	255	+ alpha: gM('mwe-sequencer-color-picker-hex-textbox')
	256	+ }
	257	+ }
	258	+ }
	259	+ },
	260	+ 'onChange': function( _this, smilElement ){
	261	+ // Update the sequence duration :
	262	+ _this.sequencer.getEmbedPlayer().getDuration( true );
	263	+
	264	+ // xxx we should re-display the current time
	265	+ _this.sequencer.getEmbedPlayer().setCurrentTime(
	266	+ $j( smilElement ).data('startOffset')
	267	+ );
	268	+ },
	269	+ 'draw': function( _this, target, smilElement ){
	270	+ // draw the two attribute types
	271	+ var _editTransitions = this;
	272	+ var $transitionWidget = $j('<div />');
	273	+
	274	+ var transitionDirections = ['transIn', 'transOut'];
	275	+ $j.each(transitionDirections, function( inx, transitionDirection ){
	276	+ $transitionWidget.append(
	277	+ $j('<div />').css('clear', 'both')
	278	+ ,
	279	+ $j('<h3 />').text( gM('mwe-sequencer-tools-transitions-' + transitionDirection ))
	280	+ )
	281	+ // Output the top level empty select
	282	+ $transSelect = $j('<select />').append(
	283	+ $j('<option />')
	284	+ .attr('value', '')
	285	+ );
	286	+ var selectedTransitionType = _editTransitions.getSelectedTransitionType( smilElement, transitionDirection);
	287	+ for( var transitionType in _editTransitions.transitionTypes ){
	288	+ if( _editTransitions.transitionTypes[ transitionType ].selectable
	289	+ &&
	290	+ $j.inArray( transitionDirection, _editTransitions.transitionTypes[transitionType].selectable ) !== -1 )
	291	+ {
	292	+ // Output the item if its selectable for the current transitionType
	293	+ var $option = $j("<option />")
	294	+ .attr('value', transitionType )
	295	+ .text( transitionType )
	296	+ // Add selected attribute if selected:
	297	+ if( selectedTransitionType == transitionType ){
	298	+ $option.attr('selected', 'true');
	299	+ }
	300	+ $transSelect.append( $option );
	301	+ }
	302	+ }
	303	+ $transSelect.change( function(){
	304	+ var transitionType = $j(this).val();
	305	+ $transitionWidget.find( '#' + transitionDirection + '_attributeContainer' ).html(
	306	+ _editTransitions.getBindedTranstionEdit(
	307	+ _this, smilElement, transitionType
	308	+ )
	309	+ )
	310	+ // Update the smil attribute:
	311	+ $j( smilElement ).attr(
	312	+ transitionDirection,
	313	+ _editTransitions.getTransitionId( smilElement, transitionType )
	314	+ )
	315	+ // Update the player on select change
	316	+ _editTransitions.onChange( _this, smilElement );
	317	+ });
	318	+
	319	+ // Add the select to the $transitionWidget
	320	+ $transitionWidget.append( $transSelect );
	321	+
	322	+ // Set up the transConfig container:
	323	+ var $transConfig = $j('<span />')
	324	+ .attr('id', transitionDirection + '_attributeContainer');
	325	+
	326	+ // If a given transition type is selected output is editable attributes
	327	+ if( selectedTransitionType != '' ) {
	328	+ $transConfig.append(
	329	+ _editTransitions.getBindedTranstionEdit(
	330	+ _this, smilElement, selectedTransitionType
	331	+ )
	332	+ )
	333	+ }
	334	+ $transitionWidget.append( $transConfig );
	335	+
	336	+ // update the player for the default selected set.
	337	+ _editTransitions.onChange( _this, smilElement );
	338	+ });
	339	+ // add the transition widget to the target
	340	+ $j( target ).append( $transitionWidget );
	341	+ }
	342	+ }
	343	+ }
	344	+});
\ No newline at end of file
Property changes on: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolTransitions.js
___________________________________________________________________
Added: svn:mime-type
1	345	+ text/plain
Index: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolEditTemplate.js
—	—	@@ -0,0 +1,98 @@
	2	+/**
	3	+ * Extend the base tools prototype with Edit Template tool
	4	+ */
	5	+$j.extend( mw.SequencerTools.prototype, {
	6	+ tools : {
	7	+ 'templateedit' : {
	8	+ 'editWidgets' : ['editTemplate'],
	9	+ 'editableAttributes' : [ 'apititlekey' ],
	10	+ 'contentTypes' : ['mwtemplate']
	11	+ }
	12	+ },
	13	+ editableAttributes: {
	14	+ 'apititlekey' : {
	15	+ 'type' : 'string',
	16	+ 'inputSize' : 30,
	17	+ 'title' : gM('mwe-sequencer-template-name' )
	18	+ }
	19	+ },
	20	+ editWidgets : {
	21	+ 'editTemplate':{
	22	+ 'onChange' : function( _this, smilElement ){
	23	+ // Clear the smilElement template cache:
	24	+ $j( smilElement ).data('templateHtmlCache', null);
	25	+ // Re draw the smilElement in the player
	26	+ var smil = _this.sequencer.getSmil();
	27	+ $playerTarget = $j('#' + smil.getSmilElementPlayerID( smilElement ) );
	28	+ $playerTarget.loadingSpinner();
	29	+ smil.getLayout().getSmilTemplateHtml( smilElement, $playerTarget, function(){
	30	+ mw.log("SequencerTools::editWidgets: smil template updated");
	31	+ });
	32	+ },
	33	+ 'draw': function( _this, target, smilElement ){
	34	+ // Parse the set of templates from the template text cache
	35	+ $j( target ).loadingSpinner();
	36	+
	37	+ if( ! $j( smilElement).attr('apititlekey') ){
	38	+ mw.log("Error: can't grab template without title key")
	39	+ return ;
	40	+ }
	41	+ // Get the template wikitext
	42	+ _this.sequencer
	43	+ .getServer()
	44	+ .getTemplateText( $j( smilElement).attr('apititlekey'), function( templateText ){
	45	+ //mw.log("GotTemplateText: " + templateText );
	46	+ if( ! templateText \|\| typeof templateText != 'string' ){
	47	+ mw.log("Error: could not get wikitext form titlekey: " + $j( smilElement).attr('apititlekey'))
	48	+ return ;
	49	+ }
	50	+ $j( target ).empty().append(
	51	+ $j('<h3 />').text( gM('mwe-sequencer-edittemplate-params') )
	52	+ )
	53	+
	54	+ // This is not supposed to be perfect ..
	55	+ // just get you 'most' of the input vars 'most' of the time via the greedy regEx:
	56	+ var templateVars = templateText.match(/\{\{\{([^\}]*)\}\}\}/gi);
	57	+ var cleanTemplateParams = {};
	58	+
	59	+ for( i =0;i<templateVars.length; i++ ){
	60	+ var tVar = templateVars[i];
	61	+ // Remove all {{{ and }}}
	62	+ tVar = tVar.replace(/\{\{\{/, '' ).replace( /\}\}\}/, '');
	63	+ // Check for \| operator
	64	+ if( tVar.indexOf("\|") != -1 ){
	65	+ // Only the first version of the template var
	66	+ tVar = tVar.split( '\|')[0];
	67	+ }
	68	+ cleanTemplateParams[ tVar ] = true;
	69	+ }
	70	+ // Output input boxes for each template var as a param
	71	+ for( var paramName in cleanTemplateParams ){
	72	+ $j( target ).append(
	73	+ _this.getEditableAttribute(
	74	+ smilElement,
	75	+ 'editTemplate',
	76	+ 'param',
	77	+ paramName
	78	+ )
	79	+ .find('input')
	80	+ // Bind the change event:
	81	+ .change(function(){
	82	+ _this.editWidgets.editTemplate.onChange(
	83	+ _this,
	84	+ smilElement
	85	+ )
	86	+ })
	87	+ .parent()
	88	+ ,
	89	+ $j('<div />')
	90	+ .css('clear', 'both')
	91	+ )
	92	+ }
	93	+
	94	+
	95	+ });
	96	+ }
	97	+ }
	98	+ }
	99	+});
\ No newline at end of file
Property changes on: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolEditTemplate.js
___________________________________________________________________
Added: svn:mime-type
1	100	+ text/plain
Index: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerTools.js
—	—	@@ -21,59 +21,23 @@
22	22	// The current selected tool ( lazy init )
23	23	currentToolId: null,
24	24
25		~~- // JSON tools config~~
26		~~- tools:{~~
27		~~- 'trim':{~~
28		~~- 'editWidgets' : [ 'trimTimeline' ],~~
29		~~- 'editableAttributes' : ['clipBegin','dur' ],~~
30		~~- 'contentTypes': ['video', 'audio']~~
31		~~- },~~
32		~~- 'duration':{~~
33		~~- 'editableAttributes' : [ 'dur' ],~~
34		~~- 'contentTypes': ['img', 'cdata_html', 'mwtemplate']~~
35		~~- },~~
36		~~- 'panzoom' : {~~
37		~~- 'editWidgets' : ['panzoom'],~~
38		~~- 'editableAttributes' : [ 'panZoom' ],~~
39		~~- 'contentTypes': [ 'img', 'video' ],~~
40		~~- 'supportsKeyFrames' : 'true'~~
41		~~- },~~
42		~~- 'templateedit' : {~~
43		~~- 'editWidgets' : ['editTemplate'],~~
44		~~- 'editableAttributes' : [ 'apititlekey' ],~~
45		~~- 'contentTypes' : ['mwtemplate']~~
46		~~- },~~
47		~~- 'transitions' : {~~
48		~~- 'editWidgets' : ['editTransitions'],~~
49		~~- 'contentTypes': ['video', 'img', 'cdata_html', 'mwtemplate' ]~~
50		~~- }~~
51		~~- },~~
52		~~- editableAttributes:{~~
53		~~- 'clipBegin':{~~
54		~~- 'type': 'time',~~
55		~~- 'title' : gM('mwe-sequencer-start-time' )~~
56		~~- },~~
57		~~- 'dur' :{~~
58		~~- 'type': 'time',~~
59		~~- 'title' : gM('mwe-sequencer-clip-duration' )~~
60		~~- },~~
61		~~- 'panZoom' :{~~
62		~~- 'type' : 'string',~~
63		~~- 'inputSize' : 15,~~
64		~~- 'title' : gM('mwe-sequencer-clip-panzoom' ),~~
65		~~- 'defaultValue' : '0%, 0%, 100%, 100%'~~
66		~~- },~~
67		~~- 'apititlekey' : {~~
68		~~- 'type' : 'string',~~
69		~~- 'inputSize' : 30,~~
70		~~- 'title' : gM('mwe-sequencer-template-name' )~~
71		~~- },~~
72		~~- // Special child node type~~
	25	+ // Tools config ( extended by tool classes )
	26	+ tools: { },
	27	+
	28	+ // Editable attributes ( extended by tool classes )
	29	+ editableAttributes: {
	30	+ // Special child node type ( shared )
73	31	'param' : {
74	32	'type' : 'childParam',
75	33	'inputSize' : 30
76	34	}
77	35	},
	36	+ // EditWidgets config ( extended by tool classes )
	37	+ editWidgets: { },
	38	+
	39	+ /**
	40	+ * Edit types shared across all tools
	41	+ */
78	42	editableTypes: {
79	43	'childParam': {
80	44	update: function( _this, smilElement, paramName, value){
—	—	@@ -243,769 +207,6 @@
244	208	}
245	209	}
246	210	},
247		~~- editWidgets: {~~
248		~~- 'editTransitions' : {~~
249		~~- 'transitionTypes' : {~~
250		~~- 'fade':{~~
251		~~- 'type' : {~~
252		~~- 'value' : 'fade',~~
253		~~- 'editType' : 'hidden'~~
254		~~- },~~
255		~~- 'dur' : {~~
256		~~- 'value' : '0:02',~~
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 presently not supported~~
285		~~- /*,~~
286		~~- 'crossfade' : {~~
287		~~- 'extends': 'fade',~~
288		~~- 'selectable' : ['transIn', 'transOut'],~~
289		~~- 'subtype' : {~~
290		~~- 'value' : 'crossfade',~~
291		~~- 'editType' : 'hidden'~~
292		~~- }~~
293		~~- }*/~~
294		~~- },~~
295		~~- buildAttributeSet: function( transitionType ){~~
296		~~- var attributes = {};~~
297		~~- for( var i in this.transitionTypes[ transitionType ] ){~~
298		~~- if( i == 'extends' ){~~
299		~~- $j.extend( attributes, this.buildAttributeSet( this.transitionTypes[ transitionType ][i] ) );~~
300		~~- } else {~~
301		~~- attributes[ i ] = this.transitionTypes[ transitionType ][i];~~
302		~~- }~~
303		~~- }~~
304		~~- return attributes;~~
305		~~- },~~
306		-
307		~~- getTransitionId: function( smilElement, transitionType ){~~
308		~~- // Transition name is packed from attributeValue via striping the smilElement id~~
309		~~- // This is a consequence of smil's strange transition dom placement in the head of the~~
310		~~- // document instead of as child nodes. The idea with smil is the transition can be 'reused'~~
311		~~- // but in the sequencer context we want unique transitions so that each can be customized~~
312		~~- // independently.~~
313		~~- return $j( smilElement ).attr('id') + '_' + transitionType;~~
314		~~- },~~
315		-
316		~~- // Get a transition element ( if it does not exist add it )~~
317		~~- getTransitionElement: function( _this, smilElement, transitionType ){~~
318		~~- var $smilDom = _this.sequencer.getSmil().$dom;~~
319		~~- var transId = this.getTransitionId( smilElement, transitionType );~~
320		~~- if( $smilDom.find( '#' + transId ).length == 0 ){~~
321		~~- $smilDom.find('head').append(~~
322		~~- $j('<transition />')~~
323		~~- .attr('id', transId )~~
324		~~- );~~
325		~~- }~~
326		~~- return $smilDom.find( '#' + transId );~~
327		~~- },~~
328		-
329		~~- getSelectedTransitionType: function(smilElement, transitionDirection ){~~
330		~~- var attributeValue = $j( smilElement ).attr( transitionDirection );~~
331		~~- if( !attributeValue )~~
332		~~- return '';~~
333		~~- return attributeValue.replace( $j( smilElement ).attr('id') + '_', '' );~~
334		~~- },~~
335		-
336		~~- getBindedTranstionEdit: function( _this, smilElement, transitionType ){~~
337		~~- var _editTransitions = this;~~
338		~~- var $editTransitionsSet = $j('<div />');~~
339		~~- // Return the empty div on empty transtionType~~
340		~~- if( transitionType == '' ){~~
341		~~- return $editTransitionsSet~~
342		~~- }~~
343		-
344		~~- // Get the smil transition element~~
345		~~- var $smilTransitionElement = this.getTransitionElement( _this, smilElement, transitionType )~~
346		~~- // Get all the editable attributes for transitionName~~
347		~~- var attributeSet = this.buildAttributeSet( transitionType );~~
348		-
349		~~- $j.each( attributeSet, function( attributeKey, transitionAttribute ){~~
350		~~- // Skip setup attributes~~
351		~~- if( attributeKey == 'extends' \|\| attributeKey == 'selectable' ){~~
352		~~- return true;~~
353		~~- }~~
354		~~- var initialValue = $smilTransitionElement.attr( attributeKey );~~
355		~~- // Set to the default value if the transition attribute has no attribute key~~
356		~~- if( !initialValue){~~
357		~~- initialValue = transitionAttribute.value~~
358		~~- $smilTransitionElement.attr( attributeKey, transitionAttribute.value )~~
359		~~- }~~
360		-
361		~~- if( transitionAttribute.editType == 'time' ){~~
362		~~- $editTransitionsSet.append(~~
363		~~- _this.getInputBox({~~
364		~~- 'title' : gM('mwe-sequencer-tools-duration'),~~
365		~~- 'inputSize' : 5,~~
366		~~- 'initialValue' :initialValue,~~
367		~~- 'change': function(){~~
368		~~- // parse smil time~~
369		~~- var time = _this.sequencer.getSmil().parseTime( $j(this).val() );~~
370		-
371		~~- // Check if time > clip duration~~
372		~~- if( time > $j( smilElement ).attr('dur') ){~~
373		~~- time = $j( smilElement ).attr('dur');~~
374		~~- }~~
375		~~- if( time < 0 )~~
376		~~- time = 0;~~
377		-
378		~~- // Update the input value~~
379		~~- $j( this ).val( mw.seconds2npt( time ) );~~
380		~~- // Update the smil attribute~~
381		~~- $smilTransitionElement.attr( attributeKey, time );~~
382		~~- // run the onChange action~~
383		~~- _editTransitions.onChange( _this, smilElement );~~
384		~~- }~~
385		~~- })~~
386		~~- )~~
387		~~- } else if ( transitionAttribute.editType == 'color' ){~~
388		~~- // Add the color picker:~~
389		~~- $editTransitionsSet.append(~~
390		~~- _this.getInputBox({~~
391		~~- 'title' : gM('mwe-sequencer-tools-transitions-color'),~~
392		~~- 'inputSize' : 8,~~
393		~~- 'initialValue' : initialValue~~
394		~~- })~~
395		~~- .addClass("jColorPicker")~~
396		~~- );~~
397		~~- $editTransitionsSet.find('.jColorPicker input').jPicker(~~
398		~~- _editTransitions.colorPickerConfig,~~
399		~~- function(color){~~
400		~~- // commit color ( update undo / redo )~~
401		-
402		~~- },~~
403		~~- function(color){~~
404		~~- // live preview of selection ( update player )~~
405		~~- //mw.log('update: ' + attributeKey + ' set to: #' + color.val('hex'));~~
406		~~- $smilTransitionElement.attr( attributeKey, '#' + color.val('hex') );~~
407		~~- _editTransitions.onChange( _this, smilElement );~~
408		~~- }~~
409		~~- )~~
410		~~- // adjust the position of the color button:~~
411		~~- $editTransitionsSet.find('.jColorPicker .Icon').css('top', '-5px');~~
412		~~- }~~
413		~~- })~~
414		~~- return $editTransitionsSet;~~
415		~~- },~~
416		- /**
417		~~- * Could move to a more central location if we use the color picker other places~~
418		~~- */~~
419		~~- colorPickerConfig: {~~
420		~~- 'window' : {~~
421		~~- 'expandable': true,~~
422		~~- 'effects' : {~~
423		~~- 'type' : 'show'~~
424		~~- },~~
425		~~- 'position' : {~~
426		~~- 'x' : '10px',~~
427		~~- 'y' : 'bottom'~~
428		~~- }~~
429		~~- },~~
430		~~- 'images' : {~~
431		~~- 'clientPath' : mw.getMwEmbedPath() + 'modules/Sequencer/tools/jPicker/images/'~~
432		~~- },~~
433		~~- 'localization' : {~~
434		~~- 'text' : {~~
435		~~- 'title' : gM('mwe-sequencer-color-picker-title'),~~
436		~~- 'newColor' : gM('mwe-sequencer-menu-sequence-new'),~~
437		~~- 'currentColor' : gM('mwe-sequencer-color-picker-current'),~~
438		~~- 'ok' : gM('mwe-ok'),~~
439		~~- 'cancel': gM('mwe-cancel')~~
440		~~- },~~
441		~~- 'tooltips':{~~
442		~~- 'colors':~~
443		~~- {~~
444		~~- 'newColor': gM('mwe-sequencer-color-picker-new-color'),~~
445		~~- 'currentColor': gM('mwe-sequencer-color-picker-currentColor')~~
446		~~- },~~
447		~~- 'buttons':~~
448		~~- {~~
449		~~- ok: gM('mwe-sequencer-color-picker-commit' ),~~
450		~~- cancel: gM('mwe-sequencer-color-picker-cancel-desc')~~
451		~~- },~~
452		~~- 'hue':~~
453		~~- {~~
454		~~- radio: gM('mwe-sequencer-color-picker-hue-desc'),~~
455		~~- textbox: gM('mwe-sequencer-color-picker-hue-textbox')~~
456		~~- },~~
457		~~- 'saturation':~~
458		~~- {~~
459		~~- radio: gM('mwe-sequencer-color-picker-saturation-desc'),~~
460		~~- textbox: gM('mwe-sequencer-color-picker-saturation-textbox')~~
461		~~- },~~
462		~~- 'value':~~
463		~~- {~~
464		~~- radio: gM('mwe-sequencer-color-picker-value-desc'),~~
465		~~- textbox: gM('mwe-sequencer-color-picker-value-textbox')~~
466		~~- },~~
467		~~- 'red':~~
468		~~- {~~
469		~~- radio: gM('mwe-sequencer-color-picker-red-desc'),~~
470		~~- textbox: gM('mwe-sequencer-color-picker-red-textbox')~~
471		~~- },~~
472		~~- 'green':~~
473		~~- {~~
474		~~- radio: gM('mwe-sequencer-color-picker-green-desc'),~~
475		~~- textbox: gM('mwe-sequencer-color-picker-green-textbox')~~
476		~~- },~~
477		~~- 'blue':~~
478		~~- {~~
479		~~- radio: gM('mwe-sequencer-color-picker-blue-desc'),~~
480		~~- textbox: gM('mwe-sequencer-color-picker-blue-textbox')~~
481		~~- },~~
482		~~- 'alpha':~~
483		~~- {~~
484		~~- radio: gM('mwe-sequencer-color-picker-alpha-desc'),~~
485		~~- textbox: gM('mwe-sequencer-color-picker-alpha-textbox')~~
486		~~- },~~
487		~~- 'hex':~~
488		~~- {~~
489		~~- textbox: gM('mwe-sequencer-color-picker-hex-desc'),~~
490		~~- alpha: gM('mwe-sequencer-color-picker-hex-textbox')~~
491		~~- }~~
492		~~- }~~
493		~~- }~~
494		~~- },~~
495		~~- 'onChange': function( _this, smilElement ){~~
496		~~- // Update the sequence duration :~~
497		~~- _this.sequencer.getEmbedPlayer().getDuration( true );~~
498		-
499		~~- // xxx we should re-display the current time~~
500		~~- _this.sequencer.getEmbedPlayer().setCurrentTime(~~
501		~~- $j( smilElement ).data('startOffset')~~
502		~~- );~~
503		~~- },~~
504		~~- 'draw': function( _this, target, smilElement ){~~
505		~~- // draw the two attribute types~~
506		~~- var _editTransitions = this;~~
507		~~- var $transitionWidget = $j('<div />');~~
508		-
509		~~- var transitionDirections = ['transIn', 'transOut'];~~
510		~~- $j.each(transitionDirections, function( inx, transitionDirection ){~~
511		~~- $transitionWidget.append(~~
512		~~- $j('<div />').css('clear', 'both')~~
513		~~- ,~~
514		~~- $j('<h3 />').text( gM('mwe-sequencer-tools-transitions-' + transitionDirection ))~~
515		~~- )~~
516		~~- // Output the top level empty select~~
517		~~- $transSelect = $j('<select />').append(~~
518		~~- $j('<option />')~~
519		~~- .attr('value', '')~~
520		~~- );~~
521		~~- var selectedTransitionType = _editTransitions.getSelectedTransitionType( smilElement, transitionDirection);~~
522		~~- for( var transitionType in _editTransitions.transitionTypes ){~~
523		~~- if( _editTransitions.transitionTypes[ transitionType ].selectable~~
524		~~- &&~~
525		~~- $j.inArray( transitionDirection, _editTransitions.transitionTypes[transitionType].selectable ) !== -1 )~~
526		~~- {~~
527		~~- // Output the item if its selectable for the current transitionType~~
528		~~- var $option = $j("<option />")~~
529		~~- .attr('value', transitionType )~~
530		~~- .text( transitionType )~~
531		~~- // Add selected attribute if selected:~~
532		~~- if( selectedTransitionType == transitionType ){~~
533		~~- $option.attr('selected', 'true');~~
534		~~- }~~
535		~~- $transSelect.append( $option );~~
536		~~- }~~
537		~~- }~~
538		~~- $transSelect.change( function(){~~
539		~~- var transitionType = $j(this).val();~~
540		~~- $transitionWidget.find( '#' + transitionDirection + '_attributeContainer' ).html(~~
541		~~- _editTransitions.getBindedTranstionEdit(~~
542		~~- _this, smilElement, transitionType~~
543		~~- )~~
544		~~- )~~
545		~~- // Update the smil attribute:~~
546		~~- $j( smilElement ).attr(~~
547		~~- transitionDirection,~~
548		~~- _editTransitions.getTransitionId( smilElement, transitionType )~~
549		~~- )~~
550		~~- // Update the player on select change~~
551		~~- _editTransitions.onChange( _this, smilElement );~~
552		~~- });~~
553		-
554		~~- // Add the select to the $transitionWidget~~
555		~~- $transitionWidget.append( $transSelect );~~
556		-
557		~~- // Set up the transConfig container:~~
558		~~- var $transConfig = $j('<span />')~~
559		~~- .attr('id', transitionDirection + '_attributeContainer');~~
560		-
561		~~- // If a given transition type is selected output is editable attributes~~
562		~~- if( selectedTransitionType != '' ) {~~
563		~~- $transConfig.append(~~
564		~~- _editTransitions.getBindedTranstionEdit(~~
565		~~- _this, smilElement, selectedTransitionType~~
566		~~- )~~
567		~~- )~~
568		~~- }~~
569		~~- $transitionWidget.append( $transConfig );~~
570		-
571		~~- // update the player for the default selected set.~~
572		~~- _editTransitions.onChange( _this, smilElement );~~
573		~~- });~~
574		~~- // add the transition widget to the target~~
575		~~- $j( target ).append( $transitionWidget );~~
576		~~- }~~
577		~~- },~~
578		~~- 'editTemplate':{~~
579		~~- 'onChange' : function( _this, smilElement ){~~
580		~~- // Clear the smilElement template cache:~~
581		~~- $j( smilElement ).data('templateHtmlCache', null);~~
582		~~- // Re draw the smilElement in the player~~
583		~~- var smil = _this.sequencer.getSmil();~~
584		~~- $playerTarget = $j('#' + smil.getSmilElementPlayerID( smilElement ) );~~
585		~~- $playerTarget.loadingSpinner();~~
586		~~- smil.getLayout().getSmilTemplateHtml( smilElement, $playerTarget, function(){~~
587		~~- mw.log("SequencerTools::editWidgets: smil template updated");~~
588		~~- });~~
589		~~- },~~
590		~~- 'draw': function( _this, target, smilElement ){~~
591		~~- // Parse the set of templates from the template text cache~~
592		~~- $j( target ).loadingSpinner();~~
593		-
594		~~- if( ! $j( smilElement).attr('apititlekey') ){~~
595		~~- mw.log("Error: can't grab template without title key")~~
596		~~- return ;~~
597		~~- }~~
598		~~- // Get the template wikitext~~
599		~~- _this.sequencer~~
600		~~- .getServer()~~
601		~~- .getTemplateText( $j( smilElement).attr('apititlekey'), function( templateText ){~~
602		~~- //mw.log("GotTemplateText: " + templateText );~~
603		~~- if( ! templateText \|\| typeof templateText != 'string' ){~~
604		~~- mw.log("Error: could not get wikitext form titlekey: " + $j( smilElement).attr('apititlekey'))~~
605		~~- return ;~~
606		~~- }~~
607		~~- $j( target ).empty().append(~~
608		~~- $j('<h3 />').text( gM('mwe-sequencer-edittemplate-params') )~~
609		~~- )~~
610		-
611		~~- // This is not supposed to be perfect ..~~
612		~~- // just get you 'most' of the input vars 'most' of the time via the greedy regEx:~~
613		~~- var templateVars = templateText.match(/\{\{\{([^\}]*)\}\}\}/gi);~~
614		~~- var cleanTemplateParams = {};~~
615		-
616		~~- for( i =0;i<templateVars.length; i++ ){~~
617		~~- var tVar = templateVars[i];~~
618		~~- // Remove all {{{ and }}}~~
619		~~- tVar = tVar.replace(/\{\{\{/, '' ).replace( /\}\}\}/, '');~~
620		~~- // Check for \| operator~~
621		~~- if( tVar.indexOf("\|") != -1 ){~~
622		~~- // Only the first version of the template var~~
623		~~- tVar = tVar.split( '\|')[0];~~
624		~~- }~~
625		~~- cleanTemplateParams[ tVar ] = true;~~
626		~~- }~~
627		~~- // Output input boxes for each template var as a param~~
628		~~- for( var paramName in cleanTemplateParams ){~~
629		~~- $j( target ).append(~~
630		~~- _this.getEditableAttribute(~~
631		~~- smilElement,~~
632		~~- 'editTemplate',~~
633		~~- 'param',~~
634		~~- paramName~~
635		~~- )~~
636		~~- .find('input')~~
637		~~- // Bind the change event:~~
638		~~- .change(function(){~~
639		~~- _this.editWidgets.editTemplate.onChange(~~
640		~~- _this,~~
641		~~- smilElement~~
642		~~- )~~
643		~~- })~~
644		~~- .parent()~~
645		~~- ,~~
646		~~- $j('<div />')~~
647		~~- .css('clear', 'both')~~
648		~~- )~~
649		~~- }~~
650		-
651		-
652		~~- });~~
653		~~- }~~
654		~~- },~~
655		~~- 'panzoom' : {~~
656		~~- 'onChange': function( _this, smilElement ){~~
657		~~- var panZoomVal = $j('#' +_this.getEditToolInputId( 'panzoom', 'panZoom')).val();~~
658		~~- mw.log("panzoom change:" + panZoomVal );~~
659		-
660		~~- // Update on the current smil clip display:~~
661		~~- _this.sequencer.getSmil()~~
662		~~- .getLayout()~~
663		~~- .panZoomLayout(~~
664		~~- smilElement~~
665		~~- );~~
666		~~- var $thumbTraget = $j( '#' + _this.sequencer.getTimeline().getTimelineClipId( smilElement ) ).find('.thumbTraget');~~
667		~~- // Update the timeline clip display~~
668		~~- // xxx this should be abstracted to timeline handler for clip updates~~
669		~~- _this.sequencer.getSmil()~~
670		~~- .getLayout()~~
671		~~- .panZoomLayout(~~
672		~~- smilElement,~~
673		~~- $thumbTraget,~~
674		~~- $thumbTraget.find('img').get(0)~~
675		~~- )~~
676		~~- // Register the change for undo redo~~
677		~~- _this.sequencer.getActionsEdit().registerEdit();~~
678		~~- },~~
679		~~- 'draw': function( _this, target, smilElement ){~~
680		~~- var orginalHelperCss = {~~
681		~~- 'position' : 'absolute',~~
682		~~- 'width' : 120,~~
683		~~- 'height' : 100,~~
684		~~- 'color' : 'red',~~
685		~~- 'font-size' : 'x-small',~~
686		~~- 'opacity' : .6,~~
687		~~- 'border' : 'dashed',~~
688		~~- 'left' : _this.sequencer.getEmbedPlayer().getPlayerWidth()/2 - 60,~~
689		~~- 'top' : _this.sequencer.getEmbedPlayer().getPlayerHeight()/2 - 50~~
690		~~- };~~
691		-
692		~~- // Add a input box binding:~~
693		~~- $j('#' +_this.getEditToolInputId( 'panzoom', 'panZoom'))~~
694		~~- .change(function(){~~
695		~~- _this.editWidgets.panzoom.onChange( _this, smilElement, target );~~
696		~~- })~~
697		-
698		~~- $j( target ).append(~~
699		~~- $j('<h3 />').html(~~
700		~~- gM('mwe-sequencer-tools-panzoomhelper-desc')~~
701		~~- )~~
702		~~- );~~
703		~~- var $playerUI = _this.sequencer.getEmbedPlayer().$interface;~~
704		~~- // Remove any old layout helper:~~
705		~~- $playerUI.find('.panzoomHelper').remove();~~
706		-
707		~~- // Append the resize helper as an overlay on the player:~~
708		~~- $playerUI.append(~~
709		~~- $j('<div />')~~
710		~~- .css( orginalHelperCss )~~
711		~~- .addClass("ui-widget-content panzoomHelper")~~
712		~~- .text( gM('mwe-sequencer-tools-panzoomhelper') )~~
713		~~- );~~
714		-
715		~~- // Only show when the panzoom tool is selected~~
716		~~- if( _this.getCurrentToolId() != 'panzoom'){~~
717		~~- $playerUI.find('.panzoomHelper').hide()~~
718		~~- }~~
719		~~- $j(_this).bind('toolSelect', function(){~~
720		~~- if( _this.getCurrentToolId() == 'panzoom'){~~
721		~~- $playerUI.find('.panzoomHelper').fadeIn('fast')~~
722		~~- } else {~~
723		~~- $playerUI.find('.panzoomHelper').fadeOut('fast')~~
724		~~- }~~
725		~~- });~~
726		~~- // Bind to resize player events to keep the helper centered~~
727		~~- $j( _this.sequencer.getEmbedPlayer() ).bind('onResizePlayer', function(event, size){~~
728		~~- $playerUI.find('.panzoomHelper').css( {~~
729		~~- 'left' : size.width/2 - 60,~~
730		~~- 'top' : size.height/2 - 50~~
731		~~- });~~
732		~~- });~~
733		-
734		-
735		~~- /xxx Keep aspect button ?/~~
736		~~- // Rest layout button ( restores default position )~~
737		~~- /*$j.button({~~
738		~~- 'icon' : 'arrow-4',~~
739		~~- 'text' : gM( 'mwe-sequencer-tools-panzoomhelper-resetlayout' )~~
740		~~- })~~
741		~~- .attr('id', 'panzoomResetLayout')~~
742		~~- .css('float', 'left')~~
743		~~- .hide()~~
744		~~- .click(function(){~~
745		~~- // Restore default SMIL setting~~
746		~~- _this.editableTypes['display'].update(~~
747		~~- _this,~~
748		~~- smilElement,~~
749		~~- 'panzoom',~~
750		~~- _this.editableAttributes['panzoom'].defaultValue~~
751		~~- )~~
752		~~- })*/~~
753		-
754		~~- var startPanZoomVal = '';~~
755		~~- var setStartPanZoomVal = function(){~~
756		~~- startPanZoomVal = $j( smilElement ).attr( 'panZoom');~~
757		~~- if(! startPanZoomVal ){~~
758		~~- startPanZoomVal = _this.editableAttributes['panZoom'].defaultValue;~~
759		~~- }~~
760		~~- }~~
761		-
762		~~- var updatePanZoomFromUiValue = function( layout ){~~
763		~~- var pz = startPanZoomVal.split(',');~~
764		~~- // Set the new percent offset to x/2~~
765		~~- if( layout.left ){~~
766		~~- pz[0] = ( parseInt( pz[0] ) - ( layout.left / 4 ) ) + '%';~~
767		~~- }~~
768		-
769		~~- if( layout.top ){~~
770		~~- pz[1] = ( parseInt( pz[1] ) - ( layout.top / 4 ) )+ '%';~~
771		~~- }~~
772		-
773		~~- if( layout.width ) {~~
774		~~- pz[2] = ( parseInt( pz[2] ) - ( layout.width / 2) ) + '%'~~
775		-
776		~~- // right now only keep aspect is supported do size hack::~~
777		~~- pz[3] = parseInt( pz[2] ) * _this.sequencer.getSmil().getLayout().getTargetAspectRatio();~~
778		~~- // only have 2 significant digits~~
779		-
780		~~- }~~
781		~~- // Trim and round all % values~~
782		~~- for(var i=0; i < pz.length; i++){~~
783		~~- pz[i] = ( Math.round( parseInt( pz[i] ) * 1000 ) / 1000 ) + '%';~~
784		~~- pz[i] = $j.trim( pz[i] );~~
785		~~- }~~
786		~~- var smilPanZoomValue = pz.join(', ');~~
787		-
788		~~- // Update the smil DOM:~~
789		~~- $j( smilElement ).attr( 'panZoom', smilPanZoomValue );~~
790		-
791		~~- // Update the user input tool input value:~~
792		~~- $j('#' +_this.getEditToolInputId( 'panzoom', 'panZoom')).val( smilPanZoomValue );~~
793		-
794		~~- // Animate the update on the current smil clip display:~~
795		~~- _this.sequencer.getSmil()~~
796		~~- .getLayout()~~
797		~~- .panZoomLayout(~~
798		~~- smilElement~~
799		~~- );~~
800		~~- }~~
801		~~- // Add bindings~~
802		~~- $playerUI.find('.panzoomHelper')~~
803		~~- .draggable({~~
804		~~- containment: 'parent',~~
805		~~- start: function( event, ui){~~
806		~~- setStartPanZoomVal();~~
807		~~- },~~
808		~~- drag: function( event, ui){~~
809		~~- updatePanZoomFromUiValue({~~
810		~~- 'top' : ( orginalHelperCss.top - ui.position.top ),~~
811		~~- 'left' : ( orginalHelperCss.left - ui.position.left )~~
812		~~- });~~
813		~~- },~~
814		~~- stop: function( event, ui){~~
815		~~- // run the onChange ?~~
816		~~- // Restore original css for the layout helper~~
817		~~- $j(this).css( orginalHelperCss )~~
818		~~- // trigger the 'change'~~
819		~~- _this.editWidgets.panzoom.onChange( _this, smilElement );~~
820		~~- }~~
821		~~- })~~
822		~~- .css('cursor', 'move')~~
823		~~- .resizable({~~
824		~~- handles : 'all',~~
825		~~- maxWidth : 250,~~
826		~~- maxHeight: 180,~~
827		~~- aspectRatio: 4/3,~~
828		~~- start: function( event, ui){~~
829		~~- setStartPanZoomVal();~~
830		~~- },~~
831		~~- resize : function(event, ui){~~
832		~~- updatePanZoomFromUiValue({~~
833		~~- 'width' : ( orginalHelperCss.width - ui.size.width ),~~
834		~~- 'height' : ( orginalHelperCss.top - ui.size.height )~~
835		~~- });~~
836		~~- },~~
837		~~- stop: function( event, ui){~~
838		~~- // Restore original css~~
839		~~- $j(this).css( orginalHelperCss )~~
840		~~- // trigger the change~~
841		~~- _this.editWidgets.panzoom.onChange( _this, smilElement);~~
842		~~- }~~
843		~~- })~~
844		-
845		~~- }~~
846		~~- },~~
847		~~- 'trimTimeline' : {~~
848		~~- 'onChange': function( _this, smilElement ){~~
849		~~- var smil = _this.sequencer.getSmil();~~
850		~~- // Update the preview thumbs~~
851		~~- var $target = $j( '#editWidgets_trimTimeline' );~~
852		~~- // (local function so it can be updated after the start time is done with its draw )~~
853		~~- /*var updateDurationThumb = function(){~~
854		~~- // Check the duration:~~
855		~~- var clipDur = $j('#editTool_trim_dur').val();~~
856		~~- if( clipDur ){~~
857		~~- // Render a thumbnail for the updated duration~~
858		~~- smil.getLayout().drawSmilElementToTarget(~~
859		~~- smilElement,~~
860		~~- $target.find('.trimEndThumb'),~~
861		~~- clipDur~~
862		~~- );~~
863		~~- }~~
864		~~- }~~
865		-
866		~~- var clipBeginTime = $j('#editTool_trim_clipBegin').val();~~
867		~~- if( !clipBeginTime ){~~
868		~~- $target.find('.trimStartThumb').hide();~~
869		~~- } else {~~
870		~~- mw.log("Should update trimStartThumb::" + $j(smilElement).attr('clipBegin') );~~
871		~~- // Render a thumbnail for relative start time = 0~~
872		~~- smil.getLayout().drawSmilElementToTarget(~~
873		~~- smilElement,~~
874		~~- $target.find('.trimStartThumb'),~~
875		~~- 0,~~
876		~~- updateDurationThumb()~~
877		~~- )~~
878		~~- }~~
879		~~- */~~
880		-
881		~~- // Register the edit state for undo / redo~~
882		~~- _this.sequencer.getActionsEdit().registerEdit();~~
883		~~- },~~
884		~~- // Return the trimTimeline edit widget~~
885		~~- 'draw': function( _this, target, smilElement ){~~
886		~~- var smil = _this.sequencer.getSmil();~~
887		~~- var sliderScale = 2000 // assume slider is never more than 2000 pixles wide.~~
888		~~- // check if thumbs are supported~~
889		~~- /*if( _this.sequencer.getSmil().getRefType( smilElement ) == 'video' ){~~
890		~~- $j(target).append(~~
891		~~- $j('<div />')~~
892		~~- .addClass( 'trimStartThumb ui-corner-all' ),~~
893		~~- $j('<div />')~~
894		~~- .addClass( 'trimEndThumb ui-corner-all' ),~~
895		~~- $j('<div />').addClass('ui-helper-clearfix')~~
896		~~- )~~
897		~~- }*/~~
898		~~- // The local scope fullClipDuration~~
899		~~- var fullClipDuration = null;~~
900		-
901		~~- // Some slider functions~~
902		~~- var sliderToTime = function( sliderval ){~~
903		~~- return parseInt( fullClipDuration * ( sliderval / sliderScale ) );~~
904		~~- }~~
905		~~- var timeToSlider = function( time ){~~
906		~~- return parseInt( ( time / fullClipDuration ) * sliderScale );~~
907		~~- }~~
908		-
909		~~- // Special flag to prevent slider updates from propgating if the change was based on user input~~
910		~~- var onInputChangeFlag = false;~~
911		~~- var onInputChange = function( sliderIndex, timeValue ){~~
912		~~- onInputChangeFlag = true;~~
913		~~- if( fullClipDuration ){~~
914		~~- // Update the slider~~
915		~~- var sliderTime = ( sliderIndex == 0 )? timeToSlider( timeValue ) :~~
916		~~- timeToSlider( timeValue + smil.parseTime( $j('#' + _this.getEditToolInputId( 'trim', 'clipBegin') ).val() ) );~~
917		-
918		~~- $j('#'+_this.sequencer.id + '_trimTimeline' )~~
919		~~- .slider(~~
920		~~- "values",~~
921		~~- sliderIndex,~~
922		~~- sliderTime~~
923		~~- );~~
924		~~- }~~
925		~~- // restore the onInputChangeFlag~~
926		~~- onInputChangeFlag = false;~~
927		-
928		~~- // Directly update the smil xml from the user Input~~
929		~~- if( sliderIndex == 0 ){~~
930		~~- // Update clipBegin~~
931		~~- _this.editableTypes['time'].update( _this, smilElement, 'clipBegin', timeValue );~~
932		~~- } else {~~
933		~~- // Update dur~~
934		~~- _this.editableTypes['time'].update( _this, smilElement, 'dur', timeValue );~~
935		~~- }~~
936		~~- mw.log(' should update inx:' + sliderIndex + ' set to: ' + timeValue);~~
937		-
938		~~- // Register the change~~
939		~~- _this.editWidgets.trimTimeline.onChange( _this, smilElement );~~
940		~~- }~~
941		-
942		~~- // Add a trim binding:~~
943		~~- $j('#' + _this.getEditToolInputId( 'trim', 'clipBegin') )~~
944		~~- .change( function(){~~
945		~~- var timeValue = smil.parseTime( $j(this).val() );~~
946		~~- onInputChange( 0, timeValue);~~
947		~~- });~~
948		-
949		~~- $j('#' + _this.getEditToolInputId( 'trim', 'dur') )~~
950		~~- .change( function(){~~
951		~~- var timeValue = smil.parseTime( $j(this).val() );~~
952		~~- onInputChange( 1, timeValue );~~
953		~~- });~~
954		-
955		~~- // Update the thumbnails:~~
956		~~- _this.editWidgets.trimTimeline.onChange( _this, smilElement );~~
957		-
958		~~- // Get the clip full duration to build out the timeline selector~~
959		~~- smil.getBody().getClipAssetDuration( smilElement, function( clipDuration ) {~~
960		~~- // update the local scope global~~
961		~~- fullClipDuration = clipDuration;~~
962		-
963		~~- var startSlider = timeToSlider( smil.parseTime( $j('#editTool_trim_clipBegin').val() ) );~~
964		~~- var sliderValues = [~~
965		~~- startSlider,~~
966		~~- startSlider + timeToSlider( smil.parseTime( $j('#editTool_trim_dur').val() ) )~~
967		~~- ];~~
968		~~- // Return a trim tool binded to smilElement id update value events.~~
969		~~- $j(target).append(~~
970		~~- $j('<div />')~~
971		~~- .attr( 'id', _this.sequencer.id + '_trimTimeline' )~~
972		~~- .css({~~
973		~~- 'position': 'absolute',~~
974		~~- 'left' : '25px',~~
975		~~- 'right' : '35px',~~
976		~~- 'margin': '5px'~~
977		~~- })~~
978		~~- .slider({~~
979		~~- range: true,~~
980		~~- min: 0,~~
981		~~- max: sliderScale,~~
982		~~- values: sliderValues,~~
983		~~- slide: function(event, ui) {~~
984		-
985		~~- $j('#' + _this.getEditToolInputId( 'trim', 'clipBegin') ).val(~~
986		~~- mw.seconds2npt( sliderToTime( ui.values[0] ), true )~~
987		~~- );~~
988		~~- $j('#' + _this.getEditToolInputId( 'trim', 'dur') ).val(~~
989		~~- mw.seconds2npt( sliderToTime( ui.values[1] - ui.values[0] ), true )~~
990		~~- );~~
991		~~- },~~
992		~~- change: function( event, ui ) {~~
993		~~- if( ! onInputChangeFlag ){~~
994		~~- // Update clipBegin~~
995		~~- _this.editableTypes['time'].update( _this, smilElement, 'clipBegin', sliderToTime( ui.values[ 0 ] ) );~~
996		-
997		~~- // Update dur~~
998		~~- _this.editableTypes['time'].update( _this, smilElement, 'dur', sliderToTime( ui.values[ 1 ]- ui.values[0] ) );~~
999		-
1000		~~- // update the widget display~~
1001		~~- _this.editWidgets.trimTimeline.onChange( _this, smilElement );~~
1002		~~- }~~
1003		~~- }~~
1004		~~- })~~
1005		~~- );~~
1006		~~- });~~
1007		~~- }~~
1008		~~- }~~
1009		~~- },~~
1010	211	getDefaultText: function(){
1011	212	return gM('mwe-sequencer-no_selected_resource');
1012	213	},
—	—	@@ -1286,6 +487,6 @@
1287	488	.change( config.change )
1288	489	);
1289	490	}
1290		-}
	491	+};
1291	492
1292	493	} )( window.mw );
Index: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolPanzoom.js
—	—	@@ -0,0 +1,215 @@
	2	+/**
	3	+ * Extend the base tools prototype with pan zoom tool
	4	+ */
	5	+$j.extend( mw.SequencerTools.prototype, {
	6	+ tools : {
	7	+ 'panzoom' : {
	8	+ 'editWidgets' : ['panzoom'],
	9	+ 'editableAttributes' : [ 'panZoom' ],
	10	+ 'contentTypes': [ 'img', 'video' ],
	11	+ 'supportsKeyFrames' : 'true'
	12	+ }
	13	+ },
	14	+ editableAttributes: {
	15	+ 'panZoom' :{
	16	+ 'type' : 'string',
	17	+ 'inputSize' : 15,
	18	+ 'title' : gM('mwe-sequencer-clip-panzoom' ),
	19	+ 'defaultValue' : '0%, 0%, 100%, 100%'
	20	+ }
	21	+ },
	22	+ editWidgets: {
	23	+ 'panzoom' : {
	24	+ 'onChange': function( _this, smilElement ){
	25	+ var panZoomVal = $j('#' +_this.getEditToolInputId( 'panzoom', 'panZoom')).val();
	26	+ mw.log("panzoom change:" + panZoomVal );
	27	+
	28	+ // Update on the current smil clip display:
	29	+ _this.sequencer.getSmil()
	30	+ .getLayout()
	31	+ .panZoomLayout(
	32	+ smilElement
	33	+ );
	34	+ var $thumbTraget = $j( '#' + _this.sequencer.getTimeline().getTimelineClipId( smilElement ) ).find('.thumbTraget');
	35	+ // Update the timeline clip display
	36	+ // xxx this should be abstracted to timeline handler for clip updates
	37	+ _this.sequencer.getSmil()
	38	+ .getLayout()
	39	+ .panZoomLayout(
	40	+ smilElement,
	41	+ $thumbTraget,
	42	+ $thumbTraget.find('img').get(0)
	43	+ )
	44	+ // Register the change for undo redo
	45	+ _this.sequencer.getActionsEdit().registerEdit();
	46	+ },
	47	+ 'draw': function( _this, target, smilElement ){
	48	+ var orginalHelperCss = {
	49	+ 'position' : 'absolute',
	50	+ 'width' : 120,
	51	+ 'height' : 100,
	52	+ 'color' : 'red',
	53	+ 'font-size' : 'x-small',
	54	+ 'opacity' : .6,
	55	+ 'border' : 'dashed',
	56	+ 'left' : _this.sequencer.getEmbedPlayer().getPlayerWidth()/2 - 60,
	57	+ 'top' : _this.sequencer.getEmbedPlayer().getPlayerHeight()/2 - 50
	58	+ };
	59	+
	60	+ // Add a input box binding:
	61	+ $j('#' +_this.getEditToolInputId( 'panzoom', 'panZoom'))
	62	+ .change(function(){
	63	+ _this.editWidgets.panzoom.onChange( _this, smilElement, target );
	64	+ })
	65	+
	66	+ $j( target ).append(
	67	+ $j('<h3 />').html(
	68	+ gM('mwe-sequencer-tools-panzoomhelper-desc')
	69	+ )
	70	+ );
	71	+ var $playerUI = _this.sequencer.getEmbedPlayer().$interface;
	72	+ // Remove any old layout helper:
	73	+ $playerUI.find('.panzoomHelper').remove();
	74	+
	75	+ // Append the resize helper as an overlay on the player:
	76	+ $playerUI.append(
	77	+ $j('<div />')
	78	+ .css( orginalHelperCss )
	79	+ .addClass("ui-widget-content panzoomHelper")
	80	+ .text( gM('mwe-sequencer-tools-panzoomhelper') )
	81	+ );
	82	+
	83	+ // Only show when the panzoom tool is selected
	84	+ if( _this.getCurrentToolId() != 'panzoom'){
	85	+ $playerUI.find('.panzoomHelper').hide()
	86	+ }
	87	+ $j(_this).bind('toolSelect', function(){
	88	+ if( _this.getCurrentToolId() == 'panzoom'){
	89	+ $playerUI.find('.panzoomHelper').fadeIn('fast')
	90	+ } else {
	91	+ $playerUI.find('.panzoomHelper').fadeOut('fast')
	92	+ }
	93	+ });
	94	+ // Bind to resize player events to keep the helper centered
	95	+ $j( _this.sequencer.getEmbedPlayer() ).bind('onResizePlayer', function(event, size){
	96	+ $playerUI.find('.panzoomHelper').css( {
	97	+ 'left' : size.width/2 - 60,
	98	+ 'top' : size.height/2 - 50
	99	+ });
	100	+ });
	101	+
	102	+
	103	+ /xxx Keep aspect button ?/
	104	+ // Rest layout button ( restores default position )
	105	+ /*$j.button({
	106	+ 'icon' : 'arrow-4',
	107	+ 'text' : gM( 'mwe-sequencer-tools-panzoomhelper-resetlayout' )
	108	+ })
	109	+ .attr('id', 'panzoomResetLayout')
	110	+ .css('float', 'left')
	111	+ .hide()
	112	+ .click(function(){
	113	+ // Restore default SMIL setting
	114	+ _this.editableTypes['display'].update(
	115	+ _this,
	116	+ smilElement,
	117	+ 'panzoom',
	118	+ _this.editableAttributes['panzoom'].defaultValue
	119	+ )
	120	+ })*/
	121	+
	122	+ var startPanZoomVal = '';
	123	+ var setStartPanZoomVal = function(){
	124	+ startPanZoomVal = $j( smilElement ).attr( 'panZoom');
	125	+ if(! startPanZoomVal ){
	126	+ startPanZoomVal = _this.editableAttributes['panZoom'].defaultValue;
	127	+ }
	128	+ }
	129	+
	130	+ var updatePanZoomFromUiValue = function( layout ){
	131	+ var pz = startPanZoomVal.split(',');
	132	+ // Set the new percent offset to x/2
	133	+ if( layout.left ){
	134	+ pz[0] = ( parseInt( pz[0] ) - ( layout.left / 4 ) ) + '%';
	135	+ }
	136	+
	137	+ if( layout.top ){
	138	+ pz[1] = ( parseInt( pz[1] ) - ( layout.top / 4 ) )+ '%';
	139	+ }
	140	+
	141	+ if( layout.width ) {
	142	+ pz[2] = ( parseInt( pz[2] ) - ( layout.width / 2) ) + '%'
	143	+
	144	+ // right now only keep aspect is supported do size hack::
	145	+ pz[3] = parseInt( pz[2] ) * _this.sequencer.getSmil().getLayout().getTargetAspectRatio();
	146	+ // only have 2 significant digits
	147	+
	148	+ }
	149	+ // Trim and round all % values
	150	+ for(var i=0; i < pz.length; i++){
	151	+ pz[i] = ( Math.round( parseInt( pz[i] ) * 1000 ) / 1000 ) + '%';
	152	+ pz[i] = $j.trim( pz[i] );
	153	+ }
	154	+ var smilPanZoomValue = pz.join(', ');
	155	+
	156	+ // Update the smil DOM:
	157	+ $j( smilElement ).attr( 'panZoom', smilPanZoomValue );
	158	+
	159	+ // Update the user input tool input value:
	160	+ $j('#' +_this.getEditToolInputId( 'panzoom', 'panZoom')).val( smilPanZoomValue );
	161	+
	162	+ // Animate the update on the current smil clip display:
	163	+ _this.sequencer.getSmil()
	164	+ .getLayout()
	165	+ .panZoomLayout(
	166	+ smilElement
	167	+ );
	168	+ }
	169	+ // Add bindings
	170	+ $playerUI.find('.panzoomHelper')
	171	+ .draggable({
	172	+ containment: 'parent',
	173	+ start: function( event, ui){
	174	+ setStartPanZoomVal();
	175	+ },
	176	+ drag: function( event, ui){
	177	+ updatePanZoomFromUiValue({
	178	+ 'top' : ( orginalHelperCss.top - ui.position.top ),
	179	+ 'left' : ( orginalHelperCss.left - ui.position.left )
	180	+ });
	181	+ },
	182	+ stop: function( event, ui){
	183	+ // run the onChange ?
	184	+ // Restore original css for the layout helper
	185	+ $j(this).css( orginalHelperCss )
	186	+ // trigger the 'change'
	187	+ _this.editWidgets.panzoom.onChange( _this, smilElement );
	188	+ }
	189	+ })
	190	+ .css('cursor', 'move')
	191	+ .resizable({
	192	+ handles : 'all',
	193	+ maxWidth : 250,
	194	+ maxHeight: 180,
	195	+ aspectRatio: 4/3,
	196	+ start: function( event, ui){
	197	+ setStartPanZoomVal();
	198	+ },
	199	+ resize : function(event, ui){
	200	+ updatePanZoomFromUiValue({
	201	+ 'width' : ( orginalHelperCss.width - ui.size.width ),
	202	+ 'height' : ( orginalHelperCss.top - ui.size.height )
	203	+ });
	204	+ },
	205	+ stop: function( event, ui){
	206	+ // Restore original css
	207	+ $j(this).css( orginalHelperCss )
	208	+ // trigger the change
	209	+ _this.editWidgets.panzoom.onChange( _this, smilElement);
	210	+ }
	211	+ })
	212	+
	213	+ }
	214	+ }
	215	+ }
	216	+});
Property changes on: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolPanzoom.js
___________________________________________________________________
Added: svn:mime-type
1	217	+ text/plain
Index: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolDuration.js
—	—	@@ -0,0 +1,17 @@
	2	+/**
	3	+ * Extend the base tools prototype with duration attribute edit:
	4	+ */
	5	+$j.extend( mw.SequencerTools.prototype, {
	6	+ tools : {
	7	+ 'duration':{
	8	+ 'editableAttributes' : [ 'dur' ],
	9	+ 'contentTypes': ['img', 'cdata_html', 'mwtemplate']
	10	+ }
	11	+ },
	12	+ editableAttributes : {
	13	+ 'dur' :{
	14	+ 'type': 'time',
	15	+ 'title' : gM('mwe-sequencer-clip-duration' )
	16	+ }
	17	+ }
	18	+});
\ No newline at end of file
Property changes on: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolDuration.js
___________________________________________________________________
Added: svn:mime-type
1	19	+ text/plain
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTimeline.js
—	—	@@ -685,7 +685,9 @@
686	686	drawClipThumb: function ( smilElement , relativeTime, callback ){
687	687	var _this = this;
688	688	var smil = this.sequencer.getSmil();
689		~~- mw.log("SequencerTimeline::drawClipThumb " + relativeTime);~~
	689	+
	690	+ mw.log( "SequencerTimeline::drawClipThum:" + _this.getTimelineClipId( smilElement ) );
	691	+
690	692	var clipButtonCss = {
691	693	'position' : 'absolute',
692	694	'bottom' : '2px',
—	—	@@ -755,7 +757,19 @@
756	758	.find('.loadingSpinner').remove();
757	759
758	760	var $thumbTarget = $j( '#' + _this.getTimelineClipId( smilElement ) ).find('.thumbTraget');
759		-
	761	+ // Check the type of the asset and draw:
	762	+ if( smil.getRefType( smilElement ) == 'audio' ){
	763	+ smil.getLayout().drawSmilElementToTarget( smilElement, $thumbTarget, relativeTime, callback );
	764	+ } else {
	765	+ _this.drawClipThumbImage( $thumbTarget, smilElement, relativeTime, callback )
	766	+ }
	767	+ },
	768	+ /**
	769	+ * Draw the clip Thumb image ( for video and image assets )
	770	+ */
	771	+ drawClipThumbImage: function( $thumbTarget, smilElement, relativeTime, callback ){
	772	+ var _this = this;
	773	+ var smil = this.sequencer.getSmil();
760	774	// Check for a "poster" image use that temporarily while we wait for the video to seek and draw
761	775	if( $j( smilElement ) .attr('poster') ){
762	776	var img = new Image();
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerServer.js
—	—	@@ -76,6 +76,7 @@
77	77	mw.log("Error: Sequencer server needs a full serverConfig to be initialized");
78	78	return false;
79	79	}
	80	+ return this;
80	81	},
81	82	getUserName: function(){
82	83	return this.userName;
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerKeyBindings.js
—	—	@@ -75,9 +75,9 @@
76	76
77	77
78	78	// Backspace or Delete key while not focused on a text area:
79		~~- if ( ( e.which == 8 \|\| e.which == 46 ) && !_this.inputFocus )~~
	79	+ if ( ( e.which == 8 \|\| e.which == 46 ) && !_this.inputFocus ){
80	80	$j( _this ).trigger( 'delete' );
81		-
	81	+ }
82	82	} );
83	83	}
84	84	};
\ No newline at end of file
Index: branches/MwEmbedStandAlone/remotes/mediaWiki.js
—	—	@@ -105,7 +105,7 @@
106	106
107	107
108	108	// Special embedplayer handler ( iframe )
109		~~-if( mwReqParam['embedplayer'] == 'yes' ){~~
	109	+if( mwReqParam['embedplayer'] == 'yes' ){
110	110	// No fullscreen in iframe for now:
111	111	mw.setConfig( 'EmbedPlayer.EnableFullscreen', false );
112	112	// No subtitle editor ( cross domain issues )

Status & tagging log

02:27, 30 December 2010 Reedy (talk | contribs) changed the status of r79204 [removed: new added: deferred]