文档的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: 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();
     })
   }
 }());