MAF.element.Image

This is a base image component.

new MAF.element.Image()

Configs

aspect : {String}

This will put a aspect on the image based on the size of this component.
Aspect options:

NameAlternative nameDescription
fitparent, exactThis will stretch the image inside its parent, without looking at ratio.
heightportraitResize image based on height
widthlandscapeResize image based on width
autoparent/exactAutomatically resize for best fit inside parent.
cropparent/exactCrop the image so it will fit inside its parent.
sourceWhen you don't want to change the aspect but want to have the image cached

autoShow : {Boolean}

Show the src image when it is done loading.

hideWhileLoading : {Boolean}

Do not show the src image while loading. Default true.

manageWaitIndicator : {Boolean}

Show the framework waitindicator while image is loading. Default false.

missingSrc : {String}

When the src image has problems loading this image will be shown in its place.

remoteAsync : {Number}

The image is loaded asynchronously. You can place a alternative image in its place while it is loading. Default is true.

source : {String}

Path of the image.

src : {String}

Path of the image.

srcHeight : {Number}

If you know the height of the image you can define it here. Not all browsers get this info in time.

srcWidth : {Number}

If you know the width of the image you can define it here. Not all browsers get this info in time.

Methods

animate(config) inherited

Parameters:

NameTypeDescription
configObject

A config object

Fires:

aspectSizeBestFit(width, height, preferredSide)

While keeping aspect this method tries to fit the image in a certain space as best as possible.

Parameters:

NameTypeDescription
widthNumber

How wide the space is in pixels.

heightNumber

How high the space is in pixels.

preferredSideString

Define which side is the prefered side to be maximized in size.

aspectSizeMax(size)

The image will be resized maintaining aspect ratio. Will try maximize the image's width.

Parameters:

NameTypeDescription
sizeNumber

Will resize based on this parameter in pixels

aspectSizeMin(size)

The image will be resized maintaining aspect ratio. Will maximize the image's height.

Parameters:

NameTypeDescription
sizeNumber

Will resize based on this parameter in pixels

fillParent()

Based on the parents width and height the image will be resized maintaining aspect ratio. Will maximize the image's width. Returns null if there is no parent.

fitToParent()

Based on the parents width and height the image will be resized maintaining aspect ratio. Will maximize the image's height. Returns null if there is no parent.

freeze() → {Class} inherited

Freezes this component. Screen renders no longer trigger until thawed.

Returns:

This component.

getAbsolutePosition() → {Object} inherited

Give back the position relative to its first positioned ancestor element

Returns:

{hOffset:Number, vOffset: Number}

getSource()

Returns the src path of the image currently on this component.

getView() → {Class} inherited

Returns:

Returns the view this class is appended on.

hide() → {Class} inherited

Hides this component.

Returns:

This component.

initialize() inherited

Initialize the class

setSource(source)

Set the src config of this component with a new image path.

Parameters:

NameTypeDescription
sourceString

Path of the image.

setSources(object)

Set the sources of the this component.

Parameters:

NameTypeDescription
objectObject

Can contain src/missingSrc image path.

image.setSources({
   src: 'path/to/image.png',
   missingSrc: 'path/to/missing.png'
})

show() → {Class} inherited

Shows this component.

Returns:

This component.

thaw() → {Class} inherited

Thawes this component. Screen renders can trigger again.

Returns:

This component.

Events

onAnimationEnded

Fired when a animation on this component has ended.

onAppend

Fired when component has appended to a parent. Update visual appearances by applying a Theme style and rendering the skin.

onError

Fired when the source image had problems loading.

onLoaded

Fired when the source image finished loading.