ZxQueryStatic class
ZxQueryStatic(what) → {ZxQuery}
Creates a ZxQuery wrapped element.
Parameters
| Name | Type | Argument | Description |
|---|---|---|---|
what | Object | ZxQuery | Array.<Node> | Node | NodeList | string | undefined | optional | Query target |
Returns
Methods
addTransition(cssId, scope, className, properties, options, container) → {Element|HTMLElement}
Adds a CSS transition effect to the component stylesheet.
Parameters
| Name | Type | Argument | Description |
|---|---|---|---|
cssId | |||
scope | |||
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. | |
container | Node | undefined | optional | The 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
| Name | Type | Argument | Description |
|---|---|---|---|
css | string | Element | HTMLElement | Stylesheet text | |
target | Element | HTMLElement | null | Existing style element to replace | |
cssId | string | id to assign to the stylesheet | |
container | Node | undefined | optional | The 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
| Name | Type | Description |
|---|---|---|
className | string |
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
| Name | Type | Description |
|---|---|---|
items | Array.<Object> | JSON | Enumerable objects collection. |
iterationCallback | IterationCallback | The callback fn to call at each iteration |
Returns
ZxQuery ‐ this.
find(selector) → {ZxQuery}
Selects document elements matching the given DOM query selector.
Parameters
| Name | Type | Description |
|---|---|---|
selector | string | A 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
| Name | Type | Description |
|---|---|---|
elem | Element | HTMLElement | |
selector | string | A valid DOM query selector string expression. |
Returns
Element | HTMLElement | null
getPosition(el, tolerance) → {ElementPosition}
Gets the position of an element.
Parameters
| Name | Type | Argument | Description |
|---|---|---|---|
el | Element | HTMLElement | ||
tolerance | number | optional | Distance in pixels from viewport's boundaries for the element to be considered 'visible' (this is mainly used for lazy-loading). |
Returns
hasClass(el, className) → {boolean}
Checks if an element has got the specified CSS class.
Parameters
| Name | Type | Description |
|---|---|---|
el | Element | HTMLElement | |
className | string |
Returns
boolean
playFx(config)
Plays transition effects or animations on a given element inside the component.
Parameters
| Name | Type | Description |
|---|---|---|
config | PlayFxConfig | Options. |
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
| Name | Type | Description |
|---|---|---|
html | string | The source HTML template. |
callback | function | A 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
| Name | Type | Description |
|---|---|---|
containerTag | string | Container element tag name |
element | Element | 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
| 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
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
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
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
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 |
