nodebb-theme-persona/public/modules/autohidingnavbar.js

/*
 *  Bootstrap Auto-Hiding Navbar - v4.0.0
 *  An extension for Bootstrap's fixed navbar which hides the navbar while the page is scrolling downwards and shows it the other way. The plugin is able to show/hide the navbar programmatically as well.
 *  http://www.virtuosoft.eu/code/bootstrap-autohidingnavbar/
 *
 *  Made by István Ujj-Mészáros
 *  Under Apache License v2.0 License
 */
;(function($, window, document, undefined) {
    var pluginName = 'autoHidingNavbar',
        $window = $(window),
        $document = $(document),
        _scrollThrottleTimer = null,
        _resizeThrottleTimer = null,
        _throttleDelay = 70,
        _lastScrollHandlerRun = 0,
        _previousScrollTop = null,
        _windowHeight = $window.height(),
        _visible = true,
        _hideOffset,
        defaults = {
          disableAutohide: false,
          showOnUpscroll: true,
          showOnBottom: true,
          hideOffset: 'auto', // "auto" means the navbar height
          animationDuration: 200,
          navbarOffset: 0
        };

    function AutoHidingNavbar(element, options) {
      this.element = $(element);
      this.settings = $.extend({}, defaults, options);
      this._defaults = defaults;
      this._name = pluginName;
      this.init();
    }

    function hide(autoHidingNavbar) {
      if (!_visible) {
        return;
      }

      autoHidingNavbar.element.addClass('navbar-hidden').animate({
        top: -1 * parseInt(autoHidingNavbar.element.css('height'), 10) + autoHidingNavbar.settings.navbarOffset
      }, {
        queue: false,
        duration: autoHidingNavbar.settings.animationDuration
      });

      try {
        $('.dropdown.open .dropdown-toggle, .dropdown.show .dropdown-toggle', autoHidingNavbar.element).dropdown('toggle');
      }
      catch(e) {}

      _visible = false;

      autoHidingNavbar.element.trigger('hide.autoHidingNavbar');
    }

    function show(autoHidingNavbar) {
      if (_visible) {
        return;
      }

      autoHidingNavbar.element.removeClass('navbar-hidden').animate({
        top: 0
      }, {
        queue: false,
        duration: autoHidingNavbar.settings.animationDuration
      });
      _visible = true;

      autoHidingNavbar.element.trigger('show.autoHidingNavbar');
    }

    function detectState(autoHidingNavbar) {
      var scrollTop = $window.scrollTop(),
          scrollDelta = scrollTop - _previousScrollTop;

      _previousScrollTop = scrollTop;

      if (scrollDelta < 0) {
        if (_visible) {
          return;
        }

        if (autoHidingNavbar.settings.showOnUpscroll || scrollTop <= _hideOffset) {
          show(autoHidingNavbar);
        }
      }
      else if (scrollDelta > 0) {
        if (!_visible) {
          if (autoHidingNavbar.settings.showOnBottom && scrollTop + _windowHeight === $document.height()) {
            show(autoHidingNavbar);
          }
          return;
        }

        if (scrollTop >= _hideOffset) {
          hide(autoHidingNavbar);
        }
      }

    }

    function scrollHandler(autoHidingNavbar) {
      if (autoHidingNavbar.settings.disableAutohide) {
        return;
      }

      _lastScrollHandlerRun = new Date().getTime();

      detectState(autoHidingNavbar);
    }

    function bindEvents(autoHidingNavbar) {
      $document.on('scroll.' + pluginName, function() {
        if (new Date().getTime() - _lastScrollHandlerRun > _throttleDelay) {
          scrollHandler(autoHidingNavbar);
        }
        else {
          clearTimeout(_scrollThrottleTimer);
          _scrollThrottleTimer = setTimeout(function() {
            scrollHandler(autoHidingNavbar);
          }, _throttleDelay);
        }
      });

      $window.on('resize.' + pluginName, function() {
        clearTimeout(_resizeThrottleTimer);
        _resizeThrottleTimer = setTimeout(function() {
          _windowHeight = $window.height();
        }, _throttleDelay);
      });
    }

    function unbindEvents() {
      $document.off('.' + pluginName);

      $window.off('.' + pluginName);
    }

    AutoHidingNavbar.prototype = {
      init: function() {
        this.elements = {
          navbar: this.element
        };

        this.setDisableAutohide(this.settings.disableAutohide);
        this.setShowOnUpscroll(this.settings.showOnUpscroll);
        this.setShowOnBottom(this.settings.showOnBottom);
        this.setHideOffset(this.settings.hideOffset);
        this.setAnimationDuration(this.settings.animationDuration);

        _hideOffset = this.settings.hideOffset === 'auto' ? parseInt(this.element.css('height'), 10) : this.settings.hideOffset;
        bindEvents(this);

        return this.element;
      },
      setDisableAutohide: function(value) {
        this.settings.disableAutohide = value;
        return this.element;
      },
      setShowOnUpscroll: function(value) {
        this.settings.showOnUpscroll = value;
        return this.element;
      },
      setShowOnBottom: function(value) {
        this.settings.showOnBottom = value;
        return this.element;
      },
      setHideOffset: function(value) {
        this.settings.hideOffset = value;
        return this.element;
      },
      setAnimationDuration: function(value) {
        this.settings.animationDuration = value;
        return this.element;
      },
      show: function() {
        show(this);
        return this.element;
      },
      hide: function() {
        hide(this);
        return this.element;
      },
      destroy: function() {
        unbindEvents(this);
        show(this);
        $.data(this, 'plugin_' + pluginName, null);
        return this.element;
      }
    };

    $.fn[pluginName] = function(options) {
      var args = arguments;

      if (options === undefined || typeof options === 'object') {
        return this.each(function() {
          if (!$.data(this, 'plugin_' + pluginName)) {
            $.data(this, 'plugin_' + pluginName, new AutoHidingNavbar(this, options));
          }
        });
      } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
        var returns;

        this.each(function() {
          var instance = $.data(this, 'plugin_' + pluginName);

          if (instance instanceof AutoHidingNavbar && typeof instance[options] === 'function') {
            returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
          }
        });

        return returns !== undefined ? returns : this;
      }

    };

  })(jQuery, window, document);