Difference between revisions of "MediaWiki:Common.js"

Revision as of 01:12, 27 August 2013

/* Any JavaScript here will be loaded for all users on every page load. */

/* p1999wiki.js
 * written by http://wiki.project1999.com/User:Ravhin
 * last update: 16 June, 2013
 */


/* --- hoverbox for item/mob, currently only used in magelo --- */

$(document).ready(function() {

    $(function()  
    {  
      var hideDelay = 0;
      var trigDelay = 250;
      var hideTimer = null;  
      var ajax = null;  

      var currentPosition = { left: '0px', top: '0px' };  

      // One instance that's reused to show info for the current person  
      var container = $('<div id="itemHoverContainer">'  
          + '<div id="itemHoverContent"></div>'
          + '</div>');  
      
      $('body').append(container);  

      //$('span.ih a')

      $('span.ih a').on('mouseover', function()  
      {  
          var itemname = $(this).attr('title');  

          if (itemname == '' || itemname == 'undefined')  
              return;  
      
          if (hideTimer)  
              clearTimeout(hideTimer);  
      
          //var pos = $(this).offset();  
          //var width = $(this).width(); 
 
          //container.css({  
          //    left: (pos.left + width) + 'px',  
          //    top: pos.top - 5 + 'px'  
          //});

          $(this).trigger('mousemove');
      
          $('#itemHoverContent').html('&nbsp;');

          //$('#itemHoverContent').html('<div class="itemtopbg"><div class="itemtitle">Loading...</div></div>'
          //                          + '<div class="itembg" style="min-height:50px;"><div class="itemdata">'
          //                          + '<div class="itemicon" style="float:right;"><img alt="" src="/images/Ajax_loader.gif" border="0"></div>'
          //                          + '<p></p></div></div><div class="itembotbg"></div>'); 

          if (ajax)  
          {  
              ajax.abort();  
              ajax = null;  
          }  
  
          ajax = $.ajax({  
              url: 'http://wiki.project1999.org/index.php/Special:AjaxHoverHelper/'+itemname,  
              cacheResponse: true,
              success: function(html)  
              {  
                $('#itemHoverContent').html(html);  
              }  
          });    

          container.css('display', 'block');
          //container.fadeIn('fast');

      }); //on mouseover
      
      $('span.ih a').on('mouseout', function()  
      {  
          if (hideTimer)  
              clearTimeout(hideTimer);  
          hideTimer = setTimeout(function()  
          {  
              container.css('display', 'none');  
              //container.fadeOut('fast');
          }, hideDelay);  
      });  

      $('span.ih a').mousemove(function(e){
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = container.width(); //Find width of tooltip
        var tipHeight = container.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            
            if( tipWidth > e.pageX - 20 ){
                mousex = 0;
            } else {
                mousex = e.pageX - tipWidth - 20;
            }
            
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }

        container.css({  top: mousey, left: mousex });
      });
      
      // Allow mouse over of details without hiding details  
      $('#itemHoverContainer').mouseover(function()  
      {  
          if (hideTimer)  
              clearTimeout(hideTimer);  
      });  
      
      // Hide after mouseout  
      $('#itemHoverContainer').mouseout(function()  
      {  
          if (hideTimer)  
              clearTimeout(hideTimer);  
          hideTimer = setTimeout(function()  
          {  
              container.css('display', 'none');  
              //container.fadeOut('fast');
          }, hideDelay);  
      });  
			
			// magelo non-ajax item hover, but move box with mouse
      $('.magelohb').mousemove(function(e){
				var childContainer = $(this).children('span.hb');

        var tipWidth = childContainer.width(); //Find width of tooltip
        var tipHeight = childContainer.height(); //Find height of tooltip
				
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
				
				console.log(e.pageX,e.pageY);
				
        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth - 20);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight - 20);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            
            if( tipWidth > e.pageX - 20){
                mousex = 0;
            } else {
                mousex = e.pageX - tipWidth - 20;
            }
            
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
				
        childContainer.css({ top: mousey, left: mousex, 'z-index':'999' });
      });
			
			// change to position:fixed on all hover divs if we have JS active
			// otherwise leave as position:absolute so the stationary hovers are near their items
			$('.magelohb span.hb').each(function(i) {
				$(this).css({'position':'fixed'});
			});
			
    });  


});