htflow

htflow

Add structured html5 codeflow into your javascript/nodejs projects.

Features

• All standard html5 tags as class methods.
• Flexible html input; string, function, array of strings or functions, multiple arguments.
• Inbuilt method loops, conditionals and switches so your html and programming logic can reside together.
• Provides several helper methods.
• Fast, lightweight, no dependencies.

Usage

In client-side javascript:

const ht = htflowInit();

In nodejs:

const htflow = require('htflow');
const ht = htflow();

or more simply:

const ht = require('htflow')();

Examples

Build a web page:

const myWebPage = ht.doc(
	ht.html(
		ht.head(
			ht.meta(
				{
					charset:'utf8'
				}
			),
			ht.link(
				{
					rel:'stylesheet',
					href: './css/wapp.css'
				}
			),
			ht.script(
				{
					src: './js/wapp.js'
				}
			),
   			ht.title(
				'Hello'
			)
		),
		ht.body(
			{
				onload: ht.cmd('wapp.start',0),
				style: ht.css(
					{
						margin : '0px',
						width: '100%',
						height: '100%'
					}
				)
			},
			ht.main(
				{
					id: 'main'
				},
				ht.div(
					{
						id: 'hellodiv'
					},
					ht.p(
						'hello world'
					),
					ht.button(
						{
							onclick: ht.cmd('wapp.magic'),
							title: 'click on me for some magic'
						},
						ht.img(
							{
								src: './img/smileyface.jpg',
								height: 24,
								width: 24               
							}
						)
					)
				)
			)
		)
	)
);

Build a table:

const myTable = ht.table(
	{
		id: 'mytable'
	},
	ht.thead(
		ht.tr(
			ht.forEach(
				['Rec#','Firstname','Surname','Address','Suburb','Mobile'],
				(e,i,a) => {
					return ht.th(e);
				}
			)
		)
	),
	ht.tbody(
		ht.forEach(
			myData, //an array of object records
			(e,i,a) => {
				return ht.tr(
					ht.td(
						{
							align: 'right',
							onmouseover: ht.evt('wapp.hover')
						},
						i+1
					),
					ht.forIn(
						e,
						(k) => {
							return ht.td(
								{
									align: 'left'
								},
								v
							)
						}
					)
				)
			}
		)
	)
);

Build a dropdown control:

const mySelect = ht.div(
	{
		id:'control1'
	},
	ht.label(
		{
			'for':'display'
		},
		'Display:'
	),
	ht.select(
		{ 
			id: 'display',
			onchange: ht.cmd('wapp.displayChanged'),
			title: 'Specify the maximum number of foobats to display'
		},
		ht.forEach(
			[3,6,9,12,15,18,24,30],
			(e,i,a) => {
				let attr = {
					value: e
				};
				if (e == wapp.display) attr.selected = 'selected';
				return ht.option(
					attr,
					ht.concat(
						e,
						' foobats'
					)
				)
			}
		)
	)
);

Methods

All methods return strings representing HTML5.

html tag

There are methods for all HTML5 standard tags:

ht.tag([attr][,html][,html[[,...]);     //for double tags, i.e. html, div, span, p, a, etc.
ht.tag([attr]);                         //for single tags, i.e. meta, img, br, etc

Replace 'tag' with the actual html5 element tag.
attr is an object with key value pairs matching element attributes/properties.
html is either a string, a function ()=>{...}, or an array of strings and/or functions returning strings, the string values of which are sequentially appended.

doubleReg

ht.doubleReg(tag);

Registers a method for a custom html element tag with double tags (opening/closing pair).
After registering doubleReg('mycustomtag'); you can then use ht.mycustomtag([attr][,html][,...]); in your code.

singleReg

ht.singleReg(tag);

Registers a function for a custom html element tag with single tag.
After registering singleReg('myothercustomtag'); you can then use ht.myothercustomtag([attr]); in your code.

doc

ht.doc([html]);

Generates html5 initial document type string with optional html content.

methods as control structures

doWhile

ht.doWhile(test, (cond) => {...});

test is a function returning true or false.
cond is the boolean result of the last test.
(cond) => {...} will be executed while the boolean result of test() is true.
in order to exit the loop (cond) => {...} must manipulate in-scope variables so that a subsequent test() returns false.

forLoop

ht.forLoop(start, end, (i) => {...} );

Loop i incrementally from start to end (step +1).
If start is less than end, step is -1.
The numbers start and end are inclusive.
Let (i) => {...} return false to break prematurely from the loop.

forEach

ht.forEach(vals, (e,i,a) => {...});

Given an array of values vals, html is processed sequentially for each array value with e = element, i = index, a = array.

forIn

ht.forIn(obj, (k,v) => {...});

Given an object obj, html is processed sequentially for each of its enumerable properties with k = key, v=value.

ifElse

ht.ifElse(cond, htmlIf[, htmlElse]);

If cond (boolean), returns htmlIf or else returns htmlElse (optional.)

switchCase

ht.switchCase(val,opts,html[,htmlDefault]);

Given a value val, and an array of possible matches opts then html is the corresponding array of possible html outputs.
If there is no match for val, htmlDefault is the default output.
If html[n] is given as '||', then opt[n] is a fall through case. For example:

ht.switchCase(
  val,
  [1,2,3,4,5],
  ['||','||',()=>{ return 'X'+foo(val); },'||','Y'],
  'Z'
);

is an emulation of:

switch (val) {
  case 1:
  case 2:
  case 3: return 'X' + foo(val);
  case 4:
  case 5: return 'Y';
  default: return 'Z';
}

whileDo

ht.whileDo(test, (cond) => {...});

test is a function returning true or false.
cond is the boolean result of the last test.
(cond) => {...} will be executed at least once then repeated while test() is true. (N.B. The initial value of cond is undefined.)
In order to exit the loop (cond) => {...} must manipulate in-scope variables so that a subsequent test() returns false.

helper methods

concat

ht.concat(html[,html][,...]);

Add html content together (aesthetic alternative to using +'s)

cmd

ht.cmd(func[,param][,param][,...]);

Helps construct an embedded js event command in html.
func is a string of the target js method name.
param are optional parameters to pass to the method.
For example, clicking on an element with

{
  onclick: ht.cmd('validate',str,num);
} 

triggers

function validate(str,num) {
  ...
} 

evt

ht.evt(func,[param,][param,][...]));

Operates just like ht.cmd except an 'event' variable is assumed as the first parameter: For example a key down event

{
  onkeydown: ht.evt('test',val1,val2);
}

triggers

function test(event,val1,val2) {
  if (event.code == 'Enter') {...}
}

css

ht.css(prop);

Helps include style properties within your html. (Rather use css stylesheets for non-dynamic styling.)
prop is an enumerable object whose key value pairs represent the css properties and values you wish to set or change.

Install

npm install htflow

Tests

Tests are written in Mocha

npm test