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:

Name Alternative name Description
fit parent, exact This will stretch the image inside its parent, without looking at ratio.
height portrait Resize image based on height
width landscape Resize image based on width
auto parent/exact Automatically resize for best fit inside parent.
crop parent/exact Crop the image so it will fit inside its parent.
source When 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.

events : {Object} inherited

A object containing one or more event handlers to be added to this object during initialization.

The possible events are defined on each component.

Example
MAF.element.Core({
  events: {
     onAppend: function () {
     	// do something
     }
  }
}).appendTo(this);

hideWhileLoading : {Boolean}

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

id : {String} inherited

The unique id of this class

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.

styles : {Object} inherited

CSS styles for the component:

Name Type Argument Default Description
width Number

The width of this component in pixels.

height Number

The height of this component in pixels.

hAlign String optional  left

Horizontal alignment of this component. (left, center, right)

vAlign String optional  top

Vertical alignment of this component. (top, center, bottom)

hOffset Number optional 

Horizontal offset of this component in pixels.

vOffset Number optional 

Vertical offset of this component.

Methods

adopt(child) inherited mixin

Append a child or several children to this Class.

Parameters:

Name Type Argument Description
child MAF.Class repeatable 

Component or element you want to add.

animate(config) inherited

Parameters:

Name Type Description
config Object

A config object

Fires:

appendChild(child) → {MAF.Class} inherited mixin

This method appends a element as the last child of this Class.

Parameters:

Name Type Description
child ELement | MAF.Class

Component or element you want to add.

Fires:

  • event:onChildAppended
  • event:onAppend

Returns:

Returns this.

appendTo(parent) inherited mixin

Add this class element as a child to the specified class.

Parameters:

Name Type Description
parent MAF.Class

Which class to append to.

aspectSizeBestFit(width, height, preferredSide)

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

Parameters:

Name Type Description
width Number

How wide the space is in pixels.

height Number

How high the space is in pixels.

preferredSide String

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:

Name Type Description
size Number

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:

Name Type Description
size Number

Will resize based on this parameter in pixels

detachChild(child) → {Element} inherited mixin

Remove a child.

Parameters:

Name Type Description
child String | Number | Element

String can be first or last, Number is position of the child. Element is the child itself.

Returns:

The detached child element.

eliminate(key) inherited mixin

Removes a key from the storage.

Parameters:

Name Type Description
key String

Deletes the value if key exists.

empty() → {MAF.Class} inherited mixin

Remove all Children from this Class

Returns:

Returns this.

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.

getStyle(key) → {Object} inherited mixin

This method returns the given CSS property value of element.

Parameters:

Name Type Description
key String

CSS property to fetch.

Returns:

CSS style requested.

getStylesCopy() → {Object} inherited mixin

Returns:

Cloned object with all the styles applied 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

moveTo(parent) inherited mixin

Move the Class element to a different class.

Parameters:

Name Type Description
parent MAF.Class

Which class to move to.

removeChild(child) → {Element} inherited mixin

Remove a child.

Parameters:

Name Type Description
child String | Number | Element

String can be first or last, Number is position of the child. Element is the child itself.

Fires:

  • event:onChildRemoved

Returns:

The removed child element.

removeChildren() inherited mixin

Remove all children.

retrieve(key) inherited mixin

Retrieves a value from the storage.

Parameters:

Name Type Description
key String

Retrieves the value if key exists.

setSource(source)

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

Parameters:

Name Type Description
source String

Path of the image.

setSources(object)

Set the sources of the this component.

Parameters:

Name Type Description
object Object

Can contain src/missingSrc image path.

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

setStyle(key, value) → {MAF.Class} inherited mixin

Parameters:

Name Type Description
key String

CSS property to apply to on this element.

value Object

CSS value

Returns:

This

setStyles(styles) → {MAF.Class} inherited mixin

This method modifies element's CSS style properties. Styles are passed as a hash of property-value pairs in which the properties are specified in their camelized form.

Parameters:

Name Type Description
styles Object

Object with CSS styles to apply to the element.

Returns:

This

Example

.setStyles({
   backgroundColor: '#900',
   fontSize: '12px'
});

show() → {Class} inherited

Shows this component.

Returns:

This component.

store(key, value) inherited mixin

Saves a value to be availeble on the instance this Library is placed.

Parameters:

Name Type Description
key String

Key needs to be string.

value Mixed

Supports the storing of Strings, Numbers, Objects, Arrays. basically any JSONeable value.

suicide() inherited mixin

Destroy and cleanup this Class and all its children.

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.