Options
All
  • Public
  • Public/Protected
  • All
Menu

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

var uComps = require('u-components');
var uActions = require('u-actions');
var Action = uActions.Action;
new Action('Gallery Demo', galleryDemo)
.addParameter('Gallery', uActions.ParamType.GALLERY)
.register();
function galleryDemo(comp) {
var galleryComp = uComps.cast.toGallery(comp);
galleryComp.filename = 'rooms/studio_unit.jpg';
galleryComp.cropMode = uComps.CropMode.FILL;
galleryComp.looping = true;
}

Hierarchy

Index

Constructors

Properties

alpha: number

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

clippingType: ClippingType

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

components: ComponentList

Access this Component's sub-components.

cropMode: CropMode

Mode to display image. uComps.CropMode: 0 - FILL, 1 - FIT FILL: Aspect ratio maintained while filling the entire image component space. FIT: Aspect ratio maintained while restrained by either horizontal, or vertical image component boundary.

var galleryComp = uComps.cast.toGallery(comp);
galleryComp.cropMode = uComps.CropMode.FILL;
disableZoom: boolean

When false, users are unable to zoom the image with gestures or mouse events. Zoom buttons still work.

var galleryComp = uComps.cast.toGallery(comp);
galleryComp.disableZoom = true;
filename: string

Filename of the first image in a directory to display in the Gallery.

var galleryComp = uComps.cast.toGallery(comp);
galleryComp.filename = 'rooms/studio_unit.jpg';
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.

height: number

The height of the Component.

looping: boolean

When looping is set to true, the first image will display again after the final image in the directory.

var galleryComp = uComps.cast.toGallery(comp);
galleryComp.looping = true;

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

name: string

Name of the component.

navigationOption: NavigationOption

When looping is set to false, this property determines what should happen to the buttons when the first or last image in the directory is displayed. uComps.NavigationOption: 0 - DO_NOTHING, 1 - DISABLE_BUTTONS, 2 - HIDE_BUTTONS

var galleryComp = uComps.cast.toGallery(comp);
galleryComp.navigationOption = uComps.NavigationOption.DISABLE_BUTTONS;
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.

showButtonFirst: boolean

Enable/disable the First Button

var galleryComp = uComps.cast.toGallery(comp);
galleryComp.showButtonFirst = true;
showButtonLast: boolean

Enable/disable the Last Button

var galleryComp = uComps.cast.toGallery(comp);
galleryComp.showButtonLast = true;
showButtonNext: boolean

Enable/disable the Next Button

var galleryComp = uComps.cast.toGallery(comp);
galleryComp.showButtonNext = true;
showButtonPrevious: boolean

Enable/disable the Previous Button

var galleryComp = uComps.cast.toGallery(comp);
galleryComp.showButtonPrevious = true;
showButtonZoomFullFit: boolean

Enable/disable the Zoom to Fullsize and Zoom to Fit buttons

var galleryComp = uComps.cast.toGallery(comp);
galleryComp.showButtonZoomFullFit = false;
showButtonZoomInOut: boolean

Enable/disable the Zoom In and Zoom Out buttons

var galleryComp = uComps.cast.toGallery(comp);
galleryComp.showButtonZoomInOut = false;
type: string

Type of the component.

uniqueId: string

Unique ID of the component.

useHardEdges: boolean

When true, the user cannot scroll past the edge of the first or last image.

var galleryComp = uComps.cast.toGallery(comp);
galleryComp.useHardEdges = false;
vertical: boolean

When true, gallery images will transition vertically.

var galleryComp = uComps.cast.toGallery(comp);
galleryComp.vertical = false;
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

  • 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.

  • goToFirst(animate: boolean): void
  • Navigate to the first image in the gallery's directory

    Parameters

    • animate: boolean

    Returns void

  • goToLast(animate: boolean): void
  • Navigate to the last image in the gallery's directory

    Parameters

    • animate: boolean

    Returns void

  • goToNext(animate: boolean): void
  • Navigate to the next image in the gallery's directory

    Parameters

    • animate: boolean

    Returns void

  • goToPrevious(animate: boolean): void
  • Navigate to the previous image in the gallery's directory

    Parameters

    • animate: boolean

    Returns void

  • 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

  • pan(zoomLevel: number, horizontal: number, vertical: number): void
  • Zoom to a specified position.

    Parameters

    • zoomLevel: number

      Zoom level. Range 0 to 4.

    • horizontal: number

      Horizontal position. Range 0 to 1.

    • vertical: number

      Vertical Position. Range 0 to 1.

      var galleryComp = uComps.cast.toGallery(comp);
      galleryComp.pan(1, 0.5, 0.2);

    Returns void

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

    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

  • setFolder(folderPath: string): void
  • Set a folder of images for the gallery component to display.

    Parameters

    • folderPath: string

      Name of the folder from within the images directory.

      var galleryComp = uComps.cast.toGallery(comp);
      galleryComp.setFolder('rooms');

    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

  • zoomFit(animate: boolean): void
  • Zoom to fit the image within the gallery component's boundaries.

    Parameters

    • animate: boolean

    Returns void

  • zoomFull(animate: boolean): void
  • Zoom in to display the full-sized image.

    Parameters

    • animate: boolean

    Returns void

  • zoomIn(animate: boolean): void
  • Zoom in on the image.

    Parameters

    • animate: boolean

    Returns void

  • zoomOut(animate: boolean): void
  • Zoom out on the image.

    Parameters

    • animate: boolean

    Returns void

  • zoomTo(zoomLevel: number): void
  • Zoom to a specified zoom level.

    Parameters

    • zoomLevel: number

      Zoom level. Range 0 to 4.

      var galleryComp = uComps.cast.toGallery(comp);
      galleryComp.zoomTo(2);

    Returns void