mirror of
https://github.com/YMFE/yapi.git
synced 2025-01-06 12:45:22 +08:00
271 lines
8.8 KiB
JavaScript
271 lines
8.8 KiB
JavaScript
|
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');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// $('code').each(function(i, block) {
|
|||
|
|
// if (block.innerHTML.indexOf('\n') != -1) {
|
|||
|
|
// var pn = block.parentNode;
|
|||
|
|
// if (pn.tagName.toUpperCase() == 'PRE') {
|
|||
|
|
// try {
|
|||
|
|
// hljs.highlightBlock(block);
|
|||
|
|
// } catch(e) {}
|
|||
|
|
// } else {
|
|||
|
|
// pn.innerHTML = '<pre><code>' + block.innerHTML + '</code></pre>';
|
|||
|
|
// try {
|
|||
|
|
// hljs.highlightBlock(pn.childNodes[0].childNodes[0]);
|
|||
|
|
// } catch(e) {}
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
|
|||
|
|
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) {
|
|||
|
|
resizeSidebar();
|
|||
|
|
$contentLeftWidth = $contentLeft.width() - 1;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function resizeSidebar() {
|
|||
|
|
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');
|
|||
|
|
$('.docs-sidenav').css({
|
|||
|
|
'overflow-y': 'scroll',
|
|||
|
|
'overflow-x': 'hidden'
|
|||
|
|
});
|
|||
|
|
var barScroll = false;
|
|||
|
|
|
|||
|
|
sidebar.on('mouseover', function() {
|
|||
|
|
barScroll = true;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
sidebar.on('mouseout', function() {
|
|||
|
|
barScroll = false;
|
|||
|
|
});
|
|||
|
|
// scroll
|
|||
|
|
if ($(window).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');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|