文档的js

/*
  主站，子频道，定向站点共用
*/
(function() {

  scrollToAnchor();

  toggleSearchForm();
  
  scrollTop();

  initScrollBar();

  // 文档图片放大查看
  imgZoom();

  renderCodeBox();

  dropdownClick();

  fixAside();

  // 侧边栏固定
  function fixAside() {  
    if (SITE_SLUG === 'open') {
      var headerHeight = $('.header').outerHeight() + $('.search-wrapper').outerHeight() + 32;
      var offsetTop = $('.dropdown-menu-selector').height() || 0;
      affixSidebar(headerHeight, offsetTop);
      affix($('.breadcrumb'), headerHeight, 0);
    } else {
      var headerHeight = $('.header').outerHeight();
      var offsetTop = 86;
      affixSidebar(headerHeight, offsetTop);
    }
  }

  // 页面加载时的锚点定位
  function initScrollBar() {
    $(window).on('load', function() {
      var hash = decodeURIComponent(window.location.hash);
      if (!hash) return;

      // 兼容 toc 旧版本中的链接错误
      if (hash.substr(0, 2) === '##') {
        hash = hash.substr(1);
      }

      if (hash !== '#' && $(hash).length) {
        var top = $(hash).offset().top - $('.breadcrumb').outerHeight();

        // 子站点需要计算头部高度
        if (SITE_SLUG !== 'open') {
          top -= $('.page-title').outerHeight();
        }
        setTimeout(function() {
          $(window).scrollTop(top);
        }, 0);
      }
    });
  }

  function affix($el, headerHeight, offsetTop) {
    $(window).on('load scroll resize', function () {
      if (!$el.length) return;

      var scrollTop = window.scrollY || window.pageYOffset;
      if (scrollTop > headerHeight) {
        $el.css({
          position: 'fixed',
          top: offsetTop,
          left: $el.offset().left,
          right: $('body').width() - $el.offset().left - $el.width(),
        })
      } else {
        $el.removeAttr('style')
      }
    });
  }

  function affixSidebar(headerHeight, offsetTop) {
    var footerHeight = $('.body-footer').outerHeight();
    var $sidebar = $('.sidebar-wrapper');
    var $breadcrumb = $('.breadcrumb');

    $(window).on('load scroll resize', function () {
      var scrollTop = window.scrollY || window.pageYOffset;

      // sidebar fixed 时跟底部保持的距离
      var offsetBottom = document.body.scrollHeight - scrollTop - window.innerHeight - 32;

      var bottom = 0;
      if (offsetBottom < footerHeight) {
        bottom = footerHeight - offsetBottom;
      }

      $sidebar.find('.sidebar').css({
        'height': window.innerHeight - bottom - offsetTop,
      });

      // sidebar fixed
      if (scrollTop > headerHeight) {
        $sidebar.addClass('fixed');
      } else {
        $sidebar.removeClass('fixed');
      }
    });
  }


  function dropdownClick() {
    // dropdown trigger: click
    $('body').on('click', '.dropdown .dropdown-trigger', function() {
      var $dropdown = $(this).parent('.dropdown');
      $dropdown.toggleClass('open');

      if ($dropdown.hasClass('open') && $dropdown.hasClass('dropdown-menu-selector')) {
        var $menu = $('#main-menu');
        var $active = $menu.find('.menu-item .active');
        if ($active.length) {
          var top = $menu.scrollTop() + $active.position().top - 56;
          if (top > 0) {
            $menu.scrollTop(top);
          }
        }
      }
    });
    $('html').on('click', function() {
      $('.dropdown.open').removeClass('open');
    });
    $('html').on('click', '.dropdown', function(e) {
      e.stopPropagation();
    });
  }

  function renderCodeBox() {
    // copy code
    var $codeBox = $('<div class="code-box" />');
    var codeTemplate = '<span class="btn-copy-code">点击复制</span>';
    $('code.language-js, code.language-javascript, code.language-jsx').each(function(index, item) {
      $(item).parent('pre').wrap($codeBox).before(codeTemplate);
    })

    var clipboard = new Clipboard('.btn-copy-code', {
      text: function(trigger) {
        return trigger.nextElementSibling.textContent;
      }
    });

    var clipboardTimer = null;
    clipboard.on('success', (e) => {
      $(e.trigger).text('复制成功！');
      if (clipboardTimer) {
        clearTimeout(clipboardTimer);
      }
      clipboardTimer = setTimeout(() => {
        $(e.trigger).text('点击复制');
      }, 1500);
    });
  }

  function imgZoom() {
    var zoomDefaults = {
      styles: {
        zoomImage: {
          cursor          : 'zoom-out',
          position        : 'absolute',
          transition      : 'transform 300ms',
          transform       : 'translate3d(0, 0, 0) scale(1)',
          transformOrigin : 'center center',
          willChange      : 'transform, top, left'
        },
        zoomContainer: {
          position        : 'fixed',
          top             : 0,
          right           : 0,
          bottom          : 0,
          left            : 0,
          zIndex          : 1024,
        },
        overlay: {
          position        : 'absolute',
          top             : 0,
          right           : 0,
          bottom          : 0,
          left            : 0,
          backgroundColor : '#FFF',
          opacity         : 0,
          transition      : 'opacity 300ms',
        },
        btn: {
          position        : 'absolute',
          bottom          : 12,
          right           : 12,
          padding         : '4px 10px',
          border          : '1px solid #e9e9e9',
          borderRadius    : 2,
          fontSize        : 12,
          color           : '#999',
        },
        btnHover: {
          color           : '#666',
        },
      },
    };
    var zoomOriginImage = null;
    var zoomTimer = null;
    // zoom in
    $('.markdown').on('click', 'img', function() {
      zoomOriginImage = $(this).get(0);

      var $wrap = $('<div />');
      $wrap.css(zoomDefaults.styles.zoomContainer);

      var $overlay = $('<div class="overlay" />');
      $overlay.css(zoomDefaults.styles.overlay);

      var $img = $(this).clone();
      $img.css(getImageStyle(zoomOriginImage, false));

      var $btn = $('<a target="_blank" />');
      $btn.attr('href', $img.attr('src')).text('查看原图');
      $btn.css(zoomDefaults.styles.btn);

      $btn.hover(function() {
        $(this).css(zoomDefaults.styles.btnHover);
      }, function() {
        $(this).css(zoomDefaults.styles.btn);
      });

      $wrap.append($overlay).append($img).append($btn);
      $('#zoom-img').append($wrap);

      // transition
      $overlay.css({
        opacity: 1,
      });
      $img.css(getImageStyle($img.get(0), true));
    });

    // zoom out
    $('#zoom-img').on('click', function() {
      var $zoom = $(this);
      $zoom.find('img').css(getImageStyle(zoomOriginImage, false));
      $zoom.find('.overlay').css({
        opacity: 0
      });

      if (zoomTimer) {
        clearTimeout(zoomTimer);
      }
      zoomTimer = setTimeout(function() {
        $zoom.html('');
        zoomOriginImage = null;
      }, 150);
    });

    $(window).on('scroll', function() {
      $('#zoom-img').html('');
      zoomOriginImage = null;
    });

    $(window).on('resize', function() {
      if ($('#zoom-img img').length) {
        $('#zoom-img img').css(getImageStyle(zoomOriginImage, true));
      }
    });

    function getImageStyle(image, isZoom) {
      var imageOffset = image.getBoundingClientRect();
      var top = imageOffset.top;
      var left = imageOffset.left;
      var width = image.width;
      var height = image.height;

      var style = {
        top: top,
        left: left,
         width,
        height: height
      };

      if (!isZoom) {
        return Object.assign({}, zoomDefaults.styles.zoomImage, style);
      }

      // Get the the coords for center of the viewport
      var viewportX = window.innerWidth / 2;
      var viewportY = window.innerHeight / 2;

      // Get the coords for center of the original image
      var imageCenterX = imageOffset.left + image.width / 2;
      var imageCenterY = imageOffset.top + image.height / 2;

      // Get offset amounts for image coords to be centered on screen
      var translateX = viewportX - imageCenterX;
      var translateY = viewportY - imageCenterY;

      // Figure out how much to scale the image so it doesn't overflow the screen
      var scale = getScale(width, height);

      var zoomStyle = {
        transform: 'translate3d(' + translateX + 'px, ' + translateY + 'px, 0) scale(' + scale + ')',
      }

      return Object.assign({}, zoomDefaults.styles.zoomImage, style, zoomStyle);
    }

    function getScale(width, height) {
      var totalMargin = 40;
      var scaleX = window.innerWidth / (width + totalMargin);
      var scaleY = window.innerHeight / (height + totalMargin);
      return Math.min(scaleX, scaleY);
    }
  }

  function scrollTop() {
    // scroll top
    $(window).on('load scroll', function() {
      if ($(window).scrollTop() > 400) {
        $('#scroll-top').addClass('visible');
      } else {
        $('#scroll-top').removeClass('visible');
      }
    })
    $('#scroll-top').on('click', function(e) {
      e.preventDefault();
      $('html, body').animate({
        scrollTop: 0
      }, 150);
    })
  }

  function scrollToAnchor(offsetTop) {
    // anchor click scroll to element
    var breadcrumbHeight = $('.breadcrumb').outerHeight();
    var offsetTop = 0;
    if (SITE_SLUG === 'open') {
      offsetTop = breadcrumbHeight;
    } else {
      offsetTop = $('.page-title').outerHeight() + breadcrumbHeight;
    }

    // 锚点处理
    $('.markdown').on('click', 'a', function(e) {
      var href = $(this).attr('href');
      if (/^#/.test(href)) {
        e.preventDefault();
        if ($(href).length) {
          var top = $(href).offset().top - offsetTop;
          $('html, body').scrollTop(top);
        }
      }
    });
  }

  function toggleSearchForm() {
    // header search
    $('.header').on('click', '.btn-search', function(e) {
      e.preventDefault();
      $('.header .user-menu').addClass('search-open');
      $('.header .search-form input').focus();
    })
    $('html').on('click', function(e) {
      $('.header .user-menu.search-open').removeClass('search-open');
    })
    $('html').on('click', '.header .search-form', function(e) {
      e.stopPropagation();
    })
  }
}());