Source Code

for file /controls/popup.js

// controls/popup.js
// Javascript Behaviour for the popup control
// Copyright (c) by Matthias Hertel, http://www.mathertel.de
// This work is licensed under a BSD style license. See http://www.mathertel.de/License.aspx
// ----- 
// 03.06.2005 created by Matthias Hertel
// 21.12.2007 buttonbackpushed replaces by topContent image
// 14.07.2010 using a thin event wrapper to expose a function for starting a popup by code.
// 14.07.2010 added auto-close functionality.
// 14.02.2016 shadow simplified to CSS3 shadow.

var PopUpBehaviour = {

  // ----- Properties -----
  ///<field name="_obj" type="Object">The current hovered object.</field>
  _obj: null,

  ///<field name="_timer" type="Object">A timer that will trigger the creation and deletion of the popUp Information.</field>
  _timer: null,

  ///<field name="_popobj" type="Object">The popup object.</field>
  _popobj: null, // the current hovered object

  ///<field name="_maxOpenTime" type="Object">The time for the auto close feature.</field>
  _maxOpenTime: null,

  // ----- Events -----

  onmouseover: function (evt) {
    ///<summary>Open a popUp upon the hovered object.</summary>
    ///<param name="evt" type="Event">The event object.</param>
    evt = evt || window.event;
    var t = evt.target || evt.srcElement;
    PopUpBehaviour.open(t);
  }, // onmouseover


  onmouseout: function (evt) {
    ///<summary>Terminate the timer and remove the popUp information.</summary>
    ///<param name="evt" type="Event">The event object.</param>
    evt = evt || window.event;
    var t = evt.target || evt.srcElement;
    if ((t != null) && (t == PopUpBehaviour._obj)) {
      PopUpBehaviour.close(t);
    } // if
  }, // onmouseout


  open: function (obj, maxOpenTime) {
    ///<summary>Set a timer to show the popUp information for a object in a moment.</summary>
    ///<param name="maxOpenTime" type="Object">The time for the auto close feature.</param>
    if ((!jcl.isIE) && (obj != null) && (obj.attributes["poptext"] != null))
      obj.poptext = obj.attributes["poptext"].value;

    if ((obj != null) && (obj.poptext != null) && (obj != PopUpBehaviour._obj)) {
      PopUpBehaviour._obj = obj;
      PopUpBehaviour._timer = window.setTimeout(PopUpBehaviour._show, 300);
    } // if
    PopUpBehaviour._maxOpenTime = maxOpenTime;
  }, // onmouseover


  close: function (obj) {
    ///<summary>Close the actual popUp window.</summary>
    ///<param name="obj" type="Object">The potential hovered object.</param>
    if (obj == null) obj == PopUpBehaviour._obj;
    if (PopUpBehaviour._timer != null)
      window.clearTimeout(PopUpBehaviour._timer);

    PopUpBehaviour._popobj.style.display = "none";
    PopUpBehaviour._timer = null;
    PopUpBehaviour._obj = null;
  }, // onmouseover


  // --- private methods ---

  // now show the popUp information
  _show: function () {
    var obj = PopUpBehaviour._obj;
    if (obj != null) {
      pos = PopUpBehaviour._absolutePosition(obj);
      var o = PopUpBehaviour._create(obj.poptext, pos);
      PopUpBehaviour._popobj = o;
    } // if
    PopUpBehaviour._timer = null;
    if (PopUpBehaviour._maxOpenTime != null)
      PopUpBehaviour._timer = window.setTimeout(PopUpBehaviour.close, PopUpBehaviour._maxOpenTime);
  }, // _show


  // create or reuse the popUp element
  _create: function (text, pos) {
    var oPop = document.getElementById("VEPopUp");
    var oPoint;

    if (oPop == null) {
      // create a popUp object for the first time
      oPop = document.createElement("div");
      oPop.id = "VEPopUp";
      oPop.style.position = "absolute";
      oPop.style.width = "240px";
      var htm = "<img src='/controls/images/point.gif' style='position:relative;display:block;top:1px;z-index:1'>";
      htm += "<div class='VEBoxShadow' style='position:relative;border: solid #203050 1px; padding: 4px; background-color:#eaeef7;'></div></div>";
      oPop.innerHTML = htm;
      document.body.appendChild(oPop);
    } // if

    // adjust tht position and choos the right point gif file
    oPoint = oPop.firstChild; // point gif file

    oPop.style.display = "block";
    oPop.style.top = (pos.top + pos.height) + "px";
    var leftPos = pos.left + pos.width / 2 - 40;

    if (leftPos < 8) {
      oPop.style.left = "8px";
      oPoint.src = String(oPoint.src).replace(/pointleft.gif/i, "point.gif");
      oPoint.style.marginLeft = "12px";
    } else if (leftPos + 240 < document.documentElement.clientWidth) {
      oPop.style.left = leftPos + "px";
      oPoint.src = String(oPoint.src).replace(/pointleft.gif/i, "point.gif");
      oPoint.style.marginLeft = "40px";
    } else {
      leftPos = pos.left + pos.width / 2 - 200;
      if (leftPos + 250 > document.documentElement.clientWidth)
        leftPos = document.documentElement.clientWidth - 250;
      oPop.style.left = leftPos + "px";
      oPoint.src = String(oPoint.src).replace(/point.gif/i, "pointleft.gif");
      oPoint.style.marginLeft = "180px";
    } // if

    // add the text
    oPop.firstChild.nextSibling.innerHTML = text;
    return (oPop);
  }, // _create


  // get the absolute position of a html object
  _absolutePosition: function (obj) {
    var pos = null;

    if (obj != null) {
      pos = new Object();
      pos.top = obj.offsetTop;
      pos.left = obj.offsetLeft;
      pos.width = obj.offsetWidth;
      pos.height = obj.offsetHeight;

      obj = obj.offsetParent;
      while (obj != null) {
        pos.top += obj.offsetTop;
        pos.left += obj.offsetLeft;
        obj = obj.offsetParent;
      } // while
    }
    return (pos);
  } // _absolutePosition

}; // PopUpBehaviour

jcl.LoadBehaviour(document, PopUpBehaviour);  

This page is part of the http://www.mathertel.de/ web site.

For updates and discussions see http://ajaxaspects.blogspot.com/.