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");
	}
});

Download and enjoy reading and using it. Then try demo_test.html, and see inside it.