hustoj/web/bsadmin/assets/js/lib/sidebar.js

/*
 *
 * sidebar sidebar
 *
 */
!function($) {
  "use strict";

  var sidebar = function(element, options) {
    this.options    = options;
    this.$sidebar       = $(element);
    this.$content   = this.$sidebar.find('~ .content-wrap');
    this.$nano      = this.$sidebar.find(".nano");
    this.$html      = $('html');
    this.$body      = $('body');
    this.$window    = $(window);

    // set in true when first time were clicked on toggle button
    this.changed    = false;

    this.init();
  };

  sidebar.DEFAULTS = {
    // duration od animations
    duration: 300,

    // set small sidebar when window width < resizeWnd
    resizeWnd: 1000
  };

  sidebar.prototype.init = function() {
    var _this = this;

    // no transition enable
    _this.$body.addClass('sidebar-notransition');

    // init Nano Scroller
    _this.$nano.nanoScroller({ preventPageScrolling: true });

    // sidebar toggle
    $('.sidebar-toggle').on( 'click', function(e) {
      e.preventDefault();
      _this.togglesidebar();
    });

    // hide sidebar when push content overlay
    _this.$content.on( 'click', function() {
      if( _this.isHideOnContentClick() ) {
        _this.hidesidebar();
      }
    })

    // toggle sub menus
    _this.$sidebar.on('click', 'li a.sidebar-sub-toggle', function(e) {
      e.preventDefault();
      _this.toggleSub($(this));
    });

    if( _this.showType() == 'push' && _this.isShow()) {
      _this.$body.css('overflow', 'hidden');
    }

    // init gesture swipes
    if( _this.$sidebar.hasClass('sidebar-gestures') ) {
      _this.useGestures();
    }

    // on window resize - set small sidebar
    _this.$window.on('resize', function() {
      _this.windowResize();
    });
    
    _this.windowResize();

    // no transition disable
    setTimeout(function() {
      _this.$body.removeClass('sidebar-notransition');
    }, 1);
  }

  sidebar.prototype.isShow = function() {
    return !this.$body.hasClass('sidebar-hide');
  }

  // check show type
  sidebar.prototype.showType = function() {
    if(this.$sidebar.hasClass('sidebar-overlay')) return 'overlay';
    if(this.$sidebar.hasClass('sidebar-push')) return 'push';
    if(this.$sidebar.hasClass('sidebar-shrink')) return 'shrink';
  };


  // check if hide on content click
  sidebar.prototype.isHideOnContentClick = function() {
    return this.$sidebar.hasClass('sidebar-overlap-content');
  }

  // check if sidebar static position
  sidebar.prototype.isStatic = function() {
    return this.$sidebar.hasClass('sidebar-static');
  }


  sidebar.prototype.togglesidebar = function(type) {
    var _this = this;
    var show = !_this.isShow();

    if(type) {
      if(
        (type=='show' && !show)
        || (type=='hide' && show)) {
        return;
      }
    }

    _this.options.changed = true;

    if( show ) {
      _this.showsidebar();
    } else {
      _this.hidesidebar();
    }
  }

  sidebar.prototype.showsidebar = function() {
    var _this = this;

    _this.$body.removeClass('sidebar-hide');

    if( _this.showType() == 'push'/* && !_this.isStatic() */) {
      _this.$body.css('overflow', 'hidden');
    }

    setTimeout(function() {
      // restore scroller on normal sidebar after end animation (300ms)
      _this.$nano.nanoScroller();

      // resize for charts reinit
      _this.$window.resize();
    }, _this.options.duration);
  }

  sidebar.prototype.hidesidebar = function() {
    var _this = this;

    _this.$body.addClass('sidebar-hide');

    // destroy scroller on hidden sidebar
    _this.$nano.nanoScroller({ destroy: true });

    // resize for charts reinit
    setTimeout(function() {
      if( _this.showType() == 'push'/* && !_this.isStatic() */) {
        _this.$body.css('overflow', 'visible');
      }
      _this.$window.resize();
    }, _this.options.duration);
  }


  // toggle submenu [open or close]
  sidebar.prototype.toggleSub = function(toggle) {
    var _this = this;

    var toggleParent = toggle.parent();
    var subMenu = toggleParent.find('> ul');
    var opened = toggleParent.hasClass('open');

    if(!subMenu.length) {
      return;
    }

    // close
    if(opened) {
      _this.closeSub(subMenu);
    }

    // open
    else {
      _this.openSub(subMenu, toggleParent);
    }
  }

  // close submenus
  sidebar.prototype.closeSub = function(subMenu) {
    var _this = this;

    subMenu.css('display', 'block').stop()
      .slideUp(_this.options.duration, 'swing', function() {
      // close child dropdowns
      $(this).find('li a.sidebar-sub-toggle').next().attr('style', '');

      // reinit nano scroller
      _this.$nano.nanoScroller();
    });
    
    subMenu.parent().removeClass('open');
    subMenu.find('li a.sidebar-sub-toggle').parent().removeClass('open');
  }

  // open submenus
  sidebar.prototype.openSub = function(subMenu, toggleParent) {
    var _this = this;

    subMenu
      .css('display', 'none').stop()
      .slideDown(_this.options.duration, 'swing', function() {
        // reinit nano scroller
        _this.$nano.nanoScroller();
      });
    toggleParent.addClass('open');

    _this.closeSub( toggleParent.siblings('.open').find('> ul') );
  }

  // use gestures for show / hide menu
  sidebar.prototype.useGestures = function() {
    var _this = this;
    var touchStart = 0;
    var startPoint = 0; // x position
    var endPoint = 0; // x position

    // on touch start
    _this.$window.on('touchstart', function(e) {
      startPoint = (e.originalEvent.touches?e.originalEvent.touches[0]:e).pageX;
      endPoint = (e.originalEvent.touches?e.originalEvent.touches[0]:e).pageX;
      touchStart = 1;
    });

    // on swipe start
    _this.$window.on('touchmove', function(e) {
      if( touchStart ) {
        endPoint = (e.originalEvent.touches?e.originalEvent.touches[0]:e).pageX;
      }
    });

    // on swipe end
    _this.$window.on('touchend', function(e) {
      if( touchStart ) {
        var resultSwipe = startPoint - endPoint,
            rtl = _this.$html.hasClass('rtl');

        touchStart = 0;

        // swipe min width 100px
        if( Math.abs( resultSwipe ) < 100 ) {
          return;
        }

        // change values if rtl
        if( rtl ) {
          resultSwipe *= -1;
          startPoint = _this.$window.width() - startPoint;
        }

        // from left to right
        if(resultSwipe < 0) {
          // show only when touch started from left corner
          if( startPoint < 40 ) {
            _this.showsidebar();
          }
        }

        // from right to left
        else {
          _this.hidesidebar();
        }
      }
    });
  }

  // on resize window and on start
  var resizeTimer;
  sidebar.prototype.windowResize = function() {
    var _this = this;

    // if user currently changed size of sidebar, stop change it
    if(!_this.options.changed) {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
        if(_this.$window.width() < _this.options.resizeWnd) {
          _this.togglesidebar('hide');
        }
      }, 50);
    }
  };




  // init
  $('.sidebar').each(function() {
    var options = $.extend({}, sidebar.DEFAULTS, $(this).data(), typeof option == 'object' && option);
    var cursidebar = new sidebar(this, options);
  });

}(jQuery);