r50183 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r50182‎ \| r50183 \| r50184 >
Date:	16:21, 4 May 2009
Author:	thomasv
Status:	ok
Tags:
Comment:	various fixes for IE; indentation; use of the DOM
Modified paths:	/trunk/extensions/ProofreadPage/proofread.js (modified) (history)

Diff [purge]

Index: trunk/extensions/ProofreadPage/proofread.js
—	—	@@ -145,11 +145,11 @@
146	146	if( h.style.cssText == ''){
147	147	h.style.cssText = 'display:none';
148	148	f.style.cssText = 'display:none';
149		~~- if(self.TextBoxHeight) box.style.cssText = "height:"+(TextBoxHeight-7)+"px";~~
	149	+ if(self.vertHeight) box.style.cssText = "height:"+(vertHeight-7)+"px";
150	150	} else {
151	151	h.style.cssText = '';
152	152	f.style.cssText = '';
153		~~- if(self.TextBoxHeight) box.style.cssText = "height:"+(TextBoxHeight-270)+"px";~~
	153	+ if(self.vertHeight) box.style.cssText = "height:"+(vertHeight-270)+"px";
154	154	}
155	155	}
156	156
—	—	@@ -189,6 +189,7 @@
190	190
191	191	/relative coordinates of the mouse pointer/
192	192	function get_xy(evt){
	193	+
193	194	if(typeof(evt) == 'object') {
194	195	evt = evt?evt:window.event?window.event:null; if(!evt){ return false;}
195	196	if(evt.pageX) {
—	—	@@ -196,7 +197,6 @@
197	198	yy=evt.pageY - ffoy;
198	199	}
199	200	else {
200		~~- if(typeof(document.getElementById("ImageContainer")+1) == 'number') {return true;}~~
201	201	xx=evt.clientX - ieox;
202	202	yy=evt.clientY - ieoy;
203	203	}
—	—	@@ -206,21 +206,18 @@
207	207	yy = lastyy;
208	208	}
209	209	lastxx = xx;
210		~~- lastyy = yy;~~
211		-
	210	+ lastyy = yy;
	211	+
212	212	}
213	213
214	214	//mouse move
215	215	function zoom_move(evt) {
216	216
217	217	if(zoom_status != 1) { return false;}
218		-
	218	+ evt = evt?evt:window.event?window.event:null; if(!evt){ return false;}
219	219	get_xy(evt);
220		-
221		~~- zp_clip.style.margin = ((yy > objh )?(objh(1-zoomamount_h)):(yy(1-zoomamount_h))) + 'px 0px 0px '~~
222		~~- + ((xx > objw )?(objw(1-zoomamount_w)):(xx(1-zoomamount_w)))~~
223		~~- + 'px';~~
224		-
	220	+ zp_clip.style.margin = ((yy > objh )?(objh(1-zoomamount_h)):(yy(1-zoomamount_h))) + 'px 0px 0px '
	221	+ + ((xx > objw )?(objw(1-zoomamount_w)):(xx(1-zoomamount_w))) + 'px';
225	222	return false;
226	223	}
227	224
—	—	@@ -239,7 +236,7 @@
240	237
241	238
242	239	function countoffset() {
243		~~- zme=document.getElementById("ImageContainer");~~
	240	+ zme=document.getElementById("pr_container");
244	241	ieox=0; ieoy=0;
245	242	for(zmi=0;zmi<50;zmi++) {
246	243	if(zme+1 == 1) {
—	—	@@ -262,21 +259,20 @@
263	260
264	261	function zoom_mouseup(evt) {
265	262
266		~~- evt = evt?evt:window.event?window.event:null;~~
267		~~- if(!evt) return false;~~
	263	+ evt = evt?evt:window.event?window.event:null; if(!evt){ return false;}
268	264
269		~~- //only left button; see http://unixpapa.com/js/mouse.html for why it is this complicated~~
270		~~- if(evt.which == null) {~~
271		~~- if(evt.button != 1) return false;~~
272		~~- } else {~~
	265	+ //only left button; see http://unixpapa.com/js/mouse.html for why it is this complicated
	266	+ if(evt.which == null) {
	267	+ if(evt.button != 1) return false;
	268	+ } else {
273	269	if(evt.which > 1) return false;
274		~~- }~~
	270	+ }
275	271
276	272	if(zoom_status == 0) {
277	273	zoom_on(evt);
278	274	return false;
279		~~- }~~
280		~~- else if(zoom_status == 1) {~~
	275	+ }
	276	+ else if(zoom_status == 1) {
281	277	zoom_status = 2;
282	278	return false;
283	279	}
—	—	@@ -288,9 +284,6 @@
289	285	}
290	286
291	287
292		-
293		-
294		-
295	288	function zoom_on(evt) {
296	289	evt = evt?evt:window.event?window.event:null; if(!evt){ return false;}
297	290	zoom_status=1;
—	—	@@ -309,7 +302,7 @@
310	303	zoomamount_h = zp_clip.height/objh;
311	304	zoomamount_w = zp_clip.width/objw;
312	305
313		~~- zp_container.style.margin = '0px 0px 0px 0px';~~
	306	+ zp_container.style.margin = '0px 0px 0px 0px';
314	307	zp_container.style.width = objw+'px';
315	308	zp_container.style.height = objh+'px';
316	309
—	—	@@ -321,20 +314,17 @@
322	315	//zoom using two images (magnification glass)
323	316	function proofreadPageZoom(){
324	317
325		~~- if(navigator.appName == "Microsoft Internet Explorer") return;~~
326	318	if(!self.proofreadPageViewURL) return;
327	319	if(self.DisplayWidth>800) return;
328	320
329		~~- zp = document.getElementById("ImageContainer");~~
	321	+ zp = document.getElementById("pr_container");
330	322	if(zp){
331	323	var hires_url = pr_image_url(800);
332	324	self.objw = zp.firstChild.width;
333	325	self.objh = zp.firstChild.height;
334	326
335		~~- zp.setAttribute("onmouseup","zoom_mouseup(event);" );~~
336		~~- zp.setAttribute("onmousemove","zoom_move(event);" );~~
337		-
338		-
	327	+ zp.onmouseup = zoom_mouseup;
	328	+ zp.onmousemove = zoom_move;
339	329	zp_container = document.createElement("div");
340	330	zp_container.style.cssText ="position:absolute; width:0; height:0; overflow:hidden;";
341	331	zp_clip = document.createElement("img");
—	—	@@ -353,13 +343,14 @@
354	344	*
355	345	********************************/
356	346
357		~~-var margin_x = 0;~~
	347	+var margin_x = 0;
358	348	var margin_y = 0;
359		~~-var prev_margin_x = 0;~~
	349	+var prev_margin_x = 0;
360	350	var prev_margin_y = 0;
361		~~-var init_x = 0;~~
	351	+var init_x = 0;
362	352	var init_y = 0;
363	353
	354	+
364	355	function pr_drop(evt){
365	356	prev_margin_x = margin_x;
366	357	prev_margin_y = margin_y;
—	—	@@ -367,18 +358,15 @@
368	359	document.onmousemove = null;
369	360	document.onmousedown = null;
370	361	zp_container.onmousemove = pr_move;
371		-
372	362	return false;
373	363	}
374	364
375	365	function pr_grab(evt){
376	366
	367	+ evt = evt?evt:window.event?window.event:null; if(!evt){ return false;}
377	368	zp_img = document.getElementById("ProofReadImage");
378	369	zp_container = document.getElementById("pr_container");
379	370
380		~~- evt = evt?evt:window.event?window.event:null;~~
381		~~- if(!evt) return false;~~
382		-
383	371	//only left button; see http://unixpapa.com/js/mouse.html for why it is this complicated
384	372	if(evt.which == null) {
385	373	if(evt.button != 1) return false;
—	—	@@ -392,37 +380,39 @@
393	381	zp_container.onmousemove = pr_drag;
394	382
395	383	if(evt.pageX) {
396		~~- countoffset();~~
397		~~- lastxx=evt.pageX - ffox;~~
398		~~- lastyy=evt.pageY - ffoy;~~
	384	+ countoffset();
	385	+ lastxx=evt.pageX - ffox;
	386	+ lastyy=evt.pageY - ffoy;
399	387	}
400	388	else {
401		~~- countoffset();~~
402		~~- lastxx=evt.clientX - ieox;~~
403		~~- lastyy=evt.clientY - ieoy;~~
	389	+ countoffset();
	390	+ lastxx=evt.clientX - ieox;
	391	+ lastyy=evt.clientY - ieoy;
404	392	}
405		-
	393	+
406	394	init_x = lastxx;
407	395	init_y = lastyy;
408		-
	396	+
409	397	return false;
410	398
411	399	}
412	400
413	401
414	402	function pr_move(evt) {
	403	+ evt = evt?evt:window.event?window.event:null; if(!evt){ return false;}
415	404	countoffset();
416	405	get_xy(evt);
417	406	}
418	407
419	408	function pr_drag(evt) {
	409	+ evt = evt?evt:window.event?window.event:null; if(!evt){ return false;}
420	410	get_xy(evt);
421		~~- //new~~
422		~~- margin_x = prev_margin_x - (init_x-xx); //*(1-zoomamount_w);~~
423		~~- margin_y = prev_margin_y - (init_y-yy); //*(1-zoomamount_h);~~
424		~~- zp_img.style.margin = margin_y + 'px 0px 0px ' + margin_x + 'px';~~
425		-
426		~~- if (evt.preventDefault) evt.preventDefault();~~
	411	+ margin_x = prev_margin_x - (init_x-xx);
	412	+ margin_y = prev_margin_y - (init_y-yy);
	413	+ zp_img.style.margin = margin_y + 'px 0px 0px ' + margin_x + 'px';
	414	+ image_container.style.cssText = self.container_css; //needed by IE6
	415	+
	416	+ if (evt.preventDefault) evt.preventDefault();
427	417	evt.returnValue = false;
428	418	return false;
429	419	}
—	—	@@ -430,12 +420,15 @@
431	421
432	422	function pr_zoom(delta){
433	423
	424	+ image_container = document.getElementById("pr_container");
434	425	zp_img = document.getElementById("ProofReadImage");
435	426	if(!zp_img) return;
436	427
437	428	if (delta == 0) {
438		~~- zp_img.width = document.getElementById("ImageContainer").offsetWidth; //-20;~~
439		~~- zp_img.style.margin = '0px 0px 0px 0px';~~
	429	+ zp_img.width = image_container.offsetWidth;
	430	+ zp_img.style.margin = '0px 0px 0px 0px';
	431	+ image_container.style.cssText = self.container_css; //needed by IE6
	432	+
440	433	prev_margin_x = margin_x = 0;
441	434	prev_margin_y = margin_y = 0;
442	435	}
—	—	@@ -444,40 +437,43 @@
445	438	var new_width = Math.round(zp_img.width*Math.pow(1.1,delta));
446	439	var delta_w = new_width - old_width;
447	440	var s = (delta_w>0)?1:-1;
448		-
	441	+
449	442	for(var dw=s; dw != delta_w; dw=dw+s){
450	443	zp_img.width = old_width + dw;//this adds 1 pixel
451		~~- //magnification factor~~
452		~~- var lambda = (old_width+dw)/old_width;~~
453		~~- margin_x = xx - lambda*(xx - prev_margin_x);~~
454		~~- margin_y = yy - lambda*(yy - prev_margin_y);~~
455		~~- zp_img.style.margin = margin_y + 'px 0px 0px ' + margin_x + 'px';~~
	444	+ image_container.style.cssText = self.container_css; //needed by IE6
	445	+ if(xx){
	446	+ //magnification factor
	447	+ var lambda = (old_width+dw)/old_width;
	448	+ margin_x = xx - lambda*(xx - prev_margin_x);
	449	+ margin_y = yy - lambda*(yy - prev_margin_y);
	450	+ zp_img.style.margin = Math.round(margin_y) + 'px 0px 0px ' + Math.round(margin_x) + 'px';
	451	+ }
456	452	}
457	453	prev_margin_x = margin_x;
458	454	prev_margin_y = margin_y;
	455	+
459	456	}
460	457	}
461	458
462		~~-function pr_zoom_wheel(event){~~
463		~~-// see http://adomas.org/javascript-mouse-wheel/~~
464		-
465		~~- var delta = 0;~~
466		~~- if (!event) /* For IE. */~~
467		~~- event = window.event;~~
468		~~- if (event.wheelDelta) { /* IE/Opera. */~~
469		~~- delta = event.wheelDelta/120;~~
470		~~- /** In Opera 9, delta differs in sign as compared to IE.*/~~
471		~~- if (window.opera)~~
472		~~- delta = -delta;~~
473		~~- } else if (event.detail) { /** Mozilla case. */~~
474		~~- /** In Mozilla, sign of delta is different than in IE.~~
475		~~- * Also, delta is multiple of 3.~~
476		~~- */~~
477		~~- delta = -event.detail/3;~~
478		~~- }~~
	459	+function pr_zoom_wheel(evt){
	460	+ evt = evt?evt:window.event?window.event:null; if(!evt){ return false;}
	461	+ var delta = 0;
	462	+ if (evt.wheelDelta) {
	463	+ /* IE/Opera. */
	464	+ delta = evt.wheelDelta/120;
	465	+ /** In Opera 9, delta differs in sign as compared to IE.*/
	466	+ if (window.opera) delta = -delta;
	467	+ }
	468	+ else if (evt.detail) {
	469	+ /** Mozilla case. */
	470	+ /** In Mozilla, sign of delta is different than in IE.
	471	+ * Also, delta is multiple of 3.
	472	+ */
	473	+ delta = -evt.detail/3;
	474	+ }
479	475	if(delta) pr_zoom(delta);
480		~~- if (event.preventDefault) event.preventDefault();~~
481		~~- event.returnValue = false;~~
	476	+ if(evt.preventDefault) evt.preventDefault();
	477	+ evt.returnValue = false;
482	478	}
483	479
484	480
—	—	@@ -487,24 +483,25 @@
488	484
489	485
490	486
491		-
	487	+/do not use a table in the horizontal case ?/
492	488	function pr_fill_table(horizontal_layout){
493	489
494		~~- //remove existing body~~
495		~~- if(self.table.firstChild){~~
	490	+ //remove existing content
	491	+ while(self.table.firstChild){
496	492	self.table.removeChild(self.table.firstChild);
497	493	}
498	494
499		~~- //create table body~~
500		~~- var t_body = document.createElement("tbody");~~
501		~~- self.table.appendChild(t_body);~~
502		~~- var cell_left = document.createElement("td");~~
503		~~- var cell_right = document.createElement("td");~~
504		-
505	495	if(!proofreadPageIsEdit) horizontal_layout=false;
506	496
507	497	//first setup the layout
508	498	if(!horizontal_layout) {
	499	+ //use a table only here
	500	+ var t_table = document.createElement("table");
	501	+ var t_body = document.createElement("tbody");
	502	+ var cell_left = document.createElement("td");
	503	+ var cell_right = document.createElement("td");
	504	+ t_table.appendChild(t_body);
	505	+
509	506	var t_row = document.createElement("tr");
510	507	t_row.setAttribute("valign","top");
511	508	cell_left.style.cssText = "width:50%; padding-right:0.5em;";
—	—	@@ -512,28 +509,30 @@
513	510	t_row.appendChild(cell_left);
514	511	t_row.appendChild(cell_right);
515	512	t_body.appendChild(t_row);
	513	+
	514	+ self.table.appendChild(t_table);
516	515	}
517	516	else {
518		~~- var t_row1 = document.createElement("tr");~~
519		~~- var t_row2 = document.createElement("tr");~~
520		~~- t_body.appendChild(t_row2);~~
521		~~- t_body.appendChild(t_row1);~~
522		~~- t_row1.appendChild(cell_left);~~
523		~~- t_row2.appendChild(cell_right);~~
	517	+ var cell_left = document.createElement("div");
	518	+ var cell_right = document.createElement("div");
	519	+ self.table.appendChild(cell_right);
	520	+ self.table.appendChild(cell_left);
524	521	}
525	522
526	523
527	524	//create image and text containers
528	525	var image_container = document.createElement("div");
529		~~- image_container.setAttribute("id", "ImageContainer");~~
	526	+ image_container.setAttribute("id", "pr_container");
	527	+ image_container.style.cssText = "background:#0000ff; overflow:hidden;";
	528	+
530	529	cell_right.appendChild(image_container);
531	530	cell_left.appendChild(self.text_container);
532	531
	532	+ self.pr_horiz = horizontal_layout;
533	533
534		~~- //fill the image container~~
	534	+ //compute the dimensions of the image container
535	535	if(!horizontal_layout){
536	536
537		~~- self.pr_horiz = false;~~
538	537	var desired_width = 400;
539	538	if (parseInt(navigator.appVersion)>3) {
540	539	if (navigator.appName.indexOf("Microsoft")!=-1) {
—	—	@@ -548,58 +547,50 @@
549	548
550	549	//self.DisplayHeight is known if the image is not external
551	550	if(self.DisplayHeight)
552		~~- self.TextBoxHeight = self.DisplayHeight;~~
	551	+ self.vertHeight = self.DisplayHeight;
553	552	else
554		~~- self.TextBoxHeight = 700;~~
555		-
556		~~- //fill image container~~
557		~~- if(!proofreadPageIsEdit) {~~
558		~~- var image = document.createElement("img");~~
559		~~- image.setAttribute("src", thumb_url);~~
560		~~- image.setAttribute("id", "ProofReadImage");~~
561		~~- image.setAttribute("width", self.DisplayWidth);~~
562		~~- image.style.cssText = "padding:0;margin:0;border:0;";~~
563		~~- image_container.appendChild(image);~~
564		~~- }~~
565		~~- else{~~
566		~~- var s = "<div id=\"pr_container\" style=\"background:#000000; overflow: auto; width: "+self.DisplayWidth+"px; height:"+self.TextBoxHeight+"px;\">";~~
567		~~- s = s + "<img id=\"ProofReadImage\" src=\""+ proofreadPageViewURL +"\" alt=\""+ proofreadPageViewURL +"\"";~~
568		~~- s = s + " width=\"" + self.DisplayWidth +"\"></div>";~~
569		~~- image_container.innerHTML = s;~~
570		~~- document.getElementById("wpTextbox1").style.cssText = "height:"+(self.TextBoxHeight-7)+"px";~~
571		~~- pr_zoom(0);~~
572		~~- }~~
	553	+ self.vertHeight = 700;
573	554	}
574	555	else{
575		~~- //horizontal layout~~
576		~~- self.pr_horiz = true;~~
577		-
578		~~- if(document.selection && !is_gecko)~~
579		~~- self.vertHeight=Math.ceil(document.body.clientHeight*0.4);~~
	556	+ if(document.selection && !is_gecko){
	557	+ self.vertHeight = Math.ceil(document.body.clientHeight*0.4);
	558	+ }
580	559	else
581		~~- self.vertHeight=Math.ceil(window.innerHeight*0.4);~~
	560	+ self.vertHeight = Math.ceil(window.innerHeight*0.4);
	561	+ }
582	562
583		~~- var s = "<div id=\"pr_container\" style= \"background:#000000; overflow: auto; height: "~~
584		~~- + self.vertHeight + "px; width: 100%;\">";~~
585		~~- s = s + "<img id=\"ProofReadImage\" src=\""+ proofreadPageViewURL +"\" alt=\""+ proofreadPageViewURL +"\"";~~
586		~~- s = s + "\"></div>";~~
587	563
588		~~- image_container.innerHTML = s;~~
589		-
590		~~- if(proofreadPageIsEdit){~~
591		~~- document.getElementById("wpTextbox1").style.cssText = "height:"+self.vertHeight+"px";~~
592		~~- pr_zoom(0);~~
	564	+ //fill the image container
	565	+ if(!proofreadPageIsEdit) {
	566	+ var image = document.createElement("img");
	567	+ image_container.appendChild(image);
	568	+ image.setAttribute("id", "ProofReadImage");
	569	+ image.setAttribute("src", thumb_url);
	570	+ image.setAttribute("width", self.DisplayWidth);
	571	+ image.style.cssText = "padding:0;margin:0;border:0;";
	572	+ }
	573	+ else{
	574	+ if(!horizontal_layout){
	575	+ cont_w = self.DisplayWidth+"px";
	576	+ img_w = self.DisplayWidth;
593	577	}
	578	+ else{
	579	+ cont_w = "100%";
	580	+ img_w = 0; //this prevents the container from being resized.
	581	+ }
	582	+ self.container_css = "background:#000000; overflow:hidden; width:"+cont_w+"; height:"+self.vertHeight+"px;";
	583	+ image_container.innerHTML = "<img id=\"ProofReadImage\" src=\""+proofreadPageViewURL+"\" width=\""+img_w+"\" />";
	584	+ image_container.style.cssText = self.container_css;
	585	+ document.getElementById("wpTextbox1").style.cssText = "height:"+self.vertHeight+"px";
	586	+ pr_zoom(0);
594	587	}
595	588
596	589	//setup the mouse wheel listener
597		~~- if(proofreadPageIsEdit) {~~
	590	+ if(proofreadPageIsEdit) {
598	591	if (image_container.addEventListener) image_container.addEventListener('DOMMouseScroll', pr_zoom_wheel, false);
599		~~- image_container.setAttribute("onmousewheel","pr_zoom_wheel(event);" );~~
600		~~- //image_container.setAttribute("onmousemove", "pr_zoom_move(event);" );~~
601		~~- //image_container.setAttribute("onmouseup", "pr_zoom_up(event);" );~~
602		~~- image_container.setAttribute("onmousedown", "pr_grab(event);" );~~
603		~~- image_container.onmousemove=pr_move;~~
	592	+ image_container.onmousewheel = pr_zoom_wheel;
	593	+ image_container.onmousedown = pr_grab;
	594	+ image_container.onmousemove = pr_move;
604	595
605	596	zp_img = document.getElementById("ProofReadImage");
606	597	zp_container = document.getElementById("pr_container");
—	—	@@ -614,14 +605,14 @@
615	606
616	607	function pr_setup() {
617	608
618		~~- self.table = document.createElement("table");~~
	609	+ self.table = document.createElement("div");
619	610	self.text_container = document.createElement("div");
620	611	self.image_container = document.createElement("div");
621	612	table.setAttribute("id", "textBoxTable");
622	613	table.style.cssText = "width:100%;";
623	614
624	615	//fill table
625		~~- if(self.proofreadpage_default_layout=='horizontal')~~
	616	+ if(self.proofreadpage_default_layout=='horizontal')
626	617	pr_fill_table(true);
627	618	else
628	619	pr_fill_table(false);
—	—	@@ -747,7 +738,7 @@
748	739
749	740	function pr_init() {
750	741
751		~~- if( document.getElementById("ImageContainer")) return;~~
	742	+ if( document.getElementById("pr_container")) return;
752	743
753	744	if(document.URL.indexOf("action=protect") > 0 \|\| document.URL.indexOf("action=unprotect") > 0) return;
754	745	if(document.URL.indexOf("action=delete") > 0 \|\| document.URL.indexOf("action=undelete") > 0) return;
—	—	@@ -805,7 +796,7 @@
806	797	if(self.pr_horiz)
807	798	document.getElementById("wpTextbox1").style.cssText = "height:"+self.vertHeight+"px";
808	799	else
809		~~- document.getElementById("wpTextbox1").style.cssText = "height:"+(self.TextBoxHeight-7)+"px";~~
	800	+ document.getElementById("wpTextbox1").style.cssText = "height:"+(self.vertHeight-7)+"px";
810	801	pr_zoom(0);
811	802	}
812	803	else proofreadPageZoom();

Status & tagging log

07:38, 27 May 2009 Tim Starling (talk | contribs) changed the status of r50183 [removed: new added: ok]