Options
All
  • Public
  • Public/Protected
  • All
Menu

Once a Glass Shelf Component has been added to the page from the Component selector, the Glass Shelf Component can be passed as a parameter to actions. Code within the action can set properties and call methods on the Glass Shelf Component.

var uComps = require('u-components');
var uActions = require('u-actions');
var Action = uActions.Action;
new Action('Glass Shelf Demo',glassShelfDemo)
.addParameter('Glass Shelf', uActions.ParamType.GLASS_SHELF)
.register();
function glassShelfDemo(comp) {
var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.tileGap = -0.2;
glassShelfComp.maxSpeed = 130;
glassShelfComp.friction = 0.12;
glassShelfComp.allowSnapping = true;
glassShelfComp.snapFriction = 0.25;
}

Hierarchy

Index

Constructors

Properties

allowSnapping: boolean

When true, the selected glass shelf item will snap to the front when released.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.allowSnapping = true;
alpha: number

The alpha transparency of the Component. Range from 0 to 100.

cameraOffsetY: number

The vertical position of the camera. Range -100 to 100. Default is -100.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.cameraOffsetY = 0;
centreCardOnSelection: boolean

When true, clicking a partially obsured card, will bring it to the center and front of the glass shelf.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.centreCardOnSelection = true;
clippingType: ClippingType

Clip the components contents using one of the options in ClippingType.

components: ComponentList

Access this Component's sub-components.

currentIndex: number

Index of the current item on display - Read Only.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
var idx = glassShelfComp.currentIndex;
formEnabled: boolean

Whether or not is component is enabled for the parent form. Only relevant when inside a Form Component.

formFieldName: string

Label used to identify the field this Component belongs to in a form. Only relevant when inside a Form Component.

friction: number

The friction on items that takes effect when the user removes their finger. Range 0 to 1. Default is 0.03.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.friction = 0.12;
height: number

The height of the Component.

itemAngle: number

The angle of the items on the shelf, not currently in focus. Range -80 to 80. Default is 45.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.itemAngle = 20;
itemDepth: number

The position of the items on the shelf. Range -500 to 500. Default is 0.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.itemDepth = 20;
itemsCount: number

Number of items in the glass shelf component - Read Only.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
var count = glassShelfComp.itemsCount;

Shape component to be used as a mask. Can be either a Rectangle or Circle Component.

maxOpacity: number

The maximum opacity of the glass shelf items. Range 0 to 100. Default is 100.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.maxOpacity = 90;
maxSpeed: number

Maximum speed the items can spin. Range 0 to 255. Default is 100.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.maxSpeed = 130;
minOpacity: number

The minimum opacity of the glass shelf items. Range 0 to 100. Default is 0.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.minOpacity = 20;
name: string

Name of the component.

parent: Component

Access this Component's parent component.

passedFormValidation: boolean

Whether or not the Component has passed form validation. Only relevant when inside a Form Component.

reflectionGap: number

Space between an item on the shelf, and its reflection. Range -100 to 100. Default is 0.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.reflectionGap = 50;
reflectionMaxOpacity: number

The maximum opacity of the item's reflection. Range 0 to 100. Default is 50.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.reflectionMaxOpacity = 90;
reflectionMinOpacity: number

The minimum opacity of the item's reflection. Range 0 to 100. Default is 0.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.reflectionMinOpacity = 20;
reflectionScale: number

Size of the reflection. Range 0 to 1. Default is 0.5.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.reflectionScale = 0.25;
scaleMax: number

Scale of items at the front of the shelf. Range 0.01 to 2. Default is 0.7

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.scaleMax = 0.9;
scaleMin: number

Scale of items not currently on the shelf. Range 0.01 to 2. Default is 0.42

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.scaleMin = 0.5;
snapFriction: number

The amount of friction on items that takes effect when the user removes their finger. Can be set if allowSnapping is true. Range 0 to 1. Default is 0.08.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.allowSnapping = true;
glassShelfComp.snapFriction = 0.25;
tileGap: number

The gap between items on the shelf. Range -0.5 to 0.5. Default is -0.3.

var glassShelfComp = uComps.cast.toGlassShelf(comp);
glassShelfComp.tileGap = -0.2;
type: string

Type of the component.

uniqueId: string

Unique ID of the component.

visible: boolean

Whether or not the Component is visible.

width: number

The width of the Component.

x: number

The x position of the Component relative to its parent.

y: number

The y position of the Component relative to its parent.

Methods

  • addItem(filename: string): void
  • Add an item to the glass shelf.

    Parameters

    • filename: string

      path to file from the images directory

      var glassShelfComp = uComps.cast.toGlassShelf(comp);
      galleryComp.addItem('candidates/nomination_1.jpg');

    Returns void

  • emit(eventType: string, data: Object): void
  • Call each callback that is registered for the given eventType, in the order they were registered, passing the supplied data to each.

    Parameters

    • eventType: string

      The type of the event to emit.

    • data: Object

      Data object to pass to each callback.

    Returns void

  • focus(): void
  • Set the keyboard focus to this component.

    new uActions.Action('set focus', setFocus)
    .addParameter('text entry',uActions.ParamType.TEXT_ENTRY)
    .register();
    function setFocus(textEntry) {
    textEntry.focus();
    }

    Returns void

  • get(propertyName: string): any
  • Get a property by name.

    var uActions = require('u-actions');
    new uActions.Action('get fontsize',getFontSize).register();
    function getFontSize() {
    var text1=uPages.current.components.getText('Text 1');
    console.log(text1.get('font_size'));
    }

    Parameters

    • propertyName: string

      The name of the property to get.

    Returns any

    Returned value can be of any type, or even null.

  • on(eventType: string, callback: Function): void
  • Adds the callback function to the end of the listeners array for eventType.

    Parameters

    • eventType: string

      The type of the event.

    • callback: Function

      The callback function

    Returns void

  • refresh(): void
  • Refresh this component to force it to be re-rendered, or for its dynamic data to be updated.

    Returns void

  • removeItem(index: number): void
  • Remove an item to the glass shelf.

    Parameters

    • index: number

      index of the item to remove. The first item has an index of 0.

      var glassShelfComp = uComps.cast.toGlassShelf(comp);
      galleryComp.removeItem(2);

    Returns void

  • set(propertyName: string, value: any): void
  • set(data: Object): void
  • Set a properties value by name.

    var uActions = require('u-actions');
    new uActions.Action('set text color',setTextColor).register();
    function setTextColor() {
    uPages.get('follow').components.getText('Text 1').set('font_color','0x0000FFFF');
    }

    Parameters

    • propertyName: string

      The name of the property to set.

    • value: any

      The value to set. Can be of any type.

    Returns void

  • Set a number properties at once.

    Parameters

    • data: Object

      Data object containing property name and value pairs to set on this component.

    Returns void

  • tween(seconds: number, params: Object, type?: TweenType): void
  • Tween a component property over time.

    Parameters

    • seconds: number

      The number of seconds to tween for.

    • params: Object

      An objects that contains key/value pairs of the properties and values to tween.

    • Optional type: TweenType

      (Optional) Tween type can be any type from "Tween.type"

    Returns void