r52081 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r52080‎ \| r52081 \| r52082 >
Date:	23:56, 17 June 2009
Author:	dale
Status:	deferred
Tags:
Comment:	* template editing and preview and update * pixastic-editor (basic preview integration)
Modified paths:	/branches/new-upload/phase3/js2/mwEmbed/libClipEdit/mvClipEdit.js (modified) (history) /branches/new-upload/phase3/js2/mwEmbed/libClipEdit/pixastic-editor/editor.js (modified) (history) /branches/new-upload/phase3/js2/mwEmbed/libClipEdit/pixastic-editor/ui.js (added) (history) /branches/new-upload/phase3/js2/mwEmbed/libClipEdit/pixastic-editor/uidata.js (modified) (history) /branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvSequencer.js (modified) (history) /branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvTimedEffectsEdit.js (modified) (history) /branches/new-upload/phase3/js2/mwEmbed/mv_embed.js (modified) (history)

Diff [purge]

Index: branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvTimedEffectsEdit.js
—	—	@@ -22,7 +22,7 @@
23	23	'control_ct':null, //control container
24	24
25	25	'parent_ct': null, //parent container
26		~~- 'p_seqObj': null, //parent sequence Object~~
	26	+ 'pSeq': null, //parent sequence Object
27	27
28	28	'edit_action': null, //the requested edit action
29	29	}
—	—	@@ -52,6 +52,7 @@
53	53	'clip_attr':'Effects',
54	54	'doEdit':function(_this){
55	55	//display
	56	+ _this.doEditEffectDisplayEdit();
56	57	}
57	58	}
58	59	},
—	—	@@ -61,7 +62,7 @@
62	63	if( iObj[i] ){
63	64	this[i] = iObj[i];
64	65	}
65		~~- }~~
	66	+ }
66	67	this.doEditMenu();
67	68	},
68	69	doEditMenu:function(){
—	—	@@ -120,6 +121,32 @@
121	122	this.menu_items[tab_id].doEdit(this);
122	123	}
123	124	},
	125	+ doEditEffectDisplayEdit:function(){
	126	+ var _this = this;
	127	+ var appendTarget = '#te_effects';
	128	+ js_log('type:' + _this.rObj['type']);
	129	+ $j(appendTarget).html(gM('loading_txt'));
	130	+ //@@todo integrate into core and loading system:
	131	+ loadExternalJs(mv_embed_path + 'libClipEdit/pixastic-editor/editor.js?' + getMvUniqueReqId() );
	132	+ loadExternalJs(mv_embed_path + 'libClipEdit/pixastic-editor/pixastic.all.js?' + getMvUniqueReqId() );
	133	+ loadExternalJs(mv_embed_path + 'libClipEdit/pixastic-editor/ui.js?' + getMvUniqueReqId() );
	134	+ loadExternalJs(mv_embed_path + 'libClipEdit/pixastic-editor/uidata.js?' + getMvUniqueReqId() );
	135	+ loadExternalCss(mv_embed_path + 'libClipEdit/pixastic-editor/pixastic.all.js?' + getMvUniqueReqId() );
	136	+
	137	+ var isPixasticReady = function(){
	138	+ if(typeof PixasticEditor != 'undefined'){
	139	+ $j(appendTarget).html('<a href="#" class="run_effect_demo">Run Pixastic Editor Demo</a> (not yet fully integrated/ super alpha)<br> best to view <a href="http://www.pixastic.com/editor-test/">stand alone</a>');
	140	+ $j(appendTarget + ' .run_effect_demo').click(function(){
	141	+ var cat = _this;
	142	+ var imgElm = $j( '.clip_container:visible img').get(0);
	143	+ PixasticEditor.load(imgElm);
	144	+ });
	145	+ }else{
	146	+ setTimeout(isPixasticReady, 100)
	147	+ }
	148	+ }
	149	+ isPixasticReady();
	150	+ },
124	151	doTransitionDisplayEdit:function(target_item){
125	152	var _this = this;
126	153	js_log("doTransitionDisplayEdit: "+ target_item);
—	—	@@ -156,12 +183,13 @@
157	184	.children('.te_remove_transition')
158	185	.click(function(){
159	186	//remove the transtion from the playlist
160		~~- _this.p_seqObj.plObj.transitions[cTran.id] = null;~~
	187	+ _this.pSeq.plObj.transitions[cTran.id] = null;
161	188	//remove the transtion from the clip:
162	189	_this.rObj[ _this.menu_items[ target_item ].clip_attr ] = null;
163	190	//update the interface:
164	191	_this.doTransitionDisplayEdit( target_item );
165	192	//update the sequence
	193	+ _this.pSeq.do_refresh_timeline();
166	194	});
167	195	},
168	196	getSubTypeControl:function(target_item, transition_type, htmlTarget){
—	—	@@ -179,7 +207,7 @@
180	208	//update the property
181	209	cTran.subtype = $j(this).val();
182	210	//re-gen timeline / playlist
183		~~- _this.p_seqObj.do_refresh_timeline();~~
	211	+ _this.pSeq.do_refresh_timeline();
184	212	//(re-select self?)
185	213	_this.getSubTypeControl(target_item, transition_type, htmlTarget);
186	214	});
—	—	@@ -203,9 +231,8 @@
204	232	return false;
205	233	},
206	234	onHide: function (colpkr) {
207		~~- $j(colpkr).fadeOut(500);~~
208		~~- //for some strange reason ColorPicker loses context:~~
209		~~- _this.p_seqObj.plObj.setCurrentTime(0, function(){~~
	235	+ $j(colpkr).fadeOut(500);
	236	+ _this.pSeq.plObj.setCurrentTime(0, function(){
210	237	js_log("render ready");
211	238	});
212	239	return false;
—	—	@@ -224,7 +251,7 @@
225	252	},
226	253	getTransitionListControl:function(target_out){
227	254	js_log("getTransitionListControl");
228		~~- var o= '';~~
	255	+ var o= '<h3>Add a Transition:</h3>';
229	256	for(var type in mvTransLib['type']){
230	257	js_log('on tran type: ' + i);
231	258	var base_trans_name = i;
Index: branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvSequencer.js
—	—	@@ -763,7 +763,7 @@
764	764	_this.myEffectEdit = new mvTimedEffectsEdit({
765	765	'rObj' : cObj,
766	766	'control_ct' : 'transition_ic',
767		~~- 'p_seqObj' : localSeqRef~~
	767	+ 'pSeq' : localSeqRef
768	768	});
769	769	})
770	770	},
—	—	@@ -1114,6 +1114,8 @@
1115	1115	$j(this).removeClass('mv_selected_transition');
1116	1116	this_seq.deselectClip( $j(this).siblings('.mv_clip_thumb').get(0) );
1117	1117	}else{
	1118	+ //deselect others
	1119	+ $j('.clip_trans_box').removeClass('mv_selected_transition');
1118	1120	$j(this).addClass("mv_selected_transition");
1119	1121	$j(this).siblings('.mv_clip_thumb').addClass("mv_selected_clip");
1120	1122	var sClipObj = this_seq.getClipFromSeqID( $j(this).parent().attr('id') );
—	—	@@ -1179,7 +1181,7 @@
1180	1182	if( this_seq.key_shift_down ){
1181	1183	//get the min max of current selection (within the current track)
1182	1184	var max_order = 0;
1183		~~- var min_order = 999999999999999;~~
	1185	+ var min_order = 999999999;
1184	1186	$j('.mv_selected_clip').each(function(){
1185	1187	var cur_clip = this_seq.getClipFromSeqID( $j(this).parent().attr('id') );
1186	1188	//get min max
Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/pixastic-editor/editor.js
—	—	@@ -55,13 +55,13 @@
56	56	caller = caller.substring(0, caller.indexOf("("));
57	57	context = context \|\| caller;
58	58	errTxt = context + "(): " + errTxt;
59		~~- var dialog = $("<div></div>", doc)~~
	59	+ var dialog = $j("<div></div>", doc)
60	60	.addClass("error-dialog")
61	61	.attr("title", "Oops!")
62	62	.html(errTxt)
63	63	.dialog();
64	64	// the dialog is added outside the Pixastic container, so get it back in.
65		~~- var dialogParent = $(dialog.get(0).parentNode);~~
	65	+ var dialogParent = $j(dialog.get(0).parentNode);
66	66	dialogParent.appendTo($editor);
67	67
68	68	return errTxt;
—	—	@@ -77,7 +77,7 @@
78	78
79	79	if ($activeTabContent) {
80	80	if ($activeTabContent.get(0)) {
81		~~- var $parent = $($activeTabContent.get(0).parentNode);~~
	81	+ var $parent = $j($activeTabContent.get(0).parentNode);
82	82	activeIndex = $parent.data("accordionindex");
83	83	if ($parent.data("ondeactivate")) {
84	84	$parent.data("ondeactivate")();
—	—	@@ -139,18 +139,18 @@
140	140	undoCanvas.width = canvasElement.width;
141	141	undoCanvas.height = canvasElement.height;
142	142	undoCanvas.getContext("2d").drawImage(canvasElement,0,0);
143		~~- $(undoCanvas).addClass("undo-canvas");~~
	143	+ $j(undoCanvas).addClass("undo-canvas");
144	144	undoImages.push(undoCanvas);
145	145	updateUndoList();
146	146	}
147	147
148	148	function updateUndoList() {
149		~~- var $listCtr = $("#undo-bar", doc)~~
	149	+ var $listCtr = $j("#undo-bar", doc)
150	150	.html("");
151	151
152	152	var ctrHeight = $listCtr.height();
153	153
154		~~- var $testCanvas = $("<canvas></canvas>", doc)~~
	154	+ var $testCanvas = $j("<canvas></canvas>", doc)
155	155	.addClass("undo-canvas-small")
156	156	.addClass("far-far-away")
157	157	.appendTo("body");
—	—	@@ -166,13 +166,13 @@
167	167	for (var i=undoImages.length-1;i>=0;i--) {
168	168	(function(){
169	169	var canvas = document.createElement("canvas");
170		~~- $(canvas)~~
	170	+ $j(canvas)
171	171	.addClass("undo-canvas-small")
172	172	.attr("width", canvasWidth)
173	173	.attr("height", canvasHeight);
174	174
175	175	var image = undoImages[i];
176		~~- $(image).show();~~
	176	+ $j(image).show();
177	177
178	178	var undoWidth, undoHeight;
179	179	var imageRatio = image.width / image.height;
—	—	@@ -196,33 +196,33 @@
197	197	);
198	198
199	199
200		~~- $link = $("<a href='#'></a>", doc)~~
	200	+ $link = $j("<a href='#'></a>", doc)
201	201	.addClass("undo-link")
202	202	.appendTo($listCtr)
203		~~- .mouseover(function(){ $(this).addClass("hover") })~~
204		~~- .mouseout(function(){ $(this).removeClass("hover") });~~
205		~~- $(canvas).appendTo($link);~~
	203	+ .mouseover(function(){ $j(this).addClass("hover") })
	204	+ .mouseout(function(){ $j(this).removeClass("hover") });
	205	+ $j(canvas).appendTo($link);
206	206
207	207	var displayShowing;
208	208	var undoIndex = i;
209	209	$link.click(function() {
210		~~- $(image).hide();~~
211		~~- $(image).remove();~~
	210	+ $j(image).hide();
	211	+ $j(image).remove();
212	212	undo(undoIndex);
213	213	if (displayShowing)
214	214	$displayCanvas.show();
215		~~- $(".jcrop-holder", doc).show();~~
	215	+ $j(".jcrop-holder", doc).show();
216	216	});
217	217
218	218	$link.mouseover(function() {
219	219	displayShowing = $displayCanvas.css("display") != "none";
220		~~- var $imagectr = $("#image-container", doc);~~
	220	+ var $imagectr = $j("#image-container", doc);
221	221
222		~~- $(".jcrop-holder", doc).hide();~~
	222	+ $j(".jcrop-holder", doc).hide();
223	223	$displayCanvas.hide();
224		~~- $(image).appendTo($imagectr);~~
	224	+ $j(image).appendTo($imagectr);
225	225
226		~~- var h1 = $("#image-area", doc).height();~~
	226	+ var h1 = $j("#image-area", doc).height();
227	227	var h2 = image.height;
228	228	var m = Math.max(0, (h1 - h2) / 2);
229	229	$imagectr.css("marginTop", m);
—	—	@@ -231,15 +231,15 @@
232	232	});
233	233
234	234	$link.mouseout(function() {
235		~~- $(image).remove();~~
	235	+ $j(image).remove();
236	236	if (displayShowing)
237	237	$displayCanvas.show();
238		~~- $(".jcrop-holder", doc).show();~~
	238	+ $j(".jcrop-holder", doc).show();
239	239	updateDisplayCanvas();
240	240	});
241	241
242	242
243		~~- $(canvas).attr("title", "Click to revert to this previous image");~~
	243	+ $j(canvas).attr("title", "Click to revert to this previous image");
244	244
245	245	})();
246	246	}
—	—	@@ -250,7 +250,7 @@
251	251	if (!Pixastic.Actions[id])
252	252	throw new Error("applyAction(): unknown action [" + id + "]");
253	253
254		~~- $("#action-bar-overlay", doc).show();~~
	254	+ $j("#action-bar-overlay", doc).show();
255	255
256	256	setTimeout(function() {
257	257	options.leaveDOM = true;
—	—	@@ -266,10 +266,10 @@
267	267	var ctx = canvasElement.getContext("2d");
268	268	ctx.clearRect(0,0,imageWidth,imageHeight);
269	269	ctx.drawImage(resCanvas,0,0);
270		~~- $imageCanvas = $(canvasElement);~~
	270	+ $imageCanvas = $j(canvasElement);
271	271	resetDisplayCanvas();
272	272
273		~~- $("#action-bar-overlay", doc).hide();~~
	273	+ $j("#action-bar-overlay", doc).hide();
274	274
275	275	if (afteraction)
276	276	afteraction();
—	—	@@ -285,7 +285,7 @@
286	286	if (!Pixastic.Actions[id])
287	287	throw new Error("applyAction(): unknown action [" + id + "]");
288	288
289		~~- $("#action-bar-overlay", doc).show();~~
	289	+ $j("#action-bar-overlay", doc).show();
290	290
291	291	resetDisplayCanvas();
292	292
—	—	@@ -305,7 +305,7 @@
306	306	updateDisplayCanvas();
307	307	updateOverlay();
308	308
309		~~- $("#action-bar-overlay", doc).hide();~~
	309	+ $j("#action-bar-overlay", doc).hide();
310	310
311	311	if (afteraction)
312	312	afteraction();
—	—	@@ -342,36 +342,36 @@
343	343	$activeTabContent = null;
344	344
345	345	// setup DOM UI skeleton
346		~~- $editor = $("<div />", doc)~~
	346	+ $editor = $j("<div />", doc)
347	347	.attr("id", "pixastic-editor")
348		~~- .appendTo($(doc.body));~~
	348	+ .appendTo($j(doc.body));
349	349
350	350	$editor.append(
351		~~- $("<div id='background' />", doc),~~
352		~~- $("<div id='edit-ctr-1' />", doc).append(~~
353		~~- $("<div id='edit-ctr-2' />", doc).append(~~
354		~~- $("<div id='controls-bar' />", doc).append(~~
355		~~- $("<div id='action-bar' />", doc).append(~~
356		~~- $("<div id='action-bar-overlay' />", doc)~~
	351	+ $j("<div id='background' />", doc),
	352	+ $j("<div id='edit-ctr-1' />", doc).append(
	353	+ $j("<div id='edit-ctr-2' />", doc).append(
	354	+ $j("<div id='controls-bar' />", doc).append(
	355	+ $j("<div id='action-bar' />", doc).append(
	356	+ $j("<div id='action-bar-overlay' />", doc)
357	357	),
358		~~- $("<div id='undo-bar' />", doc)~~
	358	+ $j("<div id='undo-bar' />", doc)
359	359	),
360		~~- $("<div id='image-area' />", doc).append(~~
361		~~- $("<div id='image-area-sub' />", doc).append(~~
362		~~- $("<div id='image-container' />", doc),~~
363		~~- $("<div id='image-overlay-container' />", doc).append(~~
364		~~- $("<div id='image-overlay' />", doc)~~
	360	+ $j("<div id='image-area' />", doc).append(
	361	+ $j("<div id='image-area-sub' />", doc).append(
	362	+ $j("<div id='image-container' />", doc),
	363	+ $j("<div id='image-overlay-container' />", doc).append(
	364	+ $j("<div id='image-overlay' />", doc)
365	365	)
366	366	)
367	367	)
368	368	)
369	369	),
370		~~- $("<div id='main-bar' />", doc),~~
371		~~- $("<div id='powered-by-pixastic'><a href=\"http://www.pixastic.com/\" target=\"_blank\">Powered by Pixastic</a></div>", doc)~~
	370	+ $j("<div id='main-bar' />", doc),
	371	+ $j("<div id='powered-by-pixastic'><a href=\"http://www.pixastic.com/\" target=\"_blank\">Powered by Pixastic</a></div>", doc)
372	372	);
373	373
374		~~- $("#image-container", doc).append(~~
375		~~- $displayCanvas = $("<canvas />", doc)~~
	374	+ $j("#image-container", doc).append(
	375	+ $displayCanvas = $j("<canvas />", doc)
376	376	.addClass("display-canvas")
377	377	);
378	378
—	—	@@ -383,20 +383,20 @@
384	384
385	385	var tab = tabs[i];
386	386
387		~~- var $tabElement = $("<a href=\"#\">" + tab.title + "</a>", doc)~~
	387	+ var $tabElement = $j("<a href=\"#\">" + tab.title + "</a>", doc)
388	388	.attr("id", "main-tab-button-" + tab.id)
389	389	.addClass("main-tab")
390	390	.click(function() {
391	391	enableTab(tab.id);
392	392	})
393		~~- .mouseover(function(){ $(this).addClass("hover") })~~
394		~~- .mouseout(function(){ $(this).removeClass("hover") });~~
	393	+ .mouseover(function(){ $j(this).addClass("hover") })
	394	+ .mouseout(function(){ $j(this).removeClass("hover") });
395	395
396		~~- $("#main-bar", doc).append($tabElement);~~
	396	+ $j("#main-bar", doc).append($tabElement);
397	397
398	398	tabElements[tab.id] = $tabElement;
399	399
400		~~- var $menu = $("<div/>", doc);~~
	400	+ var $menu = $j("<div/>", doc);
401	401	accordionElements[tab.id] = $menu;
402	402
403	403	for (var j=0;j<tab.actions.length;j++) {
—	—	@@ -404,11 +404,11 @@
405	405
406	406	var action = tab.actions[j];
407	407
408		~~- var $actionElement = $("<div><h3><a href=\"#\">" + action.title + "</a></h3></div>", doc)~~
	408	+ var $actionElement = $j("<div><h3><a href=\"#\">" + action.title + "</a></h3></div>", doc)
409	409
410	410	$menu.append($actionElement);
411	411
412		~~- var $content = $("<div></div>", doc)~~
	412	+ var $content = $j("<div></div>", doc)
413	413	.attr("id", "pixastic-action-tab-content-" + action.id)
414	414	.appendTo($actionElement);
415	415
—	—	@@ -451,7 +451,7 @@
452	452	resetDisplayCanvas();
453	453
454	454	if (!isPreview && !action.forcePreview) {
455		~~- $("#pixastic-input-preview-" + action.id, doc).attr("checked", false);~~
	455	+ $j("#pixastic-input-preview-" + action.id, doc).attr("checked", false);
456	456	togglePreview(false);
457	457	reset();
458	458	}
—	—	@@ -537,7 +537,7 @@
538	538	}
539	539	break;
540	540	case "output" :
541		~~- var outputText = $("<div></div>", doc)~~
	541	+ var outputText = $j("<div></div>", doc)
542	542	.addClass("ui-action-output")
543	543	.html(control.content)
544	544	.appendTo($content);
—	—	@@ -563,17 +563,17 @@
564	564	}
565	565
566	566	if (action.preview && !action.forcePreview) {
567		~~- var $checkctr = $("<div></div>", doc)~~
	567	+ var $checkctr = $j("<div></div>", doc)
568	568	.addClass("ui-checkbox-container")
569	569	.addClass("ui-preview-checkbox-container");
570	570
571		~~- var $label = $("<label></label>", doc)~~
	571	+ var $label = $j("<label></label>", doc)
572	572	.addClass("ui-checkbox-label")
573	573	.attr("for", "pixastic-input-preview-" + action.id)
574	574	.html("Preview:")
575	575	.appendTo($checkctr);
576	576
577		~~- var $checkbox = $("<input type=\"checkbox\"></input>", doc)~~
	577	+ var $checkbox = $j("<input type=\"checkbox\"></input>", doc)
578	578	.addClass("ui-checkbox")
579	579	.attr("id", "pixastic-input-preview-" + action.id)
580	580	.appendTo($checkctr)
—	—	@@ -594,7 +594,7 @@
595	595	}
596	596
597	597	// stupid hack to make it possible to get $content in change event (below)
598		~~- $("<span></span>", doc).appendTo($content);~~
	598	+ $j("<span></span>", doc).appendTo($content);
599	599
600	600	$content.data("controlOptions", controlOptions);
601	601	$content.data("onactivate", action.onactivate);
—	—	@@ -606,7 +606,7 @@
607	607	})();
608	608	}
609	609
610		~~- $("#action-bar", doc).append($menu);~~
	610	+ $j("#action-bar", doc).append($menu);
611	611
612	612	$menu.hide().accordion({
613	613	header: "h3",
—	—	@@ -622,7 +622,7 @@
623	623	// We need the parent element (the one holding the content) but if there is no content, how do we get it?
624	624	// fixed above by always appending a <span> but that's ugly and needs to be done in some other way
625	625	if (ui.oldContent.get(0)) {
626		~~- var $parent = $(ui.oldContent.get(0).parentNode);~~
	626	+ var $parent = $j(ui.oldContent.get(0).parentNode);
627	627	if ($parent.data("ondeactivate")) {
628	628	$parent.data("ondeactivate")();
629	629	}
—	—	@@ -630,7 +630,7 @@
631	631	$activeTabContent = ui.newContent;
632	632
633	633	if (ui.newContent.get(0)) {
634		~~- var $parent = $(ui.newContent.get(0).parentNode);~~
	634	+ var $parent = $j(ui.newContent.get(0).parentNode);
635	635	if ($parent.data("previewCheckbox"))
636	636	$parent.data("previewCheckbox").attr("checked", false);
637	637	$parent.data("uidesc").previewEnabled = false;
—	—	@@ -656,7 +656,7 @@
657	657	})();
658	658	}
659	659
660		~~- $(window).bind("resize", onwindowresize);~~
	660	+ $j(window).bind("resize", onwindowresize);
661	661	}
662	662
663	663	function showLoadingScreen() {
—	—	@@ -664,9 +664,9 @@
665	665	$loadingScreen.show();
666	666	return;
667	667	}
668		~~- $loadingScreen = $("<div id=\"loading-screen\" />")~~
669		~~- var $ctr = $("<div id=\"loading-screen-cell\" />");~~
670		~~- $("<div />")~~
	668	+ $loadingScreen = $j("<div id=\"loading-screen\" />")
	669	+ var $ctr = $j("<div id=\"loading-screen-cell\" />");
	670	+ $j("<div />")
671	671	.addClass("spinner")
672	672	.appendTo($ctr);
673	673	$loadingScreen.append($ctr);
—	—	@@ -697,14 +697,15 @@
698	698	document.body.scrollTop = 0;
699	699	document.body.style.overflow = "hidden";
700	700
701		~~- $frame = $("<iframe />");~~
	701	+ $frame = $j("<iframe />");
702	702	$frame.hide();
703	703	$frame.css({
704	704	position : "absolute",
705	705	left : document.body.scrollLeft + "px",
706	706	top : document.body.scrollTop + "px",
707	707	width : "100%",
708		~~- height : "100%"~~
	708	+ height : "100%",
	709	+ zIndex : "11"
709	710	});
710	711	$frame.load(function(){
711	712	doc = $frame.get(0).contentDocument;
—	—	@@ -722,7 +723,7 @@
723	724
724	725	// unload the editor, remove all elements added to the page and restore whatever properties we messed with
725	726	function unload() {
726		~~- $(window).unbind("resize", onwindowresize);~~
	727	+ $j(window).unbind("resize", onwindowresize);
727	728	$frame.hide();
728	729	$editor.hide();
729	730	$editor.remove();
—	—	@@ -759,15 +760,15 @@
760	761	// updates the display by resetting the height and margin of the image container
761	762	// this is mainly to keep vertical centering
762	763	function updateDisplayCanvas() {
763		~~- var $imageCtr = $("#image-container", doc);~~
764		~~- var $editArea = $("#image-area", doc);~~
	764	+ var $imageCtr = $j("#image-container", doc);
	765	+ var $editArea = $j("#image-area", doc);
765	766
766	767	if (!$imageCtr.get(0)) throw new Error(errorDialog("updateDisplayCanvas(): $imageCtr doesn't exist"));
767	768	if (!$displayCanvas.get(0)) throw new Error(errorDialog("updateDisplayCanvas(): $displayCanvas doesn't exist"));
768	769	if (!$editArea.get(0)) throw new Error(errorDialog("updateDisplayCanvas(): $editArea doesn't exist"));
769	770
770	771	var h2 = $displayCanvas.get(0).height;
771		~~- var h1 = $("#image-area", doc).height();~~
	772	+ var h1 = $j("#image-area", doc).height();
772	773	var m = Math.max(0, (h1 - h2) / 2);
773	774	$imageCtr.height(h2);
774	775	$imageCtr.css("marginTop", m);
—	—	@@ -775,13 +776,13 @@
776	777
777	778	// basically the same as updateDisplayCanvas but for the image overlay
778	779	function updateOverlay() {
779		~~- var $overlay = $("#image-overlay-container", doc);~~
780		~~- var $imagectr = $("#image-container", doc);~~
	780	+ var $overlay = $j("#image-overlay-container", doc);
	781	+ var $imagectr = $j("#image-container", doc);
781	782	$overlay.height($imagectr.height());
782	783	$overlay.css("marginTop", $imagectr.css("marginTop"));
783	784
784	785	if ($activeTabContent && $activeTabContent.get(0)) {
785		~~- var $tabContent = $($activeTabContent.get(0).parentNode);~~
	786	+ var $tabContent = $j($activeTabContent.get(0).parentNode);
786	787	if (typeof $tabContent.data("onoverlayupdate") == "function")
787	788	$tabContent.data("onoverlayupdate")();
788	789	}
—	—	@@ -799,7 +800,7 @@
800	801
801	802	originalImageElement = imgEl;
802	803
803		~~- $imageCanvas = $("<canvas />", doc);~~
	804	+ $imageCanvas = $j("<canvas />", doc);
804	805	imageCtx = $imageCanvas.get(0).getContext("2d");
805	806
806	807	imageWidth = 0;
—	—	@@ -821,7 +822,7 @@
822	823	resetDisplayCanvas();
823	824	}, 10);
824	825	}
825		~~- $tmpImg = $("<img />", doc)~~
	826	+ $tmpImg = $j("<img />", doc)
826	827	.css("position", "absolute")
827	828	.css("left", "-9999px")
828	829	.css("top", "-9999px")
—	—	@@ -928,7 +929,7 @@
929	930	getOverlay : function() {
930	931	if (!isRunning) throw new Error("PixasticEditor::getOverlay(): Editor is not running");
931	932
932		~~- return $("#image-overlay", doc);~~
	933	+ return $j("#image-overlay", doc);
933	934	},
934	935	getDisplayCanvas : function() {
935	936	if (!isRunning) throw new Error("PixasticEditor::getDisplayCanvas(): Editor is not running");
Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/pixastic-editor/uidata.js
—	—	@@ -93,14 +93,14 @@
94	94	var $canvas = PE.getDisplayCanvas();
95	95	var onchange = function(c) {
96	96	var doc = PE.getDocument();
97		~~- $("#input-numeric-crop-left", doc).val(c.x).change();~~
98		~~- $("#input-numeric-crop-top", doc).val(c.y).change();~~
99		~~- $("#input-numeric-crop-width", doc).val(c.w).change();~~
100		~~- $("#input-numeric-crop-height", doc).val(c.h).change();~~
101		~~- $("#input-hidden-crop-left", doc).val(c.x).change();~~
102		~~- $("#input-hidden-crop-top", doc).val(c.y).change();~~
103		~~- $("#input-hidden-crop-width", doc).val(c.w).change();~~
104		~~- $("#input-hidden-crop-height", doc).val(c.h).change();~~
	97	+ $j("#input-numeric-crop-left", doc).val(c.x).change();
	98	+ $j("#input-numeric-crop-top", doc).val(c.y).change();
	99	+ $j("#input-numeric-crop-width", doc).val(c.w).change();
	100	+ $j("#input-numeric-crop-height", doc).val(c.h).change();
	101	+ $j("#input-hidden-crop-left", doc).val(c.x).change();
	102	+ $j("#input-hidden-crop-top", doc).val(c.y).change();
	103	+ $j("#input-hidden-crop-width", doc).val(c.w).change();
	104	+ $j("#input-hidden-crop-height", doc).val(c.h).change();
105	105	}
106	106	$canvas.data("Jcrop-onchange", onchange);
107	107	$canvas.Jcrop({onChange:onchange}, PE.getDocument());
—	—	@@ -148,7 +148,7 @@
149	149	var doc = PE.getDocument();
150	150	var $displayCanvas = PE.getDisplayCanvas();
151	151	var dim = Math.min($displayCanvas.attr("height"), 200);
152		~~- var $canvas = $("<canvas></canvas>", doc);~~
	152	+ var $canvas = $j("<canvas></canvas>", doc);
153	153	PE.getOverlay().append($canvas);
154	154
155	155	$canvas.attr("width", dim);
—	—	@@ -172,7 +172,7 @@
173	173	ctx.lineWidth = 20;
174	174	ctx.stroke();
175	175
176		~~- $("#image-area", doc).css("cursor", "move");~~
	176	+ $j("#image-area", doc).css("cursor", "move");
177	177
178	178	$overlay = PE.getOverlay();
179	179
—	—	@@ -192,7 +192,7 @@
193	193	mx = (e.pageX - offset.left) - $displayCanvas.attr("width")*0.5;
194	194	my = (e.pageY - offset.top) - $displayCanvas.attr("height")*0.5;
195	195	startMouseAngle = Math.atan2(my, mx);
196		~~- startAngle = parseInt($("#input-numeric-rotate-angle", doc).val(), 10) * Math.PI / 180;~~
	196	+ startAngle = parseInt($j("#input-numeric-rotate-angle", doc).val(), 10) * Math.PI / 180;
197	197	}
198	198	var onmousemove = function(e) {
199	199	if (!mouseIsDown) return;
—	—	@@ -204,16 +204,16 @@
205	205	angle = startAngle - deltaAngle;
206	206	if (angle < -Math.PI) angle += 2*Math.PI;
207	207	if (angle > Math.PI) angle -= 2*Math.PI;
208		~~- $("#input-numeric-rotate-angle", doc).val(Math.round(angle * 180 / Math.PI));~~
209		~~- $("#input-numeric-rotate-angle", doc).change();~~
	208	+ $j("#input-numeric-rotate-angle", doc).val(Math.round(angle * 180 / Math.PI));
	209	+ $j("#input-numeric-rotate-angle", doc).change();
210	210	}
211	211	var onmouseup = function() {
212	212	mouseIsDown = false;
213	213	}
214	214
215		~~- $("#image-area", doc).bind("mousedown", onmousedown);~~
216		~~- $("#image-area", doc).bind("mousemove", onmousemove);~~
217		~~- $("#image-area", doc).bind("mouseup", onmouseup);~~
	215	+ $j("#image-area", doc).bind("mousedown", onmousedown);
	216	+ $j("#image-area", doc).bind("mousemove", onmousemove);
	217	+ $j("#image-area", doc).bind("mouseup", onmouseup);
218	218	$canvas.data("onmousedown", onmousedown);
219	219	$canvas.data("onmousemove", onmousemove);
220	220	$canvas.data("onmouseup", onmouseup);
—	—	@@ -223,13 +223,13 @@
224	224	var doc = PE.getDocument();
225	225	var $displayCanvas = PE.getDisplayCanvas();
226	226	$overlay = PE.getOverlay();
227		~~- $("#image-area", doc).css("cursor", "default");~~
	227	+ $j("#image-area", doc).css("cursor", "default");
228	228
229	229	var $canvas = $displayCanvas.data("rotateCanvas");
230	230
231		~~- $("#image-area", doc).unbind("mousedown", $canvas.data("onmousedown"));~~
232		~~- $("#image-area", doc).unbind("mousemove", $canvas.data("onmousemove"));~~
233		~~- $("#image-area", doc).unbind("mouseup", $canvas.data("onmouseup"));~~
	231	+ $j("#image-area", doc).unbind("mousedown", $canvas.data("onmousedown"));
	232	+ $j("#image-area", doc).unbind("mousemove", $canvas.data("onmousemove"));
	233	+ $j("#image-area", doc).unbind("mouseup", $canvas.data("onmouseup"));
234	234	$displayCanvas.removeData("rotateCanvas");
235	235	$canvas.remove();
236	236	},
—	—	@@ -790,13 +790,13 @@
791	791	id : "savepage",
792	792	content : function($ctr) {
793	793	var doc = PE.getDocument();
794		~~- $("<div></div>", doc)~~
	794	+ $j("<div></div>", doc)
795	795	.addClass("action-output-text")
796	796	.html("This will save the image to the page.")
797	797	.appendTo($ctr);
798	798
799		~~- var $buttonCtr = $("<div></div>", doc).appendTo($ctr);~~
800		~~- var $saveButton = $("<button></button>", doc)~~
	799	+ var $buttonCtr = $j("<div></div>", doc).appendTo($ctr);
	800	+ var $saveButton = $j("<button></button>", doc)
801	801	.html("Save image")
802	802	.appendTo($buttonCtr)
803	803	.click(function() {
—	—	@@ -810,7 +810,7 @@
811	811	id : "savefile",
812	812	content : function(ctr) {
813	813	var doc = PE.getDocument();
814		~~- $("<div></div>", doc)~~
	814	+ $j("<div></div>", doc)
815	815	.addClass("action-output-text")
816	816	.html("This will save the image to your local computer.")
817	817	.appendTo(ctr);
—	—	@@ -823,22 +823,22 @@
824	824	}
825	825	selectHtml += "</select>";
826	826
827		~~- var selectCtr = $("<div></div>", doc)~~
	827	+ var selectCtr = $j("<div></div>", doc)
828	828	.addClass("ui-select-container");
829	829
830	830
831		~~- var label = $("<div></div>", doc)~~
	831	+ var label = $j("<div></div>", doc)
832	832	.addClass("ui-select-label")
833	833	.html("Format:")
834	834	.appendTo(selectCtr);
835	835
836		~~- var formatSelect = $(selectHtml, doc).appendTo(selectCtr);~~
	836	+ var formatSelect = $j(selectHtml, doc).appendTo(selectCtr);
837	837
838	838
839	839	selectCtr.appendTo(ctr);
840	840
841		~~- var buttonCtr = $("<div></div>", doc).appendTo(ctr);~~
842		~~- var saveButton = $("<button></button>", doc)~~
	841	+ var buttonCtr = $j("<div></div>", doc).appendTo(ctr);
	842	+ var saveButton = $j("<button></button>", doc)
843	843	.html("Save file")
844	844	.appendTo(buttonCtr)
845	845
—	—	@@ -847,7 +847,7 @@
848	848	var formatMime = selectElement.options[selectElement.selectedIndex].value;
849	849	var dataString = PE.getDataURI(formatMime);
850	850
851		~~- var dialog = $("<div></div>", doc)~~
	851	+ var dialog = $j("<div></div>", doc)
852	852	.attr("id", "save-dialog")
853	853	.attr("title", "Download file")
854	854	.html(
—	—	@@ -858,8 +858,8 @@
859	859	.dialog();
860	860
861	861	// the dialog is added outside the Pixastic container, so get it back in.
862		~~- var dialogParent = $(dialog.get(0).parentNode);~~
863		~~- $("#pixastic-editor", doc).append(dialogParent);~~
	862	+ var dialogParent = $j(dialog.get(0).parentNode);
	863	+ $j("#pixastic-editor", doc).append(dialogParent);
864	864	});
865	865	}
866	866	},
—	—	@@ -871,12 +871,12 @@
872	872	var doc = PE.getDocument();
873	873
874	874	function flickrAuthed() {
875		~~- var $text = $("<div />", doc)~~
	875	+ var $text = $j("<div />", doc)
876	876	.addClass("action-output-text")
877	877	.html("Authorized as: " + PE.Flickr.getAuthName());
878	878
879		~~- var $buttonCtr = $("<div></div>", doc);~~
880		~~- var $uploadButton = $("<button></button>", doc)~~
	879	+ var $buttonCtr = $j("<div></div>", doc);
	880	+ var $uploadButton = $j("<button></button>", doc)
881	881	.html("Upload image")
882	882	.appendTo($buttonCtr)
883	883
—	—	@@ -887,15 +887,15 @@
888	888	$ctr.append($text, $buttonCtr);
889	889	}
890	890
891		~~- var $authCtr = $("<div />", doc).appendTo($ctr);~~
	891	+ var $authCtr = $j("<div />", doc).appendTo($ctr);
892	892
893		~~- $("<div />", doc)~~
	893	+ $j("<div />", doc)
894	894	.addClass("action-output-text")
895	895	.html("If you have a Flickr account you can now upload your image to Flickr. You will need to give access to your account first. Click the button below to open an authorization window.")
896	896	.appendTo($authCtr);
897	897
898		~~- var $buttonCtr = $("<div></div>", doc).appendTo($authCtr);~~
899		~~- var $authButton = $("<button></button>", doc)~~
	898	+ var $buttonCtr = $j("<div></div>", doc).appendTo($authCtr);
	899	+ var $authButton = $j("<button></button>", doc)
900	900	.html("Authenticate")
901	901	.appendTo($buttonCtr)
902	902
—	—	@@ -905,15 +905,15 @@
906	906	if (!checkButtonAdded) {
907	907	checkButtonAdded = true;
908	908
909		~~- var $text = $("<div />", doc)~~
	909	+ var $text = $j("<div />", doc)
910	910	.addClass("action-output-text")
911	911	.html("Now click the button below when you have authorized access to your Flickr account.");
912	912
913		~~- var $buttonCtr = $("<div></div>", doc);~~
	913	+ var $buttonCtr = $j("<div></div>", doc);
914	914
915	915	$authCtr.append($text, $buttonCtr);
916	916
917		~~- var $checkButton = $("<button></button>", doc)~~
	917	+ var $checkButton = $j("<button></button>", doc)
918	918	.html("I have authenticated!")
919	919	.appendTo($buttonCtr);
920	920
—	—	@@ -937,10 +937,10 @@
938	938	content : function(ctr) {
939	939	var doc = PE.getDocument();
940	940
941		~~- $("<div>Are you sure you want to quit?</div>", doc)~~
	941	+ $j("<div>Are you sure you want to quit?</div>", doc)
942	942	.addClass("action-output-text")
943	943	.appendTo(ctr);
944		~~- var $buttonCtr = $("<div></div>", doc).appendTo(ctr);~~
	944	+ var $buttonCtr = $j("<div></div>", doc).appendTo(ctr);
945	945
946	946	var $quitButton = PE.UI.makeButton("Yes, quit now!")
947	947	.appendTo($buttonCtr)
Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/pixastic-editor/ui.js
—	—	@@ -0,0 +1,237 @@
	2	+(function($) {
	3	+
	4	+ var PE = PixasticEditor;
	5	+
	6	+ function makeSlider(label, id, min, max, step, defaultVal, onChange) {
	7	+ var $ctr = $j("<div></div>", PE.getDocument())
	8	+ .addClass("ui-slider-container");
	9	+
	10	+ var $label = $j("<label></label>", PE.getDocument())
	11	+ .addClass("ui-slider-label")
	12	+ .attr("for", "input-slider-" + id)
	13	+ .html(label + ":")
	14	+ .appendTo($ctr);
	15	+
	16	+ var $value = $j("<div></div>", PE.getDocument())
	17	+ .addClass("ui-slider-value")
	18	+ .html(defaultVal());
	19	+
	20	+ var $valueField = $j("<input type='hidden'>", PE.getDocument())
	21	+ .attr("id", "input-hidden-" + id)
	22	+ .val(defaultVal())
	23	+ .appendTo($ctr);
	24	+
	25	+ var performOnChange = true;
	26	+
	27	+ var $slider = $j("<div class='ui-slider'><div class='ui-slider-handle'></div><div class='ui-slider-range'></div></div>", PE.getDocument())
	28	+ .appendTo($ctr)
	29	+ .attr("id", "input-slider-" + id)
	30	+ .slider({
	31	+ slide: function() {
	32	+ $value.html($j(this).slider("value"));
	33	+ $valueField.val($j(this).slider("value"));
	34	+ },
	35	+ change : function() {
	36	+ $value.html($j(this).slider("value"));
	37	+ $valueField.val($j(this).slider("value"));
	38	+ if (onChange && performOnChange)
	39	+ onChange();
	40	+ },
	41	+ min : min,
	42	+ max : max,
	43	+ step : step,
	44	+ value : defaultVal()
	45	+ });
	46	+
	47	+ $value.appendTo($ctr);
	48	+
	49	+ return {
	50	+ container : $ctr,
	51	+ label : $label,
	52	+ slider : $slider,
	53	+ valueText : $value,
	54	+ valueField : $valueField,
	55	+ reset : function() {
	56	+ performOnChange = false;
	57	+ $value.html(defaultVal());
	58	+ $valueField.val(defaultVal());
	59	+ $slider.slider("value", defaultVal());
	60	+ performOnChange = true;
	61	+ }
	62	+ };
	63	+ }
	64	+
	65	+ function makeCheckbox(label, id, defaultVal, onChange) {
	66	+ var $ctr = $j("<div></div>", PE.getDocument())
	67	+ .addClass("ui-checkbox-container");
	68	+
	69	+ var $label = $j("<label></label>", PE.getDocument())
	70	+ .addClass("ui-checkbox-label")
	71	+ .attr("for", "input-checkbox-" + id)
	72	+ .html(label + ":")
	73	+ .appendTo($ctr);
	74	+
	75	+ var $valueField = $j("<input type='hidden'>", PE.getDocument())
	76	+ .attr("id", "input-hidden-" + id)
	77	+ .val(defaultVal())
	78	+ .appendTo($ctr);
	79	+
	80	+ var performOnChange = true;
	81	+
	82	+ var $checkbox = $j("<input type=\"checkbox\"></input>", PE.getDocument())
	83	+ .addClass("ui-checkbox")
	84	+ .attr("id", "input-checkbox-" + id)
	85	+ .attr("checked", defaultVal())
	86	+ .appendTo($ctr)
	87	+ .change(function() {
	88	+ $valueField.val(this.checked);
	89	+ if (onChange && performOnChange)
	90	+ onChange();
	91	+ });
	92	+
	93	+ return {
	94	+ container : $ctr,
	95	+ label : $label,
	96	+ checkbox : $checkbox,
	97	+ valueField : $valueField,
	98	+ reset : function() {
	99	+ performOnChange = false;
	100	+ $checkbox.attr("checked", defaultVal());
	101	+ $valueField.val(defaultVal());
	102	+ performOnChange = true;
	103	+ }
	104	+ };
	105	+ }
	106	+
	107	+ function makeSelect(label, id, values, defaultVal, onChange) {
	108	+ var $ctr = $j("<div></div>", PE.getDocument())
	109	+ .addClass("ui-select-container");
	110	+
	111	+ var $label = $j("<label></label>", PE.getDocument())
	112	+ .addClass("ui-checkbox-label")
	113	+ .attr("for", "input-checkbox-" + id)
	114	+ .html(label + ":")
	115	+ .appendTo($ctr);
	116	+
	117	+ var $valueField = $j("<input type='hidden'>", PE.getDocument())
	118	+ .attr("id", "input-hidden-" + id)
	119	+ .val(defaultVal())
	120	+ .appendTo($ctr);
	121	+
	122	+ var selectHtml = "<select>";
	123	+ for (var i=0;i<values.length;i++) {
	124	+ selectHtml += "<option value='" + values[i].value + "' "
	125	+ + (defaultVal() == values[i].value ? "selected" : "")
	126	+ + ">" + values[i].name + "</option>";
	127	+ }
	128	+ selectHtml += "</select>";
	129	+
	130	+ var $select = $j(selectHtml).appendTo($ctr);
	131	+
	132	+ var performOnChange = true;
	133	+
	134	+ $select.change(
	135	+ function() {
	136	+ $valueField.val(this.options[this.selectedIndex].value);
	137	+ if (onChange && performOnChange)
	138	+ onChange();
	139	+ }
	140	+ );
	141	+
	142	+ return {
	143	+ container : $ctr,
	144	+ label : $label,
	145	+ select : $select,
	146	+ valueField : $valueField,
	147	+ reset : function() {
	148	+ performOnChange = false;
	149	+ var defVal = defaultVal();
	150	+ $select.val(defVal);
	151	+ $valueField.val(defVal);
	152	+ performOnChange = true;
	153	+ }
	154	+ };
	155	+ }
	156	+
	157	+ function makeNumericInput(label, labelRight, id, min, max, step, defaultVal, onChange) {
	158	+ var $ctr = $j("<div></div>", PE.getDocument())
	159	+ .addClass("ui-textinput-container");
	160	+
	161	+ var $label = $j("<label></label>", PE.getDocument())
	162	+ .addClass("ui-textinput-label")
	163	+ .attr("for", "input-numeric-" + id)
	164	+ .html(label + ":")
	165	+ .appendTo($ctr);
	166	+
	167	+ var $valueField = $j("<input type='hidden'>", PE.getDocument())
	168	+ .attr("id", "input-hidden-" + id)
	169	+ .val(defaultVal())
	170	+ .appendTo($ctr);
	171	+
	172	+ var performOnChange = true;
	173	+
	174	+ function setVal(val) {
	175	+ val = Math.min(max, val);
	176	+ val = Math.max(min, val);
	177	+ $textInput.val(val);
	178	+ $valueField.val(val);
	179	+ }
	180	+
	181	+ var $textInput = $j("<input type=\"text\"></input>", PE.getDocument())
	182	+ .addClass("ui-textinput")
	183	+ .addClass("ui-numericinput")
	184	+ .appendTo($ctr)
	185	+ .val(defaultVal())
	186	+ .attr("id", "input-numeric-" + id)
	187	+ .change(function() {
	188	+ var val = parseFloat(this.value);
	189	+ setVal(val);
	190	+ if (onChange && performOnChange)
	191	+ onChange();
	192	+ })
	193	+ .keydown(function(e) {
	194	+ var val = parseFloat($j(this).val());
	195	+ if (e.keyCode == 38) { // up
	196	+ setVal(val + step);
	197	+ }
	198	+ if (e.keyCode == 40) { // down
	199	+ setVal(val - step);
	200	+ }
	201	+ });
	202	+
	203	+ if (labelRight) {
	204	+ var $labelRight = $j("<label></label>", PE.getDocument())
	205	+ .addClass("ui-textinput-label-right")
	206	+ .html(labelRight)
	207	+ .appendTo($ctr);
	208	+ }
	209	+
	210	+ return {
	211	+ container : $ctr,
	212	+ label : $label,
	213	+ textinput : $textInput,
	214	+ valueField : $valueField,
	215	+ reset : function() {
	216	+ performOnChange = false;
	217	+ setVal(defaultVal());
	218	+ performOnChange = true;
	219	+ }
	220	+ };
	221	+ }
	222	+
	223	+ function makeButton(text) {
	224	+ var $button = $j("<button></button>", PE.getDocument()).html(text);
	225	+ return $button;
	226	+ }
	227	+
	228	+
	229	+ PE.UI = {
	230	+ makeSlider : makeSlider,
	231	+ makeCheckbox : makeCheckbox,
	232	+ makeNumericInput : makeNumericInput,
	233	+ makeSelect : makeSelect,
	234	+ makeButton : makeButton
	235	+ }
	236	+
	237	+})(PixasticEditor.jQuery);
	238	+
Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/mvClipEdit.js
—	—	@@ -141,78 +141,7 @@
142	142	},
143	143	'fileopts':{
144	144	'media':['image','video','template'],
145		~~- 'doEdit':function(_this, target ){~~
146		~~- var doEditHtml = function(){~~
147		~~- //add html for rObj resource:~~
148		~~- var o= '<table>' +~~
149		~~- '<tr>' +~~
150		~~- '<td colspan="2"><b>'+gM('mv_edit_properties')+'</b></td>'+~~
151		~~- '</tr>'+~~
152		~~- '<tr>'+~~
153		~~- '<td>' +~~
154		~~- gM('mv_custom_title') +~~
155		~~- '</td>'+~~
156		~~- '<td><input type="text" size="15" maxwidth="255" value="';~~
157		~~- if(_this.rObj.title != null)~~
158		~~- o+=_this.rObj.title;~~
159		~~- o+='">'+~~
160		~~- '</td>'+~~
161		~~- '</tr>';~~
162		~~- if( _this.rObj.tVars){~~
163		~~- var existing_p = _this.rObj.params;~~
164		~~- var testing_a = _this.rObj.tVars;~~
165		~~- //debugger;~~
166		~~- o+= '<tr>'+~~
167		~~- '<td colspan="2"><b>' + gM('mv_template_properties') + '</b></td>'+~~
168		~~- '</tr>';~~
169		~~- for(var i =0; i < _this.rObj.tVars.length ; i++){~~
170		~~- o+='<tr>'+~~
171		~~- '<td>' +~~
172		~~- _this.rObj.tVars[i] +~~
173		~~- '</td>' +~~
174		~~- '<td><input name="'+_this.rObj.tVars[i]+'" class="ic_tparam" type="text" size="15" maxwidth="255" value="';~~
175		~~- if(_this.rObj.params[ _this.rObj.tVars[i] ]){~~
176		~~- o+= _this.rObj.params[ _this.rObj.tVars[i] ];~~
177		~~- }~~
178		~~- o+='">'+~~
179		~~- '</td>'+~~
180		~~- '</tr>';~~
181		~~- }~~
182		~~- }~~
183		~~- if(typeof wgArticlePath != 'undefined' ){~~
184		~~- var res_src = wgArticlePath.replace(/\$1/, _this.rObj.uri );~~
185		~~- var res_title = _this.rObj.uri;~~
186		~~- }else{~~
187		~~- //var res_page =~~
188		~~- var res_src = _this.rObj.src;~~
189		~~- var res_title = parseUri(_this.rObj.src).file;~~
190		~~- }~~
191		~~- o+= '<tr>'+~~
192		~~- '<td colspan="2"><b>'+gM('mv_other_properties')+'</b></td>'+~~
193		~~- '</tr>'+~~
194		~~- '<tr>'+~~
195		~~- '<td>' +~~
196		~~- gM('mv_resource_page') +~~
197		~~- '</td>' +~~
198		~~- '<td><a href="' + res_src +'" '+~~
199		~~- ' target="new">'+~~
200		~~- res_title + '</a>'+~~
201		~~- '</td>'+~~
202		~~- '</tr>';~~
203		~~- o+='</table>';~~
204		-
205		~~- $j(target).html ( o );~~
206		~~- //add update bindings~~
207		~~- $j(target + ' .ic_tparam').change(function(){~~
208		~~- js_log("updated tparam::" + $j(this).attr("name"));~~
209		~~- //add wait~~
210		~~- //re-parse template~~
211		~~- })~~
212		-
213		~~- //update doFocusBindings~~
214		~~- if( _this.p_seqObj )~~
215		~~- _this.p_seqObj.doFocusBindings();~~
216		~~- }~~
	145	+ 'doEdit':function(_this, target ){
217	146	//if media type is template we have to query to get its URI to get its paramaters
218	147	if(_this.media_type == 'template' && !_this.rObj.tVars){
219	148	mv_set_loading('#sub_cliplib_ic');
—	—	@@ -229,11 +158,11 @@
230	159	'url':api_url
231	160	}, function(data){
232	161	if(typeof data.query.pages == 'undefined')
233		~~- return doEditHtml();~~
	162	+ return _this.doEditOpts(target);
234	163	for(var i in data.query.pages){
235	164	var page = data.query.pages[i];
236	165	if(!page['revisions'] \|\| !page['revisions'][0]['*']){
237		~~- return doEditHtml();~~
	166	+ return _this.doEditOpts(target);
238	167	}else{
239	168	var template_rev = page['revisions'][0]['*'];
240	169	}
—	—	@@ -264,11 +193,11 @@
265	194	if(do_add)
266	195	_this.rObj.tVars.push( tvar );
267	196	}
268		~~- doEditHtml();~~
	197	+ _this.doEditOpts(target);
269	198	}
270	199	);
271	200	}else{
272		~~- doEditHtml();~~
	201	+ _this.doEditOpts(target);
273	202	}
274	203	}
275	204	},
—	—	@@ -287,6 +216,103 @@
288	217	}
289	218	}
290	219	},
	220	+ doEditOpts:function(target){
	221	+ var _this = this;
	222	+ //add html for rObj resource:
	223	+ var o= '<table>' +
	224	+ '<tr>' +
	225	+ '<td colspan="2"><b>'+gM('mv_edit_properties')+'</b></td>'+
	226	+ '</tr>'+
	227	+ '<tr>'+
	228	+ '<td>' +
	229	+ gM('mv_custom_title') +
	230	+ '</td>'+
	231	+ '<td><input type="text" size="15" maxwidth="255" value="';
	232	+ if(_this.rObj.title != null)
	233	+ o+=_this.rObj.title;
	234	+ o+='">'+
	235	+ '</td>'+
	236	+ '</tr>';
	237	+ if( _this.rObj.tVars){
	238	+ var existing_p = _this.rObj.params;
	239	+ var testing_a = _this.rObj.tVars;
	240	+ //debugger;
	241	+ o+= '<tr>'+
	242	+ '<td colspan="2"><b>' + gM('mv_template_properties') + '</b></td>'+
	243	+ '</tr>';
	244	+ for(var i =0; i < _this.rObj.tVars.length ; i++){
	245	+ o+='<tr>'+
	246	+ '<td>' +
	247	+ _this.rObj.tVars[i] +
	248	+ '</td>' +
	249	+ '<td><input name="'+_this.rObj.tVars[i]+'" class="ic_tparam" type="text" size="15" maxwidth="255" value="';
	250	+ if(_this.rObj.params[ _this.rObj.tVars[i] ]){
	251	+ o+= _this.rObj.params[ _this.rObj.tVars[i] ];
	252	+ }
	253	+ o+='">'+
	254	+ '</td>'+
	255	+ '</tr>';
	256	+ }
	257	+ }
	258	+ if(typeof wgArticlePath != 'undefined' ){
	259	+ var res_src = wgArticlePath.replace(/\$1/, _this.rObj.uri );
	260	+ var res_title = _this.rObj.uri;
	261	+ }else{
	262	+ //var res_page =
	263	+ var res_src = _this.rObj.src;
	264	+ var res_title = parseUri(_this.rObj.src).file;
	265	+ }
	266	+ o+= '<tr>'+
	267	+ '<td colspan="2"><b>'+gM('mv_other_properties')+'</b></td>'+
	268	+ '</tr>'+
	269	+ '<tr>'+
	270	+ '<td>' +
	271	+ gM('mv_resource_page') +
	272	+ '</td>' +
	273	+ '<td><a href="' + res_src +'" '+
	274	+ ' target="new">'+
	275	+ res_title + '</a>'+
	276	+ '</td>'+
	277	+ '</tr>';
	278	+ o+='</table>';
	279	+
	280	+ $j(target).html ( o );
	281	+
	282	+ //add update bindings
	283	+ $j(target + ' .ic_tparam').change(function(){
	284	+ js_log("updated tparam::" + $j(this).attr("name"));
	285	+ //update param value:
	286	+ _this.rObj.params[ $j(this).attr("name") ] = $j(this).val();
	287	+ //re-parse & update template
	288	+ var template_wiki_text = '{{' + _this.rObj.uri;
	289	+ for(var i =0;i < _this.rObj.tVars.length ; i++){
	290	+
	291	+ template_wiki_text += "\n\|"+_this.rObj.tVars[i] + ' = ' + _this.rObj.params[ _this.rObj.tVars[i] ] ;
	292	+ }
	293	+ template_wiki_text += "\n}}";
	294	+ var reqObj ={
	295	+ 'action':'parse',
	296	+ 'title' : _this.p_seqObj.plObj.mTitle,
	297	+ 'text' : template_wiki_text
	298	+ };
	299	+ $j( _this.rObj.embed ).html( mv_get_loading_img() );
	300	+
	301	+ var api_url = _this.p_seqObj.plObj.interface_url;
	302	+ do_api_req({
	303	+ 'data':reqObj,
	304	+ 'url':api_url
	305	+ },function(data){
	306	+ if(data.parse.text['*']){
	307	+ //update the target
	308	+ $j( _this.rObj.embed ).html( data.parse.text['*'] );
	309	+ }
	310	+ })
	311	+ })
	312	+
	313	+ //update doFocusBindings
	314	+ if( _this.p_seqObj )
	315	+ _this.p_seqObj.doFocusBindings();
	316	+ },
291	317	doEditTypesMenu:function(){
292	318	var _this = this;
293	319	//add in subMenus if set
Index: branches/new-upload/phase3/js2/mwEmbed/mv_embed.js
—	—	@@ -451,6 +451,9 @@
452	452	}
453	453	this.ptime=this.ctime;
454	454	},
	455	+ doLoadFullPaths:function(loadObj, callback){
	456	+
	457	+ },
455	458	doLoadDepMode:function(loadChain, callback){
456	459	//firefox executes js ~in-order of it being included~ so just directly issue request:
457	460	if( $j.browser.firefox ){
—	—	@@ -790,13 +793,14 @@
791	794	'mvSequencer'
792	795	],
793	796	[
	797	+ '$j.ui.accordion',
794	798	'$j.ui.dialog',
795	799	'$j.ui.droppable',
796	800	'$j.ui.draggable',
797	801	'$j.ui.progressbar',
798	802	'$j.ui.sortable',
799	803	'$j.ui.resizable',
800		~~- '$j.ui.slider',~~
	804	+ '$j.ui.slider',
801	805	'$j.ui.tabs'
802	806	]
803	807	], function(){

Status & tagging log

06:59, 18 June 2009 Tim Starling (talk | contribs) changed the status of r52081 [removed: new added: deferred]