r64954 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r64953‎ | r64954 | r64955 >
Date:09:46, 12 April 2010
Author:thomasv
Status:ok (Comments)
Tags:
Comment:
partial revert to former zoom method using margins, due to problems with firefox 3.6
Modified paths:
  • /trunk/extensions/ProofreadPage/proofread.js (modified) (history)

Diff [purge]

Index: trunk/extensions/ProofreadPage/proofread.js
——@@ -392,8 +392,15 @@
393393 *
394394 ********************************/
395395
 396+/* width and margin of the scan */
 397+var margin_x = 0;
 398+var margin_y = 0;
 399+var img_width = 0;
 400+
 401+/* initial mouse position during a drag */
396402 var init_x = 0;
397403 var init_y = 0;
 404+
398405 var is_drag = false;
399406 var is_zoom = false;
400407 var pr_container = false;
——@@ -402,22 +409,31 @@
403410 /* size of the window */
404411 var pr_width = 0, pr_height = 0;
405412
406 -function set_container_css(show_scrollbars,default_cursor){
 413+function set_container_css(show_scrollbars){
 414+ var sl = pr_container.scrollLeft;//read scrollbar values
 415+ var st = pr_container.scrollTop;
407416 if(show_scrollbars) {
408417 self.container_css = self.container_css.replace("overflow:hidden","overflow:auto");
 418+ self.container_css = self.container_css.replace("cursor:crosshair","cursor:default");
 419+ //we should check if the sb is going to be shown
 420+ if(margin_x<0) { sl = - Math.round(margin_x); margin_x=0; }
 421+ if(margin_y<0) { st = - Math.round(margin_y); margin_y=0; }
409422 } else {
410423 self.container_css = self.container_css.replace("overflow:auto","overflow:hidden");
411 - }
412 - if(default_cursor) {
413 - self.container_css = self.container_css.replace("cursor:crosshair","cursor:default");
414 - } else {
415424 self.container_css = self.container_css.replace("cursor:default","cursor:crosshair");
 425+ if(sl) {
 426+ margin_x -= sl;
 427+ sl = 0;
 428+ }
 429+ if(st) {
 430+ margin_y -= st;
 431+ st = 0;
 432+ }
416433 }
417 - sl = pr_container.scrollLeft;//save scrollbar value for Opera, Chrome
418 - st = pr_container.scrollTop;
419 - pr_container.style.cssText = self.container_css;
 434+ pr_set_margins(margin_x, margin_y, false);
420435 pr_container.scrollLeft = sl;
421436 pr_container.scrollTop = st;
 437+
422438 }
423439
424440 function pr_drop(evt){
——@@ -434,22 +450,18 @@
435451 if(is_zoom) {
436452 is_zoom=false;
437453 if(boxWidth*boxWidth+boxHeight*boxHeight >= 2500){
438 - var zp_img = document.getElementById("ProofReadImage");
439 - ratio_x = Math.abs( pr_container.offsetWidth/self.boxWidth );
440 - zp_img.width = zp_img.width*ratio_x;
441 - pr_container.scrollLeft = (pr_container.scrollLeft + xMin)*ratio_x;
442 - pr_container.scrollTop = (pr_container.scrollTop + yMin)*ratio_x;
 454+ var ratio_x = Math.abs( pr_container.offsetWidth/self.boxWidth );
 455+ pr_set_margins( (margin_x - xMin)*ratio_x, (margin_y - yMin)*ratio_x, img_width*ratio_x ) ;
443456 }
444457 }
445458 }
446459 is_drag = false;
447460 pr_rect.style.cssText = "display:none";
448 - set_container_css(!is_zoom,!is_zoom);
 461+ set_container_css(!is_zoom);
449462 return false;
450463 }
451464
452465 function pr_grab(evt){
453 -
454466 evt = evt?evt:window.event?window.event:null; if(!evt){ return false;}
455467 get_xy(evt); if(xx>pr_container.offsetWidth-20 || yy>pr_container.offsetHeight-20) return false;
456468
——@@ -476,10 +488,14 @@
477489 lastyy=evt.clientY - ieoy;
478490 }
479491
480 - init_x = pr_container.scrollLeft + lastxx;
481 - init_y = pr_container.scrollTop + lastyy;
 492+ if(is_zoom){
 493+ init_x = - margin_x + lastxx;
 494+ init_y = - margin_y + lastyy;
 495+ } else {
 496+ init_x = pr_container.scrollLeft + lastxx;
 497+ init_y = pr_container.scrollTop + lastyy;
 498+ }
482499 is_drag = false;
483 - set_container_css(!is_zoom,!is_zoom);
484500 return false;
485501
486502 }
——@@ -494,15 +510,14 @@
495511 function pr_drag(evt) {
496512 evt = evt?evt:window.event?window.event:null; if(!evt){ return false;}
497513 get_xy(evt); if(xx>pr_container.offsetWidth-20 || yy>pr_container.offsetHeight-20) return false;
498 -
499514 if(!is_zoom) {
500515 pr_container.scrollLeft = (init_x-xx);
501516 pr_container.scrollTop = (init_y-yy);
502517 } else {
503 - self.xMin = Math.min( init_x - pr_container.scrollLeft, xx );
504 - self.yMin = Math.min( init_y - pr_container.scrollTop , yy );
505 - self.xMax = Math.max( init_x - pr_container.scrollLeft, xx );
506 - self.yMax = Math.max( init_y - pr_container.scrollTop , yy );
 518+ self.xMin = Math.min( init_x + margin_x, xx );
 519+ self.yMin = Math.min( init_y + margin_y, yy );
 520+ self.xMax = Math.max( init_x + margin_x, xx );
 521+ self.yMax = Math.max( init_y + margin_y, yy );
507522 self.boxWidth = Math.max( xMax-xMin, 1 );
508523 self.boxHeight = Math.max( yMax-yMin, 1 );
509524 if(boxWidth*boxWidth+boxHeight*boxHeight < 2500){
——@@ -511,10 +526,10 @@
512527 ratio = pr_container.offsetWidth/pr_container.offsetHeight;
513528 if(boxWidth/boxHeight < ratio ) {
514529 boxWidth = boxHeight*ratio;
515 - if(xx==xMin) xMin = init_x - pr_container.scrollLeft - boxWidth;
 530+ if(xx==xMin) xMin = init_x + margin_x - boxWidth;
516531 } else {
517532 boxHeight = boxWidth/ratio;
518 - if(yy==yMin) yMin = init_y - pr_container.scrollTop - boxHeight;
 533+ if(yy==yMin) yMin = init_y + margin_y - boxHeight;
519534 }
520535 pr_rect.style.cssText = "cursor:crosshair;opacity:0.5;position:absolute;left:"+ xMin +"px;top:"+ yMin +"px;width:"+boxWidth+"px;height:"+boxHeight+"px;background:#000000;";
521536 }
——@@ -526,40 +541,43 @@
527542 }
528543
529544
530 -function pr_zoom(delta){
 545+function pr_set_margins(mx, my, new_width) {
 546+ var zp_img = document.getElementById("ProofReadImage");
 547+ if(zp_img) {
 548+ margin_x = mx;
 549+ margin_y = my;
 550+ zp_img.style.margin = Math.round(margin_y) + 'px 0px 0px ' + Math.round(margin_x) + 'px';
 551+ if(new_width) {
 552+ img_width = Math.round(new_width);
 553+ zp_img.width = img_width;
 554+ }
 555+ pr_container.style.cssText = self.container_css; //needed by IE6
 556+ }
 557+}
531558
532 - var zp_img = document.getElementById("ProofReadImage");
533 - if(!zp_img) return;
 559+
 560+function pr_zoom(delta) {
534561
535562 if (delta == 0) {
536563 //reduce width by 20 pixels in order to prevent horizontal scrollbar from showing up
537 - zp_img.width = pr_container.offsetWidth-20;
538 - pr_container.style.cssText = self.container_css; //needed by IE6
539 - }
540 - else{
541 - var old_width = zp_img.width;
542 - var new_width = Math.round(zp_img.width*Math.pow(1.1,delta));
 564+ pr_set_margins(0, 0, pr_container.offsetWidth-20);
 565+ } else {
 566+ var old_margin_x = margin_x;
 567+ var old_margin_y = margin_y;
 568+ var old_width = img_width;
 569+ var new_width = Math.round(old_width*Math.pow(1.1,delta));
543570 var delta_w = new_width - old_width;
544571 if(delta_w==0) return;
545572 var s = (delta_w>0)?1:-1;
546 -
547 - var ptx = xx + pr_container.scrollLeft;
548 - var pty = yy + pr_container.scrollTop;
549 -
550573 for(var dw=s; dw != delta_w; dw=dw+s){
551 - zp_img.width = old_width + dw;//this adds 1 pixel
552 - pr_container.style.cssText = self.container_css; //needed by IE6
553 - if(xx){
554 - //magnification factor
555 - var lambda = (old_width+dw)/old_width;
556 - pr_container.scrollLeft = Math.round(lambda*ptx - xx);
557 - pr_container.scrollTop = Math.round(lambda*pty - yy);
558 - }
 574+ var lambda = (old_width + dw)/old_width;
 575+ pr_set_margins(xx - lambda*(xx - old_margin_x), yy - lambda*(yy - old_margin_y), old_width+dw);
559576 }
560577 }
561578 }
562579
563 -function pr_zoom_wheel(evt){
 580+function pr_zoom_wheel(evt) {
 581+
564582 evt = evt?evt:window.event?window.event:null; if(!evt){ return false;}
565583 var delta = 0;
566584 if (evt.wheelDelta) {
——@@ -687,10 +705,10 @@
688706 pr_container.style.cssText = "overflow:hidden;width:"+self.DisplayWidth+"px;";
689707 } else {
690708 //prevent the container from being resized once the image is downloaded.
691 - img_w = pr_horiz?0:parseInt(pr_width/2-70)-20;
 709+ img_width = pr_horiz?0:parseInt(pr_width/2-70)-20;
692710 pr_container.innerHTML = "<img id=\"ProofReadImage\" src=\""
693711 + escapeQuotesHTML(proofreadPageViewURL)
694 - + "\" width=\"" + img_w + "\" />";
 712+ + "\" width=\"" + img_width + "\" />";
695713 pr_container.onmousedown = pr_grab;
696714 pr_container.onmousemove = pr_move;
697715 if (pr_container.addEventListener)

Comments

#Comment by 😂 (talk | contribs)   21:29, 6 February 2011

This looks ok in terms of syntax, etc. I'm not familiar with ProofreadPage to say if it's correct.

Status & tagging log