Skip to content

Commit e11127d

Browse files
aigarskadikisaigarskadikis
committed
next
1 parent 6ad5e46 commit e11127d

File tree

5 files changed

+176
-55
lines changed

5 files changed

+176
-55
lines changed

‎index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html><head><style type='text/css'>
2-
.tabs{display:flex;flex-wrap:wrap;width:100%}.tabs label{order:1;display:flex;justify-content:center;align-items:center;padding:.1rem .5rem;margin:0;cursor:pointer}.tabs .tab{order:9;flex-grow:1;width:100%;height:100rem;display:none;background:#fff;padding:.4rem}.tabs input[type="radio"]{display:none}.tabs input[type="radio"]:checked + label{background:#fff}.tabs input[type="radio"]:checked + label + .tab{display:block}body{background:#dcdcdc;min-height:100vh;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:300;line-height:1.5;font-size:100%;display:flex}pre{padding:0;margin:0 0 1em}
3-
</style></head><body><div class='tabs'>
2+
.tabs .tab,.tabs input[type=radio]:checked+label{background:#fff}.tabs,.tabs label,body{display:flex}.tabs .tab,.tabs input[type=radio]{display:none}#searchResultDlg,#searchResultDlgContent{overflow:auto;overscroll-behavior:contain}#closeIcon,.tabs input[type=radio]:checked+label+.tab{display:block}.tabs{flex-wrap:wrap;width:100%}.tabs label{order:1;justify-content:center;align-items:center;padding:.1rem .5rem;margin:0;cursor:pointer}.tabs .tab{order:9;flex-grow:1;width:100%;height:100rem;padding:.4rem}body{background:#dcdcdc;min-height:100vh;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:300;line-height:1.5;font-size:100%}pre{padding:0;margin:0 0 1em}#searchInputArea{display:flex;position:absolute;right:50px;top:5px}#searchInput{margin-left:20px;border:0}#searchInput:focus{outline:0}#searchResultDlg{display:none;flex-direction:column;position:fixed;top:50px;left:100px;right:100px;bottom:50px;padding:10px;background-color:#dcdcdc}#searchResultDlgContent{display:grid;flex-direction:column;height:100%}#closeIcon{color:#778899;font-size:55px;position:fixed;top:20px;right:50px;cursor:pointer}.resultBlock{width:100%;border-bottom:1px solid #000}.resultBlock .tabName{font-size:1.2em;font-weight:700}
3+
</style></head><body onLoad='initDataArray()'><div class='tabs'>
44
<input type="radio" name="tabs" id="backup" checked="checked"><label for="backup">backup</label><div class="tab">
55
Backup directories which can be related to Zabbix<pre><code>cd /usr/share/zabbix && mkdir -p ~/backup${PWD} && cp -a * ~/backup${PWD}
66
cd /etc/zabbix && mkdir -p ~/backup${PWD} && cp -a * ~/backup${PWD}
@@ -212,4 +212,4 @@
212212
<p>Download this section: <a href="src/users.sql">https://aigarskadikis.github.io/src/users.sql</a><br />
213213
Fancy syntax highlighter? Read same page on GitHub: <a href="https://github.com/aigarskadikis/aigarskadikis.github.io/blob/main/src/users.sql" target="_blank">https://github.com/aigarskadikis/aigarskadikis.github.io/blob/main/src/users.sql</a></p>
214214
</div>
215-
</div></body></html>
215+
</div><div id='searchInputArea'><span>SEARCH</span><input type='text' id='searchInput' placeholder='Type at least 1 characters...' onkeyup='onTypeSearchInput(event)' /></div><div id='searchResultDlg'><div id='closeIcon' onclick='onCloseDlg()'>&times;</div><div id='searchResultDlgContent'></div></div><script src='searcher.js'></script></body></html>

‎searcher.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
var dlgArea = document.getElementById("searchResultDlg");
2+
var searchInput = document.getElementById("searchInput");
3+
var searchResultDlgContent = document.getElementById("searchResultDlgContent");
4+
var dataArray = [];
5+
6+
function initDataArray(){
7+
var allNodes = document.getElementsByTagName("code");
8+
9+
for(var i = 0; i < allNodes.length; i++){
10+
if (allNodes[i].parentElement.localName == "pre"){
11+
dataArray[i] = [allNodes[i].parentElement.previousSibling.nodeValue.trim(), allNodes[i].innerHTML, allNodes[i].parentElement.parentElement.previousElementSibling.innerHTML];
12+
}
13+
}
14+
15+
}
16+
17+
18+
function searchAndDisplay(value){
19+
var indexToDisplay = [];
20+
for (var i in dataArray){
21+
if(dataArray[i][0].indexOf(value) != -1 || dataArray[i][1].indexOf(value) != -1){
22+
indexToDisplay.push(i);
23+
}
24+
}
25+
26+
if(indexToDisplay.length == 0){
27+
searchResultDlgContent.innerHTML = "There is no matched data to display :(";
28+
return;
29+
}
30+
31+
var finalOutput = "";
32+
for (var j in indexToDisplay){
33+
var tempOutput = "";
34+
tempOutput = "<div class='resultBlock'><div class='tabName'>" + dataArray[indexToDisplay[j]][2] + "</div><div class='title'>" + dataArray[indexToDisplay[j]][0] + "</div><div class='content'><pre><code>" + dataArray[indexToDisplay[j]][1] + "</code></pre></div></div>";
35+
finalOutput += tempOutput;
36+
}
37+
38+
searchResultDlgContent.innerHTML = finalOutput;
39+
}
40+
41+
42+
function onCloseDlg() {
43+
dlgArea.style.display = "none";
44+
searchInput.value = "";
45+
}
46+
47+
function onTypeSearchInput(event){
48+
var value = searchInput.value;
49+
if(value.length > 0 ){
50+
searchAndDisplay(value);
51+
dlgArea.style.display = "flex";
52+
53+
}else{
54+
dlgArea.style.display = "none";
55+
}
56+
}

‎src/css.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/readable.css

+114-49
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,115 @@
11
.tabs {
2-
display: flex;
3-
flex-wrap: wrap;
4-
width: 100%;
5-
}
6-
7-
.tabs label {
8-
order: 1;
9-
display: flex;
10-
justify-content: center;
11-
align-items: center;
12-
padding: .1rem .5rem;
13-
margin:0;
14-
cursor: pointer;
15-
}
16-
17-
.tabs .tab {
18-
order: 9;
19-
flex-grow: 1;
20-
width: 100%;
21-
height: 100rem;
22-
display: none;
23-
background: #fff;
24-
padding: .4rem;
25-
}
26-
27-
.tabs input[type="radio"] {
28-
display: none;
29-
}
30-
31-
.tabs input[type="radio"]:checked + label {
32-
background: #fff;
33-
}
34-
35-
.tabs input[type="radio"]:checked + label + .tab {
36-
display: block;
37-
}
38-
39-
body {
40-
background: gainsboro;
41-
min-height: 100vh;
42-
box-sizing: border-box;
43-
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
44-
font-weight: 300;
45-
line-height: 1.5;
46-
font-size: 100%;
47-
display: flex;
48-
}
49-
50-
pre {padding:0;margin:0 0 1em 0}
2+
display: flex;
3+
flex-wrap: wrap;
4+
width: 100%
5+
}
6+
7+
.tabs label {
8+
order: 1;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
padding: .1rem .5rem;
13+
margin: 0;
14+
cursor: pointer
15+
}
16+
17+
.tabs .tab {
18+
order: 9;
19+
flex-grow: 1;
20+
width: 100%;
21+
height: 100rem;
22+
display: none;
23+
background: #fff;
24+
padding: .4rem
25+
}
26+
27+
.tabs input[type="radio"] {
28+
display: none
29+
}
30+
31+
.tabs input[type="radio"]:checked+label {
32+
background: #fff
33+
}
34+
35+
.tabs input[type="radio"]:checked+label+.tab {
36+
display: block
37+
}
38+
39+
body {
40+
background: #dcdcdc;
41+
min-height: 100vh;
42+
box-sizing: border-box;
43+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
44+
font-weight: 300;
45+
line-height: 1.5;
46+
font-size: 100%;
47+
display: flex
48+
}
49+
50+
pre {
51+
padding: 0;
52+
margin: 0 0 1em
53+
}
54+
55+
/* ================= */
56+
#searchInputArea {
57+
display: flex;
58+
position: absolute;
59+
right: 50px;
60+
top: 5px;
61+
}
62+
63+
#searchInput {
64+
margin-left: 20px;
65+
border: 0px;
66+
}
67+
68+
#searchInput:focus {
69+
outline: none;
70+
}
71+
72+
#searchResultDlg {
73+
display: none;
74+
75+
flex-direction: column;
76+
position: fixed;
77+
top: 50px;
78+
left: 100px;
79+
right: 100px;
80+
bottom: 50px;
81+
padding: 10px;
82+
background-color: #dcdcdc;
83+
overflow: auto;
84+
overscroll-behavior: contain
85+
}
86+
87+
#searchResultDlgContent {
88+
display: grid;
89+
flex-direction: column;
90+
height: 100%;
91+
overflow: auto;
92+
overscroll-behavior: contain
93+
}
94+
95+
#closeIcon {
96+
color: lightslategrey;
97+
font-size: 55px;
98+
display: block;
99+
position: fixed;
100+
top: 20px;
101+
right: 50px;
102+
cursor: pointer;
103+
}
104+
105+
.resultBlock {
106+
width: 100%;
107+
border-bottom: 1px solid #000;
108+
}
109+
110+
.resultBlock .tabName {
111+
font-size: 1.2em;
112+
font-weight: bold;
113+
}
114+
115+
/* ================= */

‎src/recreate.sh

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ echo "<html><head><style type='text/css'>" >> ../index.html
1111
cat css.css >> ../index.html
1212

1313
# start body and all tabs
14-
echo "</style></head><body><div class='tabs'>" >> ../index.html
14+
echo "</style></head><body onLoad='initDataArray()'><div class='tabs'>" >> ../index.html
1515

1616
########
1717
# bash #
@@ -142,7 +142,7 @@ cat $NAME.inc | sed -n "H;1h;\${g;s|\n<pre><code>\n|<pre><code>|g;p}" | sed -n "
142142

143143

144144
# put footer
145-
echo "</div></body></html>" >> ../index.html
145+
echo "</div><div id='searchInputArea'><span>SEARCH</span><input type='text' id='searchInput' placeholder='Type at least 1 characters...' onkeyup='onTypeSearchInput(event)' /></div><div id='searchResultDlg'><div id='closeIcon' onclick='onCloseDlg()'>&times;</div><div id='searchResultDlgContent'></div></div><script src='searcher.js'></script></body></html>" >> ../index.html
146146

147147
# install default block
148148
sed -i 's|input type="radio" name="tabs" id="backup"|input type="radio" name="tabs" id="backup" checked="checked"|' ../index.html

0 commit comments

Comments
 (0)