UIZE JavaScript Framework

MODULES Uize.Widget.Swap.Themes

1. Introduction

The Uize.Widget.Swap.Themes module defines themes for the Uize.Widget.Swap widget class.

DEVELOPERS: Chris van Rensburg

1.1. Using the Themes

The Uize.Widget.Swap.Themes module returns an object, being a lookup of theme names to theme settings objects.

Each property of the themes lookup object is an effect theme, where the name of the property is the effect theme name, and where the value is an object containing values for various state properties of the Uize.Widget.Swap class.

Consider the value of the fadeOutFadeIn theme...

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

To use this theme, simply use it to set the state properties of the Uize.Widget.Swap instance using the set instance method, as follows...

var themes = Uize.Widget.Swap.Themes ();
mySwap.set (themes.fadeOutFadeIn);

1.2. Examples

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

Image Cycle - Create a simple JavaScript slideshow experience with the cycling image swap widget. Each image is revealed with a different swap / transition effect.
Uize.Widget.Swap.Image - See some amazing possibilities for image transitions using lightweight JavaScript animation. Play with lots of effect themes, and even make your own.

SEARCH FOR EXAMPLES

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

SEARCH

1.3. Implementation Info

The Uize.Widget.Swap.Themes module defines the Uize.Widget.Swap.Themes object under the Uize.Widget.Swap namespace.

1.3.1. Features Introduced in This Module

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

STATIC PROPERTIES

Uize.Widget.Swap.Themes.moduleName | Uize.Widget.Swap.Themes.pathToResources

1.3.2. Features Overridden in This Module

No features have been overridden in this module.

1.3.3. Features Inherited From Other Modules

This module has no inherited features.

1.3.4. Modules Directly Under This Namespace

There are no modules directly under this namespace.

1.3.5. Unit Tests

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

2. Themes

2.1. crossFade

A classic crossfade effect, where the new item fades in on top of the current item.

2.2. fadeOutFadeIn

The current item fades out fully before the new item fades in. Fade out time for the current item and fade in time for the new item are equal and are both half the overal duration for the swap effect.

2.3. fadeOutPauseThenFadeIn

The current item fades out very quickly, there is a slight pause, and then the new item fades in (slower than the fade out of the current item, but still 4/10 the overal duration for the swap effect).

2.4. fadeWipeFromLeft

The new item is revealed with a horizontal wipe reveal that starts from the left edge and that also fades in as it progresses.

2.5. fadeWipeFromRight

The new item is revealed with a horizontal wipe reveal that starts from the right edge and that also fades in as it progresses.

2.6. fadeWipeHorizontalFromCenter

The new item is revealed with a horizontal wipe reveal that starts from the center and that expands outwards towards the left and right edges and that also fades in as it progresses.

2.7. fadeWipeFromTop

The new item is revealed with a horizontal wipe reveal that starts from the top edge and that also fades in as it progresses.

2.8. fadeWipeFromBottom

The new item is revealed with a horizontal wipe reveal that starts from the bottom edge and that also fades in as it progresses.

2.9. fadeWipeVerticalFromCenter

The new item is revealed with a vertical wipe reveal that starts from the center and that expands outwards towards the top and bottom edges and that also fades in as it progresses.

2.10. fadeSlideInFromLeft

The new item slides in from the left edge and also fades in as it slides into place to eventually fully cover the current item.

2.11. fadeSlideInFromRight

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.

2.12. fadeSlideInFromTop

The new item slides in from the top edge and also fades in as it slides into place to eventually fully cover the current item.

2.13. fadeSlideInFromBottom

The new item slides in from the bottom edge and also fades in as it slides into place to eventually fully cover the current item.

2.14. fadeSlideInFromTopLeft

The new item slides in from the top left corner and also fades in as it slides into place to eventually fully cover the current item.

2.15. fadeSlideInFromTopRight

The new item slides in from the top right corner and also fades in as it slides into place to eventually fully cover the current item.

2.16. fadeSlideInFromBottomLeft

The new item slides in from the bottom left corner and also fades in as it slides into place to eventually fully cover the current item.

2.17. fadeSlideInFromBottomRight

The new item slides in from the bottom right corner and also fades in as it slides into place to eventually fully cover the current item.

2.18. fadeSlideOutSlideInLeft

The current item slides out towards the left edge, fading out as it goes, and then the new item slides in from the left edge, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.19. fadeSlideOutSlideInRight

The current item slides out towards the right edge, fading out as it goes, and then the new item slides in from the right edge, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.20. fadeSlideOutSlideInTop

The current item slides out towards the top edge, fading out as it goes, and then the new item slides in from the top edge, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.21. fadeSlideOutSlideInBottom

The current item slides out towards the bottom edge, fading out as it goes, and then the new item slides in from the bottom edge, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.22. fadeSlideOutSlideInTopLeft

The current item slides out towards the top left corner, fading out as it goes, and then the new item slides in from the top left corner, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.23. fadeSlideOutSlideInTopRight

The current item slides out towards the top right corner, fading out as it goes, and then the new item slides in from the top right corner, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.24. fadeSlideOutSlideInBottomLeft

The current item slides out towards the bottom left corner, fading out as it goes, and then the new item slides in from the bottom left corner, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.25. fadeSlideOutSlideInBottomRight

The current item slides out towards the bottom right corner, fading out as it goes, and then the new item slides in from the bottom right corner, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.26. wipeOutWipeInLeft

The current item wipes out towards the left edge, and then the new item wipes in from the left edge. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.27. wipeOutWipeInRight

The current item wipes out towards the right edge, and then the new item wipes in from the right edge. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.28. wipeOutWipeInTop

The current item wipes out towards the top edge, and then the new item wipes in from the top edge. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.29. wipeOutWipeInBottom

The current item wipes out towards the bottom edge, and then the new item wipes in from the bottom edge. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.30. wipeOutWipeInTopLeft

The current item wipes out towards the top left corner, and then the new item wipes in from the top left corner. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.31. wipeOutWipeInTopRight

The current item wipes out towards the top right corner, and then the new item wipes in from the top right corner. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.32. wipeOutWipeInBottomLeft

The current item wipes out towards the bottom left corner, and then the new item wipes in from the bottom left corner. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.33. wipeOutWipeInBottomRight

The current item wipes out towards the bottom right corner, and then the new item wipes in from the bottom right corner. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.34. wipeOutWipeInHorizontalCenter

The current item wipes out horizontally from the left and right edges towards a sliver in the center, and then the new item wipes in horizontally from the same sliver in the center and expands outwards towards the left and right edges.

2.35. wipeOutWipeInVerticalCenter

The current item wipes out vertically from the top and bottom edges towards a sliver in the center, and then the new item wipes in vertically from the same sliver in the center and expands outwards towards the top and bottom edges.

2.36. horizontalCrossSlideFromLeft

The new item slides in horizontally from the center towards the right edge at the same as it grows from a sliver to occupy the entire port, while the current item slides out towards the left edge as it shrinks down to a sliver, crossing paths as they go to produce a kind of sliding doors illusion.

2.37. horizontalCrossSlideFromRight

The new item slides in horizontally from the center towards the left edge at the same as it grows from a sliver to occupy the entire port, while the current item slides out towards the right edge as it shrinks down to a sliver, crossing paths as they go to produce a kind of sliding doors illusion.

2.38. verticalCrossSlideFromTop

The new item slides in vertically from the center towards the bottom edge at the same as it grows from a sliver to occupy the entire port, while the current item slides out towards the top edge as it shrinks down to a sliver, crossing paths as they go to produce a kind of sliding doors illusion.

2.39. verticalCrossSlideFromBottom

The new item slides in vertically from the center towards the top edge at the same as it grows from a sliver to occupy the entire port, while the current item slides out towards the bottom edge as it shrinks down to a sliver, crossing paths as they go to produce a kind of sliding doors illusion.

2.40. closeToCenterOpenFromCenter

The current item wipes out to a point in the center, and then the new item wipes in from the same point in the center. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.41. poofPauseThenOpenFromCenter

The current item wipes out very quickly to a point in the center, fading out as it progresses, then there is a slight pause, and then the new item wipes in from the same point in the center (slower than the wipe out of the current item, but still less than half the overal duration for the swap effect), fading in as it progresses.

2.42. centerOpenCloseCrossFade

The current item wipes out to a point in the center, fading out as it progresses, at the same time as the new item wipes in from the same point in the center, fading in as it progresses. The wipe out and wipe in cross over each other, producing a pleasing effect.

3. Static Properties

3.1. Uize.Widget.Swap.Themes.moduleName

IMPLEMENTATION INFO

this feature was introduced in this module

3.2. Uize.Widget.Swap.Themes.pathToResources

IMPLEMENTATION INFO

this feature was introduced in this module