ref_popup.js v.0.2

///////////////////////////////////////////////////////////////////////////////
//  "THE CAKE-WARE LICENSE" (Revision 41):
//
//      Millhiore Firianno Biscotti wrote this file.  As long as you retain
//  this notice you can do whatever you want with this stuff. If we meet
//  some day, and you think this stuff is worth it, you can buy me a cake
//  in return.
//
//      Millihi.
///////////////////////////////////////////////////////////////////////////////

var RefPopup = function (props) {
   var POPUP_VERTICAL_OFFSET = 5;
   var REMOVE_TIMEOUT = 250;

   var removalTimerID = 0;

   ////////////////////////////////////////////////////////////////////////////
   //  init
   function init () {
      document.addEventListener ("mouseover", onMouseOver);
      document.addEventListener ("mouseout", onMouseOut);
   }

   ////////////////////////////////////////////////////////////////////////////
   //  destroy
   function destroy () {
      document.removeEventListener ("mouseover", onMouseOver);
      document.removeEventListener ("mouseout", onMouseOut);
   }

   ////////////////////////////////////////////////////////////////////////////
   //  onMouseOver
   function onMouseOver (ev) {
      if (ev.target && ev.target.parentNode) {
         return dispatchMouseOverEvent (ev);
      }
      return false;
   }

   ////////////////////////////////////////////////////////////////////////////
   //  onMouseOut
   function onMouseOut (ev) {
      if (ev.target && ev.target.parentNode) {
         return dispatchMouseOutEvent (ev);
      }
      return false;
   }

   ////////////////////////////////////////////////////////////////////////////
   //  dispatchMouseOverEvent
   function dispatchMouseOverEvent (ev) {
      if (ev.target.classList.contains ('js-ref')) {
         var hid = ev.target.innerHTML.replace ('>>', '');
         var url = ev.target.getAttribute ('href').replace ('#', '');
         var post = document.querySelector
           ('.js-post[data-hid="' + hid + '"]');

         if (post) {
            showPopup (ev.target, hid, post.cloneNode (true));
         }
         else {
            $.get(url)
              .done(function (res) {
                 showPopup (ev.target, hid, res);
              })
              .fail(function (err) {
                 console.error (err);
              });
         }
         return true;
      }

      var oldPopup = getPopup (ev.relatedTarget);
      var newPopup = getPopup (ev.target);

      if (oldPopup && removalTimerID) {
         setRemovalTimer (newPopup);

         return true;
      }

      return false;
   }

   ////////////////////////////////////////////////////////////////////////////
   //  dispatchMouseOutEvent
   function dispatchMouseOutEvent (ev) {
      var oldPopup = getPopup (ev.target);
      var newPopup = getPopup (ev.relatedTarget);

      if (ev.target.classList.contains ('js-ref')) {
         setRemovalTimer (newPopup);

         return true;
      }

      if (newPopup == oldPopup) {
         return false;
      }

      if (oldPopup) {
         setRemovalTimer (newPopup);
         return true;
      }

      return false;
   }

   ////////////////////////////////////////////////////////////////////////////
   //  showPopup
   function showPopup (target, hid, content) {
      var targetBox = target.getBoundingClientRect ();

      var popup = $('<div>')
        .html (content)
        .addClass ('ref-popup js-ref-popup')
        .attr ('data-hid', hid)
        .css ({
           top: targetBox.top +
                targetBox.height +
                POPUP_VERTICAL_OFFSET +
                window.pageYOffset,
           left: 0
        });

      popup.find ('.js-toggle-thread, .js-toggle-post').remove ();

      $('.js-popup-container').append (popup);
   }

   ////////////////////////////////////////////////////////////////////////////
   //  removeLastPopup
   function removeLastPopup (terminator) {
      var popupList = $('.js-popup-container')[0];
      var termPopup = getPopup (terminator);

      while (popupList.hasChildNodes ()
        && termPopup != popupList.lastChild)
      {
         popupList.removeChild (popupList.lastChild);
      }
   }

   ////////////////////////////////////////////////////////////////////////////
   //  getPopup
   function getPopup (elem) {
      var popupList = $('.js-popup-container')[0];

      if (popupList && elem && popupList.hasChildNodes ()) {
         var iter = elem;

         while (iter.parentNode) {
            if (iter.parentNode == popupList) {
               return iter;
            }
            iter = iter.parentNode;
         }
      }
      return null;
   }

   ////////////////////////////////////////////////////////////////////////////
   //  isBelongs
   function isBelongs (obj, sample) {
      if (sample) {
         var iter = obj;

         while (iter) {
            if (iter == sample) {
               return true;
            }
            iter = iter.parentNode;
         }
      }
      return false;
   }

   ////////////////////////////////////////////////////////////////////////////
   //  setRemovalTimer
   function setRemovalTimer (terminator) {
      clearRemovalTimer ();

      removalTimerID = setTimeout (function () {
         removeLastPopup (terminator);
         removalTimerID = 0;
      }, REMOVE_TIMEOUT);
   }

   ////////////////////////////////////////////////////////////////////////////
   //  clearRemovalTimer
   function clearRemovalTimer () {
      if (removalTimerID) {
         clearTimeout (removalTimerID);
      }
      removalTimerID = 0;
   }

   init ();

   return {
      destroy: destroy,
   };
};

var refPopup = new RefPopup ();