bitwrench 1.2.16 → 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 (130) 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/bitwrench_ESM.js_sri.txt +0 -1
  48. package/bitwrench_ESM.min.js +0 -1
  49. package/bitwrench_ESM.min.js_sri.txt +0 -1
  50. package/dev/bitwrench-todo.md +0 -215
  51. package/dev/css-arrows.md +0 -23
  52. package/dev/docStringDev.js +0 -124
  53. package/dev/docStringParseDev.js +0 -171
  54. package/dev/example11-load-mjs-page.html +0 -17
  55. package/dev/figures.html +0 -37
  56. package/dev/html_gen.js +0 -349
  57. package/dev/htmld.md +0 -250
  58. package/dev/htmldev.html +0 -45
  59. package/dev/index-old.html +0 -87
  60. package/dev/misc-notes.md +0 -21
  61. package/dev/norm.css +0 -30
  62. package/dev/notes.md +0 -2
  63. package/dev/pageData.mjs +0 -69
  64. package/dev/sizes.html +0 -49
  65. package/dev/universal-js-module.js +0 -37
  66. package/examples/example1.html +0 -78
  67. package/examples/example10.html +0 -84
  68. package/examples/example11.html +0 -17
  69. package/examples/example12.html +0 -18
  70. package/examples/example2.html +0 -44
  71. package/examples/example3.html +0 -50
  72. package/examples/example4.html +0 -22
  73. package/examples/example5.html +0 -82
  74. package/examples/example6.html +0 -128
  75. package/examples/example7.html +0 -91
  76. package/examples/example8.html +0 -27
  77. package/examples/example9.html +0 -102
  78. package/examples/examplePageData12.mjs +0 -73
  79. package/examples/pageData.mjs +0 -69
  80. package/examples/pico.min.css +0 -5
  81. package/icon/bitwrench-dark-tall.png +0 -0
  82. package/icon/bitwrench-dark.png +0 -0
  83. package/icon/bitwrench-icon-lt-grey.png +0 -0
  84. package/icon/bitwrench-icon.vsd +0 -0
  85. package/icon/bitwrench-logo-dark.png +0 -0
  86. package/icon/bitwrench-logo-full.png +0 -0
  87. package/icon/bitwrench-logo-green.png +0 -0
  88. package/icon/bitwrench-logo-grey.png +0 -0
  89. package/icon/bitwrench-logo-white.png +0 -0
  90. package/icon/bitwrench-logos-colors.png +0 -0
  91. package/icon/bitwrench-thick-logo.png +0 -0
  92. package/icon/bitwrench-thick-teal/android-chrome-192x192.png +0 -0
  93. package/icon/bitwrench-thick-teal/android-chrome-512x512.png +0 -0
  94. package/icon/bitwrench-thick-teal/apple-touch-icon.png +0 -0
  95. package/icon/bitwrench-thick-teal/browserconfig.xml +0 -9
  96. package/icon/bitwrench-thick-teal/favicon-16x16.png +0 -0
  97. package/icon/bitwrench-thick-teal/favicon-32x32.png +0 -0
  98. package/icon/bitwrench-thick-teal/favicon.ico +0 -0
  99. package/icon/bitwrench-thick-teal/mstile-144x144.png +0 -0
  100. package/icon/bitwrench-thick-teal/mstile-150x150.png +0 -0
  101. package/icon/bitwrench-thick-teal/mstile-310x150.png +0 -0
  102. package/icon/bitwrench-thick-teal/mstile-310x310.png +0 -0
  103. package/icon/bitwrench-thick-teal/mstile-70x70.png +0 -0
  104. package/icon/bitwrench-thick-teal/site.webmanifest +0 -19
  105. package/icon/bitwrench-thick-teal.ico +0 -0
  106. package/icon/bitwrench-thick-teal.svg +0 -44
  107. package/icon/bitwrench-thick-teal.zip +0 -0
  108. package/icon/favicon-test.html +0 -20
  109. package/icon/logos-test.PNG +0 -0
  110. package/images/bitwrench-512x512.png +0 -0
  111. package/images/bitwrench-logo-med.png +0 -0
  112. package/images/bitwrench-thick-logo.png +0 -0
  113. package/images/bitwrench-thick-logo.svg +0 -64
  114. package/images/bitwrench-thick-teal.ico +0 -0
  115. package/images/favicon.ico +0 -0
  116. package/index.html +0 -282
  117. package/instr_tmp/bitwrench.js +0 -1350
  118. package/karma.conf.js +0 -140
  119. package/makefile +0 -21
  120. package/quick-docs.html +0 -206
  121. package/test/bitwrench_test.js +0 -1255
  122. package/test/karma-test.js +0 -1081
  123. package/tools/bw_deprecatedNames.js +0 -19
  124. package/tools/bwconsole.js +0 -20
  125. package/tools/createSimpleHTMLPage.js +0 -41
  126. package/tools/emitreadme.sh +0 -4
  127. package/tools/export-bw-default-css.js +0 -41
  128. package/tools/umd2ModuleHack.js +0 -32
  129. package/tools/update-bw-package.js +0 -36
  130. package/tools/updatereadme.js +0 -34
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>
package/examples/example6.html DELETED
@@ -1,128 +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.css"></script>
13
- <script type="text/javascript" src="../bitwrench.js"></script>
14
- <style type="text/css">
15
- .btn {
16
- display: inline-block;
17
- margin-bottom: 0;
18
- font-weight: 400;
19
- text-align: center;
20
- vertical-align: middle;
21
- cursor: pointer;
22
- background-image: none;
23
- border: 1px solid transparent;
24
- white-space: nowrap;
25
- padding: 6px 12px;
26
- font-size: 14px;
27
- }
28
- .bw-button {
29
- display: inline-block;
30
- margin-bottom: 0;
31
- text-align: center;
32
- vertical-align: middle;
33
- cursor: pointer;
34
- font-weight: 400;
35
- background-image: none;
36
- white-space: pre-wrap;
37
- }
38
- .test {
39
- vertical-align: middle;
40
- }
41
-
42
- .boxEv {background-color: #aaa; height: 30px; border-radius:5px; border:1px solid black; vertical-align: middle;}
43
- .boxOd {background-color: #ddd; height: 30px; border-radius:5px; border:1px solid black; vertical-align: middle;}
44
-
45
- </style>
46
- </head>
47
- <body class="bw-def-page-setup bw-font-sans-serif">
48
- <h1>bitwrench HTML layout and CSS stylesd demo</h1>
49
- Bitwrench.js contains built-in css. This can be used when loading bitwrench.js or by using included stylesheets: bitwrench.css or bitwrench.min.css. These style sheets work without any need for javascript and can be used with any other html project. However some bitwrench functionality (such as selecting tabs or table sorts) due require the javascript portion of bitwrench (bitwrench.js).<br><br>
50
- bitwrench.css prefixes all css classes with "bw" as such as here:<br>
51
-
52
- <pre class="bw-code">
53
- </pre>
54
-
55
- <div>
56
- <h1 class="bw-h1">CSS Layout Grid</h1>
57
- Bitwrench includes a built-in css grid class set for creating simple regular layouts.<br>
58
- <br>
59
-
60
- <div class="bw-row bw-center test">
61
- <div class="bw-col-1 boxOd ">bw-col-1</div><div class="bw-col-1 boxEv">bw-col-1</div><div class="bw-col-1 boxOd">bw-col-1</div><div class="bw-col-1 boxEv">bw-col-1</div><div class="bw-col-1 boxOd">bw-col-1</div><div class="bw-col-1 boxEv">bw-col-1</div><div class="bw-col-1 boxOd">bw-col-1</div><div class="bw-col-1 boxEv">bw-col-1</div><div class="bw-col-1 boxOd">bw-col-1</div><div class="bw-col-1 boxEv">bw-col-1</div><div class="bw-col-1 boxOd">bw-col-1</div><div class="bw-col-1 boxEv">bw-col-1</div>
62
- </div><br>
63
-
64
- <div class="bw-row bw-center">
65
- <div class="bw-col-2 boxOd">bw-col-2</div><div class="bw-col-2 boxEv">bw-col-2</div><div class="bw-col-2 boxOd">bw-col-2</div><div class="bw-col-2 boxEv">bw-col-2</div><div class="bw-col-2 boxOd">bw-col-2</div><div class="bw-col-2 boxEv">bw-col-2</div>
66
- </div><br>
67
-
68
- <div class="bw-row bw-center">
69
- <div class="bw-col-3 boxOd">bw-col-3</div><div class="bw-col-3 boxEv">bw-col-3</div><div class="bw-col-3 boxOd">bw-col-3</div><div class="bw-col-3 boxEv">bw-col-3</div>
70
- </div><br>
71
-
72
- <div class="bw-row bw-center" >
73
- <div class="bw-col-4 boxOd">bw-col-4</div><div class="bw-col-4 boxEv">bw-col-4</div><div class="bw-col-4 boxOd">bw-col-4</div>
74
- </div><br>
75
-
76
- <div class="bw-row bw-center" >
77
- <div class="bw-col-5 boxOd">bw-col-5</div><div class="bw-col-7 boxEv">bw-col-7</div>
78
- </div><br>
79
-
80
- <div class="bw-row bw-center" >
81
- <div class="bw-col-6 boxOd">bw-col-6</div><div class="bw-col-6 boxEv">bw-col-6</div>
82
- </div><br>
83
-
84
- <div class="bw-row bw-center" >
85
- <div class="bw-col-7 boxOd">bw-col-7</div><div class="bw-col-5 boxEv">bw-col-5</div>
86
- </div><br>
87
-
88
- <div class="bw-row bw-center" >
89
- <div class="bw-col-8 boxOd">bw-col-8</div><div class="bw-col-4 boxEv">bw-col-4</div>
90
- </div><br>
91
-
92
- <div class="bw-row bw-center" >
93
- <div class="bw-col-9 boxOd">bw-col-9</div><div class="bw-col-3 boxEv">bw-col-3</div>
94
- </div><br>
95
-
96
- <div class="bw-row bw-center" >
97
- <div class="bw-col-10 boxOd">bw-col-10</div><div class="bw-col-2 boxEv">bw-col-2</div>
98
- </div><br>
99
-
100
- <div class="bw-row bw-center" >
101
- <div class="bw-col-11 boxOd">bw-col-11</div><div class="bw-col-1 boxEv">bw-col-1</div>
102
- </div><br>
103
-
104
- <div class="bw-row bw-center" >
105
- <div class="bw-col-12 boxOd">bw-col-12</div>
106
- </div><br>
107
- </div> <!-- end code for grid demo -->
108
- <br>
109
-
110
- <br>
111
-
112
- <!-- Text align demo area -->
113
- <h1 class="bw-h1">Text Alignment & Related</h1>
114
- <div class="bw-tab-container">
115
- <ul class="bw-tab-item-list">
116
- <li class="bw-tab bw-tab-active" onclick="bw.selectTabContent(this)" >Text Styles</li>
117
- <li class="bw-tab " onclick="bw.selectTabContent(this)" >Text Styles Code</li>
118
- </ul>
119
- <div class="bw-tab-content-list">
120
- <div class="bw-tab-content bw-show" id="bwTextSection">
121
- <br>The following text styles are supported.<br><br>
122
- <div class=" bw-left">This text is left aligned.</div><br>
123
- <div class=" bw-center">This text is centered.</div><br>
124
- <div class=" bw-right">This text is right aligned.</div><br>
125
- <div class=" 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>
126
-
127
- </body>
128
- </html>
package/examples/example7.html DELETED
@@ -1,91 +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
-
9
- var htmlData = {c: //for more on the format, see docs github.com/deftio/bitwrench
10
- [
11
- ["h1" ,{"class":"bw-h1"},"Bitwrench Test Area" ],
12
- "bitwrench version: "+bw.version().version +"<br><br>",
13
- ["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."],
14
- "<hr>",
15
- ["h2","Lorem Ipsum Generator"],
16
- "Good for testing simple layout ideas.<br><br>",
17
- ["div",{},bw.loremIpsum(230)],
18
- "<hr>",
19
- ["h2",{},"Sample Content with 3 Columns"],
20
- ["div",{"class":"bw-row"},
21
- [
22
- ["div",{"class":"bw-col-4 bw-left "},"<h3>Left justified</h3>"+bw.loremIpsum(95)], //mix text and html freely
23
- ["div",{"class":"bw-col-4 bw-center bw-pad1"},"<h3>Centered</h3>"+bw.loremIpsum(95,3)],
24
- ["div",{"class":"bw-col-4 bw-right "},"<h3>Right justified</h3>"+bw.loremIpsum(95,2)],
25
- ],
26
- ],
27
- "<br><hr>",
28
- ["h2", {}, "Example Sortable Table"],
29
- bw.htmlTable( // json to table (note table data can be functions as well)
30
- [
31
- ["Name","Age", "Prof", "Fav Color"], // just an 2D array
32
- ["Sue", 34, "Engineer", {a:{style:"color:red"},c:"red"}], // inline json-html objects
33
- ["Bob" ,35, "Teacher", {a:{style:"color:green"},c:"green"}],
34
- ["Vito",23, "Mechanic", {a:{style:"color:blue",onclick:"alert('blue!')"},c:"blue"}],
35
- ["Hank",73, "Retired", {a:{style:"color:purple"},c:"purple"}]
36
- ],{sortable:true}),
37
- "<br><hr>",
38
- ["h2",{},"Sample Buttons"],
39
- "These buttons have function handlers attached.<br><br>",
40
- ["button",{onclick:"alert('button pressed!')"},"Alert Button"], // staight js
41
- "&nbsp;&nbsp;",
42
- ["button",{onclick:myFunc},"Time Button"], // bitwrench maps and registers event functions
43
- "<br><hr>",
44
- ["h2","Built in Headings"],
45
- [1,2,3,4,5,6].map( function(x){return bw.html(["h"+x,"Heading "+x])}).join(""), // Headings
46
- "<br><hr>",
47
- ["h2","Grid System (responsive)"],
48
- "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>",
49
- ["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)
50
- ["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"}]],
51
- ["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"}]],
52
- ["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"}]],
53
- ["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"}]],
54
- ["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"}]],
55
- ["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"}]],
56
- ["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"}]],
57
- ["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"}]],
58
- ["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"}]],
59
- ["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"}]],
60
- ["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"}]],
61
- ["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-12 boxEv"},c:"bw-col-12"}]],
62
-
63
- "<br><hr>",
64
- ["h2",{},"Simple Sign"],
65
- ["div",{style:"padding:10%; border:1px solid black;"},bw.htmlSign("This is a big sign!")],
66
- "<br><hr>",
67
- ["h2",{},"Tabbed Content"],
68
- bw.htmlTabs([
69
- ["Tab1",bw.loremIpsum(300)],
70
- ["Tab2",bw.loremIpsum(300,20)],
71
- ["Tab3",bw.loremIpsum(300,50)]],{tab_atr:{style:""}}) ,
72
- "<br>",
73
- ]};
74
-
75
- var tabUI = {
76
- c:bw.htmlTabs([
77
- ["Rendered Content", bw.html(htmlData)],
78
- ["JS Object Data", bw.htmlJSON(htmlData)],
79
- ],
80
- {atr:{style:"padding:2%;"}, tab_atr: {style:"font-size:1.5em"}, tabc_atr: {style:"background-color:#def !important;"} }
81
- )};
82
-
83
- bw.DOMInsertElement("body",tabUI);
84
- function myFunc(x){return x.innerHTML = (new Date()).toLocaleTimeString();} // button function
85
-
86
-
87
- bw.DOMInsertElement("head",bw.html(bw.htmlFavicon("\u266C","teal"))); // insert a favicon on the top tab of the page, "X" for a single letter
88
- bw.DOMInsertElement("head",bw.html({t:"title",c:"Bitwrench HTML Gen "})); // insert a page title on the browser tab
89
- </script>
90
- </body>
91
- </html>
package/examples/example8.html DELETED
@@ -1,27 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en"><!-- btiwrench responsive clock example works in all browsers back to IE7 etc -->
3
- <head>
4
- <script src="../bitwrench.js" ></script>
5
- <script>
6
- setInterval(function() {
7
- var t = new Date();
8
- bw.DOM("body", bw.htmlSign(t.toLocaleTimeString()+"<br>"+t.toDateString())); // short hand approach replaces body with bw.htmlSign contents each interval
9
-
10
- //commented out below allows one to replace entire body DOM tree with arbitrary html from javascrpit dict
11
- /*
12
- bw.DOM("body",
13
- bw.html(
14
- {
15
- t:"div",
16
- a:{style:"width:100%; height:100%;"},
17
- c:[bw.htmlSign(t.toLocaleTimeString()+"<br>"+t.toDateString()) ]
18
- }
19
- )
20
- );
21
- */
22
- }, 500);
23
-
24
- </script>
25
- </head>
26
- <body class="bw-font-sans-serif"></body>
27
- </html>
package/examples/example9.html DELETED
@@ -1,102 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en"><!-- btiwrench responsive clock example works in all browsers back to IE7 etc -->
3
- <head>
4
- <script src="../bitwrench.js" ></script>
5
- <style>
6
- body {
7
- background-color: black;
8
- }
9
- .card {
10
- height:100%;
11
- background-attachment: center center;
12
- background-position: center center;
13
- background-repeat: no-repeat;
14
- background-size: 100% 100%;
15
- }
16
- </style>
17
- <script>
18
-
19
-
20
- //create some cards
21
-
22
- /* write the body element. Note bw.DOM writes all matching css selectors.
23
- e.g. "bw.DOM(".myClass", ..content..) writes all the elements with a myClass field.
24
- */
25
- var cards;
26
- function renderPage(){ bw.DOM("body",bw.html(page))}
27
- </script>
28
- </head>
29
- <body class="bw-font-sans-serif bw-def-page-setup" ></body>
30
- <div id="content"></div>
31
- <script>
32
-
33
- //create a bunch of cards
34
- var page = {
35
- t: "div", a:{style:"width:100%; height:100vh;", class:"bw-container"}, // set up master container with rows and cards
36
- c: [
37
- {
38
- t:"div", a:{class: "bw-row", style: "height:33%"}, c:[
39
- {t:"div", a: {class: "bw-col-4 card"}, c:bw.htmlSign("card 0")},
40
- {t:"div", a: {class: "bw-col-4 card"}, c:bw.htmlSign("card 1")},
41
- {t:"div", a: {class: "bw-col-4 card"}, c:bw.htmlSign("card 2")}
42
- ]
43
- },
44
- {
45
- t:"div", a:{class: "bw-row", style: "height:33%"}, c:[
46
- {t:"div", a: {class: "bw-col-4 card"}, c:bw.htmlSign("card 3")},
47
- {t:"div", a: {class: "bw-col-4 card"}, c:bw.htmlSign("card 4")},
48
- {t:"div", a: {class: "bw-col-4 card"}, c:bw.htmlSign("card 5")}
49
- ]
50
- },
51
- {
52
- t:"div", a:{class: "bw-row", style: "height:33%"}, c:[
53
- {t:"div", a: {class: "bw-col-4 card"}, c:bw.htmlSign("card 6")},
54
- {t:"div", a: {class: "bw-col-4 card"}, c:bw.htmlSign("card 7")},
55
- {t:"div", a: {class: "bw-col-4 card"}, c:bw.htmlSign("card 8")}
56
- ]
57
- }
58
-
59
- ]
60
- };
61
-
62
- bw.DOM("#content",bw.html(page)); // make the above js dict go live as page elements
63
-
64
- cards = bw.DOM(".card"); // grab a handle to all the cards as an array of html elements
65
-
66
- var dogs = function() {
67
- fetch('https://dog.ceo/api/breeds/image/random')
68
- .then( response =>
69
- {
70
- response.json().then(message => {
71
- let msg = message.message;
72
- let card = cards[bw.random(0, cards.length -1)];
73
- console.log(msg)
74
- card.style.backgroundImage='url(' +msg+')';
75
- card.innerHTML ="";
76
- })
77
- })
78
- }
79
-
80
- setInterval(function(){
81
- //var x = bw.random(0, cards.length -1); // grab a random card..
82
- //cards[x].style["backgroundColor"] = ["green","orange","red","blue","white"][bw.random(0,4)];
83
- dogs();
84
- },
85
- 1000);
86
-
87
- /*
88
- setInterval(function() {
89
- var t = new Date();
90
- cards[4].innerHTML= bw.html(
91
- {
92
- t:"div",
93
- a:{style:"width:100%; height:100%; font-size: 16pt !important!;"},
94
- c:[bw.htmlSign(t.toLocaleTimeString()+"<br>"+t.toDateString() )]
95
- }
96
- )
97
- },
98
-
99
- 1000);
100
- */
101
- </script>
102
- </html>
package/examples/examplePageData12.mjs DELETED
@@ -1,73 +0,0 @@
1
- import bw from '../bitwrench_ESM.js'; //only because we are referencing some bitwrench fns in our page data
2
-
3
- export const htmlData = {
4
- c: //for more on the format, see docs github.com/deftio/bitwrench
5
- [
6
-
7
- ["h1" ,"Bitwrench Test Area with ESM modules & ESM content" ],
8
- ["div" ,"styling with pico.css" ],
9
- "bitwrench version: "+bw.version().version +"<br><br>",
10
- ["div" ,"This page has HTML content which is entirely written as Javascript objects (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. "],
11
- "<hr>",
12
- ["h2","Lorem Ipsum Generator"],
13
- "Good for testing simple layout ideas.<br><br>",
14
- ["div",{},bw.loremIpsum(230)],
15
- "<hr>",
16
- ["h2",{},"Sample Content with 3 Columns"],
17
- ["div",{"class":"bw-row"},
18
- [
19
- ["div",{"class":"bw-col-4 bw-left "},"<h3>Left justified</h3>"+bw.loremIpsum(95)], //mix text and html freely
20
- ["div",{"class":"bw-col-4 bw-center bw-pad1"},"<h3>Centered</h3>"+bw.loremIpsum(95,3)],
21
- ["div",{"class":"bw-col-4 bw-right "},"<h3>Right justified</h3>"+bw.loremIpsum(95,2)],
22
- ],
23
- ],
24
- "<br><hr>",
25
- ["h2", {}, "Example Sortable Table"],
26
- bw.htmlTable( // json to table (note table data can be functions as well)
27
- [
28
- ["Name","Age", "Prof", "Fav Color"], // just an 2D array
29
- ["Sue", 34, "Engineer", {a:{style:"color:red"},c:"red"}], // inline json-html objects
30
- ["Bob" ,35, "Teacher", {a:{style:"color:green"},c:"green"}],
31
- ["Vito",23, "Mechanic", {a:{style:"color:blue",onclick:"alert('blue!')"},c:"blue"}],
32
- ["Hank",73, "Retired", {a:{style:"color:purple"},c:"purple"}]
33
- ],{sortable:true}),
34
- "<br><hr>",
35
- ["h2",{},"Sample Buttons"],
36
- "These buttons have function handlers attached.<br><br>",
37
- ["div",{"class":"grid"},[
38
- ["button",{onclick:"alert('button pressed!')"},"Alert Button"], // staight js
39
- ["button",{onclick:(e)=>{e.innerHTML=(new Date()).toLocaleTimeString()}},"Time Button"], // bitwrench maps and registers event functions
40
- ]
41
- ],
42
- "<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
- [bw.html({t:"span",a:{"style" : "margin:12px"},c:"Tab1"}),bw.loremIpsum(900)],
69
- [bw.html({t:"span",a:{"style" : "margin:12px"},c:"Tab2"}),bw.loremIpsum(900,20)],
70
- [bw.html({t:"span",a:{"style" : "margin:12px"},c:"Tab3"}),bw.loremIpsum(900,50)]],{tab_atr:{style:""}}) ,
71
- "<br>",
72
- ]
73
- }