JS_HTML_Widgets
Easily create widget objects of arbitrary complexity
By Leonid Titov, 2019-09-23
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/, then follow the link to whitepaper from there.
What you'll get:
- very interesting article about this;
- snippets of code and examples;
- ready to use... framework in vanilla JS, to create widgets of your own;
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.
Here's an example of what it look like.
A widget code
// inside a js file of a widget class
(function () {
var Module_Path = ["WidgetsLib", "a1", "Button"];
var curr = this;
Module_Path.forEach(function(i){if (curr[i] == null) {addChildToTree(curr, i, {})} curr = curr[i]});
specialize_with(curr, {
CSS_Literal: `
.{{WIDGET_CLASS_ID}}_Something {
color: hsl(0, 0%, 20%);
}
`,
HTML_Literal: `
<div onclick="{{WIDGET_INSTANCE}}.onclick(event)"
class="{{WIDGET_CLASS_ID}}_Something"
>
SOME SUPER COOL WIDGET
</div>
`,
new: typical_widget_new,
WidgetSpecializer: {
remove: typical_widget_remove,
}
});
})();
An HTML:
<div id="w1" style="background-color: hsl(200, 50%, 50%);"></div>
<script src="WidgetsLib/a1/Button/js"></script>
A user JavaScript code:
var b1 = WidgetsLib.a1.Button.new("w1", {
onclick: function(ev) {
ev.target.style.color = "#ffff00";
console.log("====== HERE");
}
});