-
Notifications
You must be signed in to change notification settings - Fork 2
/
quick-docs.html
executable file
·206 lines (174 loc) · 8.95 KB
/
quick-docs.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="icon" type="image/x-icon" href="./images/favicon.ico" />
<!-- above is all boiler plate -->
<title>bitwrench.js</title>
<!-- bitwrench.js quick-docs doc
(c) M A Chatterjee
deftio <at> deftio <dot> com
github: https:github.com/deftio/bitwrench
web: https://deftio.com/bitwrench
-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-30080304-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-30080304-3');
</script>
<script type="text/javascript" src="./bitwrench.js" bwargs="ex1:1;ex2:2"></script>
<style>
.boxStyle1 {
background-color: #aaa;
}
.boxStyle2 {
background-color: #ddd;
}
.boxStyle1:hover,.fboxStyle2:hover {
font-weight: 800;
font-style: italic;
}
</style>
</head>
<body class="bw-def-page-setup bw-font-sans-serif">
<div class="bw-container">
<div class="bw-col-10">
<img src="./images/bitwrench-thick-logo.png" width="500"></img>
<h1>Quick Docs Page</h1>
<p id="versionArea"></p>
<br>
Bitwrench is a "kitchen-sink" type library of various functions which I've used a lot from various web / HTML projects and prototypes.<br><br><br>
Its intended purpose is not to replace mature js frameworks like JQuery, Bootstrap, Vue or React but to provide a quick set of helper glue when debugging random projects which may have little to do with web programming. For example if you're debugging an embedded system and just want to dump some data and look at it, or you need to mock up some javascript / HTML tests but don't want to bring in a whole framework that this might be useful for you.
<br><br>Bitwrench has no dependancies and can be used along side any other framework.
<br><br>
<!--
<h1 class="bw-h1">Table of Contents</h1>
<div id="bwTableOfContents"></div>
<br><br>
-->
<!-- function list area -->
</div>
<!-- grid demo area -->
<div id="bwGridExampleId">
<h1 class="bw-h1">CSS Layout Grid</h1>
Bitwrench includes a built-in css grid class set for creating simple regular layouts.<br>
<br>
<div class="bw-row bw-center">
<div class="bw-col-1 bw-box-1 boxStyle1 ">bw-col-1</div><div class="bw-col-1 bw-box-1 boxStyle2">bw-col-1</div><div class="bw-col-1 bw-box-1 boxStyle1">bw-col-1</div><div class="bw-col-1 bw-box-1 boxStyle2">bw-col-1</div><div class="bw-col-1 bw-box-1 boxStyle1">bw-col-1</div><div class="bw-col-1 bw-box-1 boxStyle2">bw-col-1</div><div class="bw-col-1 bw-box-1 boxStyle1">bw-col-1</div><div class="bw-col-1 bw-box-1 boxStyle2">bw-col-1</div><div class="bw-col-1 bw-box-1 boxStyle1">bw-col-1</div><div class="bw-col-1 bw-box-1 boxStyle2">bw-col-1</div><div class="bw-col-1 bw-box-1 boxStyle1">bw-col-1</div><div class="bw-col-1 bw-box-1 boxStyle2">bw-col-1</div>
</div><br>
<div class="bw-row bw-center">
<div class="bw-col-2 bw-box-1 boxStyle1">bw-col-2</div><div class="bw-col-2 bw-box-1 boxStyle2">bw-col-2</div><div class="bw-col-2 bw-box-1 boxStyle1">bw-col-2</div><div class="bw-col-2 bw-box-1 boxStyle2">bw-col-2</div><div class="bw-col-2 bw-box-1 boxStyle1">bw-col-2</div><div class="bw-col-2 bw-box-1 boxStyle2">bw-col-2</div>
</div><br>
<div class="bw-row bw-center">
<div class="bw-col-3 bw-box-1 boxStyle1">bw-col-3</div><div class="bw-col-3 bw-box-1 boxStyle2">bw-col-3</div><div class="bw-col-3 bw-box-1 boxStyle1">bw-col-3</div><div class="bw-col-3 bw-box-1 boxStyle2">bw-col-3</div>
</div><br>
<div class="bw-row bw-center" >
<div class="bw-col-4 bw-box-1 boxStyle1">bw-col-4</div><div class="bw-col-4 bw-box-1 boxStyle2">bw-col-4</div><div class="bw-col-4 bw-box-1 boxStyle1">bw-col-4</div>
</div><br>
<div class="bw-row bw-center" >
<div class="bw-col-5 bw-box-1 boxStyle1">bw-col-5</div><div class="bw-col-7 bw-box-1 boxStyle2">bw-col-7</div>
</div><br>
<div class="bw-row bw-center" >
<div class="bw-col-6 bw-box-1 boxStyle1">bw-col-6</div><div class="bw-col-6 bw-box-1 boxStyle2">bw-col-6</div>
</div><br>
<div class="bw-row bw-center" >
<div class="bw-col-7 bw-box-1 boxStyle1">bw-col-7</div><div class="bw-col-5 bw-box-1 boxStyle2">bw-col-5</div>
</div><br>
<div class="bw-row bw-center" >
<div class="bw-col-8 bw-box-1 boxStyle1">bw-col-8</div><div class="bw-col-4 bw-box-1 boxStyle2">bw-col-4</div>
</div><br>
<div class="bw-row bw-center" >
<div class="bw-col-9 bw-box-1 boxStyle1">bw-col-9</div><div class="bw-col-3 bw-box-1 boxStyle2">bw-col-3</div>
</div><br>
<div class="bw-row bw-center" >
<div class="bw-col-10 bw-box-1 boxStyle1">bw-col-10</div><div class="bw-col-2 bw-box-1 boxStyle2">bw-col-2</div>
</div><br>
<div class="bw-row bw-center" >
<div class="bw-col-11 bw-box-1 boxStyle1">bw-col-11</div><div class="bw-col-1 bw-box-1 boxStyle2">bw-col-1</div>
</div><br>
<div class="bw-row bw-center" >
<div class="bw-col-12 bw-box-1 boxStyle1">bw-col-12</div>
</div><br>
</div> <!-- end code for grid demo -->
<br>
<!-- Text align demo area -->
<h1 class="bw-h1">Text Alignment & Related</h1>
<div class="bw-tab-container">
<ul class="bw-tab-item-list">
<li class="bw-tab bw-tab-active" onclick="bw.selectTabContent(this)" >Text Styles</li>
<li class="bw-tab " onclick="bw.selectTabContent(this)" >Text Styles Code</li>
</ul>
<div class="bw-tab-content-list">
<div class="bw-tab-content bw-show" id="bwTextSection">
<br>The following text styles are supported.<br><br>
<div class="bw-box-1 boxStyle1 bw-left">This text is left aligned.</div><br>
<div class="bw-box-1 boxStyle1 bw-center">This text is centered.</div><br>
<div class="bw-box-1 boxStyle1 bw-right">This text is right aligned.</div><br>
<div class="bw-box-1 boxStyle1 bw-justify">This text is justified. This text is justified. This text is justified. This text is justified. This text is justified. This text is justified. This text is justified. This text is justified. This text is justified. This text is justified. This text is justified. This text is justified. This text is justified. This text is justified. This text is justified. This text is justified. </div><br>
<div class="bw-col-8 bw-box-1 boxStyle1">
<pre class="bw-code">Code Section<br>//this is sample code...<br>var i;<br> for(i=0;i!=10;i++)<br> foo(i);<br><br></pre>
</div>
</div> <!-- end code for text alignment -->
<div class="bw-tab-content" id="bwTextSectionCode"></div>
</div>
</div>
<br>
<!-- Headings demo area -->
<h1 class="bw-h1">Headings</h1>
<div class="bw-tab-container">
<ul class="bw-tab-item-list" style="height:20px">
<li class="bw-tab bw-tab-active" onclick="bw.selectTabContent(this)" >Headings</li>
<li class="bw-tab" onclick="bw.selectTabContent(this)" >Headings Code</li>
</ul>
<div class="bw-tab-content-list">
<div class="bw-tab-content bw-show" id="bwHeadingSection">
<br>The following heading sizes are built-in as well.
<h1 class="bw-h1">H1 Heading</h1>
<h2 class="bw-h2">H2 Heading</h2>
<h3 class="bw-h3">H3 Heading</h3>
<h4 class="bw-h4">H4 Heading</h4>
<h5 class="bw-h5">H5 Heading</h5>
<h6 class="bw-h6">H6 Heading</h6>
</div>
<div class="bw-tab-content bw-background" id="bwHeadingSectionCode"></div>
</div>
</div>
</div>
<h1 class="bw-h1">Function List</h1>
The following functions are available covering a mix us utility functions and some simple HTML DOM manipulations. The docs here are generated from the built-in doc-string comments.
<div id="bwFunctionListID"></div> <!-- this list is dynamically generated, see javscript below -->
<br>
<br><br><br>
<hr>
<br>
<div class="bw-center" style="font-size: 9pt"><span >bit</span><span style="color:teal">wrench</span> quick docs and examples</div><br>
<script type="text/javascript">
bw.DOM("#versionArea","<strong>bitwrench.js version: </strong>" + bw.version()["version"]);
//draw the bitwrench function list (drawn dynamically from the built-in doc strings)
var funcList=[],i,keys=[];
keys = (Object.keys(bw).filter(function(x){return bw.to(bw[x])=="function" && x[0]!="_"})).sort(bw.naturalCompare)
for (i=0; i<keys.length; i++) {
funcList.push(["div" ,{"class":"bw-col-10"}, [
"<hr>",
["h3" ,{"class":"bw-h3 color-set1", "id":"bw_func_"+i, "style":"color: #006666;"},"bw."+keys[i]+"()"],
["p" ,{"class":"bw-code"}, bw.docString(bw[keys[i]],{dropLeadin:false})[0]], // makes use of self-parsing of docString data
"<br>"
]]);
}
// funcList = funcList.sort(function(a,b){return bw.naturalSort(a,b)});
bw.DOM("#bwFunctionListID", bw.html(["p",{"class":"bw-col-6"}, funcList]));
//takes HTML content and pretty prints it. no syntax highlighting is performed
function section2Code(sectionId,target) {
var s = bw.htmlSafeStr(bw.DOM(sectionId)[0].innerHTML.replace(/<br>/ig,"")).replace(/[ ]+/ig," ");
bw.DOM(target, "<div class='bw-code' >"+s+"</div><br>");
}
//this creates the exmaple code tabs
//code section for ..
section2Code("#bwTextSection","#bwTextSectionCode");
section2Code("#bwHeadingSection","#bwHeadingSectionCode");
</script>
</body>
</html>