zuix.js emoji_nature API

ZxQueryStatic class

ZxQueryStatic(what) → {ZxQuery}

Creates a ZxQuery wrapped element.

Parameters
NameTypeArgumentDescription
whatObject | ZxQuery | Array.<Node> | Node | NodeList | string | undefinedoptionalQuery target
Returns

ZxQuery

Methods

addTransition(cssId, scope, className, properties, options, container) → {Element|HTMLElement}

Adds a CSS transition effect to the component stylesheet.

Parameters
NameTypeArgumentDescription
cssId
scope
classNamestringCSS class name to assign to this transition.
propertiesArray.<Object> | JSONList of CSS properties/values to set.
optionsArray.<Object> | JSONList of transition options.
containerNode | undefinedoptionalThe container where to append the style element
Returns

Element | HTMLElement ‐ The new style element created out of the given css text.

appendCss(css, target, cssId, container) → {Element|HTMLElement}

Appends a new stylesheet, or replaces an existing one, to the document.

Parameters
NameTypeArgumentDescription
cssstring | Element | HTMLElementStylesheet text
targetElement | HTMLElement | nullExisting style element to replace
cssIdstringid to assign to the stylesheet
containerNode | undefinedoptionalThe container where to append the style element
Returns

Element | HTMLElement ‐ The new style element created out of the given css text.

classExists(className) → {boolean}

Checks if a class exists by searching for it in all document stylesheets.

Parameters
NameTypeDescription
classNamestring
Returns

boolean

each(items, iterationCallback) → {ZxQuery}

Iterates through all objects in the given items collection. The context object this, passed to the iterationCallback(index, item), will be the object corresponding the current iteration and the index passed to the callback will be the iteration count.

If the callback returns false, the iteration loop will interrupt.

Parameters
NameTypeDescription
itemsArray.<Object> | JSONEnumerable objects collection.
iterationCallbackIterationCallbackThe callback fn to call at each iteration
Returns

ZxQuerythis.

find(selector) → {ZxQuery}

Selects document elements matching the given DOM query selector.

Parameters
NameTypeDescription
selectorstringA valid DOM query selector.
Returns

ZxQuery ‐ A new ZxQuery object containing the selected elements.

getClosest(elem, selector) → {Element|HTMLElement|null}

Gets the closest parent matching the given query selector

Parameters
NameTypeDescription
elemElement | HTMLElement
selectorstringA valid DOM query selector string expression.
Returns

Element | HTMLElement | null

getPosition(el, tolerance) → {ElementPosition}

Gets the position of an element.

Parameters
NameTypeArgumentDescription
elElement | HTMLElement
tolerancenumberoptionalDistance in pixels from viewport's boundaries for the element to be considered 'visible' (this is mainly used for lazy-loading).
Returns

ElementPosition

hasClass(el, className) → {boolean}

Checks if an element has got the specified CSS class.

Parameters
NameTypeDescription
elElement | HTMLElement
classNamestring
Returns

boolean

playFx(config)

Plays transition effects or animations on a given element inside the component.

Parameters
NameTypeDescription
configPlayFxConfigOptions.

replaceBraces(html, callback) → {string|null}

Parses variables enclosed in single or double braces and calls the given callback for each parsed variable name. If the callback returns a value, then the variable will be replaced with the given value.

Parameters
NameTypeDescription
htmlstringThe source HTML template.
callbackfunctionA callback function with one argument (the currently parsed variable name).
Returns

string | null ‐ The new html code with variables replaced with values or null if no variable was replaced.

wrapElement(containerTag, element) → {Element|HTMLElement}

Wraps an Element inside a container specified by a given tag name.

Parameters
NameTypeDescription
containerTagstringContainer element tag name
elementElement | HTMLElement
Returns

Element | HTMLElement ‐ The new wrapped element

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.