JAVASCRIPT   4

box.js

Guest on 21st August 2021 09:20:21 AM

  1. /*
  2.  This is a subclass of balloon.js -- uses a simple box rather than a
  3.  a balloon/bubble image.  It can have a background image and a styled
  4.  bgcolor and border but is otherwise meant to be simple and lightweight.
  5. */
  6.  
  7. //////////////////////////////////////////////////////////////////////////
  8. // This is constructor that is called to initialize the Balloon object  //
  9. //////////////////////////////////////////////////////////////////////////
  10. var Box = function () {
  11.   // Track the cursor every time the mouse moves
  12.   document.onmousemove = this.setActiveCoordinates;
  13.  
  14.   // scrolling aborts unsticky box
  15.   document.onscroll    = Balloon.prototype.hideTooltip;
  16.  
  17.   // go away if the page is unloading or waiting
  18.   // to unload.
  19.   window.onbeforeunload = function(){
  20.     Balloon.prototype.nukeTooltip;
  21.     balloonIsSuppressed = true;
  22.   };
  23.  
  24.   // for IE, the box can't start until the page is finished loading
  25.   // set a flag that will get toggled when loading is finished
  26.   if (this.isIE()) {
  27.     this.suppress = true;
  28.   }
  29.  
  30.   return this;
  31. }
  32.  
  33. // Inherit from Balloon class
  34. Box.prototype = new Balloon();
  35.  
  36.  
  37. // Make the box element -- this overrides the parent method
  38. Box.prototype.makeBalloon = function() {
  39.   var self = currentBalloonClass;
  40.  
  41.   // use ID 'visibleBalloonElement' for consistency with parent class
  42.   var box = document.getElementById('visibleBalloonElement');
  43.   if (box) self.parent.removeChild(box);
  44.   box = document.createElement('div');
  45.   box.setAttribute('id','visibleBalloonElement');
  46.   self.parent.appendChild(box);
  47.   self.activeBalloon = box;
  48.  
  49.   var contents = document.createElement('div');
  50.   contents.setAttribute('id','contents');
  51.   box.appendChild(contents);
  52.   self.contents = contents;
  53.   self.parts = new Array(box);
  54.  
  55.   self.setStyle(contents,'z-index',2);
  56.   self.setStyle(contents,'color',self.fontColor);
  57.   self.setStyle(contents,'font-family',self.fontFamily);
  58.   self.setStyle(contents,'font-size',self.fontSize);
  59.  
  60.   if (balloonIsSticky) {
  61.     self.setStyle(contents,'margin-right',10);
  62.   }
  63.   else if (self.displayTime)  {
  64.     self.timeoutAutoClose = window.setTimeout(this.hideTooltip,self.displayTime);
  65.   }
  66.  
  67.   return box;
  68. }
  69.  
  70. // Set the box style -- overrides the parent method
  71. Box.prototype.setBalloonStyle = function(vOrient,hOrient) {
  72.   var self = currentBalloonClass;
  73.   var box  = self.activeBalloon;
  74.  
  75.   self.shadow     = 0;
  76.   self.stem       = false;
  77.   self.stemHeight = 0;
  78.  
  79.   self.setStyle(box,'background',self.bgColor);
  80.   self.setStyle(box,'border',self.borderStyle);
  81.   self.setStyle(box,'position','absolute');
  82.   self.setStyle(box,'padding',self.padding);
  83.   self.setStyle(box,'top',-9999);
  84.   self.setStyle(box,'z-index',1000000);
  85.  
  86.   // If width and/or height are specified, harden the
  87.   // box at those dimensions, but not if the space needed
  88.   // is less tha the space that would be used.
  89.   if (self.width) {
  90.     var widthUsed = self.getLoc('contents','width') + 20;
  91.     var newWidth = widthUsed > self.width ? self.width : widthUsed;
  92.     self.setStyle('contents','width',newWidth);
  93.   }
  94.   if (self.height) {
  95.     var heightUsed = self.getLoc('contents','height') + 20;
  96.     var newHeight = heightUsed > self.height ? self.height : heightUsed;
  97.     self.setStyle('contents','height',newHeight+(2*self.padding));
  98.   }
  99.  
  100.   // flip left or right, as required
  101.   if (hOrient == 'left') {
  102.     var pageWidth = self.pageRight - self.pageLeft;
  103.     var activeRight = pageWidth - self.activeLeft;
  104.     self.setStyle(box,'right',activeRight);
  105.   }
  106.   else {
  107.     self.setStyle(box,'left',self.activeRight - self.xOffset);
  108.   }
  109.  
  110.   if (!self.width) {
  111.     var width = self.getLoc('contents','width');
  112.     if (self.isIE()) width += self.padding;
  113.     if (width > self.maxWidth) width = self.maxWidth + self.padding;
  114.     if (width < self.minWidth) width = self.minWidth;
  115.     self.setStyle(box,'width',width);
  116.   }
  117.  
  118.   var overflow = balloonIsSticky ? 'auto' : 'hidden';
  119.   self.setStyle('contents','overflow',overflow);
  120.  
  121.   // Make sure the box is not offscreen horizontally.
  122.   // We handle vertical sanity checking later, after the final
  123.   // layout is set.
  124.   var boxLeft   = self.getLoc(box,'x1');
  125.   var boxRight  = self.getLoc(box,'x2');
  126.   var scrollBar     = 20;
  127.  
  128.   if (hOrient == 'right' && boxRight > (self.pageRight - self.padding)) {
  129.     self.setStyle('contents','width',(self.pageRight - boxLeft) - self.padding - scrollBar);
  130.   }
  131.   else if (hOrient == 'left' && boxLeft < (self.pageLeft + self.padding)) {
  132.     self.setStyle('contents','width',(boxRight - self.pageLeft) - self.padding);
  133.   }
  134.  
  135.   // Get the width/height for the right and bottom outlines
  136.   var boxWidth  = self.getLoc(box,'width');
  137.   var boxHeight = self.getLoc(box,'height');
  138.  
  139.   if (self.allowFade) {
  140.     self.setOpacity(0.01);
  141.   }
  142.   else {
  143.     self.setOpacity(self.opacity);
  144.   }
  145.  
  146.   if (!(self.activeTop && self.activeBottom)) {
  147.     self.setActiveCoordinates();
  148.   }
  149.  
  150.   if (vOrient == 'up') {
  151.     var activeTop = self.activeTop - boxHeight;
  152.     self.setStyle(box,'top',activeTop);
  153.   }
  154.   else if (vOrient == 'down')  {
  155.     var activeTop = self.activeBottom;
  156.     self.setStyle(box,'top',activeTop);
  157.   }
  158.   self.setStyle(box,'display','inline');
  159.  
  160.   // Make sure the box is vertically contained in the window
  161.   var boxTop    = self.getLoc(box,'y1');
  162.   var boxBottom = self.getLoc(box,'y2');
  163.   var deltaTop      = boxTop < self.pageTop ? self.pageTop - boxTop : 0;
  164.   var deltaBottom   = boxBottom > self.pageBottom ? boxBottom - self.pageBottom : 0;
  165.  
  166.   if (vOrient == 'up' && deltaTop) {
  167.     var newHeight = boxHeight - deltaTop;
  168.     if (newHeight > (self.padding*2)) {
  169.       self.setStyle('contents','height',newHeight);
  170.       self.setStyle(box,'top',self.pageTop+self.padding);
  171.       self.setStyle(box,'height',newHeight);
  172.     }
  173.   }
  174.  
  175.   if (vOrient == 'down' && deltaBottom) {
  176.     var newHeight = boxHeight - deltaBottom - scrollBar;
  177.     if (newHeight > (self.padding*2) + scrollBar) {
  178.       self.setStyle('contents','height',newHeight);
  179.       self.setStyle(box,'height',newHeight);
  180.     }
  181.   }
  182.  
  183.   self.hOrient = hOrient;
  184.   self.vOrient = vOrient;
  185. }
  186.  
  187.  
  188. Box.prototype.addCloseButton = function () {
  189.   var self = currentBalloonClass;
  190.   var margin   = Math.round(self.padding/2);
  191.   var closeWidth = self.closeButtonWidth || 16;
  192.   var balloonTop   = self.getLoc('visibleBalloonElement','y1') + margin;
  193.   var balloonRight = self.getLoc('visibleBalloonElement','x2') - margin - self.closeButtonWidth;
  194.   var closeButton = document.getElementById('closeButton');
  195.  
  196.  
  197.   if (!closeButton) {
  198.     closeButton = new Image;
  199.     closeButton.setAttribute('id','closeButton');
  200.     closeButton.setAttribute('src',self.closeButton);
  201.     closeButton.onclick = function() {
  202.       Balloon.prototype.nukeTooltip();
  203.     };
  204.     self.setStyle(closeButton,'position','absolute');
  205.     document.body.appendChild(closeButton);
  206.   }
  207.  
  208.   if (self.isIE()) {
  209.     balloonRight -= self.padding;
  210.   }
  211.  
  212.   self.setStyle(closeButton,'top',balloonTop);
  213.   self.setStyle(closeButton,'left',balloonRight);
  214.   self.setStyle(closeButton,'display','inline');
  215.   self.setStyle(closeButton,'cursor','pointer');
  216.   self.setStyle(closeButton,'z-index',999999999);
  217. }

Raw Paste


Login or Register to edit or fork this paste. It's free.