| Index: trunk/extensions/ProofreadPage/proofread.js |
| — | — | @@ -206,12 +206,10 @@ |
| 207 | 207 | |
| 208 | 208 | function pr_toggle_layout() { |
| 209 | 209 | |
| 210 | | - if ( self.pr_horiz ) { |
| 211 | | - pr_fill_table(false); |
| 212 | | - } else { |
| 213 | | - pr_fill_table(true); |
| 214 | | - } |
| | 210 | + self.pr_horiz = ! self.pr_horiz; |
| | 211 | + pr_fill_table(); |
| 215 | 212 | pr_reset_size(); |
| | 213 | + pr_zoom(0); |
| 216 | 214 | } |
| 217 | 215 | |
| 218 | 216 | |
| — | — | @@ -400,6 +398,10 @@ |
| 401 | 399 | var is_zoom = false; |
| 402 | 400 | var pr_container = false; |
| 403 | 401 | |
| | 402 | +/* size of the window */ |
| | 403 | +var pr_width = 0, pr_height = 0; |
| | 404 | + |
| | 405 | + |
| 404 | 406 | function pr_drop(evt){ |
| 405 | 407 | evt = evt?evt:window.event?window.event:null; if(!evt){ return false;} |
| 406 | 408 | get_xy(evt); if(xx>pr_container.offsetWidth-20 || yy>pr_container.offsetHeight-20) return false; |
| — | — | @@ -539,29 +541,16 @@ |
| 540 | 542 | |
| 541 | 543 | |
| 542 | 544 | |
| | 545 | +/* fill table with textbox and image */ |
| | 546 | +function pr_fill_table(){ |
| 543 | 547 | |
| 544 | | - |
| 545 | | - |
| 546 | | - |
| 547 | | -/*do not use a table in the horizontal case ?*/ |
| 548 | | -function pr_fill_table(horizontal_layout){ |
| 549 | | - |
| 550 | | - |
| 551 | | - //remove existing image_container and table |
| 552 | | - image_container = document.getElementById("pr_container"); |
| 553 | | - if(image_container) image_container.parentNode.removeChild(image_container); |
| | 548 | + //remove existing table |
| 554 | 549 | while(self.table.firstChild){ |
| 555 | 550 | self.table.removeChild(self.table.firstChild); |
| 556 | 551 | } |
| 557 | 552 | |
| 558 | | - if(!proofreadPageIsEdit) horizontal_layout=false; |
| 559 | | - |
| 560 | | - //create image container |
| 561 | | - var image_container = document.createElement("div"); |
| 562 | | - image_container.setAttribute("id", "pr_container"); |
| 563 | | - |
| 564 | 553 | //setup the layout |
| 565 | | - if(!horizontal_layout) { |
| | 554 | + if(!pr_horiz) { |
| 566 | 555 | //use a table only here |
| 567 | 556 | var t_table = document.createElement("table"); |
| 568 | 557 | var t_body = document.createElement("tbody"); |
| — | — | @@ -577,7 +566,7 @@ |
| 578 | 567 | t_row.appendChild(cell_right); |
| 579 | 568 | t_body.appendChild(t_row); |
| 580 | 569 | |
| 581 | | - cell_right.appendChild(image_container); |
| | 570 | + cell_right.appendChild(pr_container_parent); |
| 582 | 571 | cell_left.appendChild(self.text_container); |
| 583 | 572 | self.table.appendChild(t_table); |
| 584 | 573 | } |
| — | — | @@ -585,91 +574,98 @@ |
| 586 | 575 | self.table.appendChild(self.text_container); |
| 587 | 576 | form = document.getElementById("editform"); |
| 588 | 577 | tb = document.getElementById("toolbar"); |
| 589 | | - if(tb) tb.parentNode.insertBefore(image_container,tb); |
| 590 | | - else form.parentNode.insertBefore(image_container,form); |
| | 578 | + if(tb) tb.parentNode.insertBefore(pr_container_parent,tb); |
| | 579 | + else form.parentNode.insertBefore(pr_container_parent,form); |
| 591 | 580 | } |
| 592 | 581 | |
| 593 | | - self.pr_horiz = horizontal_layout; |
| | 582 | + if(proofreadPageIsEdit) { |
| | 583 | + if(!pr_horiz){ |
| | 584 | + self.DisplayHeight = Math.ceil(pr_height*0.85); |
| | 585 | + self.DisplayWidth = parseInt(pr_width/2-70); |
| | 586 | + img_w = self.DisplayWidth-20; |
| | 587 | + css_wh = "width:"+self.DisplayWidth+"px; height:"+self.DisplayHeight+"px;"; |
| | 588 | + } else { |
| | 589 | + self.DisplayHeight = Math.ceil(pr_height*0.4); |
| | 590 | + img_w = 0; //prevent the container from being resized when the image is downloaded. |
| | 591 | + css_wh = "width:100%; height:"+self.DisplayHeight+"px;"; |
| | 592 | + } |
| | 593 | + self.container_css = "cursor:default; background:#000000; overflow:auto; " + css_wh; |
| | 594 | + pr_container.style.cssText = self.container_css; |
| | 595 | + } |
| | 596 | + pr_zoom(0); |
| | 597 | +} |
| 594 | 598 | |
| | 599 | + |
| | 600 | + |
| | 601 | + |
| | 602 | + |
| | 603 | + |
| | 604 | + |
| | 605 | +function pr_setup() { |
| | 606 | + |
| | 607 | + self.pr_horiz = (self.proofreadpage_default_layout=='horizontal'); |
| | 608 | + if(!proofreadPageIsEdit) pr_horiz = false; |
| | 609 | + |
| | 610 | + self.table = document.createElement("div"); |
| | 611 | + self.text_container = document.createElement("div"); |
| | 612 | + |
| | 613 | + pr_container = document.createElement("div"); |
| | 614 | + pr_container.setAttribute("id", "pr_container"); |
| | 615 | + |
| | 616 | + self.pr_container_parent = document.createElement("div"); |
| | 617 | + pr_container_parent.appendChild(pr_container); |
| | 618 | + |
| 595 | 619 | //get the size of the window |
| 596 | | - var width = 0, height = 0; |
| 597 | 620 | if( typeof( window.innerWidth ) == 'number' ) { |
| 598 | 621 | //Non-IE |
| 599 | | - width = window.innerWidth; |
| 600 | | - height = window.innerHeight; |
| | 622 | + pr_width = window.innerWidth; |
| | 623 | + pr_height = window.innerHeight; |
| 601 | 624 | } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { |
| 602 | 625 | //IE 6+ in 'standards compliant mode' |
| 603 | | - width = document.documentElement.clientWidth; |
| 604 | | - height = document.documentElement.clientHeight; |
| | 626 | + pr_width = document.documentElement.clientWidth; |
| | 627 | + pr_height = document.documentElement.clientHeight; |
| 605 | 628 | } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { |
| 606 | 629 | //IE 4 compatible |
| 607 | | - width = document.body.clientWidth; |
| 608 | | - height = document.body.clientHeight; |
| | 630 | + pr_width = document.body.clientWidth; |
| | 631 | + pr_height = document.body.clientHeight; |
| 609 | 632 | } |
| 610 | 633 | |
| 611 | 634 | //fill the image container |
| 612 | 635 | if(!proofreadPageIsEdit) { |
| 613 | 636 | //this sets DisplayWidth and DisplayHeight |
| 614 | | - var thumb_url = pr_image_url(parseInt(width/2-70)); |
| | 637 | + var thumb_url = pr_image_url(parseInt(pr_width/2-70)); |
| 615 | 638 | var image = document.createElement("img"); |
| 616 | | - image_container.appendChild(image); |
| 617 | 639 | image.setAttribute("id", "ProofReadImage"); |
| 618 | 640 | image.setAttribute("src", thumb_url); |
| 619 | 641 | image.setAttribute("width", self.DisplayWidth); |
| 620 | 642 | image.style.cssText = "padding:0;margin:0;border:0;"; |
| 621 | | - image_container.style.cssText = "overflow:hidden;width:"+self.DisplayWidth+"px;"; |
| 622 | | - } |
| 623 | | - else{ |
| 624 | | - if(!horizontal_layout){ |
| 625 | | - self.DisplayHeight = Math.ceil(height*0.85); |
| 626 | | - self.DisplayWidth = parseInt(width/2-70); |
| | 643 | + pr_container.appendChild(image); |
| | 644 | + pr_container.style.cssText = "overflow:hidden;width:"+self.DisplayWidth+"px;"; |
| | 645 | + } else { |
| | 646 | + if(!pr_horiz){ |
| | 647 | + self.DisplayHeight = Math.ceil(pr_height*0.85); |
| | 648 | + self.DisplayWidth = parseInt(pr_width/2-70); |
| 627 | 649 | img_w = self.DisplayWidth-20; |
| 628 | | - css_wh = "width:"+self.DisplayWidth+"px; height:"+self.DisplayHeight+"px;"; |
| 629 | 650 | } |
| 630 | 651 | else{ |
| 631 | | - self.DisplayHeight = Math.ceil(height*0.4); |
| 632 | | - img_w = 0; //prevent the container from being resized when the image is downloaded. |
| 633 | | - css_wh = "width:100%; height:"+self.DisplayHeight+"px;"; |
| | 652 | + self.DisplayHeight = Math.ceil(pr_height*0.4); |
| | 653 | + img_w = 0; //prevent the container from being resized once the image is downloaded. |
| 634 | 654 | } |
| 635 | | - self.container_css = "cursor:default; background:#000000; overflow:auto; " + css_wh; |
| 636 | | - image_container.innerHTML = |
| 637 | | - "<img id=\"ProofReadImage\" src=\"" |
| 638 | | - + escapeQuotesHTML(proofreadPageViewURL) |
| 639 | | - + "\" width=\""+img_w+"\" />"; |
| 640 | | - |
| 641 | | - image_container.style.cssText = self.container_css; |
| 642 | 655 | |
| 643 | | - image_container.onmousedown = pr_grab; |
| 644 | | - image_container.onmousemove = pr_move; |
| 645 | | - |
| 646 | | - if (image_container.addEventListener) |
| 647 | | - image_container.addEventListener('DOMMouseScroll', pr_zoom_wheel, false); |
| 648 | | - |
| 649 | | - pr_container = image_container; |
| 650 | | - pr_zoom(0); |
| | 656 | + pr_container.innerHTML = "<img id=\"ProofReadImage\" src=\"" |
| | 657 | + + escapeQuotesHTML(proofreadPageViewURL) |
| | 658 | + + "\" width=\"" + img_w + "\" />"; |
| | 659 | + pr_container.onmousedown = pr_grab; |
| | 660 | + pr_container.onmousemove = pr_move; |
| | 661 | + if (pr_container.addEventListener) |
| | 662 | + pr_container.addEventListener('DOMMouseScroll', pr_zoom_wheel, false); |
| 651 | 663 | } |
| 652 | | -} |
| 653 | 664 | |
| 654 | | - |
| 655 | | - |
| 656 | | - |
| 657 | | - |
| 658 | | - |
| 659 | | - |
| 660 | | -function pr_setup() { |
| 661 | | - |
| 662 | | - self.table = document.createElement("div"); |
| 663 | | - self.text_container = document.createElement("div"); |
| 664 | | - self.image_container = document.createElement("div"); |
| 665 | 665 | table.setAttribute("id", "textBoxTable"); |
| 666 | 666 | table.style.cssText = "width:100%;"; |
| 667 | 667 | |
| 668 | | - //fill table |
| 669 | | - if(self.proofreadpage_default_layout=='horizontal') |
| 670 | | - pr_fill_table(true); |
| 671 | | - else |
| 672 | | - pr_fill_table(false); |
| 673 | | - |
| | 668 | + pr_fill_table(); |
| | 669 | + |
| 674 | 670 | //insert the image |
| 675 | 671 | if(proofreadPageIsEdit) { |
| 676 | 672 | var text = document.getElementById("wpTextbox1"); |
| — | — | @@ -699,74 +695,75 @@ |
| 700 | 696 | |
| 701 | 697 | var toolbar = document.getElementById("toolbar"); |
| 702 | 698 | |
| 703 | | - if(toolbar){ |
| 704 | | - var image = document.createElement("img"); |
| 705 | | - image.width = 23; |
| 706 | | - image.height = 22; |
| 707 | | - image.className = "mw-toolbar-editbutton"; |
| 708 | | - image.src = wgScriptPath+'/extensions/ProofreadPage/button_category_plus.png'; |
| 709 | | - image.border = 0; |
| 710 | | - image.alt = proofreadPageMessageToggleHeaders; |
| 711 | | - image.title = proofreadPageMessageToggleHeaders; |
| 712 | | - image.style.cursor = "pointer"; |
| 713 | | - image.onclick = pr_toggle_visibility; |
| 714 | | - toolbar.appendChild(image); |
| | 699 | + var image = document.createElement("img"); |
| | 700 | + image.width = 23; |
| | 701 | + image.height = 22; |
| | 702 | + image.className = "mw-toolbar-editbutton"; |
| | 703 | + image.src = wgScriptPath+'/extensions/ProofreadPage/button_category_plus.png'; |
| | 704 | + image.border = 0; |
| | 705 | + image.alt = proofreadPageMessageToggleHeaders; |
| | 706 | + image.title = proofreadPageMessageToggleHeaders; |
| | 707 | + image.style.cursor = "pointer"; |
| | 708 | + image.onclick = pr_toggle_visibility; |
| 715 | 709 | |
| 716 | | - var image3 = document.createElement("img"); |
| 717 | | - image3.width = 23; |
| 718 | | - image3.height = 22; |
| 719 | | - image3.border = 0; |
| 720 | | - image3.className = "mw-toolbar-proofread"; |
| 721 | | - image3.style.cursor = "pointer"; |
| 722 | | - image3.alt = "-"; |
| 723 | | - image3.title = "zoom out"; |
| 724 | | - image3.src = wgScriptPath+"/extensions/ProofreadPage/Button_zoom_out.png"; |
| 725 | | - image3.onclick = new Function("xx=0;yy=0;pr_zoom(-2);"); |
| 726 | | - toolbar.appendChild(image3); |
| | 710 | + var image3 = document.createElement("img"); |
| | 711 | + image3.width = 23; |
| | 712 | + image3.height = 22; |
| | 713 | + image3.border = 0; |
| | 714 | + image3.className = "mw-toolbar-proofread"; |
| | 715 | + image3.style.cursor = "pointer"; |
| | 716 | + image3.alt = "-"; |
| | 717 | + image3.title = "zoom out"; |
| | 718 | + image3.src = wgScriptPath+"/extensions/ProofreadPage/Button_zoom_out.png"; |
| | 719 | + image3.onclick = new Function("xx=0;yy=0;pr_zoom(-2);"); |
| 727 | 720 | |
| 728 | | - var image4 = document.createElement("img"); |
| 729 | | - image4.width = 23; |
| 730 | | - image4.height = 22; |
| 731 | | - image4.border = 0; |
| 732 | | - image4.className = "mw-toolbar-proofread"; |
| 733 | | - image4.style.cursor = "pointer"; |
| 734 | | - image4.alt = "-"; |
| 735 | | - image4.title = "reset zoom"; |
| 736 | | - image4.src = wgScriptPath+"/extensions/ProofreadPage/Button_examine.png"; |
| 737 | | - image4.onclick = new Function("pr_zoom(0);"); |
| 738 | | - toolbar.appendChild(image4); |
| | 721 | + var image4 = document.createElement("img"); |
| | 722 | + image4.width = 23; |
| | 723 | + image4.height = 22; |
| | 724 | + image4.border = 0; |
| | 725 | + image4.className = "mw-toolbar-proofread"; |
| | 726 | + image4.style.cursor = "pointer"; |
| | 727 | + image4.alt = "-"; |
| | 728 | + image4.title = "reset zoom"; |
| | 729 | + image4.src = wgScriptPath+"/extensions/ProofreadPage/Button_examine.png"; |
| | 730 | + image4.onclick = new Function("pr_zoom(0);"); |
| 739 | 731 | |
| 740 | | - var image2 = document.createElement("img"); |
| 741 | | - image2.width = 23; |
| 742 | | - image2.height = 22; |
| 743 | | - image2.border = 0; |
| 744 | | - image2.className = "mw-toolbar-proofread"; |
| 745 | | - image2.style.cursor = "pointer"; |
| 746 | | - image2.alt = "+"; |
| 747 | | - image2.title = "zoom in"; |
| 748 | | - image2.src = wgScriptPath+"/extensions/ProofreadPage/Button_zoom_in.png"; |
| 749 | | - image2.onclick = new Function("xx=0;yy=0;pr_zoom(2);"); |
| 750 | | - toolbar.appendChild(image2); |
| | 732 | + var image2 = document.createElement("img"); |
| | 733 | + image2.width = 23; |
| | 734 | + image2.height = 22; |
| | 735 | + image2.border = 0; |
| | 736 | + image2.className = "mw-toolbar-proofread"; |
| | 737 | + image2.style.cursor = "pointer"; |
| | 738 | + image2.alt = "+"; |
| | 739 | + image2.title = "zoom in"; |
| | 740 | + image2.src = wgScriptPath+"/extensions/ProofreadPage/Button_zoom_in.png"; |
| | 741 | + image2.onclick = new Function("xx=0;yy=0;pr_zoom(2);"); |
| 751 | 742 | |
| 752 | | - var image1 = document.createElement("img"); |
| 753 | | - image1.width = 23; |
| 754 | | - image1.height = 22; |
| 755 | | - image1.className = "mw-toolbar-editbutton"; |
| 756 | | - image1.src = wgScriptPath+'/extensions/ProofreadPage/Button_multicol.png'; |
| 757 | | - image1.border = 0; |
| 758 | | - image1.alt = " "; |
| 759 | | - image1.title = "vertical/horizontal layout"; |
| 760 | | - image1.style.cursor = "pointer"; |
| 761 | | - image1.onclick = pr_toggle_layout; |
| 762 | | - toolbar.appendChild(image1); |
| | 743 | + var image1 = document.createElement("img"); |
| | 744 | + image1.width = 23; |
| | 745 | + image1.height = 22; |
| | 746 | + image1.className = "mw-toolbar-editbutton"; |
| | 747 | + image1.src = wgScriptPath+'/extensions/ProofreadPage/Button_multicol.png'; |
| | 748 | + image1.border = 0; |
| | 749 | + image1.alt = " "; |
| | 750 | + image1.title = "vertical/horizontal layout"; |
| | 751 | + image1.style.cursor = "pointer"; |
| | 752 | + image1.onclick = pr_toggle_layout; |
| 763 | 753 | |
| 764 | | - } else { |
| | 754 | + if( (!toolbar) || (self.wgWikiEditorPreferences && self.wgWikiEditorPreferences["toolbar"] ) ) { |
| 765 | 755 | var mb = document.createElement("div"); |
| 766 | | - mb.style.cssText="background-color:#eeeeee;"; |
| 767 | | - mb.innerHTML = "<a href=\"javascript:pr_toggle_visibility();\">headers</a> - <a href=\"javascript:pr_toggle_layout();\">layout</a> - <a href=\"javascript:pr_zoom(0);\">zoom</a> : <a href=\"javascript:xx=0;yy=0;pr_zoom(2);\">+</a> / <a href=\"javascript:xx=0;yy=0;pr_zoom(-2);\">\u2013</a>"; |
| 768 | | - var p = table.parentNode; |
| | 756 | + mb.style.cssText="position:relative;"; |
| | 757 | + toolbar = document.createElement("div"); |
| | 758 | + toolbar.style.cssText="position:absolute;"; |
| | 759 | + mb.appendChild(toolbar); |
| | 760 | + var p = pr_container.parentNode; |
| 769 | 761 | p.insertBefore(mb,p.firstChild); |
| 770 | 762 | } |
| | 763 | + toolbar.appendChild(image); |
| | 764 | + toolbar.appendChild(image3); |
| | 765 | + toolbar.appendChild(image4); |
| | 766 | + toolbar.appendChild(image2); |
| | 767 | + toolbar.appendChild(image1); |
| 771 | 768 | } |
| 772 | 769 | } |
| 773 | 770 | |