Skip to content

Commit 6961fe7

Browse files
Marcin Sągollinawolf
Marcin Sągol
authored and
linawolf
committed
[TASK] Allow searching in single manual scope
This commit extends the documentation search form with a new select field where user can choose if he wants to search either in the whoel documentation or only single one - the one he sees atm. The single manual scope is determined by its path (or slug). For example, if the user is on this page: /m/typo3/tutorial-getting-started/main/en-us/Installation/Install.html the scope will be `m/typo3/tutorial-getting-started/main/en-us` and this value is passed through the search form to the search results page. This scope value is added to the search form by the JavaScript code, which checks the `window.location.pathname` value and matches it against regular expression pattern to verify if it points to the one of the supported documentation paths. There were also small updates to styles and search form structure on small screens.
1 parent 95b5dd0 commit 6961fe7

File tree

34 files changed

+254
-143
lines changed

34 files changed

+254
-143
lines changed

‎packages/typo3-docs-theme/assets/js/search-form.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
(() => {
2+
window.addEventListener("load", () => {
3+
const SELECTOR_SEARCH_SCOPE_SELECT_LIST = 'searchscope';
4+
const regex = /^\/(c|m|p|h|other)\/[A-Za-z0-9\-_]+\/[A-Za-z0-9\-_]+\/[A-Za-z0-9\-.]+\/[A-Za-z0-9\-]+\/(Changelog\/[A-Za-z0-9\-.]+\/)?/;
5+
const path = window.location.pathname;
6+
const match = path.match(regex);
7+
const manualPath = match ? match[0] : null;
8+
9+
if (manualPath) {
10+
const searchScopeSelectList = document.getElementById(SELECTOR_SEARCH_SCOPE_SELECT_LIST);
11+
const newOption = document.createElement('option');
12+
newOption.value = manualPath;
13+
newOption.text = 'Search current';
14+
// by default the first option (Search all) is selected
15+
// newOption.setAttribute('selected', 'selected');
16+
searchScopeSelectList.add(newOption);
17+
}
18+
});
19+
})();

‎packages/typo3-docs-theme/assets/sass/layout/_logo.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.logo {
2-
display: flex;
2+
display: inline-flex;
33
height: 70px;
44
align-items: center;
55
}

‎packages/typo3-docs-theme/assets/sass/layout/_search.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.search__scope {
2+
flex: .4 !important;
3+
}

‎packages/typo3-docs-theme/assets/sass/theme.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
@import 'layout/logo';
5656
@import 'layout/navigation/main_navigation';
5757
@import 'layout/navigation/version_switcher';
58+
@import 'layout/search';
5859
@import 'layout/structure';
5960

6061
// misc

‎packages/typo3-docs-theme/resources/public/css/theme.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24685,7 +24685,7 @@ dl.field-list ul {
2468524685
}
2468624686
}
2468724687
.logo {
24688-
display: flex;
24688+
display: inline-flex;
2468924689
height: 70px;
2469024690
align-items: center;
2469124691
}
@@ -24909,6 +24909,10 @@ a.toc-title-project:hover {
2490924909
border-bottom-color: inherit;
2491024910
}
2491124911

24912+
.search__scope {
24913+
flex: 0.4 !important;
24914+
}
24915+
2491224916
.page {
2491324917
display: flex;
2491424918
flex-direction: column;

‎packages/typo3-docs-theme/resources/public/js/theme.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/typo3-docs-theme/resources/template/structure/layoutParts/pageHeader.html.twig

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,21 @@
1010
<div class="page-header">
1111
<div class="page-header-inner">
1212
<div class="row">
13-
<div class="col-sm-6 col-lg-7">
13+
<div class="col-sm-3 col-md-4 col-lg-6">
1414
<a class="logo" href="https://docs.typo3.org/" title="TYPO3 Documentation">
1515
<img alt="TYPO3 Logo" class="logo-image" src="{{ getRelativePath('_resources/img/typo3-logo.svg') }}" width="484" height="130">
1616
</a>
1717
</div>
18-
<div class="col-sm-6 col-lg-5">
18+
<div class="col-sm-9 col-md-8 col-lg-6">
1919
<search role="search">
2020
<form action="https://docs.typo3.org/search/search" id="global-search-form" method="get">
21-
<div class="sr-only"><label for="globalsearchinput">Search all TYPO3 Documentation</label></div>
21+
<div class="sr-only"><label for="globalsearchinput">TYPO3 documentation...</label></div>
2222
<div class="input-group mb-3 mt-sm-3">
23-
<input autocomplete="off" class="form-control shadow-none" id="globalsearchinput" name="q" placeholder="Search all TYPO3 documentation" type="text" value="">
24-
<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>&nbsp;Search</button>
23+
<select class="form-select search__scope" id="searchscope" name="scope">
24+
<option value="">Search all</option>
25+
</select>
26+
<input autocomplete="off" class="form-control shadow-none" id="globalsearchinput" name="q" placeholder="TYPO3 documentation..." type="text" value="">
27+
<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>&nbsp;<span class="d-none d-md-inline">Search</span></button>
2528
</div>
2629
</form>
2730
</search>

‎tests/Integration/tests-full/edit-on-github-directory/expected/Index.html

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,18 +34,21 @@
3434
<div class="page-header">
3535
<div class="page-header-inner">
3636
<div class="row">
37-
<div class="col-sm-6 col-lg-7">
37+
<div class="col-sm-3 col-md-4 col-lg-6">
3838
<a class="logo" href="https://docs.typo3.org/" title="TYPO3 Documentation">
3939
<img alt="TYPO3 Logo" class="logo-image" src="_resources/img/typo3-logo.svg" width="484" height="130">
4040
</a>
4141
</div>
42-
<div class="col-sm-6 col-lg-5">
42+
<div class="col-sm-9 col-md-8 col-lg-6">
4343
<search role="search">
4444
<form action="https://docs.typo3.org/search/search" id="global-search-form" method="get">
45-
<div class="sr-only"><label for="globalsearchinput">Search all TYPO3 Documentation</label></div>
45+
<div class="sr-only"><label for="globalsearchinput">TYPO3 documentation...</label></div>
4646
<div class="input-group mb-3 mt-sm-3">
47-
<input autocomplete="off" class="form-control shadow-none" id="globalsearchinput" name="q" placeholder="Search all TYPO3 documentation" type="text" value="">
48-
<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>&nbsp;Search</button>
47+
<select class="form-select search__scope" id="searchscope" name="scope">
48+
<option value="">Search all</option>
49+
</select>
50+
<input autocomplete="off" class="form-control shadow-none" id="globalsearchinput" name="q" placeholder="TYPO3 documentation..." type="text" value="">
51+
<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>&nbsp;<span class="d-none d-md-inline">Search</span></button>
4952
</div>
5053
</form>
5154
</search>

‎tests/Integration/tests-full/edit-on-github/expected/index.html

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,18 +35,21 @@
3535
<div class="page-header">
3636
<div class="page-header-inner">
3737
<div class="row">
38-
<div class="col-sm-6 col-lg-7">
38+
<div class="col-sm-3 col-md-4 col-lg-6">
3939
<a class="logo" href="https://docs.typo3.org/" title="TYPO3 Documentation">
4040
<img alt="TYPO3 Logo" class="logo-image" src="_resources/img/typo3-logo.svg" width="484" height="130">
4141
</a>
4242
</div>
43-
<div class="col-sm-6 col-lg-5">
43+
<div class="col-sm-9 col-md-8 col-lg-6">
4444
<search role="search">
4545
<form action="https://docs.typo3.org/search/search" id="global-search-form" method="get">
46-
<div class="sr-only"><label for="globalsearchinput">Search all TYPO3 Documentation</label></div>
46+
<div class="sr-only"><label for="globalsearchinput">TYPO3 documentation...</label></div>
4747
<div class="input-group mb-3 mt-sm-3">
48-
<input autocomplete="off" class="form-control shadow-none" id="globalsearchinput" name="q" placeholder="Search all TYPO3 documentation" type="text" value="">
49-
<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>&nbsp;Search</button>
48+
<select class="form-select search__scope" id="searchscope" name="scope">
49+
<option value="">Search all</option>
50+
</select>
51+
<input autocomplete="off" class="form-control shadow-none" id="globalsearchinput" name="q" placeholder="TYPO3 documentation..." type="text" value="">
52+
<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>&nbsp;<span class="d-none d-md-inline">Search</span></button>
5053
</div>
5154
</form>
5255
</search>

‎tests/Integration/tests-full/edit-on-github/expected/page1.html

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,21 @@
3636
<div class="page-header">
3737
<div class="page-header-inner">
3838
<div class="row">
39-
<div class="col-sm-6 col-lg-7">
39+
<div class="col-sm-3 col-md-4 col-lg-6">
4040
<a class="logo" href="https://docs.typo3.org/" title="TYPO3 Documentation">
4141
<img alt="TYPO3 Logo" class="logo-image" src="_resources/img/typo3-logo.svg" width="484" height="130">
4242
</a>
4343
</div>
44-
<div class="col-sm-6 col-lg-5">
44+
<div class="col-sm-9 col-md-8 col-lg-6">
4545
<search role="search">
4646
<form action="https://docs.typo3.org/search/search" id="global-search-form" method="get">
47-
<div class="sr-only"><label for="globalsearchinput">Search all TYPO3 Documentation</label></div>
47+
<div class="sr-only"><label for="globalsearchinput">TYPO3 documentation...</label></div>
4848
<div class="input-group mb-3 mt-sm-3">
49-
<input autocomplete="off" class="form-control shadow-none" id="globalsearchinput" name="q" placeholder="Search all TYPO3 documentation" type="text" value="">
50-
<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>&nbsp;Search</button>
49+
<select class="form-select search__scope" id="searchscope" name="scope">
50+
<option value="">Search all</option>
51+
</select>
52+
<input autocomplete="off" class="form-control shadow-none" id="globalsearchinput" name="q" placeholder="TYPO3 documentation..." type="text" value="">
53+
<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>&nbsp;<span class="d-none d-md-inline">Search</span></button>
5154
</div>
5255
</form>
5356
</search>

‎tests/Integration/tests-full/edit-on-github/expected/subpages/index.html

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,21 @@
3636
<div class="page-header">
3737
<div class="page-header-inner">
3838
<div class="row">
39-
<div class="col-sm-6 col-lg-7">
39+
<div class="col-sm-3 col-md-4 col-lg-6">
4040
<a class="logo" href="https://docs.typo3.org/" title="TYPO3 Documentation">
4141
<img alt="TYPO3 Logo" class="logo-image" src="../_resources/img/typo3-logo.svg" width="484" height="130">
4242
</a>
4343
</div>
44-
<div class="col-sm-6 col-lg-5">
44+
<div class="col-sm-9 col-md-8 col-lg-6">
4545
<search role="search">
4646
<form action="https://docs.typo3.org/search/search" id="global-search-form" method="get">
47-
<div class="sr-only"><label for="globalsearchinput">Search all TYPO3 Documentation</label></div>
47+
<div class="sr-only"><label for="globalsearchinput">TYPO3 documentation...</label></div>
4848
<div class="input-group mb-3 mt-sm-3">
49-
<input autocomplete="off" class="form-control shadow-none" id="globalsearchinput" name="q" placeholder="Search all TYPO3 documentation" type="text" value="">
50-
<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>&nbsp;Search</button>
49+
<select class="form-select search__scope" id="searchscope" name="scope">
50+
<option value="">Search all</option>
51+
</select>
52+
<input autocomplete="off" class="form-control shadow-none" id="globalsearchinput" name="q" placeholder="TYPO3 documentation..." type="text" value="">
53+
<button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>&nbsp;<span class="d-none d-md-inline">Search</span></button>
5154
</div>
5255
</form>
5356
</search>

0 commit comments

Comments
 (0)