zuix.js emoji_nature API

ContextController class

Constructor

new ContextController(context) → {ContextController}

ContextController constructor.

Parameters
NameTypeDescription
contextComponentContext
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
NameTypeDescription
eventPathstringEvent path.
handlerEventCallbackBehavior handler.
Returns

ContextController

addEvent(eventPath, handler) → {ContextController}

Adds an event handler.

Parameters
NameTypeDescription
eventPathstringEvent path.
handlerEventCallbackEvent hanler.
Returns

ContextController

addTransition(className, properties, options)

Adds a CSS transition effect to the component stylesheet.

Parameters
NameTypeDescription
classNamestringCSS class name to assign to this transition.
propertiesArray.<Object> | JSONList of CSS properties/values to set.
optionsArray.<Object> | JSONList of transition options.

clearCache()

Clears the fields cache.

declare(name, handler) → {ContextController}

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

Parameters
NameTypeArgumentDescription
namestring | JSONName of the declared method/property, or list of name/value pairs
handlerfunctionoptionalFunction 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
NameTypeArgumentDescription
namestring | JSONName of the exposed method/property, or list of name/value pairs
handlerfunctionoptionalFunction 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
NameTypeDescription
fieldNamestringThe 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
NameTypeDescription
componentIdstringComponent 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
NameTypeArgumentDescription
optionsobjectoptionalThe 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
NameTypeArgumentDescription
optionsobjectoptionalThe 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
NameTypeArgumentDescription
modelobject | undefinedoptionalThe 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
NameTypeArgumentDescription
eventPathstringThe event path
eventDataobjectThe event data
isHookbooleanoptionalTrigger 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
NameTypeArgumentDescription
resourceTypestringEither 'style', 'script' or 'component'
resourcePathstringRelative or absolute resource url path
callbackResourceUsingCallbackoptionalCallback 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
NameTypeArgumentDescription
filterstring | undefinedoptional
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
NameTypeArgumentDescription
dataobjectoptionalData to be passed to next refresh call
refreshMsnumberoptionalDelay in milliseconds before the next refresh call
forceActiveboolean | undefinedoptionalIgnore visibility, schedule anyway

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

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

This
Parameters
NameTypeArgumentDescription
$viewZxQueryThe component's view
$elementZxQueryThe target element as ZxQuery object
dataobjectCustom data that ca be passed from call to call
nextCallbackActiveRefreshCallbackCallback for scheduling the next refresh call
attributeNamestringoptionalSource attribute name if it's a '@' handler

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

Binding adapter callback.

Parameters
NameTypeArgumentDescription
$elementZxQueryThe view's element bound to the data model's fieldName
fieldNamestringThe element's bound field name
$viewZxQueryThe view
refreshCallbackBindingAdapterRefreshCallbackoptionalRefresh loop callback

BindingAdapterRefreshCallback(refreshMs)

Binding adapter refresh callback

Parameters
NameTypeArgumentDescription
refreshMsnumberoptionalMilliseconds to wait before refresh (default: 500ms)

BundleItem

Bundle item object.

Properties
NameTypeDescription
viewElement
cssstring
controllerContextControllerHandler

ComponentCache

Component cache object.

Properties
NameTypeDescription
componentIdstringThe id of the cached component.
viewElementThe view element.
cssstringThe CSS style text.
css_appliedbooleanWhether the CSS style has been applied to the view or not.
controllerContextControllerHandlerThe controller handler function.
usingstringThe 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
Parameters
NameTypeDescription
cpContextControllerThe 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
NameTypeDescription
targetObjectThe target object.
keystringThe name of the property.
valueObjectThe value of the property.
pathstringThe full property path (dotted notation).
oldObjectThe target object before the update.
Returns

‐ undefined

ContextErrorCallback(error, ctx)

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

This
Parameters
NameTypeDescription
errorObject
ctxComponentContextThe 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
Parameters
NameTypeDescription
ctxComponentContextThe 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
NameTypeDescription
contextIdObject | undefinedThe context id. HTML attribute equivalent: z-context. If not specified it will be randomly generated. HTML attribute equivalent: z-context.
containerElement | undefinedThe container element.
modelJSON | undefinedThe data model. HTML attribute equivalent: z-model.
viewElement | undefinedThe view element.
controllerContextControllerHandler | undefinedThe controller handler.
controllerMembersObjectAdditional methods/properties to add to the context controller.
onObject.<string, EventCallback> | Object.<string, string> | undefinedThe 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.
behaviorObject.<string, EventCallback> | Object.<string, string> | undefinedThe 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.
cssHTMLStyleElement | string | boolean | undefinedCustom stylesheet to apply to the component's view.
encapsulationboolean | undefinedWhether to use style encapsulation or not (default: false).
resetCssboolean | undefinedWhether to reset view style to prevent inheriting from parent containers (default: false).
cextstring | undefinedWhen loading content of the view, appends the specified extension instead of .html.
htmlboolean | string | undefinedIt can be set to false, to disable HTML template loading, or it can be set to a string containing the inline HTML template code.
lazyLoadboolean | undefinedEnables or disables lazy-loading (default: false). HTML attribute equivalent: z-lazy.
prioritynumber | undefinedLoading priority (default: 0). HTML attribute equivalent: z-priority.
fetchOptionsObject | undefinedOptions to be used when fetching this component resources.
usingstring | undefinedComma 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.
loadedContextLoadedCallback | undefinedThe loaded callback, triggered once the component is successfully loaded.
readyContextReadyCallback | undefinedThe ready callback, triggered once all component's dependencies have been loaded.
errorContextErrorCallback | undefinedThe error callback, triggered when an error occurs.

ContextReadyCallback(ctx)

Callback function triggered when a component has been successfully loaded.

This
Parameters
NameTypeDescription
ctxComponentContextThe component context (same as this).

ElementPosition

The ElementPosition object returned by the position() method.

Properties
NameTypeDescription
xnumberX coordinate of the element in the viewport
ynumberY coordinate of the element in the viewport
framePositionPosition of the element relative to the viewport
eventstringCurrent state change event description (enter, exit, scroll, off-scroll)
visiblebooleanBoolean value indicating whether the element is visible in the viewport

ElementsIterationCallback(count, item, $item)

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

This
Parameters
NameTypeDescription
countnumberIteration count.
itemElementCurrent element.
$itemZxQueryZxQuery wrapped element (same as 'this').

EventCallback(event, data, $el)

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

This
Parameters
NameTypeDescription
eventstringEvent name
dataObjectEvent data
$elZxQueryZxQuery wrapped element that sourced the event (same as this)

IterationCallback(k, item)

The IterationCallback function.

This
Parameters
NameTypeDescription
knumber | objectIteration count / item key.
itemobjectCurrent element (same as this).

LoggerMonitorCallback(ctx, level)

Callback function for monitoring all log messages.

This
Parameters
NameTypeDescription
ctxObject
levelstring
...argsArray.<Object>

PlayFxCallback($element, classQueue)

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

This
Parameters
NameTypeDescription
$elementZxQueryTarget element (same as 'this').
classQueueArray.<string>Transition/animation class queue left to play, null if the animation ended.

PlayFxConfig

Configuration object for playFx, playTransition, playAnimation utility methods.

Properties
NameTypeArgumentDescription
type'transition' | 'animation'The type of effect to play.
targetElement | ZxQueryTarget element.
classesArray.<string> | stringList of transition or animation classes to play.
optionsobjectoptionalTransition/animation options ('delay', 'duration', etc..).
holdStatebooleanoptionalHold last transition/animation class.
onStepPlayFxCallbackoptionalSince class list can contain more than just two classes, this callback will be called after each pair of transition/animation ended.
onEndPlayFxCallbackoptionalCalled when all transitions/animations ended.

Position

Relative position.

Properties
NameTypeDescription
dxnumber
dynumber

ResourceUsingCallback(resourcePath, hashIdOrContext)

Callback in response to a zuix.using request.

Parameters
NameTypeDescription
resourcePathstring
hashIdOrContextstring | object

ZxQueryHttpBeforeSendCallback(xhr)

The ZxQueryHttpBeforeSendCallback function.

This
Parameters
NameTypeDescription
xhrXMLHttpRequest

ZxQueryHttpErrorCallback(xhr, statusText, statusCode)

The ZxQueryHttpErrorCallback function.

This
Parameters
NameTypeDescription
xhrXMLHttpRequest
statusTextstring
statusCodenumber

ZxQueryHttpOptions

zuix.$.http options object.

Properties
NameTypeDescription
urlstring
beforeSendZxQueryHttpBeforeSendCallback | undefined
successZxQueryHttpSuccessCallback | undefined
errorZxQueryHttpErrorCallback | undefined
thenZxQueryHttpThenCallback | undefined

ZxQueryHttpSuccessCallback(responseText)

The ZxQueryHttpSuccessCallback function.

This
Parameters
NameTypeDescription
responseTextstring

ZxQueryHttpThenCallback(xhr)

The ZxQueryHttpThenCallback function.

This
Parameters
NameTypeDescription
xhrXMLHttpRequest
GitHub logo
JavaScript library for component-based websites and applications.