var EXAMPLE_MAX_HEIGHT = 98, DEFAULT_SHOW_PARAMS = 5; $(document).ready(function() { // 移动端导航 var $openPanel = $('.open-panel'); var $contentLeft = $('.content-left'); var $contentLeftWidth = $contentLeft.width() - 1; var $ydoc = $('.ydoc'); var $mask = $('.mask'); var $versionSelector = $('.version-selector'); var $versionMask = $('.m-version-mask'); var isPanelHide = true; var winWidth = $(window).width(); var h2 = $('.content-right').find('h2'); var h3 = $('.content-right').find('h3'); var a = $('.content-left').find('a'); var lis = $contentLeft.find('li'); var titles = []; var menus = []; $ydoc.addClass('hidden'); if (isWechat() && $contentLeft[0]) { $ydoc.addClass('off-webkit-scroll'); } for (var i = 0; i < a.length; i++) { menus.push({ name: $(a[i]).attr('href').split('#')[1], offsetTop: $(a[i]).offset().top - 77, parent: $(a[i]).parent() }) } for (var i = 0; i < h2.length; i++) { titles.push({ name: h2[i].id, jq: $(h2[i]), offsetTop: $(h2[i]).offset().top }) } for (var i = 0; i < h3.length; i++) { titles.push({ name: h3[i].id, jq: $(h3[i]), offsetTop: $(h3[i]).offset().top }) } titles.sort(sortAsOffset('offsetTop')); $openPanel.on('click', function() { if (isPanelHide) { // 点击弹出panel isPanelHide = false; $ydoc.addClass('hidden'); $mask.show(); setTimeout(function() { $mask.addClass('show'); }, 50) $openPanel.css({ 'transform': 'translateX(-' + $contentLeftWidth + 'px)' }) $contentLeft.css({ 'transform': 'translateX(-' + $contentLeftWidth + 'px)' }) } else { // 点击隐藏panel isPanelHide = true; $ydoc.removeClass('hidden'); $mask.removeClass('show'); setTimeout(function() { $mask.hide(); }, 400) $openPanel.css({ 'transform': 'translateX(0px)' }) $contentLeft.css({ 'transform': 'translateX(0px)' }) } var scrollTop = $ydoc.scrollTop(); // 遍历主页面的标题,找到当前窗口顶部的标题 for (var i = 0; i < titles.length; i++) { if (titles[i].offsetTop > scrollTop) { // 遍历侧栏,找到对应的标题 for (var j in menus) { if (menus[j].name == titles[i].name) { lis.removeClass('active'); menus[j].parent.addClass('active'); $('.docs-sidenav').scrollTop(menus[j].offsetTop); return; } } return; } } }); $ydoc.removeClass('hidden'); $ydoc.on('scroll', function() { sessionStorage.setItem('offsetTop', $ydoc.scrollTop()); }) // 待元素获获取offsetTop值之后再设置ydoc的offsetTop if (sessionStorage.offsetTop) { $ydoc.scrollTop(sessionStorage.offsetTop); } // $openPanel.trigger('click'); $mask.on('click', function() { if (!isPanelHide) { $openPanel.click(); } }); // PC端导航 $('.navbar-toggle').click(function() { $(this).next(".ydoc-nav").toggle(); }); $('.docs-sidenav li').click(function(e) { $('.docs-sidenav li').removeClass('active'); $(this).addClass('active'); if (!isPanelHide) { $openPanel.trigger('click'); } }); $ydoc.click(function(e) { if ($(e.target).data('target') !== 'version') { $versionMask.hide(); } }) $versionSelector.click(function(e) { $versionMask.show(); console.log('e'); }); $('.markdown-body pre').map(function(i, item) { $(item).addClass('ydoc-example'); }); var winHeight = $(window).height() - 44, sidebar = $('.docs-sidebar'); var docSideNav = $('.docs-sidenav'); if (winWidth > 767) { docSideNav.width($contentLeftWidth); } if (sidebar.height() > winHeight) { sidebar.css('max-height', winHeight + 'px'); $('.docs-sidenav').css('max-height', winHeight + 'px'); if (winWidth < 768) { $('.docs-sidenav').css({ 'overflow-x': 'hidden' }); } var activeMenu, barScroll = false; sidebar.on('mouseover', function() { barScroll = true; }); sidebar.on('mouseout', function() { barScroll = false; }); }; $(window).on('scroll', function(e) { if ($(this).scrollTop() > ($('.footer').offset().top - $(window).height())) { winHeight = $(window).height() - $('.footer').outerHeight() - 44; sidebar.css('max-height', winHeight + 'px'); $('.docs-sidenav').css('max-height', winHeight + 'px'); } else { winHeight = $(window).height() - 44; sidebar.css('max-height', winHeight + 'px'); $('.docs-sidenav').css('max-height', winHeight + 'px'); } if (!barScroll) { var activeItem = $('.docs-sidebar li.active a'); if (activeItem.length) { if (!activeMenu || (activeMenu.attr('href') != activeItem.attr('href'))) { activeMenu = activeItem; var top = activeMenu.offset().top - sidebar.offset().top; if (top < 0) { //sidebar.scrollTop(sidebar.scrollTop() + top); $('.docs-sidenav').scrollTop($('.docs-sidenav').scrollTop() + top); } else if (top > winHeight - 88) { //sidebar.scrollTop(sidebar.scrollTop() + top - winHeight + 44); $('.docs-sidenav').scrollTop($('.docs-sidenav').scrollTop() + top - winHeight + 88); } } } } }); // 退出全屏浏览器窗口大小改变,不触发resize $(window).on('resize', function(e) { $contentLeftWidth = $contentLeft.width() - 1; }); function sortAsOffset(propertyName) { return function(obj1, obj2) { var val1 = obj1[propertyName]; var val2 = obj2[propertyName]; if (val1 < val2) { return -1; } else if (val1 > val2) { return 1; } else { return 0; } } } function isWechat() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } else { return false; } } });