The hcj.component.container method is a helper method for defining layouts. It takes an optional string argument giving tag name of the container, followed by a build method.

container :: (String? , BuildContainer) - gt; Component

type BuildContainer = (JQuery, Context, Append) - gt; {minWidth :: Number, minHeight :: Stream (Number - gt; Number), remove :: Function?}

type Append = (Component, Viewport?, ChildConfig?) - gt; Instance

type ChildConfig = {

noRemove :: Bool?

nbsp; nbsp;

Indicates that child component will be removed manually.

}

The build method takes three arguments. The first two, el and context, are the root element of the container and the context that it is rendered into. The third argument, append, is used to append child components to the container.

The append function takes three arguments: the Component to append, a Viewport, and a ChildConfig object.

The first argument is self-explanatory. The second argument, viewport, is an object that is upgraded to a context and then passed into the component being appended. If the noRemove property of the ChildConfig object is true, this means that you intend to call the remove function of the appended child component manually, so it will not be called automatically when the container is removed from the DOM.

A Viewport is an object with the following properties:

• nbsp;el nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: Node nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;

nbsp; nbsp;

Element to append instance to. Defaults to the container's own root element.

• nbsp;width nbsp; nbsp; nbsp; nbsp; nbsp; :: Stream Number

nbsp; nbsp;

Stream giving the width of the rendered instance. Defaults to container width.

• nbsp;height nbsp; nbsp; nbsp; nbsp; :: Stream Number

nbsp; nbsp;

Stream giving the height of the rendered instance. Defaults to container width.

• nbsp;top nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: Stream Number

nbsp; nbsp;

Stream giving the top coordinate of the rendered instance, relative to the container. Defaults to 0.

• nbsp;left nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: Stream Number

nbsp; nbsp;

Stream giving the left coordinate of the rendered instance. Defaults to 0.

• nbsp;widthCalc nbsp; :: Stream String

nbsp; nbsp;

CSS calc string to use for the width property of the instance. This is a "calc-sum" - the "calc(" and ")" are added by container. If not provided, then "px" is appended to the values of the viewport's width stream.

• nbsp;heightCalc :: Stream String

nbsp; nbsp;

CSS calc string to use for the height property of the instance. This is a "calc-sum" - the "calc(" and ")" are added by container. If not provided, then "px" is appended to the values of the viewport's height stream.

• nbsp;topCalc nbsp; nbsp; nbsp; :: Stream String

nbsp; nbsp;

CSS calc string to use for the top property of the instance. This is a "calc-sum" - the "calc(" and ")" are added by container. If not provided, then "px" is appended to the values of the viewport's top stream.

• nbsp;leftCalc nbsp; nbsp; :: Stream String

nbsp; nbsp;

CSS calc string to use for the left property of the instance. This is a "calc-sum" - the "calc(" and ")" are added by container. If not provided, then "px" is appended to the values of the viewport's left stream.

Example - Top Margin

topMargin :: Component - gt; Component

Here is an example of a layout that pushes its content down by five pixels. To do this, it creates a viewport with a top stream, and returns a minHeight that is increased by five pixels.

var	nbsp;c	nbsp;=	nbsp;hcj.component

	nbsp;

var	nbsp;topMargin	nbsp;=	nbsp;function	nbsp;(c)	nbsp;{

	nbsp;	nbsp;return	nbsp;c.container(function	nbsp;(el,	nbsp;ctx,	nbsp;append)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;instance	nbsp;=	nbsp;append(c,	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;top:	nbsp;stream.once(5),

	nbsp;	nbsp;	nbsp;	nbsp;});

	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;minWidth:	nbsp;instance.minWidth,

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;minHeight:	nbsp;stream.map(instance.minHeight,	nbsp;function	nbsp;(mh)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;function	nbsp;(w)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;mh(w)	nbsp;+	nbsp;5;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;};

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;})

	nbsp;	nbsp;	nbsp;	nbsp;};

	nbsp;	nbsp;});

};

Example - Purple Background

purpleBackground :: Component - gt; Component

Imagine we want to define a layout that adds a 10px margin and gives a component a purple background. Here's how we can do it. Note that there is no use of CSS margin or padding properties - the child instance is explicitly positioned in a sub-region of the container, and the container's minimum width and minimum height are increased correspondingly. For completeness, we include widthCalc and heightCalc streams, which are required in order for any CSS transitions to work properly.

var	nbsp;purpleBackground	nbsp;=	nbsp;function	nbsp;(c)	nbsp;{

	nbsp;	nbsp;return	nbsp;c.container(function	nbsp;(el,	nbsp;context,	nbsp;append)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;el.style.backgroundColor	nbsp;=	nbsp;'#FF00FF';

	nbsp;	nbsp;	nbsp;

	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;instance	nbsp;=	nbsp;append(c,	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;width:	nbsp;stream.map(context.width,	nbsp;function	nbsp;(w)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;w	nbsp;-	nbsp;20;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;}),

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;height:	nbsp;stream.map(context.height(function	nbsp;(h)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;h	nbsp;-	nbsp;20;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;}),

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;top:	nbsp;stream.once(10),

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;left:	nbsp;stream.once(10),

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;widthCalc:	nbsp;stream.once('100%	nbsp;-	nbsp;20px'),

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;heightCalc:	nbsp;stream.once('100%	nbsp;-	nbsp;20px'),

	nbsp;	nbsp;	nbsp;	nbsp;});

	nbsp;	nbsp;	nbsp;

	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;minWidth:	nbsp;stream.map(instance.minWidth,	nbsp;function	nbsp;(mw)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;mw	nbsp;+	nbsp;20;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;}),

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;minHeight:	nbsp;stream.map(instance.minHeight,	nbsp;function	nbsp;(mh)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;function	nbsp;(w)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;mh(w	nbsp;-	nbsp;20)	nbsp;+	nbsp;20;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;};

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;}),

	nbsp;	nbsp;	nbsp;	nbsp;};

	nbsp;	nbsp;});

};

Example - Simple Stack

stack :: [Component] - gt; Component

Say we want to put components into a vertical stack.

First we map over the components provided, initializing an array of viewports and an array of instances. Next, we use the HCJ stream library to change the components' viewports every time the stack's context changes. Last, we assign the minimum width and minimum height of the stack by combining together the minimum widths and minimum heights of the stacked instances.

var	nbsp;stack	nbsp;=	nbsp;function	nbsp;(cs)	nbsp;{

	nbsp;	nbsp;return	nbsp;c.container(function	nbsp;(el,	nbsp;context,	nbsp;append)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;viewports	nbsp;=	nbsp;[];

	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;instances	nbsp;=	nbsp;[];

	nbsp;	nbsp;	nbsp;	nbsp;cs.map(function	nbsp;(c,	nbsp;index)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;viewport	nbsp;=	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;top:	nbsp;stream.create(),

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;height:	nbsp;stream.create(),

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;};

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;viewports.push(viewport);

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;instances.push(append(c,	nbsp;viewport));

	nbsp;	nbsp;	nbsp;	nbsp;});

	nbsp;	nbsp;	nbsp;

	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;instanceMinWidthsS	nbsp;=	nbsp;stream.all(instances.map(function	nbsp;(i)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;i.minWidth;

	nbsp;	nbsp;	nbsp;	nbsp;}));

	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;instanceMinHeightsS	nbsp;=	nbsp;stream.all(instances.map(function	nbsp;(i)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;i.minHeight;

	nbsp;	nbsp;	nbsp;	nbsp;}));

	nbsp;	nbsp;	nbsp;

	nbsp;	nbsp;	nbsp;	nbsp;stream.combine([

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;context.width,

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;context.height,

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;instanceMinHeightsS,

	nbsp;	nbsp;	nbsp;	nbsp;],	nbsp;function	nbsp;(w,	nbsp;h,	nbsp;mhs)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;top	nbsp;=	nbsp;0;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;mhs.map(function	nbsp;(mh,	nbsp;index)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;viewport	nbsp;=	nbsp;viewports[index];

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;height	nbsp;=	nbsp;mh(w);

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;stream.push(viewport.top,	nbsp;top);

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;stream.push(viewport.height,	nbsp;height);

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;top	nbsp;+=	nbsp;height;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;});

	nbsp;	nbsp;	nbsp;	nbsp;});

	nbsp;	nbsp;	nbsp;

	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;minWidth:	nbsp;stream.map(instanceMinWidthsS,	nbsp;function	nbsp;(mws)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;mws.reduce(function	nbsp;(a,	nbsp;b)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;Math.max(a,	nbsp;b);

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;},	nbsp;0);

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;}),

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;minHeight:	nbsp;stream.map(instanceMinHeightsS,	nbsp;function	nbsp;(mhs)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;function	nbsp;(w)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;mhs.map(function	nbsp;(mh)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;mh(w);

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;}).reduce(function	nbsp;(a,	nbsp;b)	nbsp;{

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;return	nbsp;a	nbsp;+	nbsp;b;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;},	nbsp;0);

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;};

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;}),

	nbsp;	nbsp;	nbsp;	nbsp;};

	nbsp;	nbsp;});

};

Source: git://hcj-js.org/hcj

Browse: https://hcj-js.org/source/

Email: info@hcj-js.org