ref_popup.js

///////////////////////////////////////////////////////////////////////////////
//  "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 popupIsVisible = false;
   var timerId = null;

   ////////////////////////////////////////////////////////////////////////////
   //  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) {
         dispatchMouseOverEvent (ev);
      }
   }

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

   ////////////////////////////////////////////////////////////////////////////
   //  dispatchMouseOverEvent
   function dispatchMouseOverEvent (ev) {
      var target = ev.target;

      if (target.parentNode.classList.contains ('ref-popup')) {
         if (timerId) {
            clearTimeout (timerId);
            timerId = null;
         }

         removeLastPopup (target.parentNode);

         return;
      }

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

         popupIsVisible = true;

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

         return;
      }
   }

   ////////////////////////////////////////////////////////////////////////////
   //  dispatchMouseOutEvent
   function dispatchMouseOutEvent (ev) {
      var target = ev.target;

      if (!target) {
         return;
      }

      if (target.classList.contains ('js-ref')) {
         var popupList = $('.js-popup-container')[0];

         if (isBelongs (ev.relatedTarget, popupList.lastChild)) {
            return;
         }

         if (timerId) {
            clearTimeout (timerId);
         }

         timerId = setTimeout (function () {
            removeLastPopup (ev.relatedTarget);
         }, REMOVE_TIMEOUT);

         return;
      }

      target = target.parentNode;

      if (target.classList.contains ('ref-popup')) {
         if (isBelongs (ev.relatedTarget, target)) {
            return;
         }

         if (timerId) {
            clearTimeout (timerId);
         }

         timerId = setTimeout (function () {
            removeLastPopup (ev.relatedTarget);
         }, REMOVE_TIMEOUT);

         return;
      }
   }

   ////////////////////////////////////////////////////////////////////////////
   //  showPopup
   function showPopup (target, hid, content) {
      if (popupIsVisible) {
         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) {
      if (terminator) {
         var popupList = $('.js-popup-container')[0];

         while (popupList.childElementCount > 0
           && !isBelongs (terminator, popupList.lastChild))
         {
            popupList.removeChild (popupList.lastChild);
         }
      }
   }

   ////////////////////////////////////////////////////////////////////////////
   //  isBelongs
   function isBelongs (obj, sample) {
      var belongs = false;

      if (sample) {
         var parent = obj;

         while (parent && !belongs) {
            belongs = (parent == sample);
            parent = parent.parentNode;
         }
      }

      return belongs;
   }

   init ();

   return {
      destroy: destroy,
   };
};

var refPopup = new RefPopup ();