home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2009 June / PersonalComputerWorld-June2009-CoverdiscCD.iso / Software / Freeware / Firebug 1.3.3 / firebug-1.3.3-fx.xpi / content / firebug / infotip.js < prev    next >
Encoding:
JavaScript  |  2009-02-19  |  7.7 KB  |  244 lines
  1. /* See license.txt for terms of usage */
  2.  
  3. FBL.ns(function() { with (FBL) {
  4.  
  5. // ************************************************************************************************
  6. // Constants
  7.  
  8. const maxWidth = 100, maxHeight = 80;
  9. const infoTipMargin = 10;
  10. const infoTipWindowPadding = 25;
  11.  
  12. // ************************************************************************************************
  13.  
  14. Firebug.InfoTip = extend(Firebug.Module,
  15. {
  16.     tags: domplate(
  17.     {
  18.         infoTipTag: DIV({class: "infoTip"}),
  19.  
  20.         colorTag:
  21.             DIV({style: "background: $rgbValue; width: 100px; height: 40px"}, " "),
  22.  
  23.         imgTag:
  24.             DIV({class: "infoTipImageBox infoTipLoading"},
  25.                 IMG({class: "infoTipImage", src: "$urlValue", repeat: "$repeat",
  26.                     onload: "$onLoadImage"}),
  27.                 IMG({class: "infoTipBgImage", collapsed: true, src: "blank.gif"}),
  28.                 DIV({class: "infoTipCaption"})
  29.             ),
  30.  
  31.         onLoadImage: function(event)
  32.         {
  33.             var img = event.currentTarget;
  34.             var bgImg = img.nextSibling;
  35.             if (!bgImg)
  36.                 return; // Sometimes gets called after element is dead
  37.  
  38.             var caption = bgImg.nextSibling;
  39.             var innerBox = img.parentNode;
  40.  
  41.             var w = img.naturalWidth, h = img.naturalHeight;
  42.             var repeat = img.getAttribute("repeat");
  43.  
  44.             if (repeat == "repeat-x" || (w == 1 && h > 1))
  45.             {
  46.                 collapse(img, true);
  47.                 collapse(bgImg, false);
  48.                 bgImg.style.background = "url(" + img.src + ") repeat-x";
  49.                 bgImg.style.width = maxWidth + "px";
  50.                 if (h > maxHeight)
  51.                     bgImg.style.height = maxHeight + "px";
  52.                 else
  53.                     bgImg.style.height = h + "px";
  54.             }
  55.             else if (repeat == "repeat-y" || (h == 1 && w > 1))
  56.             {
  57.                 collapse(img, true);
  58.                 collapse(bgImg, false);
  59.                 bgImg.style.background = "url(" + img.src + ") repeat-y";
  60.                 bgImg.style.height = maxHeight + "px";
  61.                 if (w > maxWidth)
  62.                     bgImg.style.width = maxWidth + "px";
  63.                 else
  64.                     bgImg.style.width = w + "px";
  65.             }
  66.             else if (repeat == "repeat" || (w == 1 && h == 1))
  67.             {
  68.                 collapse(img, true);
  69.                 collapse(bgImg, false);
  70.                 bgImg.style.background = "url(" + img.src + ") repeat";
  71.                 bgImg.style.width = maxWidth + "px";
  72.                 bgImg.style.height = maxHeight + "px";
  73.             }
  74.             else
  75.             {
  76.                 if (w > maxWidth || h > maxHeight)
  77.                 {
  78.                     if (w > h)
  79.                     {
  80.                         img.style.width = maxWidth + "px";
  81.                         img.style.height = Math.round((h / w) * maxWidth) + "px";
  82.                     }
  83.                     else
  84.                     {
  85.                         img.style.width = Math.round((w / h) * maxHeight) + "px";
  86.                         img.style.height = maxHeight + "px";
  87.                     }
  88.                 }
  89.             }
  90.  
  91.             caption.innerHTML = $STRF("Dimensions", [w, h]);
  92.  
  93.             removeClass(innerBox, "infoTipLoading");
  94.         }
  95.     }),
  96.  
  97.     initializeBrowser: function(browser)
  98.     {
  99.         browser.onInfoTipMouseOut = bind(this.onMouseOut, this, browser);
  100.         browser.onInfoTipMouseMove = bind(this.onMouseMove, this, browser);
  101.  
  102.         var doc = browser.contentDocument;
  103.         if (!doc)
  104.             return;
  105.  
  106.         doc.addEventListener("mouseover", browser.onInfoTipMouseMove, true);
  107.         doc.addEventListener("mouseout", browser.onInfoTipMouseOut, true);
  108.         doc.addEventListener("mousemove", browser.onInfoTipMouseMove, true);
  109.  
  110.         return browser.infoTip = this.tags.infoTipTag.append({}, getBody(doc));
  111.     },
  112.  
  113.     uninitializeBrowser: function(browser)
  114.     {
  115.         if (browser.infoTip)
  116.         {
  117.             var doc = browser.contentDocument;
  118.             doc.removeEventListener("mouseover", browser.onInfoTipMouseMove, true);
  119.             doc.removeEventListener("mouseout", browser.onInfoTipMouseOut, true);
  120.             doc.removeEventListener("mousemove", browser.onInfoTipMouseMove, true);
  121.  
  122.             browser.infoTip.parentNode.removeChild(browser.infoTip);
  123.             delete browser.infoTip;
  124.             delete browser.onInfoTipMouseMove;
  125.         }
  126.     },
  127.  
  128.     showInfoTip: function(infoTip, panel, target, x, y, rangeParent, rangeOffset)
  129.     {
  130.         if (!Firebug.showInfoTips)
  131.             return;
  132.  
  133.         var scrollParent = getOverflowParent(target);
  134.         var scrollX = x + (scrollParent ? scrollParent.scrollLeft : 0);
  135.  
  136.         if (panel.showInfoTip(infoTip, target, scrollX, y, rangeParent, rangeOffset))
  137.         {
  138.             var htmlElt = infoTip.ownerDocument.documentElement;
  139.             var panelWidth = htmlElt.clientWidth;
  140.             var panelHeight = htmlElt.clientHeight;
  141.  
  142.             if (x+infoTip.offsetWidth+infoTipMargin > panelWidth-infoTipWindowPadding)
  143.             {
  144.                 infoTip.style.left = "auto";
  145.                 infoTip.style.right = ((panelWidth-x)+infoTipMargin) + "px";
  146.             }
  147.             else
  148.             {
  149.                 infoTip.style.left = (x+infoTipMargin) + "px";
  150.                 infoTip.style.right = "auto";
  151.             }
  152.  
  153.             if (y+infoTip.offsetHeight+infoTipMargin > panelHeight)
  154.             {
  155.                 infoTip.style.top = "auto";
  156.                 infoTip.style.bottom = ((panelHeight-y)+infoTipMargin) + "px";
  157.             }
  158.             else
  159.             {
  160.                 infoTip.style.top = (y+infoTipMargin) + "px";
  161.                 infoTip.style.bottom = "auto";
  162.             }
  163.  
  164.             infoTip.setAttribute("active", "true");
  165.         }
  166.         else
  167.             this.hideInfoTip(infoTip);
  168.     },
  169.  
  170.     hideInfoTip: function(infoTip)
  171.     {
  172.         if (infoTip)
  173.             infoTip.removeAttribute("active");
  174.     },
  175.  
  176.     onMouseOut: function(event, browser)
  177.     {
  178.         if (!event.relatedTarget)
  179.             this.hideInfoTip(browser.infoTip);
  180.     },
  181.  
  182.     onMouseMove: function(event, browser)
  183.     {
  184.         if (browser.currentPanel)
  185.         {
  186.             var x = event.clientX, y = event.clientY;
  187.             this.showInfoTip(browser.infoTip, browser.currentPanel, event.target, x, y, event.rangeParent, event.rangeOffset);
  188.         }
  189.         else
  190.             this.hideInfoTip(browser.infoTip);
  191.     },
  192.  
  193.     // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  194.  
  195.     populateColorInfoTip: function(infoTip, color)
  196.     {
  197.         this.tags.colorTag.replace({rgbValue: color}, infoTip);
  198.         return true;
  199.     },
  200.  
  201.     populateImageInfoTip: function(infoTip, url, repeat)
  202.     {
  203.         if (!repeat)
  204.             repeat = "no-repeat";
  205.  
  206.         this.tags.imgTag.replace({urlValue: url, repeat: repeat}, infoTip);
  207.  
  208.         return true;
  209.     },
  210.  
  211.     // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  212.     // extends Module
  213.  
  214.     disable: function()
  215.     {
  216.         // XXXjoe For each browser, call uninitializeBrowser
  217.     },
  218.  
  219.     showPanel: function(browser, panel)
  220.     {
  221.         if (panel)
  222.         {
  223.             var infoTip = panel.panelBrowser.infoTip;
  224.             if (!infoTip)
  225.                 infoTip = this.initializeBrowser(panel.panelBrowser);
  226.             this.hideInfoTip(infoTip);
  227.         }
  228.  
  229.     },
  230.  
  231.     showSidePanel: function(browser, panel)
  232.     {
  233.         this.showPanel(browser, panel);
  234.     }
  235. });
  236.  
  237. // ************************************************************************************************
  238.  
  239. Firebug.registerModule(Firebug.InfoTip);
  240.  
  241. // ************************************************************************************************
  242.  
  243. }});
  244.