bitwrench 1.2.14 → 1.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.html CHANGED
@@ -3,6 +3,9 @@
3
3
  This file autogenerated by docbat.js (https://npmjs.com/docbat)
4
4
  Any manual edits may be lost.
5
5
  -->
6
+ <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/styles/default.min.css">
7
+ <script src="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
8
+ <script>hljs.highlightAll();</script>
6
9
  <style>
7
10
  *{box-sizing:border-box;}
8
11
  .bw-def-page-setup{height:100%;width:90%;margin:0 auto;padding-left:2%;padding-right:2%;left:0;top:1%;box-sizing:border-box;}
@@ -81,50 +84,72 @@ Any manual edits may be lost.
81
84
  color: #e2e2e2 !important;;
82
85
  background-color: #020202 !important;;
83
86
  }
84
- @media only screen and (min-width: 540px) { .bw-def-page-setup { width: 96%; }}
85
- @media only screen and (min-width: 720px) { .bw-def-page-setup { width: 92%; }}
86
- @media only screen and (min-width: 960px) { .bw-def-page-setup { width: 88%; }}
87
- @media only screen and (min-width: 1100px){ .bw-def-page-setup { width: 86%; }}
88
- @media only screen and (min-width: 1600px){ .bw-def-page-setup { width: 84%; }}
87
+ @media only screen and (min-width: 540px) {.bw-def-page-setup {width: 96%;}}
88
+ @media only screen and (min-width: 720px) {.bw-def-page-setup {width: 92%;}}
89
+ @media only screen and (min-width: 960px) {.bw-def-page-setup {width: 88%;}}
90
+ @media only screen and (min-width: 1100px){.bw-def-page-setup {width: 86%;}}
91
+ @media only screen and (min-width: 1600px){.bw-def-page-setup {width: 84%;}}
92
+
89
93
  </style><style>
90
94
  .dbat {padding-left: 10%; padding-right: 10%;}
91
95
 
92
- </style></head><body class="bw-def-page-setup bw-font-sans-serif dbat" ><br><br><p><a href="https://opensource.org/licenses/BSD-2-Clause"><img src="https://img.shields.io/badge/License-BSD%202--Clause-blue.svg" alt="License" /></a>
93
- <a href="https://www.npmjs.com/package/bitwrench"><img src="https://img.shields.io/npm/v/bitwrench.svg?style=flat-square" alt="NPM version" /></a>
94
- <a href="https://travis-ci.org/deftio/fifostr"><img src="https://travis-ci.org/deftio/bitwrench.svg?branch=master" alt="Build Status" /></a></p>
95
- <p><a href="http://www.deftio.com/bitwrench"><img src="./images/bitwrench-logo-med.png" alt="bitwrench" /></a></p>
96
- <h2 id="welcometobitwrenchjs">Welcome to bitwrench.js</h2>
97
- <p>bitwrench.js is a javascript library for for creating quick demos with almost no depedancies. With bitwrench one can create web pages and components with pure json or javascript dictionaries including handlers (e.g. onclick="…code.." ==&gt; onclick:function_ref, css , etc. )
98
- bitwrench.js also has handyman functions such as loremIpsum generation, ranged random numbers and interpolaters, and color blenders. Use it for throwing up quick web pages which don't depend on any server side framework but need a little prettyifcation or for visualizing quick data. For example when debugging C/C++ embedded projects where we don't want to clutter the build dirs with lots of "weird web stuff" - just write a simple HTML page with bitwrench and still load and view raw text files, JSON, arrays and other bits of embedded files with no extra dependancies.</p>
96
+
97
+ </style><link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/styles/default.min.css">
98
+ <script src="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
99
+ <script>hljs.highlightAll();</script>
100
+ </head>
101
+ <body class="bw-def-page-setup bw-font-sans-serif dbat" ><br><br><p><a href="https://opensource.org/licenses/BSD-2-Clause"><img src="https://img.shields.io/badge/License-BSD%202--Clause-blue.svg" alt="License"></a>
102
+ <a href="https://www.npmjs.com/package/bitwrench"><img src="https://img.shields.io/npm/v/bitwrench.svg?style=flat-square" alt="NPM version"></a>
103
+ <a href="https://travis-ci.org/deftio/fifostr"><img src="https://travis-ci.org/deftio/bitwrench.svg?branch=master" alt="Build Status"></a></p>
104
+ <p><a href="http://www.deftio.com/bitwrench"><img src="./images/bitwrench-logo-med.png" alt="bitwrench"></a></p>
105
+ <h2 id="welcome-to-bitwrenchjs">Welcome to bitwrench.js</h2>
106
+ <p>bitwrench.js is a javascript library for for creating quick demos with almost no depedancies. With bitwrench one can create web pages and components with pure json or javascript dictionaries including handlers (e.g. onclick=&quot;...code..&quot; ==&gt; onclick:function_ref, css , etc. )
107
+ bitwrench.js also has handyman functions such as loremIpsum generation, ranged random numbers and interpolaters, and color blenders. Use it for throwing up quick web pages which don&#39;t depend on any server side framework but need a little prettyifcation or for visualizing quick data. For example when debugging C/C++ embedded projects where we don&#39;t want to clutter the build dirs with lots of &quot;weird web stuff&quot; - just write a simple HTML page with bitwrench and still load and view raw text files, JSON, arrays and other bits of embedded files with no extra dependancies.</p>
99
108
  <p>For those used to modern frameworks such as react / vue / svelte etc. bitwrench.js comes from a pre 2011 time period - so it has more of a jquery like feel, but with a declaritve syntax. See example code and page below for more. bitwrench.js does work in older browsers such Internet Explorer (v7 and later).</p>
100
109
  <h3 id="features">Features</h3>
101
110
  <ul>
102
111
  <li><strong>HTML quick emits</strong> -- create HTML objects either client or server side from pure JSON. useful for making quick components or dynamic content w/o any inline HTML<ul>
103
- <li>html(["div", {class:"class1 class2", onclick:"myFunction(this)","This is the content"}] </li>
112
+ <li>html([&quot;div&quot;, {class:&quot;class1 class2&quot;, onclick:&quot;myFunction(this)&quot;,&quot;This is the content&quot;}] </li>
104
113
  <li>DOM selects and applies e.g. <ul>
105
- <li>bw.DOM("h3","tada") // set all "h3" tags to have the content "tada"</li>
106
- <li>bw.DOM(".myClass",function(x){ do something on each element described by CSS selector .myClass})</li></ul></li>
107
- <li>supports "deep" hieararchical JSON constructs and arrays</li>
114
+ <li>bw.DOM(&quot;h3&quot;,&quot;tada&quot;) // set all &quot;h3&quot; tags to have the content &quot;tada&quot;</li>
115
+ <li>bw.DOM(&quot;.myClass&quot;,function(x){... do something on each element described by CSS selector .myClass})</li>
116
+ </ul>
117
+ </li>
118
+ <li>supports &quot;deep&quot; hieararchical JSON constructs and arrays</li>
108
119
  <li>registerFunction abilities allow functions to be passed statically to HTML elements (see docs)</li>
109
- <li>Useful as a "onefile" framework which an interpret rich JSON in to full web pages. </li></ul></li>
120
+ <li>Useful as a &quot;onefile&quot; framework which an interpret rich JSON in to full web pages.</li>
121
+ </ul>
122
+ </li>
110
123
  <li><strong>Color conversions and interpolation</strong><ul>
111
- <li>RGB, RGBa, HSL, HSLa, and theme generation both as numeric values also as CSS outputs</li></ul></li>
124
+ <li>RGB, RGBa, HSL, HSLa, and theme generation both as numeric values also as CSS outputs</li>
125
+ </ul>
126
+ </li>
112
127
  <li><strong>setting/getting cookies</strong> </li>
113
128
  <li><strong>pretty printing json</strong></li>
114
129
  <li><strong>Saving/Loading application data files</strong> (works in both browser or node)<ul>
115
- <li>save / load files as raw or JSON </li></ul></li>
130
+ <li>save / load files as raw or JSON</li>
131
+ </ul>
132
+ </li>
116
133
  <li><strong>Getting URL parameters with defaults</strong><ul>
117
- <li>simple parsing of URL params, also can be used for command line scripts, also packs simple dicts back to URLs. note that this functionality predated modern URL libs so you might want to use those for modern apps. However bitwrench versions do work on old browers such as IE8 and iPodTouch 4th generation</li></ul></li>
118
- <li><strong>Data manipulation functions</strong> and other "random" things <ul>
134
+ <li>simple parsing of URL params, also can be used for command line scripts, also packs simple dicts back to URLs. note that this functionality predated modern URL libs so you might want to use those for modern apps. However bitwrench versions do work on old browers such as IE8 and iPodTouch 4th generation</li>
135
+ </ul>
136
+ </li>
137
+ <li><strong>Data manipulation functions</strong> and other &quot;random&quot; things <ul>
119
138
  <li>numeric interpolation &amp; clipping</li>
120
139
  <li>create multi-d arrays</li>
121
140
  <li>random(4,11) ==&gt; put out a random number in the range 4-11, also provides multidim arrays of random numbers useful for testing tables etc</li>
122
- <li>prandom() ==&gt; pseudorandom numbers with range settings, also provides multidim arrays of random numbers useful for testing tables etc</li></ul></li>
141
+ <li>prandom() ==&gt; pseudorandom numbers with range settings, also provides multidim arrays of random numbers useful for testing tables etc</li>
142
+ </ul>
143
+ </li>
123
144
  <li><strong>Logging</strong> with time-stamps, messaging, and pretty printing (raw, HTML, and text) <ul>
124
- <li>Logging also has auto dissolve so one can log a process and then dump later or suppress in 'production'</li></ul></li>
145
+ <li>Logging also has auto dissolve so one can log a process and then dump later or suppress in &#39;production&#39;</li>
146
+ </ul>
147
+ </li>
125
148
  <li><strong>Built-in docString parsing</strong> with extraction support <ul>
126
- <li>bitwrench.js self-documents in that from the browser DOM one can pull out a given function's doc strings such as bw.docString("DOM") ==&gt; gives docString inforfor that function.</li>
127
- <li>note that bitwrench.min.js strips comments so built-in help is not available.</li></ul></li>
149
+ <li>bitwrench.js self-documents in that from the browser DOM one can pull out a given function&#39;s doc strings such as bw.docString(&quot;DOM&quot;) ==&gt; gives docString inforfor that function.</li>
150
+ <li>note that bitwrench.min.js strips comments so built-in help is not available.</li>
151
+ </ul>
152
+ </li>
128
153
  </ul>
129
154
  <p>There is no great structure here, just a bunch of kitchen sink things that seemed to be handy in alot of quick web dev situations. All non-dom specific calls can be run either server side or client side.</p>
130
155
  <p>A minified form bitwrench.min.js is provided with identical functionality</p>
@@ -134,123 +159,124 @@ bitwrench.js also has handyman functions such as loremIpsum generation, ranged r
134
159
  <p>other examples here:
135
160
  <a href="./examples">bitwrench examples</a></p>
136
161
  <h3 id="nodejs">node.js</h3>
137
- <pre><code class="bash language-bash">#Installation (server side)
162
+ <pre><code class="language-bash">#Installation (server side)
138
163
  npm install bitwrench --save
139
164
  </code></pre>
140
- <pre><code class="javascript language-javascript">//usage in nodejs
141
- var bw = require('./bitwrench.js'); //adds to current scope
142
- var s = bw.html(["div",{"class":"foo"},"This is some HTML"]); // now... ===&gt; s = "&lt;div class='foo'&gt;This is some HTML&lt;/div&gt;
165
+ <pre><code class="language-javascript">//usage in nodejs
166
+ var bw = require(&#39;./bitwrench.js&#39;); //adds to current scope
167
+ var s = bw.html([&quot;div&quot;,{&quot;class&quot;:&quot;foo&quot;},&quot;This is some HTML&quot;]); // now... ===&gt; s = &quot;&lt;div class=&#39;foo&#39;&gt;This is some HTML&lt;/div&gt;
143
168
  </code></pre>
144
169
  <h3 id="browser">browser</h3>
145
170
  <p>In the browser bitwrench is loaded like any script library. Note that parameters can be passed to bitwrench to control the loading process.
146
171
  bitwrench generates its own default css from javascript and loads those. You can see these statically in the bitwrench.css file (note that bitwrench.css can also be used standalone without the bitwrench.js library).
147
172
  <a href="./examples/example5.html">Example Page</a> source code here:</p>
148
- <pre><code class="html language-html">&lt;!DOCTYPE html&gt;
149
- &lt;html lang="en"&gt;
173
+ <pre><code class="language-html">
174
+ &lt;!DOCTYPE html&gt;
175
+ &lt;html lang=&quot;en&quot;&gt;
150
176
  &lt;head&gt;
151
- &lt;script src="../bitwrench.js" &gt;&lt;/script&gt;
177
+ &lt;script src=&quot;../bitwrench.js&quot; &gt;&lt;/script&gt;
152
178
  &lt;/head&gt;
153
- &lt;body class="bw-def-page-setup bw-font-sans-serif"&gt;
179
+ &lt;body class=&quot;bw-def-page-setup bw-font-sans-serif&quot;&gt;
154
180
  &lt;script&gt;
155
181
  var htmlData = {c: //for more on the format, see docs github.com/deftio/bitwrench
156
182
  [
157
- ["h1" ,{"class":"bw-h1"},"Bitwrench Test Area" ],
158
- "bitwrench version: "+bw.version().version +"&lt;br&gt;&lt;br&gt;",
159
- ["div",{"class":"foo"} ,"This page has HTML content which is entirely written as Javascript objects (JSON-like but with support for functions) by content using "+bw.html(["a",{href:"https://github.com/deftio/bitwrench"},"bitwrench.js"])+". Bitwrench has built-in grids, tables,headings, and other quick-n-dirty html prototyping tasks. Bitwrench html generation runs either client or server side."],
160
- "&lt;hr&gt;",
161
- ["h2","Lorem Ipsum Generator"],
162
- "Good for testing simple layout ideas.&lt;br&gt;&lt;br&gt;",
163
- ["div",{},bw.loremIpsum(230)],
164
- "&lt;hr&gt;",
165
- ["h2",{},"Sample Content with 3 Columns"],
166
- ["div",{"class":"bw-row"},
183
+ [&quot;h1&quot; ,{&quot;class&quot;:&quot;bw-h1&quot;},&quot;Bitwrench Test Area&quot; ],
184
+ &quot;bitwrench version: &quot;+bw.version().version +&quot;&lt;br&gt;&lt;br&gt;&quot;,
185
+ [&quot;div&quot;,{&quot;class&quot;:&quot;foo&quot;} ,&quot;This page has HTML content which is entirely written as Javascript objects (JSON-like but with support for functions) by content using &quot;+bw.html([&quot;a&quot;,{href:&quot;https://github.com/deftio/bitwrench&quot;},&quot;bitwrench.js&quot;])+&quot;. Bitwrench has built-in grids, tables,headings, and other quick-n-dirty html prototyping tasks. Bitwrench html generation runs either client or server side.&quot;],
186
+ &quot;&lt;hr&gt;&quot;,
187
+ [&quot;h2&quot;,&quot;Lorem Ipsum Generator&quot;],
188
+ &quot;Good for testing simple layout ideas.&lt;br&gt;&lt;br&gt;&quot;,
189
+ [&quot;div&quot;,{},bw.loremIpsum(230)],
190
+ &quot;&lt;hr&gt;&quot;,
191
+ [&quot;h2&quot;,{},&quot;Sample Content with 3 Columns&quot;],
192
+ [&quot;div&quot;,{&quot;class&quot;:&quot;bw-row&quot;},
167
193
  [
168
- ["div",{"class":"bw-col-4 bw-left "},"&lt;h3&gt;Left justified&lt;/h3&gt;"+bw.loremIpsum(95)], //mix text and html freely
169
- ["div",{"class":"bw-col-4 bw-center bw-pad1"},"&lt;h3&gt;Centered&lt;/h3&gt;"+bw.loremIpsum(95,3)],
170
- ["div",{"class":"bw-col-4 bw-right "},"&lt;h3&gt;Right justified&lt;/h3&gt;"+bw.loremIpsum(95,2)],
194
+ [&quot;div&quot;,{&quot;class&quot;:&quot;bw-col-4 bw-left &quot;},&quot;&lt;h3&gt;Left justified&lt;/h3&gt;&quot;+bw.loremIpsum(95)], //mix text and html freely
195
+ [&quot;div&quot;,{&quot;class&quot;:&quot;bw-col-4 bw-center bw-pad1&quot;},&quot;&lt;h3&gt;Centered&lt;/h3&gt;&quot;+bw.loremIpsum(95,3)],
196
+ [&quot;div&quot;,{&quot;class&quot;:&quot;bw-col-4 bw-right &quot;},&quot;&lt;h3&gt;Right justified&lt;/h3&gt;&quot;+bw.loremIpsum(95,2)],
171
197
  ],
172
198
  ],
173
- "&lt;br&gt;&lt;hr&gt;",
174
- ["h2", {}, "Example Sortable Table"],
199
+ &quot;&lt;br&gt;&lt;hr&gt;&quot;,
200
+ [&quot;h2&quot;, {}, &quot;Example Sortable Table&quot;],
175
201
  bw.htmlTable( // json to table (note table data can be functions as well)
176
202
  [
177
- ["Name","Age", "Prof", "Fav Color"], // just an 2D array
178
- ["Sue", 34, "Engineer", {a:{style:"color:red"},c:"red"}], // inline json-html objects
179
- ["Bob" ,35, "Teacher", {a:{style:"color:green"},c:"green"}],
180
- ["Vito",23, "Mechanic", {a:{style:"color:blue",onclick:"alert('blue!')"},c:"blue"}],
181
- ["Hank",73, "Retired", {a:{style:"color:purple"},c:"purple"}]
203
+ [&quot;Name&quot;,&quot;Age&quot;, &quot;Prof&quot;, &quot;Fav Color&quot;], // just an 2D array
204
+ [&quot;Sue&quot;, 34, &quot;Engineer&quot;, {a:{style:&quot;color:red&quot;},c:&quot;red&quot;}], // inline json-html objects
205
+ [&quot;Bob&quot; ,35, &quot;Teacher&quot;, {a:{style:&quot;color:green&quot;},c:&quot;green&quot;}],
206
+ [&quot;Vito&quot;,23, &quot;Mechanic&quot;, {a:{style:&quot;color:blue&quot;,onclick:&quot;alert(&#39;blue!&#39;)&quot;},c:&quot;blue&quot;}],
207
+ [&quot;Hank&quot;,73, &quot;Retired&quot;, {a:{style:&quot;color:purple&quot;},c:&quot;purple&quot;}]
182
208
  ],{sortable:true}),
183
- "&lt;br&gt;&lt;hr&gt;",
184
- ["h2",{},"Sample Buttons"],
185
- "These buttons have function handlers attached.&lt;br&gt;&lt;br&gt;",
186
- ["button",{onclick:"alert('button pressed!')"},"Alert Button"], // staight js
187
- "&amp;nbsp;&amp;nbsp;",
188
- ["button",{onclick:myFunc},"Time Button"], // bitwrench maps and registers event functions
189
- "&lt;br&gt;&lt;hr&gt;",
190
- ["h2","Built in Headings"],
191
- [1,2,3,4,5,6].map( function(x){return bw.html(["h"+x,"Heading "+x])}).join(""), // Headings
192
- "&lt;br&gt;&lt;hr&gt;",
193
- ["h2","Grid System (responsive)"],
194
- "Grid system (just uses css so can use either bitwrench.js loader or just bitwrench.css with no javascript. Use -fluid for responsive&lt;br&gt;&lt;br&gt;",
195
- ["style",{},"\n.boxEv {background-color: #aaa; height: 30px; border-radius:5px; border:1px solid black;}\n.boxOd {background-color: #ddd; height:30px; border-radius:5px;border:1px solid black;;}\n"], // some styles (note bw has CSS generation shown in another example)
196
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-1 boxEv"},c:"bw-col-1"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"},{a:{class:"bw-col-1 boxEv"},c:"bw-col-1"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"},{a:{class:"bw-col-1 boxEv"},c:"bw-col-1"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"},{a:{class:"bw-col-1 boxEv"},c:"bw-col-1"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"},{a:{class:"bw-col-1 boxEv"},c:"bw-col-1"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"},{a:{class:"bw-col-1 boxEv"},c:"bw-col-1"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"}]],
197
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-2 boxEv"},c:"bw-col-2"},{a:{class:"bw-col-2 boxOd"},c:"bw-col-2"},{a:{class:"bw-col-2 boxEv"},c:"bw-col-2"},{a:{class:"bw-col-2 boxOd"},c:"bw-col-2"},{a:{class:"bw-col-2 boxEv"},c:"bw-col-2"},{a:{class:"bw-col-2 boxOd"},c:"bw-col-2"}]],
198
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-3 boxEv"},c:"bw-col-3"},{a:{class:"bw-col-3 boxOd"},c:"bw-col-3"},{a:{class:"bw-col-3 boxEv"},c:"bw-col-3"},{a:{class:"bw-col-3 boxOd"},c:"bw-col-3"}]],
199
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-4 boxEv"},c:"bw-col-4"},{a:{class:"bw-col-4 boxOd"},c:"bw-col-4"},{a:{class:"bw-col-4 boxEv"},c:"bw-col-4"}]],
200
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-5 boxEv"},c:"bw-col-5"},{a:{class:"bw-col-7 boxOd"},c:"bw-col-7"}]],
201
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-6 boxEv"},c:"bw-col-6"},{a:{class:"bw-col-6 boxOd"},c:"bw-col-6"}]],
202
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-7 boxEv"},c:"bw-col-7"},{a:{class:"bw-col-5 boxOd"},c:"bw-col-5"}]],
203
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-8 boxEv"},c:"bw-col-8"},{a:{class:"bw-col-4 boxOd"},c:"bw-col-4"}]],
204
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-9 boxEv"},c:"bw-col-9"},{a:{class:"bw-col-3 boxOd"},c:"bw-col-3"}]],
205
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-10 boxEv"},c:"bw-col-10"},{a:{class:"bw-col-2 boxOd"},c:"bw-col-2"}]],
206
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-11 boxEv"},c:"bw-col-11"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"}]],
207
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-12 boxEv"},c:"bw-col-12"}]],
209
+ &quot;&lt;br&gt;&lt;hr&gt;&quot;,
210
+ [&quot;h2&quot;,{},&quot;Sample Buttons&quot;],
211
+ &quot;These buttons have function handlers attached.&lt;br&gt;&lt;br&gt;&quot;,
212
+ [&quot;button&quot;,{onclick:&quot;alert(&#39;button pressed!&#39;)&quot;},&quot;Alert Button&quot;], // staight js
213
+ &quot;&amp;nbsp;&amp;nbsp;&quot;,
214
+ [&quot;button&quot;,{onclick:myFunc},&quot;Time Button&quot;], // bitwrench maps and registers event functions
215
+ &quot;&lt;br&gt;&lt;hr&gt;&quot;,
216
+ [&quot;h2&quot;,&quot;Built in Headings&quot;],
217
+ [1,2,3,4,5,6].map( function(x){return bw.html([&quot;h&quot;+x,&quot;Heading &quot;+x])}).join(&quot;&quot;), // Headings
218
+ &quot;&lt;br&gt;&lt;hr&gt;&quot;,
219
+ [&quot;h2&quot;,&quot;Grid System (responsive)&quot;],
220
+ &quot;Grid system (just uses css so can use either bitwrench.js loader or just bitwrench.css with no javascript. Use -fluid for responsive&lt;br&gt;&lt;br&gt;&quot;,
221
+ [&quot;style&quot;,{},&quot;\n.boxEv {background-color: #aaa; height: 30px; border-radius:5px; border:1px solid black;}\n.boxOd {background-color: #ddd; height:30px; border-radius:5px;border:1px solid black;;}\n&quot;], // some styles (note bw has CSS generation shown in another example)
222
+ [&quot;div&quot;,{class:&quot;bw-row bw-center&quot;},[{a:{class:&quot;bw-col-1 boxEv&quot;},c:&quot;bw-col-1&quot;},{a:{class:&quot;bw-col-1 boxOd&quot;},c:&quot;bw-col-1&quot;},{a:{class:&quot;bw-col-1 boxEv&quot;},c:&quot;bw-col-1&quot;},{a:{class:&quot;bw-col-1 boxOd&quot;},c:&quot;bw-col-1&quot;},{a:{class:&quot;bw-col-1 boxEv&quot;},c:&quot;bw-col-1&quot;},{a:{class:&quot;bw-col-1 boxOd&quot;},c:&quot;bw-col-1&quot;},{a:{class:&quot;bw-col-1 boxEv&quot;},c:&quot;bw-col-1&quot;},{a:{class:&quot;bw-col-1 boxOd&quot;},c:&quot;bw-col-1&quot;},{a:{class:&quot;bw-col-1 boxEv&quot;},c:&quot;bw-col-1&quot;},{a:{class:&quot;bw-col-1 boxOd&quot;},c:&quot;bw-col-1&quot;},{a:{class:&quot;bw-col-1 boxEv&quot;},c:&quot;bw-col-1&quot;},{a:{class:&quot;bw-col-1 boxOd&quot;},c:&quot;bw-col-1&quot;}]],
223
+ [&quot;div&quot;,{class:&quot;bw-row bw-center&quot;},[{a:{class:&quot;bw-col-2 boxEv&quot;},c:&quot;bw-col-2&quot;},{a:{class:&quot;bw-col-2 boxOd&quot;},c:&quot;bw-col-2&quot;},{a:{class:&quot;bw-col-2 boxEv&quot;},c:&quot;bw-col-2&quot;},{a:{class:&quot;bw-col-2 boxOd&quot;},c:&quot;bw-col-2&quot;},{a:{class:&quot;bw-col-2 boxEv&quot;},c:&quot;bw-col-2&quot;},{a:{class:&quot;bw-col-2 boxOd&quot;},c:&quot;bw-col-2&quot;}]],
224
+ [&quot;div&quot;,{class:&quot;bw-row bw-center&quot;},[{a:{class:&quot;bw-col-3 boxEv&quot;},c:&quot;bw-col-3&quot;},{a:{class:&quot;bw-col-3 boxOd&quot;},c:&quot;bw-col-3&quot;},{a:{class:&quot;bw-col-3 boxEv&quot;},c:&quot;bw-col-3&quot;},{a:{class:&quot;bw-col-3 boxOd&quot;},c:&quot;bw-col-3&quot;}]],
225
+ [&quot;div&quot;,{class:&quot;bw-row bw-center&quot;},[{a:{class:&quot;bw-col-4 boxEv&quot;},c:&quot;bw-col-4&quot;},{a:{class:&quot;bw-col-4 boxOd&quot;},c:&quot;bw-col-4&quot;},{a:{class:&quot;bw-col-4 boxEv&quot;},c:&quot;bw-col-4&quot;}]],
226
+ [&quot;div&quot;,{class:&quot;bw-row bw-center&quot;},[{a:{class:&quot;bw-col-5 boxEv&quot;},c:&quot;bw-col-5&quot;},{a:{class:&quot;bw-col-7 boxOd&quot;},c:&quot;bw-col-7&quot;}]],
227
+ [&quot;div&quot;,{class:&quot;bw-row bw-center&quot;},[{a:{class:&quot;bw-col-6 boxEv&quot;},c:&quot;bw-col-6&quot;},{a:{class:&quot;bw-col-6 boxOd&quot;},c:&quot;bw-col-6&quot;}]],
228
+ [&quot;div&quot;,{class:&quot;bw-row bw-center&quot;},[{a:{class:&quot;bw-col-7 boxEv&quot;},c:&quot;bw-col-7&quot;},{a:{class:&quot;bw-col-5 boxOd&quot;},c:&quot;bw-col-5&quot;}]],
229
+ [&quot;div&quot;,{class:&quot;bw-row bw-center&quot;},[{a:{class:&quot;bw-col-8 boxEv&quot;},c:&quot;bw-col-8&quot;},{a:{class:&quot;bw-col-4 boxOd&quot;},c:&quot;bw-col-4&quot;}]],
230
+ [&quot;div&quot;,{class:&quot;bw-row bw-center&quot;},[{a:{class:&quot;bw-col-9 boxEv&quot;},c:&quot;bw-col-9&quot;},{a:{class:&quot;bw-col-3 boxOd&quot;},c:&quot;bw-col-3&quot;}]],
231
+ [&quot;div&quot;,{class:&quot;bw-row bw-center&quot;},[{a:{class:&quot;bw-col-10 boxEv&quot;},c:&quot;bw-col-10&quot;},{a:{class:&quot;bw-col-2 boxOd&quot;},c:&quot;bw-col-2&quot;}]],
232
+ [&quot;div&quot;,{class:&quot;bw-row bw-center&quot;},[{a:{class:&quot;bw-col-11 boxEv&quot;},c:&quot;bw-col-11&quot;},{a:{class:&quot;bw-col-1 boxOd&quot;},c:&quot;bw-col-1&quot;}]],
233
+ [&quot;div&quot;,{class:&quot;bw-row bw-center&quot;},[{a:{class:&quot;bw-col-12 boxEv&quot;},c:&quot;bw-col-12&quot;}]],
208
234
 
209
- "&lt;br&gt;&lt;hr&gt;",
210
- ["h2",{},"Simple Sign"],
211
- ["div",{style:"padding:10%; border:1px solid black;"},bw.htmlSign("This is a big sign!")],
212
- "&lt;br&gt;&lt;hr&gt;",
213
- ["h2",{},"Tabbed Content"],
235
+ &quot;&lt;br&gt;&lt;hr&gt;&quot;,
236
+ [&quot;h2&quot;,{},&quot;Simple Sign&quot;],
237
+ [&quot;div&quot;,{style:&quot;padding:10%; border:1px solid black;&quot;},bw.htmlSign(&quot;This is a big sign!&quot;)],
238
+ &quot;&lt;br&gt;&lt;hr&gt;&quot;,
239
+ [&quot;h2&quot;,{},&quot;Tabbed Content&quot;],
214
240
  bw.htmlTabs([
215
- ["Tab1",bw.loremIpsum(300)],
216
- ["Tab2",bw.loremIpsum(300,20)],
217
- ["Tab3",bw.loremIpsum(300,50)]],{tab_atr:{style:""}}) ,
218
- "&lt;br&gt;",
241
+ [&quot;Tab1&quot;,bw.loremIpsum(300)],
242
+ [&quot;Tab2&quot;,bw.loremIpsum(300,20)],
243
+ [&quot;Tab3&quot;,bw.loremIpsum(300,50)]],{tab_atr:{style:&quot;&quot;}}) ,
244
+ &quot;&lt;br&gt;&quot;,
219
245
  ]};
220
-
221
- bw.DOMInsertElement("body",bw.html(htmlData),true);
246
+
247
+ bw.DOMInsertElement(&quot;body&quot;,bw.html(htmlData),true);
222
248
  function myFunc(x){return x.innerHTML = (new Date()).toLocaleTimeString();} // button function
223
249
 
224
250
 
225
- bw.DOMInsertElement("head",bw.html(bw.htmlFavicon("\u266C","teal"))); // insert a favicon on the top tab of the page, "X" for a single letter
226
- bw.DOMInsertElement("head",bw.html({t:"title",c:"Bitwrench HTML Gen "})); // insert a page title on the browser tab
251
+ bw.DOMInsertElement(&quot;head&quot;,bw.html(bw.htmlFavicon(&quot;\u266C&quot;,&quot;teal&quot;))); // insert a favicon on the top tab of the page, &quot;X&quot; for a single letter
252
+ bw.DOMInsertElement(&quot;head&quot;,bw.html({t:&quot;title&quot;,c:&quot;Bitwrench HTML Gen &quot;})); // insert a page title on the browser tab
227
253
  &lt;/script&gt;
228
254
  &lt;/body&gt;
229
255
  &lt;/html&gt;
230
256
  </code></pre>
231
- <h2 id="sourcecodehome">Source code home</h2>
232
- <p>all source is at github:<br />
233
- <a href="http://github.com/deftio/bitwrench">bitwrench on github</a> </p>
257
+ <h2 id="source-code-home">Source code home</h2>
258
+ <p>all source is at github:<br><a href="http://github.com/deftio/bitwrench">bitwrench on github</a> </p>
234
259
  <h2 id="linting">Linting</h2>
235
- <p>bitwrench uses eslint for static code checking and analysis. Due to bitwrench's age we've kept ";" as a required part of the linting process. After running lint you should see no errors or warnings.</p>
236
- <pre><code class="bash language-bash">npm install eslint --save-dev
260
+ <p>bitwrench uses eslint for static code checking and analysis. Due to bitwrench&#39;s age we&#39;ve kept &quot;;&quot; as a required part of the linting process. After running lint you should see no errors or warnings.</p>
261
+ <pre><code class="language-bash">npm install eslint --save-dev
237
262
 
238
263
  ./node_modules/.bin/eslint --init
239
264
  </code></pre>
240
265
  <p>Now run the lint test like this:</p>
241
- <pre><code class="bash language-bash">npm run lint
266
+ <pre><code class="language-bash">npm run lint
242
267
  </code></pre>
243
- <h2 id="testsrequiresmochaandchaitestsuites">Tests (requires mocha and chai test suites)</h2>
268
+ <h2 id="tests--requires-mocha-and-chai-test-suites">Tests (requires mocha and chai test suites)</h2>
244
269
  <p>bitwrench is tested with the mocha framework installed locally using npm along with instanbul for code / line coverage</p>
245
- <pre><code class="bash language-bash">npm install mocha --save-dev mocha
270
+ <pre><code class="language-bash">npm install mocha --save-dev mocha
246
271
  </code></pre>
247
272
  <p>Run the tests as follows:</p>
248
- <pre><code class="bash language-bash">npm run test
273
+ <pre><code class="language-bash">npm run test
249
274
  </code></pre>
250
- <h2 id="releasehistory">Release History</h2>
275
+ <h2 id="release-history">Release History</h2>
251
276
  <ul>
252
- <li>1.2x Initial release </li>
277
+ <li>1.2x Initial release</li>
253
278
  </ul>
254
279
  <h2 id="license">License</h2>
255
280
  <p>bitwrench is released under the OSI Approved FreeBSD 2-clause license </p>
256
- <p>see LICENSE.txt file</p></body></html>
281
+ <p>see LICENSE.txt file</p>
282
+ </body></html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bitwrench",
3
- "version": "1.2.14",
3
+ "version": "1.2.16",
4
4
  "description": "A library for misc javascript functions.",
5
5
  "main": "./bitwrench.min.js",
6
6
  "repository": {
@@ -43,8 +43,8 @@
43
43
  },
44
44
  "scripts": {
45
45
  "update_rm": "./tools/emitreadme.sh && ./tools/updatereadme.js index.html index.html",
46
- "build": "./tools/update-bw-package.js package.json package.json && ./tools/export-bw-default-css.js bitwrench.css && uglifyjs bitwrench.js -o bitwrench.min.js && ./tools/umd2ModuleHack.js && npm pack",
47
- "cleanbuild": "npm run clean && npm run update_rm && npm run build",
46
+ "build": "./tools/update-bw-package.js package.json package.json && ./tools/export-bw-default-css.js bitwrench.css && uglifyjs bitwrench.js -o bitwrench.min.js && uglifyjs bitwrench_ESM.js -o bitwrench_ESM.min.js && ./tools/umd2ModuleHack.js && npm pack",
47
+ "cleanbuild": "npm run clean && npm run update_rm && npm run generate-sri && npm run build",
48
48
  "oldtest": "./node_modules/mocha/bin/mocha test/bitwrench_test.js --reporter spec",
49
49
  "test": "nyc --reporter=text --cache=false mocha ./test/bitwrench_test.js -r jsdom-global/",
50
50
  "testkarma": "./node_modules/karma/bin/karma start karma.conf.js",
@@ -52,7 +52,7 @@
52
52
  "lint": "./node_modules/.bin/eslint bitwrench.js",
53
53
  "instrument-bw": "./node_modules/nyc/bin/nyc.js instrument ./bitwrench.js ./instr_tmp",
54
54
  "export_chrome": "export CHROME_BIN=/usr/bin/chromium-browser",
55
- "generate-sri": "cat bitwrench.js | openssl dgst -sha384 -binary | openssl base64 -A > bitwrench.js_sri.txt && cat bitwrench.min.js | openssl dgst -sha384 -binary | openssl base64 -A > bitwrench.min.js_sri.txt"
55
+ "generate-sri": "cat bitwrench.js | openssl dgst -sha384 -binary | openssl base64 -A > bitwrench.js_sri.txt && cat bitwrench.min.js | openssl dgst -sha384 -binary | openssl base64 -A > bitwrench.min.js_sri.txt && cat bitwrench_ESM.js | openssl dgst -sha384 -binary | openssl base64 -A > bitwrench_ESM.js_sri.txt && cat bitwrench_ESM.min.js | openssl dgst -sha384 -binary | openssl base64 -A > bitwrench_ESM.min.js_sri.txt"
56
56
  },
57
57
  "homepage": "http://deftio.com/bitwrench",
58
58
  "dependencies": {}
@@ -707,6 +707,26 @@ describe("#htmlIsVoidTag()", function() {
707
707
  });
708
708
  });
709
709
 
710
+ });
711
+ // ================================================================
712
+ describe("#htmlEmit()", function() {
713
+ /**
714
+ gen HTML from object (or JSON)
715
+ */
716
+ var tests = [
717
+ {args: ["test content"], expected: "test content" },
718
+ {args: [{c:"test content"}], expected: "<div>test content</div>" },
719
+ {args: [{t:"",c:"test content"}], expected: "test content" },
720
+
721
+ ];
722
+
723
+ tests.forEach(function(test) {
724
+ it("bw.htmlEmit " + test.args.length + "args", function() {
725
+ var res = bw.htmlEmit.apply(null, test.args).html;
726
+ assert.deepEqual(res, test.expected);
727
+ });
728
+ });
729
+
710
730
  });
711
731
 
712
732
  // ================================================================