zuix.js API

`ContextController` class

Constructor

new ContextController(context) → {ContextController}

ContextController constructor.

Parameters

Name	Type	Description
`context`	ComponentContext

Returns

ContextController

Properties

log → Logger

The component's built-in logger.

init → ContextControllerInitCallback

If set, this function gets called before component is created and before applying context options.

create → ContextControllerCreateCallback

If set, this function gets called after loading, when the component is created and its view (if provided) is loaded.

update → ContextControllerUpdateCallback

If set, this function gets called each time the data model is updated.

dispose → ContextControllerDisposeCallback

If set, this function gets called when the component is about to be disposed.

Methods

addBehavior(eventPath, handler) → {ContextController}

Adds a behavior handler.

Parameters

Name	Type	Description
`eventPath`	string	Event path.
`handler`	EventCallback	Behavior handler.

Returns

ContextController

addEvent(eventPath, handler) → {ContextController}

Adds an event handler.

Parameters

Name	Type	Description
`eventPath`	string	Event path.
`handler`	EventCallback	Event hanler.

Returns

ContextController

addTransition(className, properties, options)

Adds a CSS transition effect to the component stylesheet.

Parameters

Name	Type	Description
`className`	string	CSS class name to assign to this transition.
`properties`	Array.<Object> \| JSON	List of CSS properties/values to set.
`options`	Array.<Object> \| JSON	List of transition options.

clearCache()

Clears the fields cache.

declare(name, handler) → {ContextController}

Declare fields that are available in the view's scripting scope.

Parameters

Name	Type	Argument	Description
`name`	string \| JSON		Name of the declared method/property, or list of name/value pairs
`handler`	function	optional	Function or property descriptor.

Returns

ContextController ‐ The {ContextController} itself.

expose(name, handler) → {ContextController}

Declare fields that are available as public members of the component context object.

Parameters

Name	Type	Argument	Description
`name`	string \| JSON		Name of the exposed method/property, or list of name/value pairs
`handler`	function	optional	Function or property descriptor.

Returns

ContextController ‐ The {ContextController} itself.

field(fieldName) → {ZxQuery}

Gets, within the component view, elements having the #<field_name> (or z-field="<name>") attribute matching the given value. Same as ComponentContext–field.

Parameters

Name	Type	Description
`fieldName`	string	The name of the `#<field_name>` (or `z-field="name"`) attribute of the element(s) to get.

Returns

ZxQuery ‐ A {ZxQuery} object wrapping the matching element(s).

for(componentId) → {ContextController}

Registers this one as the default controller for the given component type.

Parameters

Name	Type	Description
`componentId`	string	Component identifier

Returns

ContextController ‐ The {ContextController} itself.

Example

// Controller of component 'path/to/component_name'
var ctrl = zuix.controller(function(cp) {
    // `cp` is the {ContextController}
    cp.create = function() { ... };
    cp.dispose = function() { ... }
}).for('path/to/component_name');

loadCss(options) → {ContextController}

Loads the .css file and replace the current view style of the component. If no options.path is specified, it will try to load the file with the same base-name as the componentId.

Parameters

Name	Type	Argument	Description
`options`	object	optional	The options object

Returns

ContextController ‐ The {ContextController} object itself.

Example

// loads 'path/to/component_name.css' by default
cp.loadCss();
// or loads the view css with provided options
cp.loadCss({
    path: 'url/of/style/file.css',
    success: function() { ... },
    error: function(err) { ... },
    then: function() { ... }
});

loadHtml(options) → {ContextController}

Loads the .html file and replace the view markup of the component. If no options.path is specified, it will try to load the file with the same base-name as the componentId.

Parameters

Name	Type	Argument	Description
`options`	object	optional	The options object

Returns

ContextController ‐ The {ContextController} object itself.

Example

// loads 'path/to/component_name.html' by default
cp.loadHtml();
// or loads the view html with provided options
cp.loadHtml({
    path: 'url/of/view/file.html',
    success: function() { ... },
    error: function(err) { ... },
    then: function() { ... }
});

model(model) → {ContextController|object}

Gets/Sets the data model of the component. Same as ComponentContext–model.

Parameters

Name	Type	Argument	Description
`model`	object \| undefined	optional	The model object

Returns

ContextController | object

options() → {ContextOptions|any}

Gets the component options. Same as ComponentContext–options.

Returns

ContextOptions | any ‐ The component options.

trigger(eventPath, eventData, isHook) → {ContextController}

Triggers the component event eventPath with the given eventData object. To listen to a component event use the {ComponentContext}.on(eventPath, handler) method or in case isHook is set to true, use the zuix.hook(eventPath, handler) method (global hook event).

Parameters

Name	Type	Argument	Description
`eventPath`	string		The event path
`eventData`	object		The event data
`isHook`	boolean	optional	Trigger as global hook event

Returns

ContextController

Example

// somewhere inside the slide-show component controller
cp.trigger('slide:change', slideIndex);

// somewhere in a page hosting the slide-show component
// set component event listeners
zuix.context('my-slide-show')
  .on('slide:change', function(slideIndex) { ... })
  .on(...);

using(resourceType, resourcePath, callback) → {ContextController}

Loads a CSS, script or a singleton component. Resources loaded with this method are available in the global scope and can also be included in the application bundle. If the component is a custom element, styles will be loaded as a component-local stylesheets and placed inside its ShadowDOM.

Parameters

Name	Type	Argument	Description
`resourceType`	string		Either 'style', 'script' or 'component'
`resourcePath`	string		Relative or absolute resource url path
`callback`	ResourceUsingCallback	optional	Callback function to call once resource is loaded

Returns

ContextController ‐ The {ContextController} object itself.

Example

 this.using('script', 'https://some.cdn.js/moment.min.js', function(){
  // can start using moment.js
});

view(filter) → {ZxQuery}

Gets the component view or if filter argument is passed, gets the view elements matching the given filter (shorthand for cp.view().find(filter)).

Parameters

Name	Type	Argument	Description
`filter`	string \| undefined	optional

Returns

ZxQuery

Example

// get all `checkbox` elements with `.checked` class.
var choices = cp.view('input[type="checkbox"].checked');
choices.removeClass('.checked');
// ...
// hide the component's view
cp.view().hide();

Type Definitions

ActiveRefreshCallback(data, refreshMs, forceActive)

The callback for setting data and delay of next refresh request.

Parameters

Name	Type	Argument	Description
`data`	object	optional	Data to be passed to next refresh call
`refreshMs`	number	optional	Delay in milliseconds before the next refresh call
`forceActive`	boolean \| undefined	optional	Ignore visibility, schedule anyway

ActiveRefreshHandler($view, $element, data, nextCallback, attributeName)

The Active-Refresh function that will be called for each refresh request.

This

{HTMLElement}

Parameters

Name	Type	Argument	Description
`$view`	ZxQuery		The component's view
`$element`	ZxQuery		The target element as ZxQuery object
`data`	object		Custom data that ca be passed from call to call
`nextCallback`	ActiveRefreshCallback		Callback for scheduling the next refresh call
`attributeName`	string	optional	Source attribute name if it's a '@' handler

BindingAdapterCallback($element, fieldName, $view, refreshCallback)

Binding adapter callback.

Parameters

Name	Type	Argument	Description
`$element`	ZxQuery		The view's element bound to the data model's fieldName
`fieldName`	string		The element's bound field name
`$view`	ZxQuery		The view
`refreshCallback`	BindingAdapterRefreshCallback	optional	Refresh loop callback

BindingAdapterRefreshCallback(refreshMs)

Binding adapter refresh callback

Parameters

Name	Type	Argument	Description
`refreshMs`	number	optional	Milliseconds to wait before refresh (default: 500ms)

BundleItem

Bundle item object.

Properties

Name	Type	Description
`view`	Element
`css`	string
`controller`	ContextControllerHandler

ComponentCache

Component cache object.

Properties

Name	Type	Description
`componentId`	string	The id of the cached component.
`view`	Element	The view element.
`css`	string	The CSS style text.
`css_applied`	boolean	Whether the CSS style has been applied to the view or not.
`controller`	ContextControllerHandler	The controller handler function.
`using`	string	The url/path if this is a resource loaded with `zuix.using(..)` method.

ContextControllerCreateCallback()

Function that gets called after loading, when the component is actually created and ready.

ContextControllerDisposeCallback()

Function called when the component is about to be disposed.

ContextControllerHandler(cp)

This function is called after the component is loaded and it is used to initialize its controller.

This

{ContextController}

Parameters

Name	Type	Description
`cp`	ContextController	The component controller object

ContextControllerInitCallback()

Function that gets called after loading and before the component is created.

ContextControllerUpdateCallback(target, key, value, path, old)

Function called when the data model of the component is updated

Parameters

Name	Type	Description
`target`	Object	The target object.
`key`	string	The name of the property.
`value`	Object	The value of the property.
`path`	string	The full property path (dotted notation).
`old`	Object	The target object before the update.

Returns

‐ undefined

ContextErrorCallback(error, ctx)

Callback function triggered if an error occurs when loading a component.

This

{ComponentContext}

Parameters

Name	Type	Description
`error`	Object
`ctx`	ComponentContext	The component context object (same as `this`).

ContextLoadedCallback(ctx)

Callback function triggered when a component is created, after all of its dependencies have been loaded.

This

{ComponentContext}

Parameters

Name	Type	Description
`ctx`	ComponentContext	The component context (same as `this`).

ContextOptions

This object can be supplied when loading a component. It can be either passed as argument for the zuix.load(...) / zuix.loadComponent(...) methods, in the javascript code, or with the z-options attribute in the HTML code of the component's host element.

Properties

Name	Type	Description
`contextId`	Object \| undefined	The context id. HTML attribute equivalent: z-context. If not specified it will be randomly generated. HTML attribute equivalent: z-context.
`container`	Element \| undefined	The container element.
`model`	JSON \| undefined	The data model. HTML attribute equivalent: z-model.
`view`	Element \| undefined	The view element.
`controller`	ContextControllerHandler \| undefined	The controller handler.
`controllerMembers`	Object	Additional methods/properties to add to the context controller.
`on`	Object.<string, EventCallback> \| Object.<string, string> \| undefined	The map of event handlers for standard and component's events. An event can also be simply routed to another component's event by specifying the mapped event name string. HTML attribute equivalent: z-on.
`behavior`	Object.<string, EventCallback> \| Object.<string, string> \| undefined	The map of event handlers for behaviors. An event can also be simply routed to another component's event by specifying the mapped event name string. HTML attribute equivalent: z-behavior.
`css`	HTMLStyleElement \| string \| boolean \| undefined	Custom stylesheet to apply to the component's view.
`encapsulation`	boolean \| undefined	Whether to use style encapsulation or not (default: false).
`resetCss`	boolean \| undefined	Whether to reset view style to prevent inheriting from parent containers (default: false).
`cext`	string \| undefined	When loading content of the view, appends the specified extension instead of .html.
`html`	boolean \| string \| undefined	It can be set to `false`, to disable HTML template loading, or it can be set to a string containing the inline HTML template code.
`lazyLoad`	boolean \| undefined	Enables or disables lazy-loading (default: false). HTML attribute equivalent: z-lazy.
`priority`	number \| undefined	Loading priority (default: 0). HTML attribute equivalent: z-priority.
`fetchOptions`	Object \| undefined	Options to be used when fetching this component resources.
`using`	string \| undefined	Comma separated contexts' id list of components used in this context. A variable with camel-case converted name for each referenced context, will be available in the local scripting scope.
`loaded`	ContextLoadedCallback \| undefined	The loaded callback, triggered once the component is successfully loaded.
`ready`	ContextReadyCallback \| undefined	The ready callback, triggered once all component's dependencies have been loaded.
`error`	ContextErrorCallback \| undefined	The error callback, triggered when an error occurs.

ContextReadyCallback(ctx)

Callback function triggered when a component has been successfully loaded.

This

{ComponentContext}

Parameters

Name	Type	Description
`ctx`	ComponentContext	The component context (same as `this`).

ElementPosition

The ElementPosition object returned by the position() method.

Properties

Name	Type	Description
`x`	number	X coordinate of the element in the viewport
`y`	number	Y coordinate of the element in the viewport
`frame`	Position	Position of the element relative to the viewport
`event`	string	Current state change event description (enter, exit, scroll, off-scroll)
`visible`	boolean	Boolean value indicating whether the element is visible in the viewport

ElementsIterationCallback(count, item, $item)

Callback function used with the each(..) method.

This

{ZxQuery}

Parameters

Name	Type	Description
`count`	number	Iteration count.
`item`	Element	Current element.
`$item`	ZxQuery	ZxQuery wrapped element (same as 'this').

EventCallback(event, data, $el)

Callback function triggered when an event registered with the on method occurs.

This

{ZxQuery}

Parameters

Name	Type	Description
`event`	string	Event name
`data`	Object	Event data
`$el`	ZxQuery	ZxQuery wrapped element that sourced the event (same as `this`)

IterationCallback(k, item)

The IterationCallback function.

This

{object}

Parameters

Name	Type	Description
`k`	number \| object	Iteration count / item key.
`item`	object	Current element (same as `this`).

LoggerMonitorCallback(ctx, level)

Callback function for monitoring all log messages.

This

{object}

Parameters

Name	Type	Description
`ctx`	Object
`level`	string
`...args`	Array.<Object>

PlayFxCallback($element, classQueue)

Callback function used with the each(..) method.

This

{ZxQuery}

Parameters

Name	Type	Description
`$element`	ZxQuery	Target element (same as 'this').
`classQueue`	Array.<string>	Transition/animation class queue left to play, `null` if the animation ended.

PlayFxConfig

Configuration object for playFx, playTransition, playAnimation utility methods.

Properties

Name	Type	Argument	Description
`type`	'transition' \| 'animation'		The type of effect to play.
`target`	Element \| ZxQuery		Target element.
`classes`	Array.<string> \| string		List of transition or animation classes to play.
`options`	object	optional	Transition/animation options ('delay', 'duration', etc..).
`holdState`	boolean	optional	Hold last transition/animation class.
`onStep`	PlayFxCallback	optional	Since class list can contain more than just two classes, this callback will be called after each pair of transition/animation ended.
`onEnd`	PlayFxCallback	optional	Called when all transitions/animations ended.

Position

Relative position.

Properties

Name	Type	Description
`dx`	number
`dy`	number

ResourceUsingCallback(resourcePath, hashIdOrContext)

Callback in response to a zuix.using request.

Parameters

Name	Type	Description
`resourcePath`	string
`hashIdOrContext`	string \| object

ZxQueryHttpBeforeSendCallback(xhr)

The ZxQueryHttpBeforeSendCallback function.

This

{undefined}

Parameters

Name	Type	Description
`xhr`	XMLHttpRequest

ZxQueryHttpErrorCallback(xhr, statusText, statusCode)

The ZxQueryHttpErrorCallback function.

This

{undefined}

Parameters

Name	Type	Description
`xhr`	XMLHttpRequest
`statusText`	string
`statusCode`	number

ZxQueryHttpOptions

zuix.$.http options object.

Properties

Name	Type	Description
`url`	string
`beforeSend`	ZxQueryHttpBeforeSendCallback \| undefined
`success`	ZxQueryHttpSuccessCallback \| undefined
`error`	ZxQueryHttpErrorCallback \| undefined
`then`	ZxQueryHttpThenCallback \| undefined

ZxQueryHttpSuccessCallback(responseText)

The ZxQueryHttpSuccessCallback function.

This

{undefined}

Parameters

Name	Type	Description
`responseText`	string

ZxQueryHttpThenCallback(xhr)

The ZxQueryHttpThenCallback function.

This

{undefined}

Parameters

Name	Type	Description
`xhr`	XMLHttpRequest

zuix.js emoji_nature API

ContextController class

Constructor

new ContextController(context) → {ContextController}

Parameters

Returns

Properties

log → Logger

init → ContextControllerInitCallback

create → ContextControllerCreateCallback

update → ContextControllerUpdateCallback

dispose → ContextControllerDisposeCallback

Methods

addBehavior(eventPath, handler) → {ContextController}

Parameters

Returns

addEvent(eventPath, handler) → {ContextController}

Parameters

Returns

addTransition(className, properties, options)

Parameters

clearCache()

declare(name, handler) → {ContextController}

Parameters

Returns

expose(name, handler) → {ContextController}

Parameters

Returns

field(fieldName) → {ZxQuery}

Parameters

Returns

for(componentId) → {ContextController}

Parameters

Returns

Example

loadCss(options) → {ContextController}

Parameters

Returns

Example

loadHtml(options) → {ContextController}

Parameters

Returns

Example

model(model) → {ContextController|object}

Parameters

Returns

options() → {ContextOptions|any}

Returns

trigger(eventPath, eventData, isHook) → {ContextController}

Parameters

Returns

Example

using(resourceType, resourcePath, callback) → {ContextController}

Parameters

Returns

Example

view(filter) → {ZxQuery}

Parameters

Returns

Example

Type Definitions

ActiveRefreshCallback(data, refreshMs, forceActive)

Parameters

ActiveRefreshHandler($view, $element, data, nextCallback, attributeName)

This

Parameters

BindingAdapterCallback($element, fieldName, $view, refreshCallback)

Parameters

BindingAdapterRefreshCallback(refreshMs)

Parameters

BundleItem

Properties

ComponentCache

Properties

ContextControllerCreateCallback()

ContextControllerDisposeCallback()

ContextControllerHandler(cp)

This

Parameters

ContextControllerInitCallback()

zuix.js API

`ContextController` class