Skip to content

Commit 941bf1f

Browse files
neogeekneogeek
authored
Merge pull request #145 from docsbydoxdox/feature/filter-methods-input
[feat] Added filter methods functionality to bootstrap renderer.
2 parents 7a8de78 + 6fa6254 commit 941bf1f

File tree

2 files changed

+82
-6
lines changed

2 files changed

+82
-6
lines changed

‎packages/doxdox-renderer-bootstrap/src/__snapshots__/index.test.ts.snap

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@ exports[`bootstrap render 1`] = `
5858
color: #eee;
5959
text-decoration: none;
6060
}
61+
62+
.hidden {
63+
display: none;
64+
}
6165
</style>
6266
</head>
6367
<body>
@@ -72,15 +76,22 @@ exports[`bootstrap render 1`] = `
7276
<div class=\\"container\\">
7377
<div class=\\"row\\">
7478
<nav class=\\"p-5 col-md-3\\">
79+
<form>
80+
<div class=\\"form-group mb-3\\">
81+
<input type=\\"search\\" class=\\"form-control\\" id=\\"filter-methods\\" name=\\"q\\" placeholder=\\"Filter methods...\\"
82+
autocomplete=\\"off\\">
83+
</div>
84+
</form>
85+
7586
<p><a href=\\"#directory/index.js\\" class=\\"file-name\\"><b>directory/index.js</b></a></p>
7687
<ul class=\\"list-unstyled ml-0\\">
77-
<li class=\\"method-name\\"><a href=\\"#index-js-methodname\\" class=\\"\\">methodName</a></li>
88+
<li class=\\"method-name\\" data-method-name=\\"methodName\\"><a href=\\"#index-js-methodname\\" class=\\"\\">methodName</a></li>
7889
</ul>
7990
</nav>
8091
8192
<main class=\\"p-5 col-md-9\\">
8293
<a name=\\"directory/index.js\\" />
83-
<div class=\\"mb-5\\"><a name=\\"index-js-methodname\\" />
94+
<div class=\\"mb-5\\" data-method-name=\\"methodName\\"><a name=\\"index-js-methodname\\" />
8495
8596
<h2 class=\\"method-name\\">
8697
<a href=\\"#index-js-methodname\\" class=\\"method-permalink\\" aria-label=\\"Permalink\\">#</a>
@@ -137,6 +148,32 @@ exports[`bootstrap render 1`] = `
137148
</p>
138149
</div>
139150
</footer>
151+
<script>
152+
const params = new URLSearchParams(window.location.search);
153+
154+
const q = params.get('q');
155+
156+
const filterInput = document.querySelector('#filter-methods');
157+
158+
const methods = Array.from(document.querySelectorAll('[data-method-name]'));
159+
160+
const filterMethods = keyword => {
161+
const keywordsPattern = RegExp(keyword.trim().split(/[^A-Za-z]+/).join('|'), 'i')
162+
163+
const matched = methods.filter(method => method.dataset.methodName.match(keywordsPattern));
164+
const notMatched = methods.filter(method => !method.dataset.methodName.match(keywordsPattern));
165+
166+
matched.map(match => match.classList.remove('hidden'));
167+
notMatched.map(match => match.classList.add('hidden'));
168+
}
169+
170+
filterInput.addEventListener('keyup', e => filterMethods(e.target.value));
171+
filterInput.addEventListener('search', e => filterMethods(e.target.value));
172+
173+
filterInput.value = q;
174+
175+
filterMethods(q);
176+
</script>
140177
</body>
141178
</html>
142179
"

‎packages/doxdox-renderer-bootstrap/src/index.ts

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ const md = new MarkdownIt({
1515
}</div>`
1616
});
1717

18-
const renderMethod = (method: Method) => `<div class="mb-5"><a name="${
19-
method.slug
20-
}" />
18+
const renderMethod = (method: Method) => `<div class="mb-5" data-method-name="${
19+
method.name
20+
}"><a name="${method.slug}" />
2121
2222
<h2 class="method-name">
2323
<a href="#${
@@ -72,7 +72,9 @@ const renderFileNav = (file: File) => `<p><a href="#${
7272
${file.methods
7373
.map(
7474
method =>
75-
`<li class="method-name"><a href="#${method.slug}" class="${
75+
`<li class="method-name" data-method-name="${
76+
method.name
77+
}"><a href="#${method.slug}" class="${
7678
method.private ? 'text-muted' : ''
7779
}">${method.name}</a></li>`
7880
)
@@ -140,6 +142,10 @@ export default async (doc: Doc): Promise<string> => `<!DOCTYPE html>
140142
color: #eee;
141143
text-decoration: none;
142144
}
145+
146+
.hidden {
147+
display: none;
148+
}
143149
</style>
144150
</head>
145151
<body>
@@ -162,6 +168,13 @@ export default async (doc: Doc): Promise<string> => `<!DOCTYPE html>
162168
<div class="container">
163169
<div class="row">
164170
<nav class="p-5 col-md-3">
171+
<form>
172+
<div class="form-group mb-3">
173+
<input type="search" class="form-control" id="filter-methods" name="q" placeholder="Filter methods..."
174+
autocomplete="off">
175+
</div>
176+
</form>
177+
165178
${doc.files
166179
.filter(file => file.methods.length)
167180
.map(file => renderFileNav(file))
@@ -189,6 +202,32 @@ export default async (doc: Doc): Promise<string> => `<!DOCTYPE html>
189202
</p>
190203
</div>
191204
</footer>
205+
<script>
206+
const params = new URLSearchParams(window.location.search);
207+
208+
const q = params.get('q');
209+
210+
const filterInput = document.querySelector('#filter-methods');
211+
212+
const methods = Array.from(document.querySelectorAll('[data-method-name]'));
213+
214+
const filterMethods = keyword => {
215+
const keywordsPattern = RegExp(keyword.trim().split(/[^A-Za-z]+/).join('|'), 'i')
216+
217+
const matched = methods.filter(method => method.dataset.methodName.match(keywordsPattern));
218+
const notMatched = methods.filter(method => !method.dataset.methodName.match(keywordsPattern));
219+
220+
matched.map(match => match.classList.remove('hidden'));
221+
notMatched.map(match => match.classList.add('hidden'));
222+
}
223+
224+
filterInput.addEventListener('keyup', e => filterMethods(e.target.value));
225+
filterInput.addEventListener('search', e => filterMethods(e.target.value));
226+
227+
filterInput.value = q;
228+
229+
filterMethods(q);
230+
</script>
192231
</body>
193232
</html>
194233
`;

0 commit comments

Comments
 (0)