User:Keepcalm444/floatingnav.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

var CUR_SCROLL_POS = $(window).scrollTop();
var sidebar_is_fixed = false;
var IS_SCROLLING = false;
var IN_ONSCROLL = false;
var DISABLE_SCROLL_CHECKING = false;
var notScrollCount = 0;
var scrolledPx = 0;
if (skin == "vector") {
 importStylesheet('User:Keepcalm444/floatingnav.css');


 function checkNavCanFloat() {  
  var diff = $(window).scrollTop() - CUR_SCROLL_POS;
  diff = new Number(diff.toString().replace("-",""));
  scrolledPx += diff;
  diff = scrolledPx;
 if (!IS_SCROLLING) {
  if (diff < 100) {
     diff = 30;
  }
  else {
     diff = 500;
  }
  if (window.innerHeight < ($('#mw-panel').height() + $('#p-logo').height())) {
    // nope.
    if (sidebar_is_fixed == true) {
       $('#mw-panel').animate({ top: 160}, 500, function() {});
     
    }
    sidebar_is_fixed = false;
    //document.getElementById("mw-panel").style.position = "absolute"; 
  }
  else {

     var height = $(window).scrollTop() + 160;
     if (sidebar_is_fixed == false) {
      
       $('#mw-panel').animate({ top: height }, 500, function() {});
     }
     else {
      /*if (scrolledPx < 100 && window.DISABLE_ANIMATION != true) {
        return;
      }*/
       if (window.DISABLE_ANIMATION == true) {
         $('#mw-panel').animate({ top: height }, 0, function() {} );
       }
       else {
         $('#mw-panel').animate({ top: height }, diff, function() {});
       }
     }
     sidebar_is_fixed = true;
     scrolledPx = 0;
  }
 }
  CUR_SCROLL_POS = $(window).scrollTop();
};

function checkIsScrolling() {
    if (DISABLE_SCROLL_CHECKING) {
       return;
    }
    else if (IN_ONSCROLL) {
       return;
    }
    else if (notScrollCount < 21) { // wait 300ms before scrolling.
       notScrollCount++;
    }
    else {
       notScrollCount = 0;
       checkNavCanFloat();
       IS_SCROLLING = false;
    }
}

       
setInterval(checkIsScrolling, 15);
 $('#mw-panel').click(function () { setTimeout(checkNavCanFloat, 300); });

 $(window).scroll(  function () { IS_SCROLLING = true; IN_ONSCROLL = true; checkNavCanFloat(); IN_ONSCROLL = false; } );
 $(window).resize(function () { checkNavCanFloat() })
}

var SIDEBAR_VISIBLE = true;

function hideSidebar() {
        DISABLE_SCROLL_CHECKING = true;
	document.getElementById("sidebar-arrow").innerHTML = "&raquo;";
        $('#mw-panel').animate({left: -160, right: 0}, 500);
	$('#content').animate({marginLeft: 0}, 500);
        $('#p-hideheader').animate({left: 0}, 500);
        $('#sidebar-arrow')[0].style.position = "fixed";
        $('#sidebar-arrow').animate({top: $(window).innerHeight() / 2, left: -151 /*account for marginLeft */}, 500);
	$('#left-navigation').animate({left: 0}, 500);
        SIDEBAR_VISIBLE = false;
        $('#p-logo')[0].style.visibility = "hidden";
} 
function showSidebar() {
        DISABLE_SCROLL_CHECKING = false;
	document.getElementById("sidebar-arrow").innerHTML = "&laquo;";
        $('#sidebar-arrow')[0].style.left = "0px";
        checkNavCanFloat();
	$('#left-navigation').animate({left: 177}, 500, function() {});
	$('#content').animate({marginLeft: 177}, 500, function() {});
	$('#p-hideheader').animate({left: 177}, 500);
	$('#mw-panel').animate({left: 0, right: 160}, 500, function() {});
        SIDEBAR_VISIBLE = true;
        $('#p-logo')[0].style.visibility = "visible";
} 

setTimeout(function() {
 document.getElementById("mw-panel").innerHTML += '<span id="sidebar-arrow" style="margin-left: 153px; top: 50% !important;" onclick="SIDEBAR_VISIBLE ? hideSidebar() : showSidebar();">&laquo;</span>';
}, 500);


var tag = '<span id="p-hideheader" style="left: 177px; top: 80px; width: 20px; text-align: center; font-size: 16px; position: relative; right: 0px; border-radius: 10px; background-color: transparent; padding: 5px; padding-left: 2px;"><a href="javascript:void(0);" onclick="headerUpClick()"><span id="header-toggle-up">˄</span></a>&nbsp;<a href="javascript:void(0);" onclick="headerDownClick()"><span id="header-toggle-down">˅</span></a></span>';
if (skin == "vector") {
    document.getElementById("left-navigation").outerHTML += tag;
    document.getElementById("header-toggle-down").style.display = "none";
}

function headerDownClick() {
    var scrollPos = $(window).scrollTop();
    document.getElementById("header-toggle-up").style.display = "inline";
    if (HEADER_VISIBLE && !PERSONAL_NAV_VISIBLE) {
        showPersonalNav();
        document.getElementById("header-toggle-down").style.display = "none";
    }
    else if (!HEADER_VISIBLE) {
        showHeader();
        
        $('#p-hideheader').animate({top: PHideHeader_TL.top, left: $('#p-namespaces').width() + $('#sidebar-arrow').position().left + 160}, 500, function() {});
    }
    $(window).scrollTop(scrollPos);
}
var PHideHeader_TL = $('#p-hideheader').position();
function headerUpClick() {
    var scrollPos = $(window).scrollTop();
    document.getElementById("header-toggle-down").style.display = "inline";
    if (PERSONAL_NAV_VISIBLE) {
         hidePersonalNav();
    }
    else if (HEADER_VISIBLE) {
         hideHeader();
         document.getElementById("header-toggle-up").style.display = "none";
         $('#p-hideheader').animate({top: $('#content').position().top}, 500);
    }
    $(window).scrollTop(scrollPos);
}
var PERSONAL_NAV_VISIBLE = true;
function hidePersonalNav() {
        PERSONAL_NAV_VISIBLE = false;
	$('#mw-head').animate({top: -30}, 500, function() {});
	$('#content').animate({marginTop: -30}, 500, function() {});
} 

function showPersonalNav() {
        PERSONAL_NAV_VISIBLE = true;
	$('#content').animate({marginTop: 0}, 500, function() {});
	$('#mw-head').animate({top: 0}, 500, function() {});
}
var HEADER_VISIBLE = true;
function hideHeader() {
        HEADER_VISIBLE = false;
	$('#mw-head').animate({top: -80}, 500, function() {});
	$('#content').animate({marginTop: -80}, 500, function() {});
}

function showHeader() {
     HEADER_VISIBLE = true;
     if (!PERSONAL_NAV_VISIBLE) {
        hidePersonalNav();
     }
     else {
	$('#content').animate({marginTop: 0}, 500, function() {});
	$('#mw-head').animate({top: 0}, 500, function() {});
     }
}