Auxiliar utilities for UI Modules
All samples are using
Ink.requireModules, please read how to use it at Ink.requireModules section
Ink UI Base Class
You don't use this class directly, or inherit from it directly.
See createUIComponent() (in this module) for how to create a UI component and inherit from this. It's not plain old JS inheritance, for several reasons.
|new BaseUIComponent(element, [options])||Constructor|
|.createUIComponent(theConstructor, [options])||Take a constructor, and make it an Ink UI component.|
|.getElement()||Get the element associated with an UI component (IE the one you used in the constructor)|
|.getOption(name)||Get an UI component's option's value.|
|.getOption(name, value)||Sets an option's value.|
elementElement to associate this UI component with. It's the element you can get later using `comp.getElement()`
optionsOptions to pass to the component. You should see your specific UI component for this information.
Take a constructor, and make it an Ink UI component.
Makes it inherit BaseUIComponent, makes sure it has the basic properties Ink.UI.Common needs it to have, adds the necessary static methods, sets its options, etc.
theConstructorUI component constructor. It should have an _init function in its prototype, an _optionDefinition object, and a _name property indicating its name.
optionsOptions hash, containing:
options.elementIsOptionalfalseWhether the element argument is optional (For example, when the component might work on existing markup or create its own).
Get the element associated with an UI component (IE the one you used in the constructor)
Get an UI component's option's value.
nameThe option's name.
Sets an option's value.
nameName of the option.
valueNew option value.
|.ajaxJSON(endpoint, params, cb)||AJAX JSON request shortcut method|
|.childIndex(childEl)||deprecated Gets an element's one-base index relative to its parent.|
|.cleanChildren(parentEl)||Removes children nodes from a given object.|
|.clone(o)||deprecated Deep copy (clone) an object.|
|.currentLayout()||Gets the current Ink layout.|
|.destroyComponent()||Boilerplate method to destroy a component.|
|.elOrSelector(elOrSelector, fieldName)||Gets a DOM Element.|
|.elsOrSelector(elsOrSelector, [fieldName], required)|| Like
|.getInstance(el, [UIComponent])||Gets an UI component instance from an element.|
|.getInstanceFromSelector(selector)||Gets an instance based on a selector.|
|.getInstanceIds()||Gets all the instance ids|
|.getInstances()||Gets all the instances|
|.hashSet(o)||Sets the location's hash (window.location.hash).|
|.isDOMElement(o)||Checks if an item is a valid DOM Element.|
|.isInteger(n)||Checks if an item is a valid integer.|
|.options([fieldId], defaults, overrides, [element])||Gets options an object and element's metadata.|
|.registerInstance(inst, el)||Saves an object (which should inherit BaseUIComponent) in the registry, associated with an element. You can retrieve it later by calling getInstance.|
|.restoreIdAndClasses(toEl, inObj)||Sets the id and className properties of an element based|
|.storeIdAndClasses(fromEl, inObj)||Stores the id and/or classes of an element in an object.|
|.unregisterInstance(inst)||Unregisters (removes from the registry) a UI component instance from whatever element it's on.|
|.Layouts||Supported Ink Layouts|
AJAX JSON request shortcut method
It provides a more convenient way to do an AJAX request and expect a JSON response.It also offers a callback option, as third parameter, for better async handling.
endpointValid URL to be used as target by the request.
paramsThis field is used in the thrown Exception to identify the parameter.
cbCallback for the request.
Gets an element's one-base index relative to its parent.
Deprecated. Use Ink.Dom.Element.parentIndexOf instead.
childElValid DOM Element.
Removes children nodes from a given object.
This method was initially created to help solve a problem in Internet Explorer(s) that occurred when trying to set the innerHTML of some specific elements like 'table'.
parentElValid DOM Element
Deep copy (clone) an object.
Note: The object cannot have referece loops.
oThe object to be cloned/copied.
Gets the current Ink layout.
Boilerplate method to destroy a component.
Components should copy this method as its destroy method and modify it.
Gets a DOM Element.
elOrSelectorDOM Element or CSS Selector
fieldNameThe name of the field. Commonly used for debugging.
elOrSelector but returns an array of elements.
elsOrSelectorDOM Element, array of DOM Elements, or CSS Selector
fieldNameThe name of the field. Used for the error shown when no elements are found.
requiredIf this is true, throw an error instead of returning an empty array.
Gets an UI component instance from an element.
This function is already available in the UI components' classes themselves. You can call Modal.getInstance() and retrieve a modal.
elElement from which we want the instances. A selector is okay.
UIComponentIf you pass an Ink UI component class (Like Ink.UI.Modal or Ink.UI.Carousel), this won't return an array of all instances associated with the element. Instead it will return only the object which is an instance of that class.
Gets an instance based on a selector.
selectorCSS selector to get the instances from. This function will only use the *first* element.
Gets all the instance ids
Gets all the instances
Sets the location's hash (window.location.hash).
oObject with the info to be placed in the location's hash.
Checks if an item is a valid DOM Element.
oThe object to be checked.
Checks if an item is a valid integer.
nThe value to be checked.
Gets options an object and element's metadata.
The element's data attributes take precedence. Values from the element's data-atrributes are coerced into the required type.
fieldIdName to be used in error reports.
defaultsObject with the options' types and defaults.
overridesOptions to override the defaults. Usually passed when instantiating an UI module.
elementElement with data-attributes
Saves an object (which should inherit BaseUIComponent) in the registry, associated with an element. You can retrieve it later by calling getInstance.
This won't allow two instances of the same class to be created on a single element. It will fail and print a warning to the console if you try to do it. That is a common error when using Ink.
instObject that holds the instance.
elElement to associate with `inst`.
Sets the id and className properties of an element based
toElValid DOM Element to set the id and classes on.
inObjObject where the id and classes to be set are. This method uses the same format as the one given in `storeIdAndClasses`
Stores the id and/or classes of an element in an object.
fromElValid DOM Element to get the id and classes from.
inObjObject where the id and classes will be saved.
Unregisters (removes from the registry) a UI component instance from whatever element it's on.
instInstance to be unregistered.
Supported Ink Layouts