This is a very early version of the concept. I've used and expanded it much over the years. A good example of its usage is in the Electron Folder View application.

The basic idea is to provide a core set of functions to create HTML components. This was put together before the advent of Web Components and the popularity of React Components. This solution evolved to supply primitive functions, allowing the library functionality to be dynamically mixed based on the project and developer needs (see dlgFactory.tac2()). This contrasts with a component set like Google's Material Design Components, which creates fixed components that perform specific tasks.

An example of using primitive functions to build complex functionality based on application needs is the pathBar in Electron Folder View. It allows the Windows file system to be traversed simply: a very old screen shot, and source code.

My personal favorite component (because of its functionality) is the Rename dialog: screen shot, and source code.

Feel free to use and modify.

• dialog boxes: z-index=1000, drag to position, close button, dynamically managed, simple css

• dlgFactory.msg(message, title)
  -- message can be html or text

• dlgFactory.bigText(message, title)
  -- assume message is string (not html)
  -- dlg content: <textarea>message</textarea>

• dlgFactory.create(options)
  -- general purpose entry point

var options = {
	title:	(title===undefined ?"Message" :title),
	body: 	(html or text),
	focusId: (null  or provide element id eg '#inpDelay'),	//element to focus on show
	left: 	(options.left ?options.left :'50vw'),
	top:		(options.top ?options.top :'40vh'),
	height:	(options.height ?options.height :'auto'),
	width:	(options.width ?options.width :'auto'),
	buttons:{	//not required
		default: 'Save',	//caption of button to select when user presses Enter key
		Save: function(dlg, btnCaption){	//dlg = div container of dlg
			alert(111)
		}
	}
}

https://developer.mozilla.org/

Chris
[email protected]