wanjia950611
/
smart-doc
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #18 from zuonidelaowang/master 

搜索功能和锚点完善
This commit is contained in:
shalousun 2019-12-18 14:51:29 +08:00 committed by GitHub
parent 7417f01f49 684517c257
commit 53e003d3a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 377 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
src/main/resources/template/Index.btl
View File

@ -9,28 +9,32 @@
<link rel="stylesheet" href="index.css?v=${version}"/>
<title>api doc</title>
</head>
<body>
<div class="book without-animation with-summary font-size-2 font-family-1">
<div class="book-summary">
<div id="book-search-input"><input type="text" placeholder="Type to search"></div>
<div id="book-search-input"><input id="search" type="text" placeholder="Type to search"></div>
<nav role="navigation">
<ul class="summary">
<li><ul id="reference">API Reference</ul></li>
<li class="divider"></li>
<%
for(api in apiDocList){
%>
<li class="chapter " data-level="${api.alias}" data-path="${api.alias}.html">
<a href="${api.alias}.html?v=${version}" target="book_iframe">${api.order}. ${api.desc}</a>
<ul class="articles">
<%
for(doc in api.list){
%>
<li class="chapter " data-level="${api.alias}" data-path="${api.alias}.html">
<a href="${api.alias}.html?v=${version}" target="book_iframe">${api.order}.${doc.order} ${doc.desc}</a></li>
<%}%>
</ul>
</li>
<%}%>
<div id="doc">
<%
for(api in apiDocList){
%>
<li class="chapter " data-level="${api.alias}" data-path="${api.alias}.html">
<a href="javascript:void(0)" onclick="go('${api.alias}', '${api.desc}');">${api.order} ${api.desc}</a>
<ul class="articles">
<%
for(doc in api.list){
%>
<li class="chapter " data-level="${api.alias}" data-path="${api.alias}.html">
<a href="javascript:void(0)" onclick="go('${api.alias}', '${doc.desc}');">${api.order}.${doc.order} ${doc.desc}</a></li>
<%}%>
</ul>
</li>
<%}%>
</div>
<%if(isNotEmpty(errorCodeList)){%>
<li class="chapter " data-level="error_code" data-path="error_code.html">
<a href="error_code.html?v=${version}" target="book_iframe">${apiDocList.~size+1}. ${errorListTitle}</a>
@ -59,13 +63,141 @@
<iframe src="${homePage}.html?v=${version}" frameborder="0" id="book_iframe" name="book_iframe" width="100%"></iframe>
</div>
</div>
<script type="text/javascript">
var api = [];
function changeFrameHeight() {
var ifm = document.getElementById("book_iframe");
ifm.height = document.documentElement.clientHeight
ifm.height = document.documentElement.clientHeight;
}
function toPage() {
var page = localStorage.getItem('page');
var title = localStorage.getItem('title');
if(page) {
var iframe = document.getElementById("book_iframe");
iframe.src = page + ".html";
var obj = iframe.contentWindow;
obj.onload = function(){
var h2 = obj.document.getElementsByTagName('h2');
for(j = 0; j < h2.length; j++) {
var dom = h2[j];
if(dom.innerText == title){
obj.scroll(0, dom.offsetTop);
break;
}
}
}
}
}
toPage();
function go(alias, desc) {
console.log(alias, desc);
var iframe = document.getElementById("book_iframe");
var page = localStorage.getItem('page');
if(page != alias){
iframe.src = alias + ".html";
}
localStorage.setItem('page', alias);
localStorage.setItem('title', desc);
setTimeout(() => {
var obj = iframe.contentWindow;
var h2 = obj.document.getElementsByTagName('h2');
for(j = 0; j < h2.length; j++) {
var dom = h2[j];
if(dom.innerText == desc){
obj.scroll(0, dom.offsetTop);
break;
}
}
}, 200)
}
changeFrameHeight();
setInterval(function(){changeFrameHeight(); }, 500);
document.onkeydown = keyDownSearch;
function keyDownSearch(e) {
var theEvent = e || window.event;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
var search = document.getElementById('search');
var searchArr = [];
<% for(api in apiDocList) { %>
searchArr.push({
alias: '${api.alias}',
order: '${api.order}',
desc: '${api.desc}',
list: []
})
api.push({
alias: '${api.alias}',
order: '${api.order}',
desc: '${api.desc}',
list: []
})
<% for(doc in api.list) { %>
api[${apiLP.dataIndex}].list.push({
order: '${doc.order}',
desc: '${doc.desc}',
});
if('${doc.desc}'.indexOf(search.value) > -1) {
searchArr[${apiLP.dataIndex}].list.push({
order: '${doc.order}',
desc: '${doc.desc}',
});
}
<%}%>
<%}%>
var searchResult = searchArr.filter(obj => obj.list.length > 0);
if(searchResult.length > 0) {
var html = '';
for(j = 0; j < searchResult.length; j++) {
html += '<li class="chapter " data-level="' + searchResult[j].alias + '" data-path="' + searchResult[j].alias + '.html">';
html += ' <a href="javascript:void(0)" onclick="go(\'' + searchResult[j].alias + '\', \'' + searchResult[j].desc + '\');">' + searchResult[j].order + ' ' + searchResult[j].desc + '</a>';
html += ' <ul class="articles">';
var doc = searchResult[j].list;
for(m = 0; m < doc.length; m++) {
html += ' <li class="chapter " data-level="' + searchResult[j].alias + '" data-path="' + searchResult[j].alias + '.html">';
html += ' <a href="javascript:void(0)" onclick="go(\'' + searchResult[j].alias + '\', \'' + doc[m].desc + '\');">' + searchResult[j].order + '.' + doc[m].order + ' ' + doc[m].desc + '</a></li>';
html += ' </li>';
}
html += '</ul>';
}
document.getElementById('doc').innerHTML = html;
} else {
if(search.value == '') {
var html = '';
for(j = 0; j < api.length; j++) {
html += '<li class="chapter " data-level="' + api[j].alias + '" data-path="' + api[j].alias + '.html">';
html += ' <a href="javascript:void(0)" onclick="go(\'' + api[j].alias + '\', \'' + api[j].desc + '\');">' + api[j].order + ' ' +api[j].desc + '</a>';
html += ' <ul class="articles">';
var doc = api[j].list;
for(m = 0; m < doc.length; m++) {
html += ' <li class="chapter " data-level="' + searchResult[j].alias + '" data-path="' + searchResult[j].alias + '.html">';
html += ' <a href="javascript:void(0)" onclick="go(\'' + api[j].alias + '\', \'' + doc[m].desc + '\');">' + searchResult[j].order + '.' + doc[m].order + ' ' + doc[m].desc + '</a></li>';
html += ' </li>';
}
html += '</ul>';
}
document.getElementById('doc').innerHTML = html;
} else {
document.getElementById('doc').innerHTML = '';
}
}
}
}
</script>
</body>
</html>

229
src/main/resources/template/index.css
View File

@ -1 +1,228 @@
.book-summary{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;position:absolute;top:0;left:-300px;bottom:0;z-index:1;overflow-y:auto;width:300px;color:#364149;background:#fafafa;border-right:1px solid rgba(0,0,0,.07);-webkit-transition:left 250ms ease;-moz-transition:left 250ms ease;-o-transition:left 250ms ease;transition:left 250ms ease}.book-summary ul.summary{list-style:none;margin:0;padding:0;-webkit-transition:top .5s ease;-moz-transition:top .5s ease;-o-transition:top .5s ease;transition:top .5s ease}.book-summary ul.summary li{list-style:none}.book-summary ul.summary li.header{padding:10px 15px;padding-top:20px;text-transform:uppercase;color:#939da3}.book-summary ul.summary li.divider{height:1px;margin:7px 0;overflow:hidden;background:rgba(0,0,0,.07)}.book-summary ul.summary li i.fa-check{display:none;position:absolute;right:9px;top:16px;font-size:9px;color:#3c3}.book-summary ul.summary li.done>a{color:#364149;font-weight:400}.book-summary ul.summary li.done>a i{display:inline}.book-summary ul.summary li a,.book-summary ul.summary li span{display:block;padding:10px 15px;border-bottom:0;color:#364149;background:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;position:relative}.book-summary ul.summary li a:hover{text-decoration:underline}.book-summary ul.summary li a:focus{outline:0}.book-summary ul.summary li.active>a{color:#008cff;background:0;text-decoration:none}.book-summary ul.summary li ul{padding-left:20px}@media(max-width:600px){.book-summary{width:calc(100% - 60px);bottom:0;left:-100%}}.book.with-summary .book-summary{left:0}.book.without-animation .book-summary{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important}.book{position:relative;width:100%;height:100%}@media(min-width:600px){.book.with-summary .book-body{left:300px}}@media(max-width:600px){.book.with-summary{overflow:hidden}.book.with-summary .book-body{-webkit-transform:translate(calc(100% - 60px),0);-moz-transform:translate(calc(100% - 60px),0);-ms-transform:translate(calc(100% - 60px),0);-o-transform:translate(calc(100% - 60px),0);transform:translate(calc(100% - 60px),0)}}.book.without-animation .book-body{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important}.book-body{position:absolute;top:0;right:0;left:0;bottom:0;overflow-y:auto;color:#000;background:#fff;-webkit-transition:left 250ms ease;-moz-transition:left 250ms ease;-o-transition:left 250ms ease;transition:left 250ms ease}@media(max-width:1240px){.book-body{-webkit-transition:-webkit-transform 250ms ease;-moz-transition:-moz-transform 250ms ease;-o-transition:-o-transform 250ms ease;transition:transform 250ms ease;padding-bottom:20px}}#book-search-input{padding:6px;background:0;transition:top .5s ease;border-bottom:1px solid rgba(0,0,0,.07);border-top:1px solid rgba(0,0,0,.07);margin-bottom:10px;margin-top:-1px}#book-search-input input,#book-search-input input:focus,#book-search-input input:hover{width:100%;background:0;border:1px solid transparent;box-shadow:none;outline:0;line-height:22px;padding:7px 7px;color:inherit}a{text-decoration:none}body,html{height:100%}html{font-size:62.5%}body{margin:0}body{text-rendering:optimizeLegibility;font-smoothing:antialiased;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;letter-spacing:.2px;text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}#reference{padding-top:10px;padding-bottom:10px;padding-left:15px}.footer_link{margin-bottom:45px}
.book-summary {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: absolute;
top: 0;
left: -300px;
bottom: 0;
z-index: 1;
overflow-y: auto;
width: 300px;
color: #364149;
background: #fafafa;
border-right: 1px solid rgba(0, 0, 0, .07);
-webkit-transition: left 250ms ease;
-moz-transition: left 250ms ease;
-o-transition: left 250ms ease;
transition: left 250ms ease
}
.book-summary ul.summary {
list-style: none;
margin: 0;
padding: 0;
-webkit-transition: top .5s ease;
-moz-transition: top .5s ease;
-o-transition: top .5s ease;
transition: top .5s ease
}
.book-summary ul.summary li {
list-style: none
}
.book-summary ul.summary li.header {
padding: 10px 15px;
padding-top: 20px;
text-transform: uppercase;
color: #939da3
}
.book-summary ul.summary li.divider {
height: 1px;
margin: 7px 0;
overflow: hidden;
background: rgba(0, 0, 0, .07)
}
.book-summary ul.summary li i.fa-check {
display: none;
position: absolute;
right: 9px;
top: 16px;
font-size: 9px;
color: #3c3
}
.book-summary ul.summary li.done > a {
color: #364149;
font-weight: 400
}
.book-summary ul.summary li.done > a i {
display: inline
}
.book-summary ul.summary li a, .book-summary ul.summary li span {
display: block;
padding: 10px 15px;
border-bottom: 0;
color: #364149;
background: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
position: relative
}
.book-summary ul.summary li a:hover {
text-decoration: underline
}
.book-summary ul.summary li a:focus {
outline: 0
}
.book-summary ul.summary li.active > a {
color: #008cff;
background: 0;
text-decoration: none
}
.book-summary ul.summary li ul {
padding-left: 20px
}
@media (max-width: 600px) {
.book-summary {
width: calc(100% - 60px);
bottom: 0;
left: -100%
}
}
.book.with-summary .book-summary {
left: 0
}
.book.without-animation .book-summary {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important
}
.book {
position: relative;
width: 100%;
height: 100%
}
@media (min-width: 600px) {
.book.with-summary .book-body {
left: 300px
}
}
@media (max-width: 600px) {
.book.with-summary {
overflow: hidden
}
.book.with-summary .book-body {
-webkit-transform: translate(calc(100% - 60px), 0);
-moz-transform: translate(calc(100% - 60px), 0);
-ms-transform: translate(calc(100% - 60px), 0);
-o-transform: translate(calc(100% - 60px), 0);
transform: translate(calc(100% - 60px), 0)
}
}
.book.without-animation .book-body {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important
}
.book-body {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow-y: hidden;
color: #000;
background: #fff;
-webkit-transition: left 250ms ease;
-moz-transition: left 250ms ease;
-o-transition: left 250ms ease;
transition: left 250ms ease
}
@media (max-width: 1240px) {
.book-body {
-webkit-transition: -webkit-transform 250ms ease;
-moz-transition: -moz-transform 250ms ease;
-o-transition: -o-transform 250ms ease;
transition: transform 250ms ease;
padding-bottom: 20px
}
}
#book-search-input {
padding: 6px;
background: 0;
transition: top .5s ease;
border-bottom: 1px solid rgba(0, 0, 0, .07);
border-top: 1px solid rgba(0, 0, 0, .07);
margin-bottom: 10px;
margin-top: -1px
}
#book-search-input input, #book-search-input input:focus, #book-search-input input:hover {
width: 100%;
background: 0;
border: 1px solid transparent;
box-shadow: none;
outline: 0;
line-height: 22px;
padding: 7px 7px;
color: inherit
}
a {
text-decoration: none
}
body, html {
height: 100%
}
html {
font-size: 62.5%
}
body {
margin: 0
}
body {
text-rendering: optimizeLegibility;
font-smoothing: antialiased;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
letter-spacing: .2px;
text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
#reference {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px
}
.footer_link {
margin-bottom: 45px
}