├── README.md ├── Widget_v3.md.html ├── demo_test.html ├── github-markdown.css └── showdown.js /README.md: -------------------------------------------------------------------------------- 1 | # JS_HTML_Widgets 2 | Easily create widget objects of arbitrary complexity 3 | 4 | By Leonid Titov, 2019-09-23 5 | 6 | Please download, and open the Widget_v3.md.html in a browser, and read. Or, go to the Githab Pages of this [https://latitov.github.io/JS_HTML_Widgets/](https://latitov.github.io/JS_HTML_Widgets/), then follow the link to [whitepaper](Widget_v3.md.html) from there. 7 | 8 | What you'll get: 9 | 10 | - very interesting article about this; 11 | - snippets of code and examples; 12 | - ready to use... framework in vanilla JS, to create widgets of your own; 13 | 14 | # _Note: this version is outdated. If you are interested in a production ready one, and in a help to migrate to it, please contact me_. 15 | 16 | Here's an example of what it look like. 17 | 18 | #### A widget code 19 | 20 | ``` 21 | // inside a js file of a widget class 22 | (function () { 23 | var Module_Path = ["WidgetsLib", "a1", "Button"]; 24 | var curr = this; 25 | Module_Path.forEach(function(i){if (curr[i] == null) {addChildToTree(curr, i, {})} curr = curr[i]}); 26 | 27 | specialize_with(curr, { 28 | CSS_Literal: ` 29 | .{{WIDGET_CLASS_ID}}_Something { 30 | color: hsl(0, 0%, 20%); 31 | } 32 | `, 33 | HTML_Literal: ` 34 |
37 | SOME SUPER COOL WIDGET 38 |
39 | `, 40 | new: typical_widget_new, 41 | WidgetSpecializer: { 42 | remove: typical_widget_remove, 43 | } 44 | }); 45 | })(); 46 | ``` 47 | 48 | #### An HTML: 49 | 50 | ``` 51 |
52 | 53 | 54 | ``` 55 | 56 | #### A user JavaScript code: 57 | 58 | ``` 59 | var b1 = WidgetsLib.a1.Button.new("w1", { 60 | onclick: function(ev) { 61 | ev.target.style.color = "#ffff00"; 62 | console.log("====== HERE"); 63 | } 64 | }); 65 | ``` 66 | 67 | #### Download and enjoy reading and using it. Then try demo_test.html, and see inside it. 68 | -------------------------------------------------------------------------------- /Widget_v3.md.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 892 |
893 | 894 | 905 | 906 | -------------------------------------------------------------------------------- /demo_test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 | 7 | 152 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /github-markdown.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Helvetica, arial, sans-serif; 3 | font-size: 14px; 4 | line-height: 1.6; 5 | padding-top: 10px; 6 | padding-bottom: 10px; 7 | background-color: hsl(0, 0%, 80%); 8 | padding: 30px; 9 | color: #000; 10 | } 11 | 12 | body > *:first-child { 13 | margin-top: 0 !important; 14 | } 15 | 16 | body > *:last-child { 17 | margin-bottom: 0 !important; 18 | } 19 | 20 | a { 21 | color: hsl(200, 50%, 30%); 22 | font-weight: bold; 23 | } 24 | 25 | a.absent { 26 | color: #ff0000; 27 | } 28 | 29 | a.anchor { 30 | display: block; 31 | padding-left: 30px; 32 | margin-left: -30px; 33 | cursor: pointer; 34 | position: absolute; 35 | top: 0; 36 | left: 0; 37 | bottom: 0; 38 | } 39 | 40 | h1, h2, h3, h4, h5, h6 { 41 | margin: 20px 0 10px; 42 | padding: 0; 43 | font-weight: bold; 44 | -webkit-font-smoothing: antialiased; 45 | cursor: text; 46 | position: relative; 47 | } 48 | 49 | h2:first-child, h1:first-child, h1:first-child + h2, h3:first-child, h4:first-child, h5:first-child, h6:first-child { 50 | margin-top: 0; 51 | padding-top: 0; 52 | } 53 | 54 | h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { 55 | text-decoration: none; 56 | } 57 | 58 | h1 tt, h1 code { 59 | font-size: inherit; 60 | } 61 | 62 | h2 tt, h2 code { 63 | font-size: inherit; 64 | } 65 | 66 | h3 tt, h3 code { 67 | font-size: inherit; 68 | } 69 | 70 | h4 tt, h4 code { 71 | font-size: inherit; 72 | } 73 | 74 | h5 tt, h5 code { 75 | font-size: inherit; 76 | } 77 | 78 | h6 tt, h6 code { 79 | font-size: inherit; 80 | } 81 | 82 | h1 { 83 | font-size: 28px; 84 | color: black; 85 | } 86 | 87 | h2 { 88 | font-size: 24px; 89 | border-bottom: 1px solid hsl(0, 0%, 40%); 90 | color: black; 91 | } 92 | 93 | h3 { 94 | font-size: 18px; 95 | } 96 | 97 | h4 { 98 | font-size: 16px; 99 | } 100 | 101 | h5 { 102 | font-size: 14px; 103 | } 104 | 105 | p, blockquote, ul, ol, dl, li, table, pre { 106 | margin: 15px 0; 107 | } 108 | 109 | hr { 110 | border: 0 none; 111 | color: hsl(0, 0%, 60%) 112 | height: 4px; 113 | padding: 0; 114 | } 115 | 116 | body > h2:first-child { 117 | margin-top: 0; 118 | padding-top: 0; 119 | } 120 | 121 | body > h1:first-child { 122 | margin-top: 0; 123 | padding-top: 0; 124 | } 125 | 126 | body > h1:first-child + h2 { 127 | margin-top: 0; 128 | padding-top: 0; 129 | } 130 | 131 | body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child { 132 | margin-top: 0; 133 | padding-top: 0; 134 | } 135 | 136 | a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 { 137 | margin-top: 0; 138 | padding-top: 0; 139 | } 140 | 141 | h1 p, h2 p, h3 p, h4 p, h5 p, h6 p { 142 | margin-top: 0; 143 | } 144 | 145 | li p.first { 146 | display: inline-block; 147 | } 148 | 149 | ul, ol { 150 | padding-left: 60px; 151 | } 152 | 153 | ul :first-child, ol :first-child { 154 | margin-top: 0; 155 | } 156 | 157 | ul :last-child, ol :last-child { 158 | margin-bottom: 0; 159 | } 160 | 161 | dl { 162 | padding: 0; 163 | } 164 | 165 | dl dt { 166 | font-size: 14px; 167 | font-weight: bold; 168 | font-style: italic; 169 | padding: 0; 170 | margin: 15px 0 5px; 171 | } 172 | 173 | dl dt:first-child { 174 | padding: 0; 175 | } 176 | 177 | dl dt > :first-child { 178 | margin-top: 0; 179 | } 180 | 181 | dl dt > :last-child { 182 | margin-bottom: 0; 183 | } 184 | 185 | dl dd { 186 | margin: 0 0 15px; 187 | padding: 0 15px; 188 | } 189 | 190 | dl dd > :first-child { 191 | margin-top: 0; 192 | } 193 | 194 | dl dd > :last-child { 195 | margin-bottom: 0; 196 | } 197 | 198 | blockquote { 199 | border-left: 4px solid hsl(0, 0%, 30%); 200 | padding: 0 15px; 201 | color: hsl(0, 0%, 0%); 202 | } 203 | 204 | blockquote > :first-child { 205 | margin-top: 0; 206 | } 207 | 208 | blockquote > :last-child { 209 | margin-bottom: 0; 210 | } 211 | 212 | table { 213 | padding: 0; 214 | } 215 | table tr { 216 | border-top: 1px solid hsl(0, 0%, 40%); 217 | background-color: white; 218 | margin: 0; 219 | padding: 0; 220 | } 221 | 222 | table tr:nth-child(2n) { 223 | background-color: hsl(0, 0%, 60%); 224 | } 225 | 226 | table tr th { 227 | font-weight: bold; 228 | border: 1px solid #cccccc; 229 | text-align: left; 230 | margin: 0; 231 | padding: 6px 13px; 232 | } 233 | 234 | table tr td { 235 | border: 1px solid #cccccc; 236 | text-align: left; 237 | margin: 0; 238 | padding: 6px 13px; 239 | } 240 | 241 | table tr th :first-child, table tr td :first-child { 242 | margin-top: 0; 243 | } 244 | 245 | table tr th :last-child, table tr td :last-child { 246 | margin-bottom: 0; 247 | } 248 | 249 | img { 250 | max-width: 100%; 251 | } 252 | 253 | code, tt { 254 | margin: 0 2px; 255 | padding: 0 5px; 256 | white-space: nowrap; 257 | border: 1px solid hsl(0, 0%, 20%); 258 | background-color: hsl(0, 0%, 60%); 259 | border-radius: 3px; 260 | } 261 | 262 | pre code { 263 | margin: 0; 264 | padding: 0; 265 | white-space: pre; 266 | border: none; 267 | background: transparent; 268 | tab-size: 8; 269 | } 270 | 271 | pre { 272 | background-color: hsl(0, 0%, 60%); 273 | border: 1px solid hsl(0, 0%, 20%); 274 | font-size: 13px; 275 | line-height: 19px; 276 | overflow: auto; 277 | padding: 6px 10px; 278 | border-radius: 3px; 279 | } 280 | 281 | pre code, pre tt { 282 | background-color: transparent; 283 | border: none; 284 | } 285 | 286 | --------------------------------------------------------------------------------