r50139 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r50138‎ | r50139 | r50140 >
Date:19:04, 2 May 2009
Author:thomasv
Status:ok (Comments)
Tags:
Comment:
new javascript zoom : mouse drag and wheel
Modified paths:
  • /trunk/extensions/ProofreadPage/ProofreadPage.php (modified) (history)
  • /trunk/extensions/ProofreadPage/proofread.js (modified) (history)

Diff [purge]

Index: trunk/extensions/ProofreadPage/ProofreadPage.php
——@@ -18,7 +18,7 @@
1919 $wgDjvutxt = null;
2020
2121 # Bump the version number every time you change proofread.js
22 -$wgProofreadPageVersion = 19;
 22+$wgProofreadPageVersion = 20;
2323
2424 $wgExtensionCredits['other'][] = array(
2525 'path' => __FILE__,
——@@ -39,10 +39,6 @@
4040
4141
4242
43 -
44 -# Bump the version number every time you change proofread.js
45 -$wgProofreadPageVersion = 18;
46 -
4743 /**
4844 *
4945 * Query the database to find if the current page is referred in an Index page.
Index: trunk/extensions/ProofreadPage/proofread.js
——@@ -1,8 +1,7 @@
22 // Author : ThomasV - License : GPL
33
44 //todo :
5 -//add a state for empty pages : detect if textbox is empty
6 -//use the API
 5+//empty pages : detect if textbox is empty
76
87
98 function pr_init_tabs(){
——@@ -166,48 +165,333 @@
167166
168167
169168
170 -//vertical mode
171 -self.vertHeight = 0;
172 -var ImgWidth = 0;
173169
174 -function pr_content(image_url){
175 -
176 - if (self.vertHeight == 0) {
177 - if(document.selection && !is_gecko)
178 - self.vertHeight=Math.ceil(document.body.clientHeight*0.4);
179 - else
180 - self.vertHeight=Math.ceil(window.innerHeight*0.4);
 170+
 171+/*
 172+ * Mouse Zoom. Credits: http://valid.tjp.hu/zoom/
 173+ */
 174+
 175+// global vars
 176+var lastxx, lastyy, xx, yy;
 177+
 178+var zp_clip; //zp_clip is the large image
 179+var zp_container;
 180+var zp_img;
 181+
 182+var zoomamount_h=2;
 183+var zoomamount_w=2;
 184+var zoomamount=2;
 185+var zoom_status='';
 186+
 187+var ieox=0; var ieoy=0;
 188+var ffox=0; var ffoy=0;
 189+
 190+
 191+var zoomw=160;
 192+var zoomh=120;
 193+
 194+
 195+/*relative coordinates of the mouse pointer*/
 196+function get_xy(evt){
 197+ if(typeof(evt) == 'object') {
 198+ evt = evt?evt:window.event?window.event:null; if(!evt){ return false;}
 199+ if(evt.pageX) {
 200+ xx=evt.pageX - ffox;
 201+ yy=evt.pageY - ffoy;
 202+ }
 203+ else {
 204+ if(typeof(document.getElementById("ImageContainer")+1) == 'number') {return true;}
 205+ xx=evt.clientX - ieox;
 206+ yy=evt.clientY - ieoy;
 207+ }
181208 }
182 - var s = "<div style=\"overflow: auto; height: " + self.vertHeight + "px; width: 100%;\">";
183 - s = s + "<img id=\"ProofReadImage\" src=\""+ image_url +"\" alt=\""+ image_url +"\"";
184 - s = s + " width=\"" + ImgWidth +"\"></div>";
185 - return s;
 209+ else {
 210+ xx = lastxx;
 211+ yy = lastyy;
 212+ }
 213+ lastxx = xx;
 214+ lastyy = yy;
 215+
186216 }
187217
 218+//mouse move
 219+function zoom_move(evt) {
188220
189 -function pr_zoom(value) {
 221+ if(zoom_status != 1) { return false;}
 222+
 223+ get_xy(evt);
190224
191 - if(!document.getElementById("ImageContainer")) return;
 225+ zp_clip.style.margin = ((yy > objh )?(objh*(1-zoomamount_h)):(yy*(1-zoomamount_h))) + 'px 0px 0px '
 226+ + ((xx > objw )?(objw*(1-zoomamount_w)):(xx*(1-zoomamount_w)))
 227+ + 'px';
192228
193 - var PrImage = document.getElementById("ProofReadImage");
194 -
195 - if (value == 0)
196 - PrImage.width = document.getElementById("ImageContainer").offsetWidth-20;
197 - else
198 - PrImage.width = PrImage.width + value;
199 -
200 - ImgWidth = PrImage.width;
201 -
202 - if(document.selection && !is_gecko) {
203 - //IE:
204 - document.getElementById("ImageContainer").innerHTML = pr_content(PrImage.src);
 229+ return false;
 230+}
 231+
 232+
 233+
 234+
 235+
 236+
 237+function zoom_off() {
 238+ zp_container.style.width='0px';
 239+ zp_container.style.height='0px';
 240+ zoom_status = 0;
 241+}
 242+
 243+
 244+
 245+
 246+function countoffset() {
 247+ zme=document.getElementById("ImageContainer");
 248+ ieox=0; ieoy=0;
 249+ for(zmi=0;zmi<50;zmi++) {
 250+ if(zme+1 == 1) {
 251+ break;
 252+ }
 253+ else {
 254+ ieox+=zme.offsetLeft;
 255+ ieoy+=zme.offsetTop;
 256+ }
 257+ zme=zme.offsetParent;
205258 }
206 -}
 259+ ffox=ieox;
 260+ ffoy=ieoy;
 261+ ieox-=document.body.scrollLeft;
 262+ ieoy-=document.body.scrollTop;
 263+}
207264
208265
209266
210267
 268+function zoom_mouseup(evt) {
211269
 270+ evt = evt?evt:window.event?window.event:null;
 271+ if(!evt) return false;
 272+
 273+ //only left button; see http://unixpapa.com/js/mouse.html for why it is this complicated
 274+ if(evt.which == null) {
 275+ if(evt.button != 1) return false;
 276+ } else {
 277+ if(evt.which > 1) return false;
 278+ }
 279+
 280+ if(zoom_status == 0) {
 281+ zoom_on(evt);
 282+ return false;
 283+ }
 284+ else if(zoom_status == 1) {
 285+ zoom_status = 2;
 286+ return false;
 287+ }
 288+ else if(zoom_status == 2) {
 289+ zoom_off();
 290+ return false;
 291+ }
 292+ return false;
 293+}
 294+
 295+
 296+
 297+
 298+
 299+function zoom_on(evt) {
 300+ evt = evt?evt:window.event?window.event:null; if(!evt){ return false;}
 301+ zoom_status=1;
 302+
 303+ if(evt.pageX) {
 304+ countoffset();
 305+ lastxx=evt.pageX - ffox;
 306+ lastyy=evt.pageY - ffoy;
 307+ }
 308+ else {
 309+ countoffset();
 310+ lastxx=evt.clientX - ieox;
 311+ lastyy=evt.clientY - ieoy;
 312+ }
 313+
 314+ zoomamount_h = zp_clip.height/objh;
 315+ zoomamount_w = zp_clip.width/objw;
 316+
 317+ zp_container.style.margin = '0px 0px 0px 0px';
 318+ zp_container.style.width = objw+'px';
 319+ zp_container.style.height = objh+'px';
 320+
 321+ zoom_move('');
 322+ return false;
 323+}
 324+
 325+
 326+//zoom using two images (magnification glass)
 327+function proofreadPageZoom(){
 328+
 329+ if(navigator.appName == "Microsoft Internet Explorer") return;
 330+ if(!self.proofreadPageViewURL) return;
 331+ if(self.DisplayWidth>800) return;
 332+
 333+ zp = document.getElementById("ImageContainer");
 334+ if(zp){
 335+ var hires_url = pr_image_url(800);
 336+ self.objw = zp.firstChild.width;
 337+ self.objh = zp.firstChild.height;
 338+
 339+ zp.setAttribute("onmouseup","zoom_mouseup(event);" );
 340+ zp.setAttribute("onmousemove","zoom_move(event);" );
 341+
 342+
 343+ zp_container = document.createElement("div");
 344+ zp_container.style.cssText ="position:absolute; width:0; height:0; overflow:hidden;";
 345+ zp_clip = document.createElement("img");
 346+ zp_clip.setAttribute("src", hires_url);
 347+ zp_clip.style.cssText = "padding:0;margin:0;border:0;";
 348+ zp_container.appendChild(zp_clip);
 349+ zp.insertBefore(zp_container,zp.firstChild);
 350+
 351+ }
 352+}
 353+
 354+
 355+
 356+/********************************
 357+ * new zoom : mouse wheel
 358+ *
 359+ ********************************/
 360+
 361+var margin_x = 0;
 362+var margin_y = 0;
 363+var prev_margin_x = 0;
 364+var prev_margin_y = 0;
 365+var init_x = 0;
 366+var init_y = 0;
 367+
 368+function pr_drop(evt){
 369+ prev_margin_x = margin_x;
 370+ prev_margin_y = margin_y;
 371+ document.onmouseup = null;
 372+ document.onmousemove = null;
 373+ document.onmousedown = null;
 374+ zp_container.onmousemove = pr_move;
 375+
 376+ return false;
 377+}
 378+
 379+function pr_grab(evt){
 380+
 381+ zp_img = document.getElementById("ProofReadImage");
 382+ zp_container = document.getElementById("pr_container");
 383+
 384+ evt = evt?evt:window.event?window.event:null;
 385+ if(!evt) return false;
 386+
 387+ //only left button; see http://unixpapa.com/js/mouse.html for why it is this complicated
 388+ if(evt.which == null) {
 389+ if(evt.button != 1) return false;
 390+ } else {
 391+ if(evt.which > 1) return false;
 392+ }
 393+
 394+ document.onmousedown = function(){return false;};
 395+ document.onmousemove = pr_drag;
 396+ document.onmouseup = pr_drop;
 397+ zp_container.onmousemove = pr_drag;
 398+
 399+ if(evt.pageX) {
 400+ countoffset();
 401+ lastxx=evt.pageX - ffox;
 402+ lastyy=evt.pageY - ffoy;
 403+ }
 404+ else {
 405+ countoffset();
 406+ lastxx=evt.clientX - ieox;
 407+ lastyy=evt.clientY - ieoy;
 408+ }
 409+
 410+ init_x = lastxx;
 411+ init_y = lastyy;
 412+
 413+ return false;
 414+
 415+}
 416+
 417+
 418+function pr_move(evt) {
 419+ countoffset();
 420+ get_xy(evt);
 421+}
 422+
 423+function pr_drag(evt) {
 424+ get_xy(evt);
 425+ //new
 426+ margin_x = prev_margin_x - (init_x-xx); //*(1-zoomamount_w);
 427+ margin_y = prev_margin_y - (init_y-yy); //*(1-zoomamount_h);
 428+ zp_img.style.margin = margin_y + 'px 0px 0px ' + margin_x + 'px';
 429+
 430+ if (evt.preventDefault) evt.preventDefault();
 431+ evt.returnValue = false;
 432+ return false;
 433+}
 434+
 435+
 436+function pr_zoom(delta){
 437+
 438+ zp_img = document.getElementById("ProofReadImage");
 439+ if(!zp_img) return;
 440+
 441+ if (delta == 0) {
 442+ zp_img.width = document.getElementById("ImageContainer").offsetWidth-20;
 443+ zp_img.style.margin = '0px 0px 0px 0px';
 444+ prev_margin_x = margin_x = 0;
 445+ prev_margin_y = margin_y = 0;
 446+ }
 447+ else{
 448+ var old_width = zp_img.width;
 449+ var new_width = Math.round(zp_img.width*Math.pow(1.1,delta));
 450+ var delta_w = new_width - old_width;
 451+ var s = (delta_w>0)?1:-1;
 452+
 453+ for(var dw=s; dw != delta_w; dw=dw+s){
 454+ zp_img.width = old_width + dw;//this adds 1 pixel
 455+ //magnification factor
 456+ var lambda = (old_width+dw)/old_width;
 457+ margin_x = xx - lambda*(xx - prev_margin_x);
 458+ margin_y = yy - lambda*(yy - prev_margin_y);
 459+ zp_img.style.margin = margin_y + 'px 0px 0px ' + margin_x + 'px';
 460+ }
 461+ prev_margin_x = margin_x;
 462+ prev_margin_y = margin_y;
 463+ }
 464+}
 465+
 466+function pr_zoom_wheel(event){
 467+// see http://adomas.org/javascript-mouse-wheel/
 468+
 469+ var delta = 0;
 470+ if (!event) /* For IE. */
 471+ event = window.event;
 472+ if (event.wheelDelta) { /* IE/Opera. */
 473+ delta = event.wheelDelta/120;
 474+ /** In Opera 9, delta differs in sign as compared to IE.*/
 475+ if (window.opera)
 476+ delta = -delta;
 477+ } else if (event.detail) { /** Mozilla case. */
 478+ /** In Mozilla, sign of delta is different than in IE.
 479+ * Also, delta is multiple of 3.
 480+ */
 481+ delta = -event.detail/3;
 482+ }
 483+ if(delta) pr_zoom(delta);
 484+ if (event.preventDefault) event.preventDefault();
 485+ event.returnValue = false;
 486+}
 487+
 488+
 489+
 490+
 491+
 492+
 493+
 494+
 495+
212496 function pr_fill_table(horizontal_layout){
213497
214498 //remove existing body
——@@ -254,51 +538,74 @@
255539 if(!horizontal_layout){
256540
257541 self.pr_horiz = false;
258 - var displayWidth = 400;
 542+ var desired_width = 400;
259543 if (parseInt(navigator.appVersion)>3) {
260544 if (navigator.appName.indexOf("Microsoft")!=-1) {
261 - displayWidth = parseInt(document.body.offsetWidth/2-70);
 545+ desired_width = parseInt(document.body.offsetWidth/2-70);
262546 }
263547 else {
264 - displayWidth = parseInt(window.innerWidth/2-70);
 548+ desired_width = parseInt(window.innerWidth/2-70);
265549 }
266550 }
267 - //this function sets self.DisplayHeight
268 - var image_url = pr_image_url(displayWidth);
 551+ //this function sets self.DisplayWidth and self.DisplayHeight
 552+ var thumb_url = pr_image_url(desired_width);
269553
270554 if(self.DisplayHeight)
271 - self.TextBoxHeight = DisplayHeight;
 555+ self.TextBoxHeight = self.DisplayHeight;
272556 else
273557 self.TextBoxHeight = 700;
274558
275559 //fill image container
276 - if(!proofreadPageIsEdit) {
 560+ if(!proofreadPageIsEdit) {
277561 var image = document.createElement("img");
278 - image.setAttribute("src", image_url);
 562+ image.setAttribute("src", thumb_url);
 563+ image.setAttribute("id", "ProofReadImage");
279564 image.style.cssText = "padding:0;margin:0;border:0;";
280565 image_container.appendChild(image);
281566 }
282567 else{
283568 var image_url = proofreadPageViewURL;
284 - var s = "<div style=\"overflow: auto; width: 100%; height:"+self.DisplayHeight+"px;\">";
 569+ var s = "<div id=\"pr_container\" style=\"background:#000000; overflow: auto; width: 100%; height:"+self.DisplayHeight+"px;\">";
285570 s = s + "<img id=\"ProofReadImage\" src=\""+ image_url +"\" alt=\""+ image_url +"\"";
286 - s = s + " width=\"" + displayWidth +"\"></div>";
 571+ s = s + " width=\"" + self.DisplayWidth +"\"></div>";
287572 image_container.innerHTML = s;
288573 document.getElementById("wpTextbox1").style.cssText = "height:"+(self.TextBoxHeight-7)+"px";
289574 pr_zoom(0);
290575 }
291 - //document.getElementById("contentSub").appendChild(ImageContainer);
292 -
293576 }
294577 else{
 578+ //horizontal layout
295579 self.pr_horiz = true;
296 - image_container.innerHTML = pr_content(proofreadPageViewURL);
 580+
 581+ if(document.selection && !is_gecko)
 582+ self.vertHeight=Math.ceil(document.body.clientHeight*0.4);
 583+ else
 584+ self.vertHeight=Math.ceil(window.innerHeight*0.4);
 585+
 586+ var s = "<div id=\"pr_container\" style= \"background:#000000; overflow: auto; height: " + self.vertHeight + "px; width: 100%;\">";
 587+ s = s + "<img id=\"ProofReadImage\" src=\""+ proofreadPageViewURL +"\" alt=\""+ proofreadPageViewURL +"\"";
 588+ s = s + "\"></div>";
 589+
 590+ image_container.innerHTML = s;
297591
298592 if(proofreadPageIsEdit){
299593 document.getElementById("wpTextbox1").style.cssText = "height:"+self.vertHeight+"px";
300594 pr_zoom(0);
301595 }
302596 }
 597+
 598+ //setup the mouse wheel listener
 599+ if(proofreadPageIsEdit) {
 600+ if (image_container.addEventListener) image_container.addEventListener('DOMMouseScroll', pr_zoom_wheel, false);
 601+ image_container.setAttribute("onmousewheel","pr_zoom_wheel(event);" );
 602+ //image_container.setAttribute("onmousemove", "pr_zoom_move(event);" );
 603+ //image_container.setAttribute("onmouseup", "pr_zoom_up(event);" );
 604+ image_container.setAttribute("onmousedown", "pr_grab(event);" );
 605+ image_container.onmousemove=pr_move;
 606+
 607+ zp_img = document.getElementById("ProofReadImage");
 608+ zp_container = document.getElementById("pr_container");
 609+ }
303610 }
304611
305612
——@@ -373,7 +680,7 @@
374681 image3.alt = "-";
375682 image3.title = "zoom out";
376683 image3.src = wgScriptPath+"/extensions/ProofreadPage/Button_zoom_out.png";
377 - image3.onclick = new Function("pr_zoom(-50);");
 684+ image3.onclick = new Function("pr_zoom(-2);");
378685 toolbar.appendChild(image3);
379686
380687 var image4 = document.createElement("img");
——@@ -397,7 +704,7 @@
398705 image2.alt = "+";
399706 image2.title = "zoom in";
400707 image2.src = wgScriptPath+"/extensions/ProofreadPage/Button_zoom_in.png";
401 - image2.onclick = new Function("pr_zoom(50);");
 708+ image2.onclick = new Function("pr_zoom(2);");
402709 toolbar.appendChild(image2);
403710
404711 var image1 = document.createElement("img");
——@@ -442,7 +749,7 @@
443750
444751 function pr_init() {
445752
446 - if( document.getElementById("proofreadImage")) return;
 753+ if( document.getElementById("ImageContainer")) return;
447754
448755 if(document.URL.indexOf("action=protect") > 0 || document.URL.indexOf("action=unprotect") > 0) return;
449756 if(document.URL.indexOf("action=delete") > 0 || document.URL.indexOf("action=undelete") > 0) return;
——@@ -501,6 +808,8 @@
502809 document.getElementById("wpTextbox1").style.cssText = "height:"+(self.TextBoxHeight-7)+"px";
503810 pr_zoom(0);
504811 }
 812+ else proofreadPageZoom();
 813+
505814 }
506815 hookEvent("load", pr_initzoom );
507816

Comments

#Comment by Tim Starling (talk | contribs)   07:29, 27 May 2009

Please fix the code style in the code you have imported: indenting style, variable naming, spaces, etc.

#Comment by Tim Starling (talk | contribs)   07:37, 27 May 2009

Also, in proofread.js generally, please escape all text bound for innerHTML or similar using escapeQuotesHTML(). It would be very easy to slip up and introduce an XSS vulnerability with the current style of code. Everything needs to be escaped before output, even text from trusted sources.

#Comment by ThomasV (talk | contribs)   11:52, 30 May 2009

done in r51191

Status & tagging log