Changeset 488261
- Timestamp:
- 01/11/2012 04:47:20 PM (14 years ago)
- File:
-
- 1 edited
-
glass/trunk/glass.js (modified) (55 diffs)
Legend:
- Unmodified
- Added
- Removed
-
glass/trunk/glass.js
r487836 r488261 1 // OffsetHeigth and Width include border and padding, fails here and there.2 3 function addSupMargins(obj)4 {5 6 // Add container margins.7 obj.supMarginX = 0;8 obj.supMarginY = 0;9 10 if (navigator.appName.toLowerCase() == "opera")11 return; // Opera does not need a correction.12 13 // Try to find the margins on all parent of the image.14 o = obj;15 do {16 o = o.parentNode; // Start by skipping the image.17 18 if (o.tagName.toLowerCase() == "div" // I don't know why only these.19 || o.tagName.toLowerCase() == "p" // I voodooed these. :-(20 || o.tagName.toLowerCase() == "body" ) {21 22 // Get the marginLeft, marginTop.23 //24 if (o.currentStyle) { // CSS style for IE & Opera25 mleft = o.currentStyle['margin-left'];26 mtop = o.currentStyle['margin-top'];27 }28 else if (window.getComputedStyle) { // CSS style for Firefox29 style = document.defaultView.getComputedStyle(o, null);30 mleft = style.getPropertyValue('margin-left');31 mtop = style.getPropertyValue('margin-top');32 }33 34 if (mleft != '0px' || mtop != '0px') {35 // Use dummyImg to convert the strings to pixel counts.36 with(document.body.glass.my.dummyImg) {37 style.width = mleft;38 style.height = mtop;39 obj.supMarginX += offsetWidth;40 obj.supMarginY += offsetHeight;41 // alert("Added for " + o.tagName + " " + width + "," + height);42 }43 }44 }45 } while (o && o.tagName.toLowerCase() != 'body');46 }47 48 49 1 ///////////////////////////////////////////////////////////////////////////// 50 2 // … … 100 52 101 53 // DEBUG 102 function dump(arr, level) 103 { 104 var dumped_text = ""; 105 if(!level) level = 0; 106 107 if (level > 3) return "TOO DEEP\n"; 108 109 // The padding given at the beginning of the line. 110 var level_padding = ""; 111 for(var j=0; j < level+1; j++) level_padding += " "; 112 113 if(typeof(arr) == 'object') { 114 for(var item in arr) { 115 var value = arr[item]; 116 if (value && value != '') 117 { 118 if(typeof(value) == 'object') { 119 dumped_text += level_padding + "'" + item + "' ...\n"; 120 dumped_text += dump(value,level+1); 121 } else { 122 dumped_text += level_padding + "'" + item 123 + "' => \"" + value + "\"\n"; 124 } 125 } 126 } 127 } else { //Stings/Chars/Numbers etc. 128 dumped_text = "===>"+arr+"<===("+typeof(arr)+")"; 129 } 130 return dumped_text; 131 } 132 133 // GlassShowLicence: Display the GPL (on dubble click). 54 //function dump(arr, level) 55 //{ 56 // var dumped_text = ''; 57 // if(!level) level = 0; 58 // 59 // if (level > 3) return 'TOO DEEP\n'; 60 // 61 // // The padding given at the beginning of the line. 62 // var level_padding = ''; 63 // for(var j=0; j < level+1; j++) level_padding += ' '; 64 // 65 // if(typeof(arr) == 'object') { 66 // for(var item in arr) { 67 // var value = arr[item]; 68 // if (value && value != '') 69 // { 70 // if(typeof(value) == 'object') { 71 // dumped_text += level_padding + "'" + item + "' ...\n"; 72 // dumped_text += dump(value,level+1); 73 // } else { 74 // dumped_text += level_padding + "'" + item 75 // + "' => \"" + value + "\"\n"; 76 // } 77 // } 78 // } 79 // } else { //Stings/Chars/Numbers etc. 80 // dumped_text = '===>'+arr+'<===('+typeof(arr)+')'; 81 // } 82 // return dumped_text; 83 //} 84 85 86 // GlassShowLicence: Display the GPL (on double click). 134 87 // 135 88 function glassShowLicence() 136 89 { 137 document.body.glass.style.display = "none"; // Switch off glass.90 document.body.glass.style.display = 'none'; // Switch off glass. 138 91 document.body.glass.inLimbo = 2; // Suppress single click. 139 92 alert ( … … 161 114 } 162 115 116 163 117 // GlassReallyClickThrough: To prevent a double click from also 164 118 // pushing a single click through, check the didDoubleClick variable … … 171 125 with (document.body.glass) { 172 126 if (1 == inLimbo) { // Only when one (1) click has been seen. 173 style.display = "none"; // Switch off glass.127 style.display = 'none'; // Switch off glass. 174 128 175 129 // Do the click, or if it defaults, follow the link, if there. … … 179 133 inLimbo = 0; // Back to normal. 180 134 }}} 135 181 136 182 137 // GlassClickThrough: forward the click to the underlying picture. … … 189 144 { 190 145 document.body.glass.inLimbo = 1; 191 setTimeout( "glassReallyClickThrough()", 500);146 setTimeout('glassReallyClickThrough()', 500); 192 147 return false; 193 148 } 194 149 195 150 196 // AddEventCursorXY: Add cursorX and Y to properties of object. 151 // GlassAddSupMargins: Add super margins (sum of all container margins). 152 // 153 // Some how browser (except for Opera) ignore margins of containers 154 // when calculating positions of objects. This function tries to sum 155 // the left and top margins that are "forgotten." Note I just noticed 156 // div, p and body where forgotten, however it might be everything 157 // with position:inline or something. Help me if you can, I am feeling 158 // down! 159 // 160 function glassAddSupMargins(obj) 161 { 162 var mleft; 163 var mtop; 164 var o = obj; 165 var computedStyle; 166 167 // Add container margins. 168 obj.supMarginX = 0; 169 obj.supMarginY = 0; 170 171 if (navigator.appName.toLowerCase() == 'opera') 172 return; // Opera does not need a correction. 173 174 // Try to find the margins on all parent of the image. 175 do { 176 o = o.parentNode; // Start by skipping the image. 177 178 if (o.tagName.toLowerCase() == 'div' // I don't know why only these. 179 || o.tagName.toLowerCase() == 'p' // I voodooed these. :-( 180 || o.tagName.toLowerCase() == 'body' ) { 181 182 // Get the marginLeft, marginTop. 183 // 184 if (o.currentStyle) { // CSS style for IE & Opera 185 mleft = o.currentStyle['marginLeft']; 186 mtop = o.currentStyle['marginTop']; 187 } 188 else if (window.getComputedStyle) { // CSS style for Firefox 189 computedStyle = document.defaultView.getComputedStyle(o, null); 190 mleft = computedStyle.marginLeft; 191 mtop = computedStyle.marginTop; 192 } 193 194 if (mleft && mtop && (mleft != '0px' || mtop != '0px')) { 195 // Use dummyImg to convert the strings to pixel counts. 196 with(document.body.glass.my) { 197 dummyImg.style.width = mleft; 198 dummyImg.style.height = mtop; 199 obj.supMarginX += dummyImg.offsetWidth; 200 obj.supMarginY += dummyImg.offsetHeight; 201 } 202 } 203 } 204 } while (o && o.tagName.toLowerCase() != 'body'); 205 } 206 207 208 // GlassAddEventCursorXY: Add cursorX and Y to properties of object. 197 209 // 198 210 // It's a bit complex, so thank you *again* Microsoft for … … 201 213 // .pageX/Y. 202 214 // 203 function addEventCursorXY(event, my)215 function glassAddEventCursorXY(event, my) 204 216 { 205 217 if (event && event.pageX) { … … 218 230 219 231 220 221 // AddAbsoluteXY: Add absoluteX and Y to properties of object. 232 // GlassAddAbsoluteXY: Add absoluteX and Y to properties of object. 222 233 // 223 234 // The absolute document position should be standard. It is not 224 235 // Hence this function. 225 236 // 226 function addAbsoluteXY(obj)237 function glassAddAbsoluteXY(obj) 227 238 { 228 239 o = obj; // Loop var. … … 240 251 // 28. This pushes the entire page down. However I can't find a way 241 252 // to get this offset out of the DOM, so I can compensate for it 242 // here. I *hate* these non orthogonal designs! 253 // here. I *hate* these non orthogonal designs! I've tried things 254 // like document.body.parentNode.style.marginTop, but to no 255 // avail. This is going to be a major pain in the ass for many 256 // coders. 243 257 // 244 258 // This is what is added to the HTML header for an top admin bar: 245 259 // 246 // <style type= "text/css">260 // <style type='text/css'> 247 261 // html { margin-top: 28px !important; } 248 262 // * html body { margin-top: 28px !important; } … … 250 264 // 251 265 // So now I am left with voodoo programming. If a wpadminbar div is 252 // present, magically add 28 to the cursor's Y position. Unless the 253 // navigator is Opera, in which case don't bother. Most any change 254 // to the admin bar will have to be mimicked here, probably even the 255 // version number of WordPress has to be taken into account. 256 // Assuming the adminbar will have the same height, we can use that, 257 // but there is no guarantee this is the same. Newer versions of 258 // browsers might even have a problem with this, they might start 259 // behaving like Opera. Somebody please find a smart trick to get 260 // the offset directly. I've tried things like 261 // document.body.parentNode.style.marginTop, but to no avail. This 262 // is going to be a major pain in the ass for many coders. They will 263 // loose many hours over this every year, for as long as there is no 264 // generic way to get this offset out of the DOM. 266 // present, magically add the admin bar's height to the cursor's Y 267 // position. Unless the navigator is Opera, in which case don't 268 // bother. Most any change to the admin bar will have to be mimicked 269 // here, like renaming the id of the admin bar. Assuming the 270 // adminbar will have the same height as the html top margin, we can 271 // use the bar's height, but there is no guarantee this is the 272 // same. Newer versions of browsers might even have a problem with 273 // this, they might start behaving like Opera. 265 274 // 266 var adminbar = document.getElementById("wpadminbar") 267 if (navigator.appName.toLowerCase() != "opera" && adminbar) 268 obj.absoluteY += adminbar.offsetHeight; 269 } 270 271 // ReplaceThinMediumThick: take a shot at replacing these implicit sizes. 272 // Note borders can be thin, medium and thick, width and height can 273 // not handle these like they can px, cm, pt etc. W3C says they are 274 // browser dependant, so we do a wild guess. We could do a table 275 // lookup in general 2,4,6 and 1,3,5 are popular values. 275 var adminbar = document.getElementById('wpadminbar') 276 if (navigator.appName.toLowerCase() != 'opera' && adminbar) 277 obj.absoluteY += adminbar.offsetHeight; 278 } 279 280 281 // GlassReplaceThinMediumThick: take a shot at replacing these 282 // implicit sizes. Note borders can be thin, medium and thick, width 283 // and height can not handle these like they can px, cm, pt etc. W3C 284 // says they are browser dependent, so we do a wild guess. We could 285 // do a table look up in general 2,4,6 and 1,3,5 are popular values. 276 286 // A quick test showed that a few popular browsers use this: 277 287 // … … 285 295 // IE (Win) 286 296 // 287 // Since this is with what I have installed now, let's just fiddle 288 // a bit. 289 // 290 function replaceThinMediumThick(s) 297 // Since this is with what I have installed now, let's just fiddle a 298 // bit. This could be done with setting a border and reading it's 299 // width in pixel, but I kind of feel using a 'medium' border is kind 300 // of asking for it. :-) 301 // 302 function glassReplaceThinMediumThick(s) 291 303 { 292 304 var r = null; … … 302 314 } 303 315 304 // AddBorderTRBL: Add borderTop/Right/Bottom/Left as object properties. 316 317 // GlassAddBorderTRBL: Add borderTop/Right/Bottom/Left as object properties. 305 318 // 306 319 // Border widths can be given in 'px', 'pt', 'em', 'cm', and … … 314 327 // This really aught to be a systems service. 315 328 // 316 function addBorderTRBL(obj)329 function glassAddBorderTRBL(obj) 317 330 { 318 331 borderLeft = borderRight = '0'; … … 343 356 // Translate thin, medium and thick (don't use them). 344 357 // 345 borderLeft = replaceThinMediumThick(borderLeft);346 borderTop = replaceThinMediumThick(borderTop);347 borderRight = replaceThinMediumThick(borderRight);348 borderBottom = replaceThinMediumThick(borderBottom);358 borderLeft = glassReplaceThinMediumThick(borderLeft); 359 borderTop = glassReplaceThinMediumThick(borderTop); 360 borderRight = glassReplaceThinMediumThick(borderRight); 361 borderBottom = glassReplaceThinMediumThick(borderBottom); 349 362 350 363 // Use dummyImg to convert the strings to pixel counts. … … 362 375 } 363 376 364 // AddPaddingTRBL: Add paddingTop/Right/Bottom/Left as object properties. 365 // 377 378 // GlassAddPaddingTRBL: Add paddingTop/Right/Bottom/Left as object properties. 366 379 // See comment function addBorderTRBL() above. 367 380 // 368 function addPaddingTRBL(obj)381 function glassAddPaddingTRBL(obj) 369 382 { 370 383 paddingLeft = paddingRight = '0'; … … 409 422 for (var i = 0; i < childNodes.length; i++) { 410 423 layer = childNodes[i]; 411 if (layer.tagName && "div"== layer.tagName.toLowerCase()) {424 if (layer.tagName && 'div' == layer.tagName.toLowerCase()) { 412 425 layer.style.backgroundImage = bgimg; 413 426 // Copy the width and height too, it might be scaled up … … 421 434 with (my.lowres.hires.preload) { 422 435 if (width != layer.style.backgroundImage.width) 423 layer.style.backgroundSize = width + "px " + height + "px" ; 424 } 425 } 426 } 427 } 428 } 429 } 436 layer.style.backgroundSize = width + 'px ' + height + 'px' ; 437 }}}}}} 430 438 431 439 … … 438 446 function glassRefresh() 439 447 { 448 var rescale; 440 449 with(document.body.glass) { 441 if (style.display != "none") {450 if (style.display != 'none') { 442 451 // Hide the glass if we ran out of the bounding box. 443 452 if (my.cursorX < my.bboxLeft || my.cursorX > my.bboxRight 444 453 || my.cursorY < my.bboxTop || my.cursorY > my.bboxBottom) { 445 454 // Switch it off. 446 style.display = "none";455 style.display = 'none'; 447 456 } 448 457 else { 449 458 // Move the glass by setting it's style left and top props. 450 style.left = Math.round(my.cursorX - my.radius) + "px";451 style.top = Math.round(my.cursorY - my.radius) + "px";452 453 // Display either a "Loading..."layer or the hires image.459 style.left = Math.round(my.cursorX - my.radius) + 'px'; 460 style.top = Math.round(my.cursorY - my.radius) + 'px'; 461 462 // Display either a 'Loading...' layer or the hires image. 454 463 if (my.lowres.hires.preload.complete) { 455 464 … … 463 472 if ('backgroundSize' in style) { 464 473 minEnlarge = (document.myrtheGlassMinEnlarge || 2.0); 465 maxEnlarge = (document.myrtheGlassMaxEnlarge || 20.0);474 maxEnlarge = (document.myrtheGlassMaxEnlarge || 100.0); 466 475 rescale = 0; 467 476 if (my.scaleX < minEnlarge) { 477 alert('scale up'); 468 478 rescale = minEnlarge; 469 479 } 470 480 else if (my.scaleX > maxEnlarge) { 481 alert('scale down from '+my.scaleX + ' to ' +maxEnlarge); 471 482 rescale = maxEnlarge; 472 483 } … … 474 485 my.scaleX = my.scaleY = rescale; 475 486 my.lowres.hires.preload.style.width = 476 (my.scaleX * my.lowres.trueWidth) + "px";487 (my.scaleX * my.lowres.trueWidth) + 'px'; 477 488 my.lowres.hires.preload.style.height = 478 (my.scaleY * my.lowres.trueHeight) + "px";489 (my.scaleY * my.lowres.trueHeight) + 'px'; 479 490 } 480 491 } … … 483 494 my.messageLoading.style.display = 'none'; 484 495 // Set the background images. 485 glassSetBackground( "url(" + my.lowres.hires.URL + ")");496 glassSetBackground('url(' + my.lowres.hires.URL + ')'); 486 497 } 487 498 … … 493 504 for (var i = 0; i < childNodes.length; i++) { 494 505 layer = childNodes[i]; 495 if (layer.tagName && "div"== layer.tagName.toLowerCase()) {506 if (layer.tagName && 'div' == layer.tagName.toLowerCase()) { 496 507 layer.style.backgroundPosition = 497 508 -Math.round(centerX - layer.my.sizeX/2) + 'px ' … … 506 517 // \_/ 507 518 508 // SetLayerStyle: Set the style elements of a layer <img>. 509 // 510 function setLayerStyle1(glass, layer) 519 520 // GlassSetLayerStyle: Set the style elements of a layer <img>. 521 // 522 function glassSetLayerStyle1(glass, layer) 511 523 { 512 524 with(layer) { … … 529 541 } 530 542 531 // SetLayerStyle: Set the style elements of a layer <img>. 532 // 533 function setLayerStyle2(glass, layer) 543 544 // GlassSetLayerStyle: Set the style elements of a layer <img>. 545 // 546 function glassSetLayerStyle2(glass, layer) 534 547 { 535 548 with(layer) { 536 style.width = my.sizeX + "px"; 537 style.height = my.sizeY + "px"; 538 style.marginLeft = glass.my.radius - my.sizeX/2 + "px"; 539 style.marginTop = glass.my.radius - my.sizeY/2 + "px"; 540 } 541 } 542 543 // CreateDummyImage: Create an non-visible image to abuse. 549 style.width = my.sizeX + 'px'; 550 style.height = my.sizeY + 'px'; 551 style.marginLeft = glass.my.radius - my.sizeX/2 + 'px'; 552 style.marginTop = glass.my.radius - my.sizeY/2 + 'px'; 553 } 554 } 555 556 557 // GlassCreateDummyImage: Create an non-visible image to abuse. 544 558 // 545 559 // These dummy images are placed at -1000,-1000 and are non-visible. … … 547 561 // convert img.style.width strings to img.width pixel numbers. 548 562 // 549 function createDummyImage(URL)550 { 551 var dummyImg = document.createElement( "img");563 function glassCreateDummyImage(URL) 564 { 565 var dummyImg = document.createElement('img'); 552 566 with(dummyImg) { 553 567 src = URL; … … 566 580 } 567 581 582 568 583 // GlassMove: Update the cursor of the glass. 569 584 // … … 571 586 { 572 587 with(document.body.glass) { 573 if (style.display != "none") {574 addEventCursorXY(event, my);588 if (style.display != 'none') { 589 glassAddEventCursorXY(event, my); 575 590 glassRefresh(); 576 591 }}} 577 592 578 // Resize glass based on the pinch in the range of 0-9. 593 594 // GlassTouchSetSize: Resize glass based on the pinch in the range of 0-9. 579 595 // 580 596 function glassTouchSetSize(event) … … 595 611 } 596 612 597 // iOS/Safari version of glassMove. 613 614 // GlassTouchMove: iOS/Safari version of glassMove. 598 615 // Make the center of the first two fingers the center. 599 616 // … … 602 619 if (event.touches.length >= 2) { 603 620 with(document.body.glass) { 604 if (style.display != "none") {621 if (style.display != 'none') { 605 622 event.preventDefault(); 606 623 glassTouchSetSize(event); … … 608 625 myevent.pageX = (event.touches[0].pageX + event.touches[1].pageX) / 2; 609 626 myevent.pageY = (event.touches[0].pageY + event.touches[1].pageY) / 2; 610 addEventCursorXY(myevent, my);627 glassAddEventCursorXY(myevent, my); 611 628 glassRefresh(); 612 629 }}}} 630 613 631 614 632 // GlassStart: Setup the glass for hovering over the lowres image. … … 621 639 with(document.body.glass) { 622 640 if (0 == inLimbo) { 623 addEventCursorXY(event, my);641 glassAddEventCursorXY(event, my); 624 642 my.lowres = that; // Use this lowres image. 625 643 626 644 // Set some attributes the system should have. 627 645 // Assume the lowres image is not moving. 628 addAbsoluteXY(my.lowres);629 addBorderTRBL(my.lowres);630 addPaddingTRBL(my.lowres);646 glassAddAbsoluteXY(my.lowres); 647 glassAddBorderTRBL(my.lowres); 648 glassAddPaddingTRBL(my.lowres); 631 649 632 650 // Calculate the imageX and Y offset in the box. … … 642 660 my.bboxLeft = absoluteX; 643 661 my.bboxTop = absoluteY; 644 my.bboxRight = imageX + clientWidth; //clientWidth + borderRight + paddingRight;645 my.bboxBottom = imageY + clientHeight; //clientHeight + borderBottom + paddingBottom;662 my.bboxRight = imageX + clientWidth; 663 my.bboxBottom = imageY + clientHeight; 646 664 647 665 my.lowres.trueWidth = clientWidth - paddingLeft - paddingRight; 648 666 my.lowres.trueHeight = clientHeight - paddingTop - paddingBottom; 649 667 650 668 } 651 669 // Flag refresh to calculate the scale, wipe the background. 652 670 my.scaleX = 0; … … 699 717 ]; 700 718 719 720 // GlassMouseStart: kickoff function to start on an image (this). 721 // 701 722 function glassMouseStart(event) 702 723 { … … 704 725 } 705 726 706 // iOS/Safari version of glassStart. 727 728 // GlassTouchStart: iOS/Safari version of glassStart. 707 729 // 708 730 function glassTouchStart(event) … … 729 751 } 730 752 731 // If the number of fingers falls below 2, kill the glass. 753 754 // GlassTouchEnd: If the number of fingers falls below 2, kill the glass. 732 755 // 733 756 function glassTouchEnd(event) 734 757 { 735 758 if (event.touches.length < 2) 736 document.body.glass.style.display = "none"; 737 } 759 document.body.glass.style.display = 'none'; 760 } 761 738 762 739 763 // CreateGlass: Create a glass <div> with ten layer <div>s an border 740 764 // <img> and a text <p> inside. 741 765 // 742 function glassSetup( parent)766 function glassSetup() 743 767 { 744 768 var i; 745 769 // Create the glass as a div object. 746 glass = document.body.glass = document.createElement( "div");770 glass = document.body.glass = document.createElement('div'); 747 771 document.body.glass.my = new Object(); 748 772 document.body.glass.my.parent = parent; … … 852 876 if (glass.childNodes[i].tagName) { 853 877 layer = glass.childNodes[i]; 854 if ( "div"== layer.tagName.toLowerCase()) {878 if ('div' == layer.tagName.toLowerCase()) { 855 879 layer.my = new Object(); 856 880 layer.my.sizeX = 0; 857 881 layer.my.sizeY = 0; 858 setLayerStyle1(glass, layer);882 glassSetLayerStyle1(glass, layer); 859 883 } 860 else if ( "p"== layer.tagName.toLowerCase()) {884 else if ('p' == layer.tagName.toLowerCase()) { 861 885 glass.my.messageLoading = layer; 862 886 layer.style.font = '15px/15px sans-serif'; // Dodge Warning. … … 869 893 // string parameters to pixel values. 870 894 path = (document.myrtheGlassImgURL || ''); 871 glass.my.dummyImg = createDummyImage(path + 'rim/rim4_000.png');872 873 // Add the glass to the document . Voodoo: parentNode why???895 glass.my.dummyImg = glassCreateDummyImage(path + 'rim/rim4_000.png'); 896 897 // Add the glass to the document, at the level of body. 874 898 document.body.parentNode.appendChild(glass); 875 899 … … 906 930 907 931 // Only when the glass is displayed. 908 if (glass.style.display != "none") {932 if (glass.style.display != 'none') { 909 933 e = (event || window.event); 910 934 key = (e.keyCode || e.which); … … 927 951 928 952 // Only when the glass is displayed. 929 if (document.body.glass.style.display != "none") {953 if (document.body.glass.style.display != 'none') { 930 954 e = (event || window.event); 931 955 key = (e.keyCode || e.which); … … 959 983 } 960 984 961 // CreateGlass: Create a glass <div> with ten layer <div>s an border 962 // <img> and a text <p> inside. 985 986 // GlassResize: Resize the glass. 987 // The magnifying glass consists of many layers so a resize is 988 // a little work. 963 989 // 964 990 function glassResize(size) … … 980 1006 981 1007 // Set the style elements. 982 style.width = my.radius * 2 + "px";983 style.height = my.radius * 2 + "px";1008 style.width = my.radius * 2 + 'px'; 1009 style.height = my.radius * 2 + 'px'; 984 1010 } 985 1011 … … 988 1014 for (i = 0; i < glass.childNodes.length; i++) { 989 1015 layer = glass.childNodes[i]; 990 if (layer.tagName && "div"== layer.tagName.toLowerCase()) {1016 if (layer.tagName && 'div' == layer.tagName.toLowerCase()) { 991 1017 layer.my.sizeX = glass.my.layerSizes[j][0]; 992 1018 layer.my.sizeY = glass.my.layerSizes[j++][1]; 993 layer.style.width = layer.my.sizeX + "px"; // DUMMY994 layer.style.height = layer.my.sizeY + "px"; // DUMMY995 layer.style.marginLeft = glass.my.radius - layer.my.sizeX/2 + "px";996 layer.style.marginTop = glass.my.radius - layer.my.sizeY/2 + "px";1019 layer.style.width = layer.my.sizeX + 'px'; // DUMMY 1020 layer.style.height = layer.my.sizeY + 'px'; // DUMMY 1021 layer.style.marginLeft = glass.my.radius - layer.my.sizeX/2 + 'px'; 1022 layer.style.marginTop = glass.my.radius - layer.my.sizeY/2 + 'px'; 997 1023 } 998 1024 } 999 1025 1000 1026 if (gGlassRimPath != '') { 1001 with(document.getElementById( "spy")) {1027 with(document.getElementById('spy')) { 1002 1028 style.width = (glass.my.radius * 2 + 4) + 'px'; 1003 1029 style.height = (glass.my.radius * 2 + 4) + 'px'; … … 1009 1035 // Changing the size first to prevents ugly blinking. 1010 1036 for (i = 0; i < 4; i++) { 1011 with(document.getElementById( "rim"+i)) {1037 with(document.getElementById('rim'+i)) { 1012 1038 style.width = (glass.my.radius * 2 + 4) + 'px'; 1013 1039 style.height = (glass.my.radius * 2 + 4) + 'px'; … … 1016 1042 // Now change the sources, which changes the size too, but too late. 1017 1043 for (i = 0; i < 4; i++) { 1018 with(document.getElementById( "rim"+i)) {1044 with(document.getElementById('rim'+i)) { 1019 1045 src = src.replace(/rim[0-9]*_/, 'rim' + glass.my.rimSize + '_'); 1020 1046 } … … 1027 1053 } 1028 1054 1029 // GlassCreate: add all the glass components to the document. 1030 // The components are ten layers with the hires image, a black opaque rim and 1031 // three colored semi opaque rims. 1032 // 1033 function glassCreate(size) 1034 { 1035 } 1036 1037 // MyDoClick: Not all browsers have a click() function. This 1055 1056 // GlassDoClick: Not all browsers have a click() function. This 1038 1057 // simulates that on most browsers that lack it. 1039 1058 // 1040 function myDoClick()1059 function glassDoClick() 1041 1060 { 1042 1061 var evt = this.ownerDocument.createEvent('MouseEvents'); … … 1045 1064 return this.dispatchEvent(evt); 1046 1065 } 1066 1067 1068 // GlassInsertGlass: Add the glass to the HTML 1069 // 1070 function glassInsertGlass() 1071 { 1072 // Set the path to the rim images. 1073 gGlassRimPath = (document.myrtheGlassRimPath || ''); 1074 1075 // Create the glass a resize is needed to complete the setup. 1076 glassSetup(); 1077 glassResize(document.myrtheGlassDefaultSize || 5); 1078 1079 // If a user selectable color is used, set it. 1080 if (gGlassRimPath == '') { 1081 glassSetRGB(document.myrtheGlassRimRGB || 'FF3300'); 1082 } 1083 } 1084 1085 1086 // GlassActivateImage: make the image react to a touchstart or mouseover 1087 // and start loading the hires image. 1088 // 1089 function glassActivateImage(img) 1090 { 1091 img.hires.preload = glassCreateDummyImage(img.hires.URL); // Preload. 1092 img.hires.preload.onload = glassRefresh; // Hide 'Loading.' layer. 1093 1094 if ('ontouchstart' in img) 1095 img.ontouchstart = glassTouchStart; // iOS/Safari hook. 1096 else 1097 img.onmouseover = glassMouseStart; // Turn on the glass. 1098 1099 if (!document.body.glass) glassInsertGlass(); 1100 1101 glassAddSupMargins(img); 1102 } 1103 1047 1104 1048 1105 // glassInit: Setup the images to be active. … … 1057 1114 // 1058 1115 // Note that in FireFox 3.6.10 things go really funky if one makes the 1059 // mistake of using "border:none"in the style of an <img>. All other1116 // mistake of using 'border:none' in the style of an <img>. All other 1060 1117 // browsers I tested this on do it right. So to fix this the 1061 1118 // border-width is set to zero pixels if the border-style is none. … … 1063 1120 // none, so this probably won't break anything. 1064 1121 // 1065 1066 1067 1068 1069 function insertGlass(parent)1070 {1071 // Set the path to the rim images.1072 gGlassRimPath = (document.myrtheGlassRimPath || '');1073 1074 // Create the glass a resize is needed to complete the setup.1075 glassSetup(parent || document.body);1076 glassResize(document.myrtheGlassDefaultSize || 5);1077 1078 // If a user selectable color is used, set it.1079 if (gGlassRimPath == '') {1080 glassSetRGB(document.myrtheGlassRimRGB || 'FF3300');1081 }1082 }1083 1084 1085 1086 // ActivateImage: make the image react to a touchstart or mouseover1087 // and start loading the hires image.1088 //1089 function activateImage(img)1090 {1091 img.hires.preload = createDummyImage(img.hires.URL); // Preload.1092 img.hires.preload.onload = glassRefresh; // Hide "Loading." layer.1093 1094 if ('ontouchstart' in img)1095 img.ontouchstart = glassTouchStart; // iOS/Safari hook.1096 else1097 img.onmouseover = glassMouseStart; // Turn on the glass.1098 1099 // cc = 0;1100 if (!document.body.glass) {1101 // parent = img;1102 // while(parent.tagName.toLowerCase() !='body') {1103 // parent = parent.parentNode;1104 // cc += 1;1105 // }1106 // parent = document.body;1107 insertGlass();1108 }1109 1110 addSupMargins(img);1111 1112 // alert('Container Margins: ' + img.supMarginX + ',' + img.supMarginY);1113 1114 }1115 1116 1117 1122 function glassInit() 1118 1123 { … … 1121 1126 var reSuf = /(\.jpg|\.png)$/i; 1122 1127 var img; 1123 1124 for (var i = 0; i < document.images.length; i += 1) { 1125 img = document.images[i]; 1128 var a_img = document.getElementsByTagName('img'); 1129 var l = a_img.length; 1130 1131 for (i = 0; i < l; i += 1) { 1132 img = a_img[i]; 1126 1133 if (img.style.borderStyle == '') { 1127 1134 img.style.borderWidth = '0px'; // Force more similar behaviour. 1128 1135 } 1129 if (img.style.borderStyle.toLowerCase() == "none") {1130 img.style.borderWidth = '0px'; // Firefox "border:none"fix.1136 if (img.style.borderStyle.toLowerCase() == 'none') { 1137 img.style.borderWidth = '0px'; // Firefox 'border:none' fix. 1131 1138 } 1132 1139 if (img.parentNode.tagName && img.parentNode.tagName.toLowerCase() =='a') { … … 1135 1142 img.hires = new Object(); 1136 1143 img.hires.URL = img.parentNode.href; 1137 activateImage(img);1144 glassActivateImage(img); 1138 1145 } 1139 1146 else if (document.myrtheGlassDx && document.myrtheGlassDy) { … … 1160 1167 img.hires.URL = am[1] + '-'+dx+'x'+dy + am[3]; 1161 1168 } 1162 activateImage(img);1169 glassActivateImage(img); 1163 1170 1164 1171 // Since an image can be either dx,dy or dy,dx sized, … … 1168 1175 // preload URL in to the preload object. 1169 1176 // 1170 img.hires.alt = createDummyImage(am[1] + '-'+dy+'x'+dx + am[3]);1177 img.hires.alt = glassCreateDummyImage(am[1] + '-'+dy+'x'+dx + am[3]); 1171 1178 img.hires.alt.parent = img.hires; 1172 1179 img.hires.alt.onload = … … 1178 1185 } 1179 1186 } 1180 if (!img.click) img.click = myDoClick;1187 if (!img.click) img.click = glassDoClick; 1181 1188 } 1182 1189 … … 1192 1199 if (gGlassRimPath != '') { // Preload all the rim images. 1193 1200 for (var s in gGlassRimSizeArray) 1194 createDummyImage(gGlassRimPath + 'spy' + gGlassRimSizeArray[s] + '.png'); 1201 glassCreateDummyImage(gGlassRimPath + 'spy' + gGlassRimSizeArray[s] 1202 + '.png'); 1195 1203 } 1196 1204 else { // Preload all the rims. … … 1200 1208 var s,r,g,b; 1201 1209 for (s in gGlassRimSizeArray) for (r in OF) for (g in OF) for (b in OF) 1202 createDummyImage(path+'rim/rim'+S[s]+'_'+OF[r]+OF[g]+OF[b]+'.png'); 1203 } 1204 } 1205 1206 // Get the minimum *positive* value from a set of three. 1207 // eg. minpos(3,0,1) returns 1, and minpos(0,0,0) returns 0. 1208 // 1209 function minpos(A,B,C) 1210 { 1211 var minpos = A+B+C; 1212 if (A && A < minpos) minpos = A; 1213 if (B && B < minpos) minpos = B; 1214 if (C && C < minpos) minpos = C; 1215 return minpos; 1216 } 1217 1218 // RGB stuff 1210 glassCreateDummyImage(path+'rim/rim'+S[s]+'_'+OF[r]+OF[g]+OF[b]+'.png'); 1211 } 1212 } 1213 1214 1215 1216 // GlassSetRGB: change the three rim's and set their opacity such that 1217 // a rim of the requested RGB color appears. 1219 1218 // 1220 1219 function glassSetRGB(glassRimRGB) 1221 1220 { 1222 path = (document.myrtheGlassImgURL || ''); 1223 glass = document.body.glass; 1224 re = /^([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i; 1225 aRGB = re.exec(glassRimRGB); 1221 // Get the minimum *positive* value from a set of three. 1222 // eg. minpos(3,0,1) returns 1, and minpos(0,0,0) returns 0. 1223 // 1224 function minpos(A,B,C) 1225 { 1226 var minpos = A+B+C; 1227 if (A && A < minpos) minpos = A; 1228 if (B && B < minpos) minpos = B; 1229 if (C && C < minpos) minpos = C; 1230 return minpos; 1231 } 1232 1233 var src; 1234 var path = (document.myrtheGlassImgURL || ''); 1235 var glass = document.body.glass; 1236 var re = /^([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i; 1237 var aRGB = re.exec(glassRimRGB); 1226 1238 1227 R = aRGB[1] != '' ? parseInt("0x"+aRGB[1]) : 0;1228 G = aRGB[2] != '' ? parseInt("0x"+aRGB[2]) : 0;1229 B = aRGB[3] != '' ? parseInt("0x"+aRGB[3]) : 0;1239 var R = aRGB[1] != '' ? parseInt('0x'+aRGB[1]) : 0; 1240 var G = aRGB[2] != '' ? parseInt('0x'+aRGB[2]) : 0; 1241 var B = aRGB[3] != '' ? parseInt('0x'+aRGB[3]) : 0; 1230 1242 1231 L1 = (R ? 'F':'0') + (G ? 'F':'0') + (B ? 'F':'0');1232 a = minpos(R,G,B); R -= R ? a:0; G -= G ? a:0; B -= B ? a:0;1233 L2 = (R ? 'F':'0') + (G ? 'F':'0') + (B ? 'F':'0');1234 b = minpos(R,G,B); R -= R ? b:0; G -= G ? b:0; B -= B ? b:0;1235 L3 = (R ? 'F':'0') + (G ? 'F':'0') + (B ? 'F':'0');1236 c = minpos(R,G,B);1243 var L1 = (R ? 'F':'0') + (G ? 'F':'0') + (B ? 'F':'0'); 1244 var a = minpos(R,G,B); R -= R ? a:0; G -= G ? a:0; B -= B ? a:0; 1245 var L2 = (R ? 'F':'0') + (G ? 'F':'0') + (B ? 'F':'0'); 1246 var b = minpos(R,G,B); R -= R ? b:0; G -= G ? b:0; B -= B ? b:0; 1247 var L3 = (R ? 'F':'0') + (G ? 'F':'0') + (B ? 'F':'0'); 1248 var c = minpos(R,G,B); 1237 1249 1238 1250 // Scale and take cascading into effect.
Note: See TracChangeset
for help on using the changeset viewer.