Options
All
  • Public
  • Public/Protected
  • All
Menu

Class HamburgerMenuComponent

The Hamburger Menu Component provides a system that can be customized.

var uComps = require('u-components');
var uActions = require('u-actions');
var Action = uActions.Action;
new Action('Hamburger Menu Demo', hamburgerMenuDemo)
.addParameter('Hamburger Menu', uActions.ParamType.HAMBURGER_MENU)
.register();
function hamburgerMenuDemo(comp) {
    var menuComp = uComps.cast.toHamburgerMenu(comp);
    menuComp.animStartAngle = 90;
    menuComp.animStartAlpha = 50;
    menuComp.startPositionTween = uComps.PositionTweenType.EASE_BOTH
}

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

alpha

alpha: number

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

angle

angle: number

animEndAlpha

animEndAlpha: number

The ending opacity/transparency of the whole menu component as it exits the page.

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.animEndAlpha = 20;

animEndAngle

animEndAngle: number

The final angle of the exit point for the menu.

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.animEndAngle = 100;

animStartAlpha

animStartAlpha: number

The starting opacity/transparency of the whole menu component as it enters the page. Range 0 to 100.

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.animStartAlpha = 80;

animStartAngle

animStartAngle: number

The starting angle of the entry point for the menu.

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.animStartAngle = 45

clippingType

clippingType: ClippingType

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

components

components: ComponentList

Access this Component's sub-components.

endAlphaTween

endAlphaTween: PositionTweenType

Animation type for how the alpha will be applied when the menu exits the page. uComps.PositionTweenType: 0 - UNIFORM, 1 - EASE_IN, 2 - EASE_OUT, 3 - EASE_BOTH, 4 - EASE_IN_STRONG, 5 - EASE_OUT_STRONG, 6 - EASE_BOTH_STRONG, 7 - ELASTIC_IN, 8 - ELASTIC_OUT, 9 - ELASTIC_BOTH, 10 - BACK_IN, 11 - BACK_OUT, 12 - BACK_BOTH, 13 - BOUNCE_IN, 14 - BOUNCE_OUT, 15 - BOUNCE_BOTH

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.endAlphaTween = uComps.PositionTweenType.UNIFORM

endAngleTween

endAngleTween: PositionTweenType

Animation type for how the angle will initiate when the menu exits the page. uComps.PositionTweenType: 0 - UNIFORM, 1 - EASE_IN, 2 - EASE_OUT, 3 - EASE_BOTH, 4 - EASE_IN_STRONG, 5 - EASE_OUT_STRONG, 6 - EASE_BOTH_STRONG, 7 - ELASTIC_IN, 8 - ELASTIC_OUT, 9 - ELASTIC_BOTH, 10 - BACK_IN, 11 - BACK_OUT, 12 - BACK_BOTH, 13 - BOUNCE_IN, 14 - BOUNCE_OUT, 15 - BOUNCE_BOTH

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.endAngleTween = uComps.PositionTweenType.EASE_BOTH_STRONG

endAnimDuration

endAnimDuration: number

The number of milliseconds that the hamburger menu will take to exit the page.

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.endAnimDuration = 250;

endOriginX

endOriginX: number

The origin or pinpoint of the angle for the menu to begin its journey off the page, as a percentage. Range 0 to 100. endOriginX sets the horizontal position. (0,0 would be top right hand corner).

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.endOriginX = 50;

endOriginY

endOriginY: number

The origin or pinpoint of the angle for the menu to begin its journey off the page, as a percentage. Range 0 to 100. endOriginY sets the horizontal position. (0,0 would be top right hand corner).

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.endOriginY = 50;

endPositionTween

endPositionTween: PositionTweenType

Animation type for how the menu exits the page. uComps.PositionTweenType: 0 - UNIFORM, 1 - EASE_IN, 2 - EASE_OUT, 3 - EASE_BOTH, 4 - EASE_IN_STRONG, 5 - EASE_OUT_STRONG, 6 - EASE_BOTH_STRONG, 7 - ELASTIC_IN, 8 - ELASTIC_OUT, 9 - ELASTIC_BOTH, 10 - BACK_IN, 11 - BACK_OUT, 12 - BACK_BOTH, 13 - BOUNCE_IN, 14 - BOUNCE_OUT, 15 - BOUNCE_BOTH

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.endAngleTween = uComps.PositionTweenType.ELASTIC_OUT

formEnabled

formEnabled: boolean

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

formFieldName

formFieldName: string

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

height

height: number

The height of the Component.

mask

mask: RectangleComponent | CircleComponent

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

name

name: string

Name of the component.

originX

originX: number

originY

originY: number

parent

parent: Component

Access this Component's parent component.

passedFormValidation

passedFormValidation: boolean

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

startAlphaTween

startAlphaTween: PositionTweenType

Animation type for the alpha tween as the menu enters the page. uComps.PositionTweenType: 0 - UNIFORM, 1 - EASE_IN, 2 - EASE_OUT, 3 - EASE_BOTH, 4 - EASE_IN_STRONG, 5 - EASE_OUT_STRONG, 6 - EASE_BOTH_STRONG, 7 - ELASTIC_IN, 8 - ELASTIC_OUT, 9 - ELASTIC_BOTH, 10 - BACK_IN, 11 - BACK_OUT, 12 - BACK_BOTH, 13 - BOUNCE_IN, 14 - BOUNCE_OUT, 15 - BOUNCE_BOTH

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.startAlphaTween = uComps.PositionTweenType.EASE_IN_STRONG

startAngleTween

startAngleTween: PositionTweenType

Animation type for how the angle will initiate as the menu enters the page. uComps.PositionTweenType: 0 - UNIFORM, 1 - EASE_IN, 2 - EASE_OUT, 3 - EASE_BOTH, 4 - EASE_IN_STRONG, 5 - EASE_OUT_STRONG, 6 - EASE_BOTH_STRONG, 7 - ELASTIC_IN, 8 - ELASTIC_OUT, 9 - ELASTIC_BOTH, 10 - BACK_IN, 11 - BACK_OUT, 12 - BACK_BOTH, 13 - BOUNCE_IN, 14 - BOUNCE_OUT, 15 - BOUNCE_BOTH

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.startAngleTween = uComps.PositionTweenType.EASE_IN

startAnimDuration

startAnimDuration: number

The number of milliseconds that the hamburger menu will take to enter the page.

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.startAnimDuration = 750;

startOriginX

startOriginX: number

The origin or pinpoint of the angle for the menu to begin its journey onto the page, as a percentage. Range 0 to 100. startOriginX sets the horizontal position. (0,0 would be top right hand corner).

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.startOriginX = 25;

startOriginY

startOriginY: number

The origin or pinpoint of the angle for the menu to begin its journey onto the page, as a percentage. Range 0 to 100. startOriginY sets the vertical position. (100,100 would be bottom right hand corner).

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.startOriginY = 25;

startPositionTween

startPositionTween: PositionTweenType

Animation type for how the menu enters the page. uComps.PositionTweenType: 0 - UNIFORM, 1 - EASE_IN, 2 - EASE_OUT, 3 - EASE_BOTH, 4 - EASE_IN_STRONG, 5 - EASE_OUT_STRONG, 6 - EASE_BOTH_STRONG, 7 - ELASTIC_IN, 8 - ELASTIC_OUT, 9 - ELASTIC_BOTH, 10 - BACK_IN, 11 - BACK_OUT, 12 - BACK_BOTH, 13 - BOUNCE_IN, 14 - BOUNCE_OUT, 15 - BOUNCE_BOTH

var menuComp = uComps.cast.toHamburgerMenu(comp);
menuComp.startPositionTween = uComps.PositionTweenType.BOUNCE_OUT

type

type: string

Type of the component.

uniqueId

uniqueId: string

Unique ID of the component.

visible

visible: boolean

Whether or not the Component is visible.

width

width: number

The width of the Component.

x

x: number

The x position of the Component relative to its parent.

y

y: number

The y position of the Component relative to its parent.

Methods

emit

  • 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. Also works for 'on_down', 'on_up', and 'on_move'.

    new Action('Canvas emit', emit)
        .addParameter('Canvas', uActions.ParamType.CANVAS)
        .register();
    function emit(canvas) {
            var ctx = uComps.cast.toCanvas(canvas);
            ctx.emit('on_press', 'hello world');
    }

    Parameters

    • eventType: string

      The type of the event to emit.

    • data: Object

      Data object to pass to each callback.

    Returns void

focus

  • 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

  • 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

  • on(eventType: string, callback: Function): void

  • Adds the callback function to the end of the listeners array for eventType.

    new Action('Canvas on', on)
    .addParameter('Canvas', uActions.ParamType.CANVAS)
    .register();
    function on(canvas) {
        var ctx = uComps.cast.toCanvas(canvas);
        ctx.on('on_press', on_callback);
    }
    function on_callback() {
        print('on_callback!!!!');
    }

    Parameters

    • eventType: string

      The type of the event.

    • callback: Function

      The callback function

    Returns void

refresh

  • refresh(): void

  • Refresh this component to force it to be re-rendered, or for its dynamic data to be updated.

    Returns void

set

  • 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

  • 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