zuix.js emoji_nature API

Zuix class

Constructor

new Zuix() → {Zuix}

Allocates a new instance of zuix.js, JavaScript library for component-based development. A zuix.js instance is automatically allocated on page load, and always available in the global scope as zuix.

Returns

Zuix

Properties

$ → ZxQueryStatic

Helper function for manipulating the DOM.

Methods

activeRefresh($view, $element, contextData, refreshCallback) → {ActiveRefresh}

Active-Refresh factory method.

Parameters

Returns

ActiveRefresh ‐ The ActiveRefresh object. Invoke the start() method on the returned object, to actually activate the refresh handler.

bundle(bundleData, callback) → {Zuix|Array.<BundleItem>}

Gets/Sets the application's data bundle (all components and scripts used in the page packed into a single object).

Parameters

Returns

Zuix | Array.<BundleItem>

componentize(element) → {Zuix}

Searches the document, or inside the given element, for elements with z-load attribute, and loads the requested components. Is also possible to disable/enable the componentizer by passing a boolean value as argument.

Parameters

Returns

Zuix ‐ The {Zuix} object itself.

Example

 zuix.componentize(document);
 // Globally disable the componentizer
 zuix.compenentize(false);
 // Re-enable the componentizer
 zuix.compenentize(true);

context(contextId, callback) → {ComponentContext}

Gets a ComponentContext object, given its contextId or its host element. The contextId is the one specified in the ContextOptions object or by using the z-context attribute on the host element.

Parameters

Returns

ComponentContext ‐ The matching component's context or null if the context does not exist or not yet loaded.

Example

<div z-load="site/components/slideshow"
     z-context="my-slide-show">...</div>

slideShow = null;
zuix.context('my-slide-show', function(ctx) {
  slideShow = ctx;
  // call component's methods
  slideShow.setSlide(1);
});

controller(handler, options) → {ContextControllerHandler}

Allocates a component's controller handler. The provided handler function will be called to initialize the component's controller instance once the component has been loaded.

Parameters

Returns

ContextControllerHandler ‐ The allocated controller handler.

Example

// Allocates and assign a controller for
// the component 'path/to/component_name'
ctrl = zuix.controller(function(cp) {
  // `cp` is the {ContextController}
  // TODO: inline code of controller follows...
}).for('path/to/component_name');

dumpCache() → {Array.<ComponentCache>}

Dumps content of the components cache. Mainly for debugging purpose.

Returns

Array.<ComponentCache>

dumpContexts() → {Array.<ComponentContext>}

Dumps allocated component's contexts. Mainly for debugging purpose.

Returns

Array.<ComponentContext>

field(fieldName, container, context) → {ZxQuery}

Search the document or inside the given container for elements having the #<field_name> (or z-field="<name>") attribute matching the given value. This method implements a caching mechanism and automatic disposal of allocated objects and events.

Parameters

Returns

ZxQuery ‐ A {ZxQuery} object wrapping the matching element(s). If there's just one matching element, then the returned object will also have the additional method field(fieldName) to search for fields inside the element itself.

Example

<div #sample-container>
   <!-- HTML -->
</div>
<script>
container = zuix.field('sample-container');
container.html('Hello World!');
</script>

getResourcePath(path) → {string}

Gets the path of a loadable resource.

Parameters

Returns

string ‐ The resource's path.

hook(eventPath, eventHandler) → {Zuix}

Sets a callback for a global event. There can be only one callback for each kind of global event. Pass null as eventHandler to unset a previously set callback.

Parameters

Returns

Zuix ‐ The {Zuix} object itself.

Example

// The context `this` in the event handlers will be
// the {ComponentContext} object that sourced the event.
// The `data` parameter passed to the handlers, is of
// variant type, depending on the type of the occurring event.
zuix.hook('load:begin', function(data) {

  loaderMessage.html('Loading "' + data.task + '" ...');
  loaderMessage.show();

}).hook('load:next', function(data) {

  loaderMessage.html('"' + data.task + '" done, loading next..');

}).hook('load:end', function() {

  loaderMessage.hide();

}).hook('html:parse', function(data) {
  // Process HTML content before it's attached to the DOM

  if (this.options().markdown === true && typeof showdown !== 'undefined') {
    // ShowDown - MarkDown syntax compiler
    let htmlMarkDown = data.content;
    htmlMarkDown = new showdown.Converter()
      .makeHtml(htmlMarkDown);
    // return the processed content
    data.content = htmlMarkDown;
  }

}).hook('css:parse', function(data) {
  // Process CSS content before it's attached to the DOM

  let css = data.content;
  // process css, eg. run a CSS pre-processor
  // eg. Sass, Less, ...
  css = run_pre_processor(css);
  // return the processed content
  data.content = css;

}).hook('view:process', function(view) {
  // The view DOM is now fully loaded and ready
  // `view` is of {ZxQuery} type

  // Prism code syntax highlighter
  view.find('code').each(function(i, block) {
    this.addClass('language-javascript');
    Prism.highlightElement(block);
  });

  // Force opening of all non-local links in a new window
  zuix.$('a[href*="://"]').attr('target', '_blank');

  // Material Design Light auto-detection
  // Call DOM upgrade on newly added view elements
  if (componentHandler)
    componentHandler.upgradeElements(view.get());

});

lazyLoad(enable, threshold) → {Zuix|boolean}

Enables/Disables lazy-loading or gets the current setting.

Parameters

Returns

Zuix | boolean ‐ true if lazy-loading is enabled, false otherwise.

load(componentId, options) → {ComponentContext}

Loads a component. This is the programmatic equivalent of z-load attribute used to load components from HTML.

Parameters

Returns

ComponentContext ‐ The component context.

Example

 <!--
 The controller will be loaded on the following host element:
 -->
<div #sample-view></div>

<script>
// Get the host element
const view = zuix.field('sample-view');

// Declares inline controller for 'my/example/component'
const exampleController = zuix.controller((cp) => {
  cp.create = onCreate;

  function onCreate() {
    // Sets the initial content of the view
    cp.view().html('Hello World!');
    // Exposes the private `testMethod`
    // as the public method `test`
    cp.expose('test', testMethod);
  }

  function testMethod() {
    cp.log.i("Method exposing test");
    cp.view().html('A simple test.');
  }
}).for('my/example/component');

// loads the controller
zuix.load('my/example/component', { view, ready: (ctx) => {
  // call the public method `test` after 1 second
  setTimeout(ctx.test, 1000);
}});
</script>

loadComponent(elements, componentId, type, options) → {Zuix}

Loads a component, given the target host element(s). If the target is already a component, it will be unloaded and replaced by the new one.

Parameters

Returns

Zuix ‐ The {Zuix} object itself.

Example

<div layout="rows center-spread">

  <div class="card-component">
    <div #title>Card 1</div>
  </div>

  <div class="card-component">
    <div #title>Card 2</div>
  </div>

</div>
<style>
.card-component {
  margin: 8px;
  max-width: 360px;
}
</style>
<script>
  const elements = zuix.$.find('.card-component');
  zuix.loadComponent(elements, 'templates/mdl_card', 'view');
</script>

observable(obj) → {ObservableObject}

Gets an observable instance of the given object. Based on the browser's built-in Proxy object.

Parameters

Returns

ObservableObject ‐ The observable object.

runScriptlet(scriptCode, $el, $view, data) → {object|undefined}

Runs a script in the scripting context of the given view element.

Parameters

Returns

object | undefined

setComponentCache()

Sets components cache.

Returns

‐ void

store(name, value) → {object}

Gets/Sets a global store entry.

Parameters

Returns

object

Example

 // stores *myObjectData* in the store entry named *my-data*
 zuix.store('my-data', myObjectData);
 // gets data from the store entry named *my-data*
 const data = zuix.store('my-data');

trigger(context, eventPath, eventData) → {Zuix}

Triggers the event specified by eventPath.

Parameters

Returns

Zuix ‐ The {Zuix} object itself.

unload(context) → {Zuix}

Unloads the given component context(s) releasing all allocated resources.

Parameters

Returns

Zuix ‐ The {Zuix} object itself.

Example

zuix.unload(ctx);

using(resourceType, resourcePath, callback, ctx) → {Zuix}

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.

Parameters

Returns

Zuix ‐ The {Zuix} object itself.

Example

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

Type Definitions

ActiveRefreshCallback(data, refreshMs, forceActive)

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

Parameters

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

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

This

• {HTMLElement}

Parameters

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

Binding adapter callback.

Parameters

BindingAdapterRefreshCallback(refreshMs)

Binding adapter refresh callback

Parameters

BundleItem

Bundle item object.

Properties

ComponentCache

Component cache object.

Properties

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

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

Returns

‐ undefined

ContextErrorCallback(error, ctx)

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

This

• {ComponentContext}

Parameters

ContextLoadedCallback(ctx)

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

This

• {ComponentContext}

Parameters

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

ContextReadyCallback(ctx)

Callback function triggered when a component has been successfully loaded.

This

• {ComponentContext}

Parameters

ElementPosition

The ElementPosition object returned by the position() method.

Properties

ElementsIterationCallback(count, item, $item)

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

This

• {ZxQuery}

Parameters

EventCallback(event, data, $el)

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

This

• {ZxQuery}

Parameters

IterationCallback(k, item)

The IterationCallback function.

This

• {object}

Parameters

LoggerMonitorCallback(ctx, level)

Callback function for monitoring all log messages.

This

• {object}

Parameters

PlayFxCallback($element, classQueue)

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

This

• {ZxQuery}

Parameters

PlayFxConfig

Configuration object for playFx, playTransition, playAnimation utility methods.

Properties

Position

Relative position.

Properties

ResourceUsingCallback(resourcePath, hashIdOrContext)

Callback in response to a zuix.using request.

Parameters

ZxQueryHttpBeforeSendCallback(xhr)

The ZxQueryHttpBeforeSendCallback function.

This

• {undefined}

Parameters

ZxQueryHttpErrorCallback(xhr, statusText, statusCode)

The ZxQueryHttpErrorCallback function.

This

• {undefined}

Parameters

ZxQueryHttpOptions

zuix.$.http options object.

Properties

ZxQueryHttpSuccessCallback(responseText)

The ZxQueryHttpSuccessCallback function.

This

• {undefined}

Parameters

ZxQueryHttpThenCallback(xhr)

The ZxQueryHttpThenCallback function.

This

• {undefined}

Parameters