ref_popup.js v.0.3 final

///////////////////////////////////////////////////////////////////////////////
//  "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.
///////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////
//  FixedTimer
var FixedTimer = function (timeout) {

   var TIMER_TIMEOUT = timeout;
   var CALLBACK = null;
   var ARGUMENT = null;
   var TIMER_ID = 0;

   ////////////////////////////////////////////////////////////////////////////
   //  _callback
   function _callback () {
      CALLBACK (ARGUMENT);
      _reset ();
   };

   ////////////////////////////////////////////////////////////////////////////
   //  _reset
   function _reset () {
      CALLBACK = null;
      ARGUMENT = null;
      TIMER_ID = 0;
   };

   ////////////////////////////////////////////////////////////////////////////
   //  _clear
   function _clear () {
      if (TIMER_ID) {
         clearTimeout (TIMER_ID);
      }
      _reset ();
   };

   ////////////////////////////////////////////////////////////////////////////
   //  _isActive
   function _isActive () {
      if (TIMER_ID) {
         return true;
      }
      return false;
   };

   ////////////////////////////////////////////////////////////////////////////
   //  _set
   function _set (callback, argument) {
      _clear ();

      CALLBACK = callback;
      ARGUMENT = argument;
      TIMER_ID = setTimeout (_callback, TIMER_TIMEOUT);
   };

   ////////////////////////////////////////////////////////////////////////////
   //  _setCallback
   function _setCallback (callback) {
      CALLBACK = callback;
   };

   ////////////////////////////////////////////////////////////////////////////
   //  _setArgument
   function _setArgument (argument) {
      ARGUMENT = argument;
   };

   ////////////////////////////////////////////////////////////////////////////
   //  _fire
   function _fire () {
      if (TIMER_ID) {
         clearTimeout (TIMER_ID);
         _callback ();
      }
      else {
         console.log ("FixedTimer.fire () on inactive timer!");
      }
   };

   ////////////////////////////////////////////////////////////////////////////
   //  bless
   return {
      isActive    : _isActive,
      set         : _set,
      setCallback : _setCallback,
      setArgument : _setArgument,
      clear       : _clear,
      fire        : _fire
   };
};

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

   var timer = new FixedTimer (250);

   ////////////////////////////////////////////////////////////////////////////
   //  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')) {
         if (timer.isActive ()) {
            timer.fire ();
         }

         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;
      }

      if (timer.isActive ()) {
         timer.setArgument (getPopup (ev.target));
         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')) {
         if (!timer.isActive ()) {
            timer.set (removeLastPopup, newPopup);
         }
         return true;
      }

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

      if (oldPopup) {
         if (!timer.isActive ()) {
            timer.set (removeLastPopup, 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;
   }

   init ();

   return {
      destroy: destroy,
   };
};

var refPopup = new RefPopup ();