WinJS Contrib

Namespace: UI

WinJSContrib. UI

Source:

Classes

AspectRatio
ChildViewFlyout
DataForm
ElasticInput
EventTracker
ExtendedSplash
FlipSnap
FlipViewPager
FluentDOM
FlyoutPage
GlobalProgress
GridControl
HubControl
ItemSwipe
MediaTrigger
MultiPassItem
MultiPassRenderer
PageControlNavigator
SemanticListViews
SmartListLayout

Namespaces

Animation
DataSources

Methods

<static> afterTransition(element, timeout)

return a promise completed after css transition on the element is ended

Parameters:
Name Type Description
element HtmlElement

element to watch
timeout number

timeout
Source:

<static> appbarsClose()

close all appbars

Source:

<static> appbarsDisable()

disable all appbars

Source:

<static> appbarsEnable()

enable all appbars

Source:

<static> appbarsOpen()

open all appbars

Source:

<static> bindActions(element, control)

setup declarative binding to parent control function and to navigation links. It internally invoke both WinJSContrib.UI.bindPageActions and WinJSContrib.UI.bindPageLinks

Parameters:
Name Type Description
element HTMLElement

root node crawled for page actions
control Object

control owning functions to call
Source:

<static> bindMembers(element, control)

Add this element or control as member to the control. It looks for "data-page-member" attributes. If attribute is empty, it tooks the element id as member name.

Parameters:
Name Type Description
element HTMLElement

root node crawled for page actions
control Object

control owning functions to call
Source:

<static> bindPageActions(element, control, optionnal)

setup declarative binding to parent control function. It looks for "data-page-action" attributes, and try to find a matching method on the supplyed control. You could add arguments with a "page-action-args" attribute. The argument can be an object or a function

Parameters:
Name Type Description
element HTMLElement

root node crawled for page actions
control Object

control owning functions to call
optionnal item

argument for adding an item to call
Source:

setup declarative binding to page link. It looks for "data-page-link" attributes. If any the content of the attribute point toward a page. clicking that element will navigate to that page. You could add arguments with a "page-action-args" attribute. The argument can be an object or a function

Parameters:
Name Type Description
element HTMLElement

root node crawled for page actions
Source:

<static> DataFormBinding(source, sourceProperty, dest, destProperty)

bi-directional binding for working with input fields and custom input controls. This binding expect a WinJSContrib.UI.DataForm to be found on the parent form

Parameters:
Name Type Description
source Object

object owning data
sourceProperty string[]

path to object data
dest HTMLElement

DOM element targeted by binding
destProperty string[]

path to DOM element property targeted by binding
Source:

<static> elementLoaded(element, url) → {WinJS.Promise}

build a promise around element "load" event (work for all element with src property like images, iframes, ...)

Parameters:
Name Type Description
element HTMLElement
url string

url used to feed "src" on element
Source:
Returns:
Type
WinJS.Promise

<static> listElementsAfterMe(elt) → {Array}

List all elements found after provided element

Parameters:
Name Type Description
elt HTMLElement

target element
Source:
Returns:

list of sibling elements

Type
Array

<static> loadImage(imgUrl) → {WinJS.Promise}

Create a promise for getting an image object from url

Parameters:
Name Type Description
imgUrl string

url for the picture
Source:
Returns:
Type
WinJS.Promise

<static> offsetFrom(element, parent)

Calculate offset of element relative to parent element. If parent parameter is null, offset is relative to document

Parameters:
Name Type Description
element HTMLElement

element to evaluate
parent HTMLElement

reference of offset
Source:

<static> registerNavigationEvents(control, callback) → {function}

register navigation related events like hardware backbuttons. This method keeps track of previously registered navigation handlers and disable them until the latests is closed, enablinh multi-level navigation.

Parameters:
Name Type Description
control Object

control taking ownership of navigation handlers
callback function

callback to invoke when "back" is requested
Source:
Returns:

function to call for releasing navigation handlers

Type
function

<static> removeElementAnimation(element) → {WinJS.Promise}

create an animation for removing an element from a list

Parameters:
Name Type Description
element HTMLElement

that will be removed
Source:
Returns:
Type
WinJS.Promise

<static> tap(element, callback, options)

add tap behavior to an element, tap manages quirks like click delay, visual feedback, etc

Parameters:
Name Type Description
element HtmlElement

element to make "tappable"
callback function

callback function invoked on tap
options Object

tap options
Source:

<static> untap(element)

remove tap behavior

Parameters:
Name Type Description
element HtmlElement

element to clean
Source:

<static> untapAll(element)

remove tap behavior from all childs

Parameters:
Name Type Description
element HtmlElement

element to clean
Source:

Type Definitions

GridControlLayout

Object representing a layout configuration for the grid control

Type:
  • Object
Properties:
Name Type Description
layout string

layout algorythm to apply (horizontal | vertical | flexhorizontal | flexvertical | hbloc
cellSpace number

space between grid cells
cellWidth number

width of grid cells
cellHeight number

height of grid cells
itemsPerColumn number

number of cells per column if using a layout with a fixed number of cells
itemsPerRow number

number of cells per row if using a layout with a fixed number of cells
Source:
Example
{
    layout: 'horizontal',
    itemsPerColumn: (options.itemsPerColumn) ? options.itemsPerColumn : undefined,
    itemsPerRow: (options.itemsPerRow) ? options.itemsPerRow : undefined,
    cellSpace: 10,
    cellWidth: (options.cellWidth) ? options.cellWidth : undefined,
    cellHeight: (options.cellHeight) ? options.cellHeight : undefined,
}