bitwrench 1.2.15 → 2.0.7

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.
Files changed (119) hide show
  1. package/README.md +160 -158
  2. package/bin/bitwrench.js +3 -0
  3. package/dist/bitwrench-code-edit.cjs.js +639 -0
  4. package/dist/bitwrench-code-edit.es5.js +875 -0
  5. package/dist/bitwrench-code-edit.es5.min.js +15 -0
  6. package/dist/bitwrench-code-edit.esm.js +628 -0
  7. package/dist/bitwrench-code-edit.esm.min.js +15 -0
  8. package/dist/bitwrench-code-edit.umd.js +645 -0
  9. package/dist/bitwrench-code-edit.umd.min.js +15 -0
  10. package/dist/bitwrench.cjs.js +6983 -0
  11. package/dist/bitwrench.cjs.min.js +62 -0
  12. package/dist/bitwrench.css +5100 -0
  13. package/dist/bitwrench.es5.js +8446 -0
  14. package/dist/bitwrench.es5.min.js +31 -0
  15. package/dist/bitwrench.esm.js +6981 -0
  16. package/dist/bitwrench.esm.min.js +62 -0
  17. package/dist/bitwrench.umd.js +6989 -0
  18. package/dist/bitwrench.umd.min.js +62 -0
  19. package/dist/builds.json +127 -0
  20. package/dist/sri.json +18 -0
  21. package/package.json +86 -24
  22. package/readme.html +288 -0
  23. package/src/bitwrench-code-edit.js +627 -0
  24. package/src/bitwrench-color-utils.js +311 -0
  25. package/src/bitwrench-component-base.js +736 -0
  26. package/src/bitwrench-components-inline.js +374 -0
  27. package/src/bitwrench-components-v2.js +1879 -0
  28. package/src/bitwrench-components.js +610 -0
  29. package/src/bitwrench-styles.js +3240 -0
  30. package/src/bitwrench.js +3367 -0
  31. package/src/cli/convert.js +205 -0
  32. package/src/cli/index.js +122 -0
  33. package/src/cli/inject.js +55 -0
  34. package/src/cli/layout-default.js +142 -0
  35. package/src/generate-css.js +381 -0
  36. package/src/vendor/quikdown.js +654 -0
  37. package/src/version.js +16 -0
  38. package/.eslintrc.json +0 -27
  39. package/.github/workflows/codeql-analysis.yml +0 -72
  40. package/.travis.yml +0 -34
  41. package/bitwrench.css +0 -92
  42. package/bitwrench.js +0 -3348
  43. package/bitwrench.js_sri.txt +0 -1
  44. package/bitwrench.min.js +0 -1
  45. package/bitwrench.min.js_sri.txt +0 -1
  46. package/bitwrench_ESM.js +0 -3207
  47. package/dev/bitwrench-todo.md +0 -215
  48. package/dev/css-arrows.md +0 -23
  49. package/dev/docStringDev.js +0 -124
  50. package/dev/docStringParseDev.js +0 -171
  51. package/dev/figures.html +0 -37
  52. package/dev/html_gen.js +0 -349
  53. package/dev/htmld.md +0 -250
  54. package/dev/htmldev.html +0 -45
  55. package/dev/index-old.html +0 -87
  56. package/dev/misc-notes.md +0 -21
  57. package/dev/notes.md +0 -2
  58. package/dev/sizes.html +0 -49
  59. package/dev/universal-js-module.js +0 -37
  60. package/examples/example1.html +0 -78
  61. package/examples/example10.html +0 -84
  62. package/examples/example2.html +0 -44
  63. package/examples/example3.html +0 -50
  64. package/examples/example4.html +0 -22
  65. package/examples/example5.html +0 -82
  66. package/examples/example6.html +0 -128
  67. package/examples/example7.html +0 -91
  68. package/examples/example8.html +0 -27
  69. package/examples/example9.html +0 -102
  70. package/icon/bitwrench-dark-tall.png +0 -0
  71. package/icon/bitwrench-dark.png +0 -0
  72. package/icon/bitwrench-icon-lt-grey.png +0 -0
  73. package/icon/bitwrench-icon.vsd +0 -0
  74. package/icon/bitwrench-logo-dark.png +0 -0
  75. package/icon/bitwrench-logo-full.png +0 -0
  76. package/icon/bitwrench-logo-green.png +0 -0
  77. package/icon/bitwrench-logo-grey.png +0 -0
  78. package/icon/bitwrench-logo-white.png +0 -0
  79. package/icon/bitwrench-logos-colors.png +0 -0
  80. package/icon/bitwrench-thick-logo.png +0 -0
  81. package/icon/bitwrench-thick-teal/android-chrome-192x192.png +0 -0
  82. package/icon/bitwrench-thick-teal/android-chrome-512x512.png +0 -0
  83. package/icon/bitwrench-thick-teal/apple-touch-icon.png +0 -0
  84. package/icon/bitwrench-thick-teal/browserconfig.xml +0 -9
  85. package/icon/bitwrench-thick-teal/favicon-16x16.png +0 -0
  86. package/icon/bitwrench-thick-teal/favicon-32x32.png +0 -0
  87. package/icon/bitwrench-thick-teal/favicon.ico +0 -0
  88. package/icon/bitwrench-thick-teal/mstile-144x144.png +0 -0
  89. package/icon/bitwrench-thick-teal/mstile-150x150.png +0 -0
  90. package/icon/bitwrench-thick-teal/mstile-310x150.png +0 -0
  91. package/icon/bitwrench-thick-teal/mstile-310x310.png +0 -0
  92. package/icon/bitwrench-thick-teal/mstile-70x70.png +0 -0
  93. package/icon/bitwrench-thick-teal/site.webmanifest +0 -19
  94. package/icon/bitwrench-thick-teal.ico +0 -0
  95. package/icon/bitwrench-thick-teal.svg +0 -44
  96. package/icon/bitwrench-thick-teal.zip +0 -0
  97. package/icon/favicon-test.html +0 -20
  98. package/icon/logos-test.PNG +0 -0
  99. package/images/bitwrench-512x512.png +0 -0
  100. package/images/bitwrench-logo-med.png +0 -0
  101. package/images/bitwrench-thick-logo.png +0 -0
  102. package/images/bitwrench-thick-logo.svg +0 -64
  103. package/images/bitwrench-thick-teal.ico +0 -0
  104. package/images/favicon.ico +0 -0
  105. package/index.html +0 -256
  106. package/instr_tmp/bitwrench.js +0 -1350
  107. package/karma.conf.js +0 -140
  108. package/makefile +0 -21
  109. package/quick-docs.html +0 -206
  110. package/test/bitwrench_test.js +0 -1255
  111. package/test/karma-test.js +0 -1081
  112. package/tools/bw_deprecatedNames.js +0 -19
  113. package/tools/bwconsole.js +0 -20
  114. package/tools/createSimpleHTMLPage.js +0 -41
  115. package/tools/emitreadme.sh +0 -4
  116. package/tools/export-bw-default-css.js +0 -41
  117. package/tools/umd2ModuleHack.js +0 -32
  118. package/tools/update-bw-package.js +0 -36
  119. package/tools/updatereadme.js +0 -34
package/dev/index-old.html DELETED
@@ -1,87 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
- <link rel="icon" type="image/x-icon" href="./images/bitwrench-thick-teal.ico" />
6
-
7
- <title>bitwrench.js</title>
8
- <!--
9
- bitwrench.js intro page
10
- (c) M A Chatterjee 2012-2018 deftio<at>deftio<dot>com
11
- github: https:github.com/deftio/bitwrench
12
- web: https:deftio.com/bitwrench
13
- NPM: https://www.npmjs.com/package/bitwrench
14
- -->
15
- <link rel="stylesheet" type="text/css" href="bitwrench.css" />
16
- <!-- Global site tag (gtag.js) - Google Analytics -->
17
- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-30080304-3"></script>
18
- <script>
19
- window.dataLayer = window.dataLayer || [];
20
- function gtag(){dataLayer.push(arguments);}
21
- gtag('js', new Date());
22
- gtag('config', 'UA-30080304-3');
23
- </script>
24
-
25
- <script type="text/javascript" src="./bitwrench.js" ></script>
26
- </head>
27
- <body class="bw-def-page-setup bw-font-sans-serif">
28
- <div class="bw-container">
29
- <div class="bw-col-12">
30
- <a href="http://www.deftio.com/bitwrench"><img src="./images/bitwrench-thick-logo.png" width="50%" alt="bitwrench.js"></img></a>
31
- <h1>Intro</h1>
32
- <p id="versionArea"></p>
33
- <br>
34
-
35
-
36
- <p>bitwrench is a javascript library for useful demo hacking and misc kitchen sink operations. 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 I don’t want to clutter my build dir with lots of “weird web stuff” - just write a simple HTML page with bitwrench and still load/debug raw text files, JSON, arrays and other bits of embedded files with no extra dependancies.</p>
37
- <ul>
38
- <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
39
- <ul>
40
- <li>html([“div”, {class:“class1 class2”, onclick:“myFunction(this)”,“This is the content”}]</li>
41
- <li>supports “deep” hieararchical JSON constructs and arrays</li>
42
- <li>registerFunction abilities allow functions to be passed statically to HTML elements (see docs)</li>
43
- </ul>
44
- </li>
45
- <li><strong>Color conversions and interpolation</strong>
46
- <ul>
47
- <li>RGB, RGBa, HSL, HSLa, and theme generation both as numeric values also as CSS outputs</li>
48
- </ul>
49
- </li>
50
- <li><strong>setting/getting cookies</strong> with defautls</li>
51
- <li><strong>pretty printing json</strong></li>
52
- <li><strong>Saving/Loading application data files</strong> (works in both browser or node)
53
- <ul>
54
- <li>save / load files as raw or JSON</li>
55
- </ul>
56
- </li>
57
- <li><strong>Getting URL parameters with defaults</strong>
58
- <ul>
59
- <li>simple parsing of URL params, also used for command line scripts</li>
60
- </ul>
61
- </li>
62
- <li><strong>Data manipulation functions</strong> and other “random” things (interpolation, clipping, multi-d arrays, random())</li>
63
- <li><strong>Logging</strong> with time-stamps, messaging, and pretty printing (raw, HTML, and text)
64
- <ul>
65
- <li>Logging also has auto dissolve so one can log a process and then dump later or suppress in ‘production’</li>
66
- </ul>
67
- </li>
68
- <li><strong>Built-in docString parsing</strong> with extraction support</li>
69
- </ul>
70
- <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>
71
- <p>Of course your mileage may very…</p>
72
- <p>A minified form bitwrench.min.js is provided with identical functionality</p>
73
-
74
- <br><br>
75
- <div id="content"></div>
76
- <br><br>
77
- <div class="bw-center" style="font-size: 9pt"><span style="color:teal">bit</span>wrench.js&nbsp;&nbsp;&copy&nbsp;2012-<span id="cdate"></span>&nbsp; M A Chatterjee</div><br>
78
- </div>
79
- </div>
80
- <script type="text/javascript">
81
- bw.DOMGetElements("#versionArea")[0].innerHTML = "<strong>bitwrench.js version:</strong> " + bw.version()["version"];
82
- bw.DOMGetElements("#cdate")[0].innerHTML = (new Date()).getFullYear();
83
- var h = bw.buildHTMLObjString;
84
- </script>
85
-
86
- </body>
87
- </html>
package/dev/misc-notes.md DELETED
@@ -1,21 +0,0 @@
1
- //=============================================
2
- //arrows for table sort
3
- .bw-table-sort-upa::after {
4
- content: "\2191";
5
- }
6
-
7
- .bw-table-sort-dna::after {
8
- content: "\2193";
9
- }
10
-
11
- .bw-table-sort-xxa::after {
12
- content: "\00a0";
13
- }
14
- .bw-table-sort-up::after {
15
- }
16
-
17
- .bw-table-sort-dn::after {
18
- }
19
-
20
- .bw-table-sort-xx::after {
21
- }
package/dev/notes.md DELETED
@@ -1,2 +0,0 @@
1
- when running karma (browser tests) may need to tie in to chromium on ubuntu. if so use this:
2
- export CHROME_BIN=/usr/bin/chromium-browser
package/dev/sizes.html DELETED
@@ -1,49 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
- <link rel="icon" type="image/x-icon" href="../images/favicon.ico" />
6
- <!-- above is all boiler plate -->
7
-
8
- <title>bitwrench.js</title>
9
- <!-- bitwrench.js quick-docs doc
10
- (c) M A Chatterjee
11
- deftio <at> deftio <dot> com
12
- github: https:github.com/deftio/bitwrench
13
- web: https://deftio.com/bitwrench
14
- -->
15
-
16
- <script type="text/javascript" src="../bitwrench.min.js" bwargs="ex1:1;ex2:2"></script>
17
-
18
- </head>
19
-
20
- <body class="bw-def-page-setup bw-font-sans-serif">
21
- <div class="bw-container">
22
- <div class="bw-col-10">
23
- <img src="../images/bitwrench-thick-logo.png" width="500"></img>
24
- <h1>Bitwrench Size Analysis</h1>
25
- <p id="versionArea"></p>
26
- <br>
27
- <div>total size (bytes) not incl umd wrapper = <span id="total"></span></div>
28
- Size of each function for pruning (bitwrench.min.js)
29
-
30
-
31
- </div>
32
- <div id="tab1"></div>
33
- <!-- grid demo area -->
34
- </div>
35
-
36
- <script>
37
- var i, t = [["Name","Type", "Key size (bytes)", "Val Size (bytes)", "Total (bytes)"]];
38
- for (i in bw) {
39
- var s = "undef";
40
- if (bw.to(bw[i] != "undefined"))
41
- var s = String(bw[i]).length;
42
- t.push( [i,bw.to(bw[i]), i.length, s, i.length+s])
43
- }
44
- bw.DOM("#tab1",bw.htmlTable(t,{"sortable":true}));
45
- bw.sortHTMLTable("#tab1",4,"down"); // show biggest at top...
46
- bw.DOM("#total",t.reduce((s,x)=> s+(isNaN(Number(x[4]))?0:Number(x[4])),0).toString())
47
- </script>
48
- </body>
49
- </html>
package/dev/universal-js-module.js DELETED
@@ -1,37 +0,0 @@
1
- /**
2
- "universal" js module definition borrowed from
3
- https://github.com/umdjs/umd/blob/master/templates/returnExports.js
4
-
5
-
6
- */
7
- "use strict";
8
-
9
- (function (root, factory) {
10
- if (typeof define === 'function' && define.amd) {
11
- // AMD. Register as an anonymous module.
12
- define([], factory);
13
- } else if (typeof module === 'object' && module.exports) {
14
- // Node. Does not work with strict CommonJS, but
15
- // only CommonJS-like environments that support module.exports,
16
- // like Node.
17
- console.log("node...");
18
- module.exports = factory();
19
- } else {
20
- // console.log("browser..",root, typeof root);
21
- // Browser globals (root is window)
22
- var module = factory();
23
- root[module["exportName"]] = module;
24
- }
25
-
26
- }(typeof self !== 'undefined' ? self : this, function () {
27
-
28
- "use strict";
29
-
30
- var _f = {};
31
-
32
- _f.exportName = "myModuleName"; // visible name of module
33
-
34
-
35
- return _f;
36
-
37
- }));
package/examples/example1.html DELETED
@@ -1,78 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
- <link rel="icon" type="image/x-icon" href="../images/favicon.ico" />
6
- <!-- bitwrench.js library examples
7
- (c) M A Chatterjee
8
- deftio <at> deftio <dot> com
9
- web : http:deftio.com/bitwrench
10
- github: http:github.com/deftio/bitwrench
11
- -->
12
- <script type="text/javascript" src="../bitwrench.js"></script>
13
-
14
- </head>
15
- <body class="bw-def-page-setup bw-font-sans-serif">
16
- <script>
17
-
18
- //sample function to generate some sample table data.
19
- //loops used instead of array.map() for those less familiar with javascript map/filter/reduce
20
- function getRandomTableData(cols,rows) {
21
- var d = bw.multiArray(bw.random,[rows,cols]); //
22
-
23
- var headers = new Array(cols); // // make headers. Note see docs in bw.makeHTMLTable for data w/o headers
24
- for (i=0; i< headers.length; i++)
25
- headers[i] = "Col-"+i;
26
- d.unshift(headers); // in Javascript this oddly named function inserts an element at the beginning of an array.
27
- return d;
28
- }
29
-
30
- var content =
31
- [
32
- ["h1",{},"Simple Example Page (browser version)"],
33
- ["p", {},"<strong>bitwrench.js version:</strong> " + bw.version()["version"]],
34
- ["p",{},"This is a test for building completely programmatic content with bitwrench.js."],
35
- ["h2",{},"Some Sample Content"],
36
- ["div",{id:"test"},bw.loremIpsum(250)],
37
- ["h2",{},"More Sample Content but using only half width"],
38
- ["div",{"class":'bw-col-6'},bw.loremIpsum(300)], // style:"background-image:url(../images/bitwrench.png) no-repeat 100% 100%;"}
39
- "<br>",
40
- ["p",{"class":"bw-col-6"},bw.loremIpsum(300)],
41
- ["h2",{},"Sample Table Data"],
42
- ["p",{}, "The following table is autogenerated from a Javascript array of data. The table is sortable by clicking on the column headers."],
43
- bw.htmlTable(getRandomTableData(12,8),{sortable:true}),
44
- ["h2",{},"Sample Content with 3 Columns"],
45
- {c:"Left col is left justified, center is center justiifed, right is right justified.<br><br>"},
46
- ["div",{"class":"bw-row"}, //create a row
47
- [
48
- ["div",{"class":"bw-col-4 bw-left "},bw.loremIpsum(500)],
49
- ["div",{"class":"bw-col-4 bw-center bw-pad1"},bw.loremIpsum(700,33)],
50
- ["div",{"class":"bw-col-4 bw-right "},bw.loremIpsum(500)],
51
- ],
52
- ],
53
- ["h2",{},"Tabbed Content"],
54
- bw.htmlTabs([["Tab1",bw.loremIpsum(500)],["Tab2",bw.loremIpsum(500,20)],["Tab3",bw.loremIpsum(500,50)]],{tab_atr:{style:""}}) ,
55
- "<br>",
56
- ['h2',{},"Accordian"],
57
- ["div",{},"An accordian allows expanding and collapsing of a list of dynamic content"],
58
- "<br>",
59
-
60
- //accordian done using bw.html accordian
61
- bw.htmlAccordian([
62
- ["Accordian 1",bw.loremIpsum(500,4)],
63
- ["Accordian 2",bw.loremIpsum(500,5),{show:false}],
64
- ["Accordian 3",bw.htmlTabs([["Inner Tab1",bw.loremIpsum(500,10)],["Inner Tab2",bw.loremIpsum(500,20)],["Inner Tab3",bw.loremIpsum(500,50)]])],
65
- ["Accordian 4",bw.loremIpsum(500,4),{show:true}]
66
- ]
67
- ,{ atr_h: {class:"bw-thm-dark"},atr_c:{"style": "color: red "}}
68
- ),
69
- "<br><br>"
70
-
71
- ];
72
-
73
- // make the content go live since we're in a browser. Note that if we were on node we could just write out our content
74
- bw.DOMInsertElement("body",{c:content},true);
75
-
76
- </script>
77
- </body>
78
- </html>
package/examples/example10.html DELETED
@@ -1,84 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- </head>
5
- <body class="bw-def-page-setup bw-font-sans-serif">
6
-
7
- <script type="module">
8
- import bw from '../bitwrench_ESM.js';
9
- window.bw = bw;
10
- var htmlData = {c: //for more on the format, see docs github.com/deftio/bitwrench
11
- [
12
- ["h1" ,{"class":"bw-h1"},"Bitwrench Test Area : using ES Module Version" ],
13
- "bitwrench version: "+bw.version().version +"<br><br>",
14
- ["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."],
15
- "<hr>",
16
- ["h2","Lorem Ipsum Generator"],
17
- "Good for testing simple layout ideas.<br><br>",
18
- ["div",{},bw.loremIpsum(230)],
19
- "<hr>",
20
- ["h2",{},"Sample Content with 3 Columns"],
21
- ["div",{"class":"bw-row"},
22
- [
23
- ["div",{"class":"bw-col-4 bw-left "},"<h3>Left justified</h3>"+bw.loremIpsum(95)], //mix text and html freely
24
- ["div",{"class":"bw-col-4 bw-center bw-pad1"},"<h3>Centered</h3>"+bw.loremIpsum(95,3)],
25
- ["div",{"class":"bw-col-4 bw-right "},"<h3>Right justified</h3>"+bw.loremIpsum(95,2)],
26
- ],
27
- ],
28
- "<br><hr>",
29
- ["h2", {}, "Example Sortable Table"],
30
- bw.htmlTable( // json to table (note table data can be functions as well)
31
- [
32
- ["Name","Age", "Prof", "Fav Color"], // just an 2D array
33
- ["Sue", 34, "Engineer", {a:{style:"color:red"},c:"red"}], // inline json-html objects
34
- ["Bob" ,35, "Teacher", {a:{style:"color:green"},c:"green"}],
35
- ["Vito",23, "Mechanic", {a:{style:"color:blue",onclick:"alert('blue!')"},c:"blue"}],
36
- ["Hank",73, "Retired", {a:{style:"color:purple"},c:"purple"}]
37
- ],{sortable:true}),
38
- "<br><hr>",
39
- ["h2",{},"Sample Buttons"],
40
- "These buttons have function handlers attached.<br><br>",
41
- ["button",{onclick:"alert('button pressed!')"},"Alert Button"], // staight js
42
- "&nbsp;&nbsp;",
43
- ["button",{onclick:myFunc},"Time Button"], // bitwrench maps and registers event functions
44
- "<br><hr>",
45
- ["h2","Built in Headings"],
46
- [1,2,3,4,5,6].map( function(x){return bw.html(["h"+x,"Heading "+x])}).join(""), // Headings
47
- "<br><hr>",
48
- ["h2","Grid System (responsive)"],
49
- "Grid system (just uses css so can use either bitwrench.js loader or just bitwrench.css with no javascript. Use -fluid for responsive<br><br>",
50
- ["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)
51
- ["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"}]],
52
- ["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"}]],
53
- ["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"}]],
54
- ["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"}]],
55
- ["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"}]],
56
- ["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"}]],
57
- ["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"}]],
58
- ["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"}]],
59
- ["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"}]],
60
- ["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"}]],
61
- ["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"}]],
62
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-12 boxEv"},c:"bw-col-12"}]],
63
-
64
- "<br><hr>",
65
- ["h2",{},"Simple Sign"],
66
- ["div",{style:"padding:10%; border:1px solid black;"},bw.htmlSign("This is a big sign!")],
67
- "<br><hr>",
68
- ["h2",{},"Tabbed Content"],
69
- bw.htmlTabs([
70
- ["Tab1",bw.loremIpsum(300)],
71
- ["Tab2",bw.loremIpsum(300,20)],
72
- ["Tab3",bw.loremIpsum(300,50)]],{tab_atr:{style:""}}) ,
73
- "<br>",
74
- ]};
75
-
76
- bw.DOMInsertElement("body",bw.html(htmlData),true);
77
- function myFunc(x){return x.innerHTML = (new Date()).toLocaleTimeString();} // button function
78
-
79
-
80
- bw.DOMInsertElement("head",bw.html(bw.htmlFavicon("\u266C","teal"))); // insert a favicon on the top tab of the page, "X" for a single letter
81
- bw.DOMInsertElement("head",bw.html({t:"title",c:"Bitwrench HTML Gen "})); // insert a page title on the browser tab
82
- </script>
83
- </body>
84
- </html>
package/examples/example2.html DELETED
@@ -1,44 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
- <link rel="icon" type="image/x-icon" href="../images/favicon.ico" />
6
- <!-- bitwrench.js library examples
7
- (c) M A Chatterjee
8
- deftio <at> deftio <dot> com
9
- web : http:deftio.com/bitwrench
10
- github: http:github.com/deftio/bitwrench
11
- -->
12
- <script type="text/javascript" src="../bitwrench.js"></script>
13
- </head>
14
- <body class="bw-def-page-setup bw-font-sans-serif">
15
- <script>
16
- //var bw = bitwrench;
17
-
18
- bw.CSSSimpleThemes(1);
19
- // =======================================================
20
- var i,s="";
21
- for (i=0; i<40; i++) {
22
- s+= bw.html(["div",{class:"bw-col-6",style:"height:20px; background-color:" + bw.colorToRGBHex(bw.colorInterp(i,0,40,["#029b38","#cb3288","#8babc9","#9fffb0"]))},""]);
23
- }
24
-
25
- var content =
26
- [
27
- ["h1" ,{},"Examples with Colors"],
28
- ["p" ,{},"bitwrench.js version " + bw.version()["version"] ],
29
- ["h2" ,{},"Color Bars with bw.colorInterp()"],
30
- ["pre",{},s],
31
- "<br>",
32
- ["h2", {}, "Grey Scale Color Boxes using bwHtmlTable() and bw.multiArray()"],
33
- "<br>",
34
- ["div",{}, bw.htmlTable(bw.multiArray(function(){return bw.html(["div",{style:"width:45px;height:45px;background-color:"+bw.colorToRGBHex(bw.colorInterp(bw.random(0,1,{setType:"float"})))},""])},[10,10]),{useFirstRowAsHeaders:false})]
35
- ];
36
-
37
- // make the content go live..
38
- bw.DOMInsertElement( "body", {a:{class:"container"},c:content},true);
39
-
40
-
41
-
42
- </script>
43
- </body>
44
- </html>
package/examples/example3.html DELETED
@@ -1,50 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
- <link rel="icon" type="image/x-icon" href="../images/favicon.ico" />
6
- <!-- bitwrench.js library examples
7
- (c) M A Chatterjee
8
- deftio <at> deftio <dot> com
9
- web : http:deftio.com/bitwrench
10
- github: http:github.com/deftio/bitwrench
11
- -->
12
- <script type="text/javascript" src="../bitwrench.js"></script>
13
-
14
- </head>
15
-
16
- <body class="bw-def-page-setup bw-font-sans-serif">
17
- <div id="content"></div>
18
- <script> // this page is written in JSON-HTML.
19
-
20
- var jsonContent = [
21
- ["h2", {style:"font-style:italic"},"This is the JSON content section"],
22
- "Some content is just a string...<br>",
23
- {c: [["span",{},"inside1 "],"inside string contnt 2","<br>",["p",{"style":"color:red"},"inside red content"]]},
24
- ["p",{onclick:function(){alert("I was clicked!")}},"Some content which can be clicked."],
25
-
26
- ]
27
-
28
-
29
- // this is the static content at the top of the page.
30
- var html =
31
- { t: "div",
32
- c:[
33
- ["h2",{},"Bitwrench JSON Content demo"],
34
- "<br>",
35
- ["p",{},"The JSON below this paragraph represents the page content. The JSON can contain hierachal arrays or objects."],
36
- "<hr>",
37
- bw.htmlJSON(jsonContent),
38
- "<hr>",
39
- bw.html({c:jsonContent})
40
- ]
41
- };
42
-
43
-
44
- bw.DOM("#content",bw.html(html));
45
-
46
- </script>
47
-
48
-
49
- </body>
50
- </html>
package/examples/example4.html DELETED
@@ -1,22 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
- <link rel="icon" type="image/x-icon" href="../images/favicon.ico" />
6
- <!-- bitwrench.js library examples
7
- (c) M A Chatterjee
8
- deftio <at> deftio <dot> com
9
- web : http:deftio.com/bitwrench
10
- github: http:github.com/deftio/bitwrench
11
- -->
12
- <script type="text/javascript" src="../bitwrench.js"></script>
13
- </head>
14
- <body class="bw-def-page-setup bw-font-sans-serif" >
15
- <script>
16
-
17
- // make the content go live since we're in a browser. Note that if we were on node we could just write out our content
18
- bw.DOMInsertElement("body", bw.htmlSign("this is the simple\nsign on two lines"));
19
-
20
- </script>
21
- </body>
22
- </html>
package/examples/example5.html DELETED
@@ -1,82 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <script src="../bitwrench.js" ></script>
5
- </head>
6
- <body class="bw-def-page-setup bw-font-sans-serif">
7
- <script>
8
- var htmlData = {c: //for more on the format, see docs github.com/deftio/bitwrench
9
- [
10
- ["h1" ,{"class":"bw-h1"},"Bitwrench Test Area" ],
11
- "bitwrench version: "+bw.version().version +"<br><br>",
12
- ["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."],
13
- "<hr>",
14
- ["h2","Lorem Ipsum Generator"],
15
- "Good for testing simple layout ideas.<br><br>",
16
- ["div",{},bw.loremIpsum(230)],
17
- "<hr>",
18
- ["h2",{},"Sample Content with 3 Columns"],
19
- ["div",{"class":"bw-row"},
20
- [
21
- ["div",{"class":"bw-col-4 bw-left "},"<h3>Left justified</h3>"+bw.loremIpsum(95)], //mix text and html freely
22
- ["div",{"class":"bw-col-4 bw-center bw-pad1"},"<h3>Centered</h3>"+bw.loremIpsum(95,3)],
23
- ["div",{"class":"bw-col-4 bw-right "},"<h3>Right justified</h3>"+bw.loremIpsum(95,2)],
24
- ],
25
- ],
26
- "<br><hr>",
27
- ["h2", {}, "Example Sortable Table"],
28
- bw.htmlTable( // json to table (note table data can be functions as well)
29
- [
30
- ["Name","Age", "Prof", "Fav Color"], // just an 2D array
31
- ["Sue", 34, "Engineer", {a:{style:"color:red"},c:"red"}], // inline json-html objects
32
- ["Bob" ,35, "Teacher", {a:{style:"color:green"},c:"green"}],
33
- ["Vito",23, "Mechanic", {a:{style:"color:blue",onclick:"alert('blue!')"},c:"blue"}],
34
- ["Hank",73, "Retired", {a:{style:"color:purple"},c:"purple"}]
35
- ],{sortable:true}),
36
- "<br><hr>",
37
- ["h2",{},"Sample Buttons"],
38
- "These buttons have function handlers attached.<br><br>",
39
- ["button",{onclick:"alert('button pressed!')"},"Alert Button"], // staight js
40
- "&nbsp;&nbsp;",
41
- ["button",{onclick:myFunc},"Time Button"], // bitwrench maps and registers event functions
42
- "<br><hr>",
43
- ["h2","Built in Headings"],
44
- [1,2,3,4,5,6].map( function(x){return bw.html(["h"+x,"Heading "+x])}).join(""), // Headings
45
- "<br><hr>",
46
- ["h2","Grid System (responsive)"],
47
- "Grid system (just uses css so can use either bitwrench.js loader or just bitwrench.css with no javascript. Use -fluid for responsive<br><br>",
48
- ["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)
49
- ["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"}]],
50
- ["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"}]],
51
- ["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"}]],
52
- ["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"}]],
53
- ["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"}]],
54
- ["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"}]],
55
- ["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"}]],
56
- ["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"}]],
57
- ["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"}]],
58
- ["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"}]],
59
- ["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"}]],
60
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-12 boxEv"},c:"bw-col-12"}]],
61
-
62
- "<br><hr>",
63
- ["h2",{},"Simple Sign"],
64
- ["div",{style:"padding:10%; border:1px solid black;"},bw.htmlSign("This is a big sign!")],
65
- "<br><hr>",
66
- ["h2",{},"Tabbed Content"],
67
- bw.htmlTabs([
68
- ["Tab1",bw.loremIpsum(300)],
69
- ["Tab2",bw.loremIpsum(300,20)],
70
- ["Tab3",bw.loremIpsum(300,50)]],{tab_atr:{style:""}}) ,
71
- "<br>",
72
- ]};
73
-
74
- bw.DOMInsertElement("body",bw.html(htmlData),true);
75
- function myFunc(x){return x.innerHTML = (new Date()).toLocaleTimeString();} // button function
76
-
77
-
78
- bw.DOMInsertElement("head",bw.html(bw.htmlFavicon("\u266C","teal"))); // insert a favicon on the top tab of the page, "X" for a single letter
79
- bw.DOMInsertElement("head",bw.html({t:"title",c:"Bitwrench HTML Gen "})); // insert a page title on the browser tab
80
- </script>
81
- </body>
82
- </html>