UIZE JavaScript Framework

MODULES Uize.Widget.Swap

SEARCHEXAMPLESSOURCETO DODEPSTEST

1. Introduction

The Uize.Widget.Swap abstract class enables a wide variety of lightweight animated swap effects, and serves as the base class for several subclasses.

DEVELOPERS: Chris van Rensburg

The Uize.Widget.Swap class serves as a base class for subclasses such as Uize.Widget.Swap.Deck, Uize.Widget.Swap.Image, and Uize.Widget.Swap.Html. This widget class - and, more likely, its various subclasses - can be used in conjunction with the Uize.Widget.SlideShow class when creating slideshow experiences. A number of preset swap effect settings are available in the Uize.Widget.Swap.xPresets extension module.

1.1. Examples

The following example pages are good showcases for the Uize.Widget.Swap module...

Sequenced Show Using Swap - See how thumbnails in a grid of thumbnails can be revealed in a choreographed manner, with a JavaScript animation effect for revealing each thumbnail.

SEARCH FOR EXAMPLES

Use the link below to search for example pages on the UIZE Web site that reference the Uize.Widget.Swap module...

SEARCH

1.2. Implementation Info

The Uize.Widget.Swap module defines the Uize.Widget.Swap class, which is a subclass of Uize.Widget.

INHERITANCE CHAIN

Uize.Class −> Uize.Widget −> Uize.Widget.Swap

1.2.1. Features Introduced in This Module

The features listed in this section have been introduced in this module.

INSTANCE METHODS

prepareForNextItem | setCurrentItem

STATE PROPERTIES

crossFade | crossFadeAlign | crossFadeSize | cyclingPropertySets | dissolve | viewContentAlignX | viewContentAlignY | viewSeedAlignX | viewSeedAlignY | viewSeedSizeX | viewSeedSizeY

1.2.2. Features Overridden in This Module

The features listed in this section have been overridden in this module.

The module that an overridden feature was initially introduced in will be noted in the IMPLEMENTATION INFO notes for the feature.

INSTANCE METHODS

valueOf | wireUi

STATIC PROPERTIES

Uize.Widget.Swap.moduleName | Uize.Widget.Swap.nonInheritableStatics | Uize.Widget.Swap.undefined

1.2.3. Features Inherited From Other Modules

The features listed in this section have been inherited from other modules.

The module that an inherited feature was initially introduced in will be noted in the IMPLEMENTATION INFO notes for the feature.

INSTANCE METHODS

addChild | addChildren | ajax | buildHtml | callInherited | childHtml | childId | confirm | displayNode | fire | flushNodeCache | get | getContainer | getHtml | getInherited | getNode | getNodeStyle | getNodeValue | getProvider | globalizeNode | inform | injectNodeHtml | insertOrWireUi | insertUi | is | isMet | kill | localize | met | nodeId | onChange | once | removeChild | removeNode | removeUi | set | setInherited | setNodeClipRect | setNodeInnerHtml | setNodeOpacity | setNodeProperties | setNodeStyle | setNodeValue | showNode | toggle | unmet | unwire | unwireNode | unwireNodeEventsByMatch | unwireUi | updateUi | whenever | wire | wireNode

INSTANCE PROPERTIES

showConfirm | showInform

STATE PROPERTIES

built | busy | busyInherited | busyParentTickle | children | container | enabled | enabledInherited | enabledParentTickle | html | idPrefix | idPrefixConstruction | insertionMode | localized | name | nodeMap | parent | wired

STATIC METHODS

Uize.Widget.Swap.alphastructor | Uize.Widget.Swap.declare | Uize.Widget.Swap.doMy | Uize.Widget.Swap.dualContextMethods | Uize.Widget.Swap.dualContextProperties | Uize.Widget.Swap.fire | Uize.Widget.Swap.get | Uize.Widget.Swap.getBlankImageUrl | Uize.Widget.Swap.instanceMethods | Uize.Widget.Swap.instanceProperties | Uize.Widget.Swap.mixins | Uize.Widget.Swap.omegastructor | Uize.Widget.Swap.set | Uize.Widget.Swap.singleton | Uize.Widget.Swap.spawn | Uize.Widget.Swap.stateProperties | Uize.Widget.Swap.staticMethods | Uize.Widget.Swap.staticProperties | Uize.Widget.Swap.subclass | Uize.Widget.Swap.toggle | Uize.Widget.Swap.treeInheritedStateProperties | Uize.Widget.Swap.unwire | Uize.Widget.Swap.wire

STATIC PROPERTIES

Uize.Widget.Swap.busyParentTickle | Uize.Widget.Swap.enabledParentTickle | Uize.Widget.Swap.isWired | Uize.Widget.Swap.pathToResources

1.2.4. Modules Directly Under This Namespace

Uize.Widget.Swap.Deck | Uize.Widget.Swap.Html | Uize.Widget.Swap.Image | Uize.Widget.Swap.ThemeValuePack | Uize.Widget.Swap.Themes

1.2.5. Unit Tests

There is no dedicated unit tests module for the Uize.Widget.Swap module.

2. How It Works

Understanding how the swap effect works will enable you to come up with your own unique effects by helping you to understand how the various state properties affect the swap effect.

2.1. In a Nutshell

The mechanics of the swap effect are really quite simple.

Essentially, revealing a next item involves modifying the z-index of the current item and the next item so that the next item sits on top of the current item. Then, initial seed coordinates are calculated. During the course of the swap effect, the coordinates are interpolated between the initial seed coordinates and the coordinates of the full port. As the coordinates are animated, the next item is positioned so that the coordinates represent a window for revealing a portion of the next item. Within that reveal window, certain settings of the effect determine which portion of the next item is revealed.

Additionally, the opacity of the next item can be animated over the course of the effect, so that it fades in from being completely transparent to being completely opaque by the end of the effect. Finally, a crossfade switch allows us to apply the effect in reverse on the current item at the same time as the next item is being revealed, with the ability to configure the overlap between the hide of the current item and the reveal of the next item.

All of this adds up to a whole bunch of different ways that you can transition from one item to another, using just a small set of effect settings / parameters, and with code that is high performance, compact in size, and doesn't bloat the DOM.

2.2. In More Detail

Now, let's get into a more detailed description of the mechanics. For the purpose of this discussion, a number of terms and concepts are defined, as follows...

2.2.1. Swap Port

The "port" in which the swap effect is viewed is termed the swap port.

The swap port contains two views - one view for displaying the current item, and another view for revealing the next item. Both views are positioned absolutely, with one on top of the other.

2.2.2. View

One item node in the swap port is termed a view.

There are two views in the swap port: one view provides a view into the current item, and the other view provides a view into the next item that is being revealed. When a swap is performed, initial view coordinates (termed the view seed) and final View coordinates (termed the view final) are calculated. During the course of the swap effect, the View coordinates for the next item's view are interpolated between the view seed coordinates and the view final coordinates. Additionally, its opacity will be faded from completely transparent to completely opaque over the course of the animation if the dissolve state property is set to true.

If the crossFade state property is set to true, then the crossfade behavior is enabled and the view coordinates for the current item's view will be interpolated between the view final coordinates and the view seed coordinates, and its opacity will be faded from completely opaque to completely transparent over the course of the animation if the dissolve state property is set to true. The additional crossFadeSize and crossFadeAlign state properties govern the nature of the crossfade behavior.

2.2.3. View Seed

The view seed is the initial coordinates for a view.

The view seed is derived by calculating view seed size and view seed alignment, in this process combining the coordinates of the view final and the values of the viewSeedSizeX, viewSeedSizeY, viewSeedAlignX, and viewSeedAlignY state properties (discussed below).

2.2.3.1. View Seed Size

View seed size is calculated using the viewSeedSizeX and viewSeedSizeY state properties.

Specifically, the width of the view seed is calculated as a fraction of the width of the view final (as specified by the viewSeedSizeX state property), and the height of the view seed is calculated as a fraction of the height of the view final (as specified by the viewSeedSizeY state property).

2.2.3.2. View Seed Alignment

View seed alignment refers to the positioning of the view seed within the swap port and is calculated using the viewSeedAlignX and viewSeedAlignY state properties.

The viewSeedAlignX and viewSeedAlignY state properties are floating point numbers in the range of 0 to 1, where the value 0 represents left and top alignment, the value 1 represents right and bottom alignment, and the value .5 represents center alignment.

2.2.4. View Final

The view final is the final coordinates for a view, being the coordinates of the swap port.

2.2.5. Crossfade

Crossfade refers to the process by which the current item is progressively hidden while the next item is progressively revealed.

The crossFade state property allows one to enable or disable the Crossfade behavior. When crossFade is set to false, then the Crossfade behavior is disabled and the current item will be hidden only as a side effect of the next item being revealed to fully obscure it. When crossFade is set to true, then the Crossfade behavior is enabled and the current item will be progressively hidden while the next item is progressively revealed.

The way that the current item is hidden is essentially the reverse of the effect for revealing the next item. So, for example, if the exact settings for the swap effect mean that the next item will slide out from the right edge while also fading in from completely transparent to completely opaque, then the current item will hide by sliding out towards the right edge while also fading out from completely opaque to completely transparent.

The additional crossFadeSize and crossFadeAlign state properties govern the nature of the crossfade behavior.

2.2.5.1. Crossfade Size

The crossFadeSize state property lets you control the size of the overlap of the current item hide and next item reveal animations.

The value for crossFadeSize is a floating point number, representing a fraction of the overal swap effect duration.

if crossFadeSize is set to 1, then the overlap will be the entire duration of the effect. This means that the current item will be hiding progressively throughout the entire effect, and the next item will be revealing progressively throughout the entire effect.
at the opposite extreme, if crossFadeSize is set to 0, then there will be no overlap between the current item hide and next item reveal animations - the current item will completely hide before the next item starts being revealed.
any value between 0 and 1 for crossFadeSize means that there will be some overlap between the hide of the current item and the reveal of the next item, where the current item will be progressively hidden at the same time as the next item is being progressively revealed.
setting crossFadeSize to a negative floating point number allows us to create a pause between the current item hide and next item reveal animations, where the duration of the pause is the negative of the value of the crossFadeSize property. So, for example, a value of -.5 for crossFadeSize will produce a pause that is half the overal duration of the swap effect, while a value of -.25 will produce a pause that is a quarter of the effect's duration. Note that a pause between current item hide and next item reveal means that the combined duration of the current item hide and next item reveal animations must be less than the overal swap effect duration. For example, with a crossFadeSize value of -.5, the combined duration of the current item hide and next item reveal animations will necessarily be half of the effect's overal duration.

2.2.5.2. Crossfade Alignment

When a value other than 1 is specified for crossFadeSize, then the value of the crossFadeAlign state property determines the alignment of the crossfade overlap within the overal swap effect duration.

A value of 0 (start-aligned) for crossFadeAlign means that the overlap will be aligned so that the start of the overlap is against the start of the effect, a value of 1 (end-aligned) means that the overlap will be aligned so that the end of the overlap is against the end of the effect, and a value of .5 (center-aligned) means that the overlap will be aligned so that the time gap between the effect start and the overlap start is the same as the time gap between the overlap end and the effect end.

2.2.6. View Content Alignment

View content alignment refers to the positioning of an item within its corresponding view.

As the swap effect progresses, the coordinates of a view are animated between the view seed coordinates and the view final coordinates. At any one point during this transition, the way that the item is positioned within the View coordinates is determined by the viewContentAlignX and viewContentAlignY state properties (alignment can be controlled discretely for the X and Y axes). The values specified for these properties should be floating point numbers in the range of 0 to 1, where the value 0 represents left and top alignment, the value 1 represents right and bottom alignment, and the value .5 represents center alignment.

Additionally, the special value 'none' indicates that there should be no view content alignment for the axis for which the value 'none' is specified, meaning that the item's position for that axis will be fixed with respect to the swap port for the entire duration of the effect.

To better understand the principle of view content alignment, it may help to consider as an example the value of the fadeSlideInFromRight theme (defined in the Uize.Widget.Swap.Themes module)...

{
  crossFade:false,
  crossFadeSize:0,
  crossFadeAlign:.5,
  dissolve:true,
  viewContentAlignX:0,
  viewContentAlignY:'none',
  viewSeedSizeX:0,
  viewSeedSizeY:1,
  viewSeedAlignX:1,
  viewSeedAlignY:0
}

With the fadeSlideInFromRight preset, the new item slides in from the right edge and also fades in as it slides into place to eventually fully cover the current item.

The view seed is a vertical sliver, as defined by the values for the viewSeedSizeX and viewSeedSizeY state properties. The value of 0 for viewSeedSizeX means that the View Seed has a width of 0, and the value of 1 for viewSeedSizeY means that the view seed starts out at the full height of the swap port. Moreover, the value of 1 for viewSeedAlignX means that the vertical sliver is aligned so that it is positioned at the right edge of the Swap Port. Because viewSeedSizeY is set to 1, the value of the viewSeedAlignY state property (0 in this case) has no effect on the vertical position of the view seed.

Now, as the effect progresses, the new item is revealed within an ever growing rectangle that starts out as a vertical sliver on the right, to eventually become the entire swap port. As this rectangle grows, how is the positioning of the view content within this rectangle determined? How does one qualify the difference between a wipe reveal and a slide in reveal?

The answer is to be found in the values of the viewContentAlignX and viewContentAlignY state properties. In this example, viewContentAlignX is set to 0. What this means is that the new item is positioned within the ever growing view rectangle so that it is aligned against its left edge. This has the effect of creating a slide in effect. Were the value of viewContentAlignX to be 1 (i.e. right aligned) or 'none', then you would end up with a wipe reveal.

The value 'none' has the same effect as right alignment in this case because the view seed starts at the right edge of the swap port and the right edge of the view rectangle stays against the right edge of the swap port as the rectangle grows during the effect. By contrast, the value 'none' would not have the same effect as 1 if the viewSeedAlignX state property were set to .5.

2.2.7. Cycling Property Sets

Cycling property sets, as specified in the cyclingPropertySets state property, provide a convenient way to cycle through different swap effect settings on each transition from the current item to the next item.

The value of the cyclingPropertySets property should be an array, where each element of the array is an object containing values for the state properties of the Uize.Widget.Swap class. Each time, upon transitioning from the current item to the next item, the current element of the cyclingPropertySets is used to set new effect values and the array counter is advanced. Upon using the last element of the array, the counter is then reset back to 0, thereby starting again at the first element. Consider the following example...

EXAMPLE

var themes = Uize.Widget.Swap.Themes ();
page.addChild (
  'imageSwap',
  Uize.Widget.Swap.Image,
  {
    cyclingPropertySets:[
      themes.fadeOutPauseThenFadeIn,
      themes.fadeWipeHorizontalFromCenter,
      themes.fadeSlideInFromBottom,
      themes.wipeOutWipeInLeft,
      themes.centerOpenCloseCrossFade
    ]
  }
);

In the above example, an instance of the Uize.Widget.Swap.Image subclass is being added as a child widget to the a page widget instance (that we can assume to have already been created). The cyclingPropertySets state property is being set to an array containing a limited number of preset effect settings that have been cherry-picked from the presets defined in the Uize.Widget.Swap.xPresets extension module (which we can assume to have been previously loaded). Now, each time a new value is set for the src state property of the imageSwap instance (src is implemented in the Uize.Widget.Swap.Image subclass), the next effect settings will be picked from the cyclingPropertySets array and set on the imageSwap instance. So, in a nutshell, each transition will use different effect settings.

3. Instance Properties

3.1. fade

An instance of the Uize.Fade class that drives the animation for the swap effect.

This property allows access to the fade instance that drives the swap animation. This allows us to modify properties of the animation, such as duration, curve, and any of the other state properties supported by the Uize.Fade class.

3.2. showConfirm

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.3. showInform

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.4. viewFinalCoords

An array, representing the view final coordinates for the swap effect, where the elements of the array represent values for left, top, width, and height, respectively.

NOTES

this property is intended to be used by subclasses

4. Instance Methods

4.1. addChild

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.2. addChildren

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.3. ajax

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.4. buildHtml

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.5. callInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.6. childHtml

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.7. childId

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.8. confirm

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.9. displayNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.10. fire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.11. flushNodeCache

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.12. get

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.13. getContainer

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.14. getHtml

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.15. getInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.16. getNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.17. getNodeStyle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.18. getNodeValue

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.19. getProvider

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.20. globalizeNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.21. inform

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.22. injectNodeHtml

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.23. insertOrWireUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.24. insertUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.25. is

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.26. isMet

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.27. kill

Inherited from Uize.Widget, but introduced in Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Class)

4.28. localize

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.29. met

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.30. nodeId

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.31. onChange

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.32. once

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.33. prepareForNextItem

A hook method that is provided for subclasses.

SYNTAX

mySwap.prepareForNextItem (currentItemNodeOBJ,nextItemNodeOBJ);

This method updates internal state for the instance in preparation for building the next item and should be called before HTML for the next item is inserted into the next item's node.

NOTES

to get a better sense of how this method is used, you can take a look at the implementation of the Uize.Widget.Swap.Image subclass
see the related setCurrentItem instance method

IMPLEMENTATION INFO

this feature was introduced in this module

4.34. removeChild

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.35. removeNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.36. removeUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.37. set

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.38. setCurrentItem

A hook method that is provided for subclasses.

SYNTAX

mySwap.setCurrentItem (nextItemNodeOBJ);

This method initiates the fade that animates the swap effect to reveal the next item. Essentially, you are setting the current item to the next item, which has the effect of triggering the transition. The next item node should be ready to be revealed before this method is called (including all images being completely loaded). Before this method is called, the prepareForNextItem instance method should already have been called.

NOTES

to get a better sense of how this method is used, you can take a look at the implementation of the Uize.Widget.Swap.Image subclass
see the related prepareForNextItem instance method

IMPLEMENTATION INFO

this feature was introduced in this module

4.39. setInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.40. setNodeClipRect

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.41. setNodeInnerHtml

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.42. setNodeOpacity

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.43. setNodeProperties

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.44. setNodeStyle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.45. setNodeValue

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.46. showNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.47. toggle

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.48. unmet

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.49. unwire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.50. unwireNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.51. unwireNodeEventsByMatch

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.52. unwireUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.53. updateUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.54. valueOf

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Class)

IMPLEMENTATION INFO

4.55. whenever

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.56. wire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

4.57. wireNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.58. wireUi

IMPLEMENTATION INFO

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Widget)

5. State Properties

5.1. built

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.2. busy

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.3. busyInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.4. busyParentTickle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.5. children

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.6. container

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.7. crossFade

A boolean, specifying whether or not the crossfade behavior should be enabled.

When crossFade is set to true, then the related crossFadeSize and crossFadeAlign state properties become applicable.

NOTES

see the related crossFadeSize and crossFadeAlign state properties
the initial value is false

IMPLEMENTATION INFO

this feature was introduced in this module

5.8. crossFadeAlign

A floating point number in the range of 0 to 1, specifying the crossfade alignment for the crossfade behavior.

For a detailed discussion of crossFadeAlign in the broader context of the crossfade behavior, see the section crossfade.

NOTES

see the companion crossFadeSize state property
when the crossFade state property is set to false, then crossFadeAlign has no effect
the initial value is .5

IMPLEMENTATION INFO

this feature was introduced in this module

5.9. crossFadeSize

A floating point number in the range of 0 to 1, specifying Crossfade Size for the crossfade behavior as a fraction of the overal swap effect duration.

For a detailed discussion of crossFadeSize in the broader context of the crossfade behavior, see the section crossfade.

NOTES

see the companion crossFadeAlign state property
when the crossFade state property is set to false, then crossFadeSize has no effect
the initial value is 0

IMPLEMENTATION INFO

this feature was introduced in this module

5.10. cyclingPropertySets

An optional array, specifying cycling property sets that should be cycled through on each transition from the current item to the next item.

NOTES

the initial value is undefined

IMPLEMENTATION INFO

this feature was introduced in this module

5.11. dissolve

A boolean, specifying whether or not opacity should be animated during the swap effect.

When the viewSeedSizeX and viewSeedSizeY state properties are both set to 1, then you will only notice the swap effect if dissolve is set to true, since the coordinates of each view will be the view final coordinates throughout the duration of the effect - the only means for transitioning from the current item to the next item will be through animating the opacity.

NOTES

the initial value is true

IMPLEMENTATION INFO

this feature was introduced in this module

5.12. enabled

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.13. enabledInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.14. enabledParentTickle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.15. html

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.16. idPrefix

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.17. idPrefixConstruction

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.18. insertionMode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.19. localized

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.20. name

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.21. nodeMap

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.22. parent

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.23. viewContentAlignX

A floating point number in the range of 0 to 1, specifying the horitontal view content alignment of an item in its view.

NOTES

the special value of 'none' specifies that there should be no view content alignment for the X-axis
the initial value is 'none'

IMPLEMENTATION INFO

this feature was introduced in this module

5.24. viewContentAlignY

A floating point number in the range of 0 to 1, specifying the vertical view content alignment of an item in its view.

NOTES

the special value of 'none' specifies that there should be no view content alignment for the Y-axis
the initial value is 'none'

IMPLEMENTATION INFO

this feature was introduced in this module

5.25. viewSeedAlignX

A floating point number in the range of 0 to 1, specifying the horizontal view seed alignment of the view seed within the swap port.

NOTES

the initial value is .5

IMPLEMENTATION INFO

this feature was introduced in this module

5.26. viewSeedAlignY

A floating point number in the range of 0 to 1, specifying the vertical view seed alignment of the view seed within the swap port.

NOTES

the initial value is .5

IMPLEMENTATION INFO

this feature was introduced in this module

5.27. viewSeedSizeX

A floating point number in the range of 0 to 1, specifying the horizontal view seed size as a fraction of the width of the view final.

NOTES

the initial value is 1

IMPLEMENTATION INFO

this feature was introduced in this module

5.28. viewSeedSizeY

A floating point number in the range of 0 to 1, specifying the vertical view seed size as a fraction of the height of the view final.

NOTES

the initial value is 1

IMPLEMENTATION INFO

this feature was introduced in this module

5.29. wired

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

6. Static Methods

6.1. Uize.Widget.Swap.alphastructor

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.2. Uize.Widget.Swap.declare

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.3. Uize.Widget.Swap.doMy

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.4. Uize.Widget.Swap.dualContextMethods

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.5. Uize.Widget.Swap.dualContextProperties

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.6. Uize.Widget.Swap.fire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.7. Uize.Widget.Swap.get

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.8. Uize.Widget.Swap.getBlankImageUrl

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

6.9. Uize.Widget.Swap.instanceMethods

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.10. Uize.Widget.Swap.instanceProperties

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.11. Uize.Widget.Swap.mixins

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.12. Uize.Widget.Swap.omegastructor

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.13. Uize.Widget.Swap.set

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.14. Uize.Widget.Swap.singleton

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.15. Uize.Widget.Swap.spawn

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

6.16. Uize.Widget.Swap.stateProperties

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.17. Uize.Widget.Swap.staticMethods

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.18. Uize.Widget.Swap.staticProperties

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.19. Uize.Widget.Swap.subclass

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.20. Uize.Widget.Swap.toggle

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.21. Uize.Widget.Swap.treeInheritedStateProperties

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

6.22. Uize.Widget.Swap.unwire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.23. Uize.Widget.Swap.wire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

7. Static Properties

7.1. Uize.Widget.Swap.busyParentTickle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

7.2. Uize.Widget.Swap.enabledParentTickle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

7.3. Uize.Widget.Swap.isWired

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

7.4. Uize.Widget.Swap.moduleName

IMPLEMENTATION INFO

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Class)
this static feature is inherited by subclasses

7.5. Uize.Widget.Swap.nonInheritableStatics

IMPLEMENTATION INFO

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Class)
this static feature is not inherited by subclasses

7.6. Uize.Widget.Swap.pathToResources

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

7.7. Uize.Widget.Swap.undefined

IMPLEMENTATION INFO

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Widget)
this static feature is inherited by subclasses