Module: alfresco/html/Image

alfresco/html/Image

This module provides a simple mechanism for creating image elements on a page. Additionally, it mixes in the _PublishOrLinkMixin class to provide support for clicking to navigate or to publish a topic.
Since:
  • 1.0.41
Author:
  • Martin Doyle
Copyright:
  • Copyright (C) 2005-2020 Alfresco Software Limited
License:
Source:

Extends

Mixes In

Members

_firstAttemptedSetup :number

In order to ensure we don't try forever to setup this widget when it's not being attached to the DOM, note when we first retry the setup.
Type:
  • number
Source:

advancedSizeRetrieval :boolean

Whether to enable advanced image natural-size retrieval. If set to false then image natural-size retrieval is only available for modern browsers and for "foreground" images only (i.e. ones specified by src, not background-image property).

By setting this to true, the natural-size of foreground images in IE8 will be enabled, and also the calculation of background images' natural sizes, meaning the widget will be auto-sized according to the size of the background-image, however this will introduce an asynchronous process that will cause the widget to mark itself as "ready" prior to the resizing being completed. This will not be discernable to an end-user, but could affect any programmatic inspection of the image.

Type:
  • boolean
Default Value:
  • false
Source:

altText :string

Alt text for the image. This will be encoded and checked against i18n property bundles.
Type:
  • string
Default Value:
  • null
Source:

aspectRatio :number

An optional aspect ratio that will be used if only one of width or height has been specified. This is specified as a floating point number as a ratio to 1.

Example from Wikipedia: "Two common videographic aspect ratios are 4:3 (1.33:1), the universal video format of the 20th century, and 16:9 (1.77:1), universal for high-definition television and European digital television". So, the value in these two examples would be 1.33 and 1.77 respectively.

Type:
  • number
Default Value:
  • null
Source:

classes :string|Array.<string>

Any optional classes to be added to the wrapped image element. If a src property is provided then this property will not be used.
Type:
  • string | Array.<string>
Default Value:
  • null
Source:

cssRequirements :object[]

An array of the CSS files to use with this widget.
Type:
  • object[]
Default Value:
  • [{cssFile:"./css/Image.css"}]
Source:

dimensions :object

Short-hand property for setting both width and height simultaneously. This will override any individual width/height property setting.
Type:
  • object
Properties:
Name Type Argument Description
w number <optional>
 Width
h number <optional>
 Height
Default Value:
  • null
Source:

fallbackImageDimensions :number

If we can get no other sizes, then rather than having a zero-by-zero image, make it square using this value (treated as pixels).
Type:
  • number
Default Value:
  • 50
Source:

height :number

An optional CSS height to apply to the image node in pixels. If height is specified without width then the other will be calculated using the aspectRatio property, or the calculated naturalAspectRatio if not specified.
Type:
  • number
Default Value:
  • 0
Source:

isBlockElem :boolean

When set to true, the root node (and container of the image node) will be set to be a block level element.
Type:
  • boolean
Default Value:
  • false
Source:

<readonly> naturalAspectRatio :number

This will be set to the natural aspect-ratio of the displayed image. This is specified as a floating point number as a ratio to 1.

Example from Wikipedia: "Two common videographic aspect ratios are 4:3 (1.33:1), the universal video format of the 20th century, and 16:9 (1.77:1), universal for high-definition television and European digital television". So, the value in these two examples would be 1.33 and 1.77 respectively.

Type:
  • number
Default Value:
  • 0
Source:

<readonly> naturalHeight :number

This will be set to the natural height of the displayed image.
Type:
  • number
Default Value:
  • 0
Source:

<readonly> naturalWidth :number

This will be set to the natural width of the displayed image.
Type:
  • number
Default Value:
  • 0
Source:

pathToBlankGif :string

The path to the default blank gif, using the module pathing system
Type:
  • string
Default Value:
  • "alfresco/css/images/blank.gif"
Source:

src :string

The URL of the image to use (this is used in conjunction with the srcType property). If a src is provided, then the classes property will not be used.
Type:
  • string
Default Value:
  • null
Source:

srcType :string

The type of URL to use (see urlTypes for possible values).
Type:
  • string
Default Value:
Source:

templateString :string

The HTML template to use for the widget.
Type:
  • string
Source:

timeForDomAttach :number

We want to set a maximum time for waiting for the widget to be attached to the DOM before trying to setup the widget.
Type:
  • number
Default Value:
  • 5000
Source:

width :number

An optional CSS width to apply to the image node in pixels. If width is specified without height then the other will be calculated using the aspectRatio property, or the calculated naturalAspectRatio if not specified.
Type:
  • number
Default Value:
  • 0
Source:

<inner> imgStyle :String

Any optional style rules to be applied to the wrapped image element.
Type:
  • String
Default Value:
  • null
Source:

Methods

_calculateNaturalAspectRatio()

This function assumes that the naturalWidth/naturalHeight properties have already been set, and calculates the resultant natural aspect-ratio, as a floating point ratio to 1.
Source:

_getBackgroundImageUrl() → {string}

Get the URL of the background image, which is assumed to be a single image, not surrounded by quotes (which would break in IE).
Source:
Returns:
The URL of the background image, or null if not available
Type
string

_updateNaturalDimensions() → {external:dojo/promise/Promise}

Get the natural size of the currently displayed image.
Source:
Returns:
A promise that will resolve once dimensions are retrieved
Type
external:dojo/promise/Promise

getCssDimensions() → {module:alfresco/html/Image#Dimensions}

Get the CSS dimensions of the image node (will not differentiate between dimensions specified in style attribute and those in a stylesheet). Unavailable and non-numeric dimensions will be returned as 0.

NOTE: If no src property has been set, then this will be treated as if no image is present, and so will return empty (zero) dimensions.

Source:
Returns:
A dimensions object
Type
module:alfresco/html/Image#Dimensions

getNaturalImageSize() → {external:dojo/promise/Promise}

Get the natural size of the currently displayed image.
Source:
Returns:
A promise that will resolve to a dimensions object
Type
external:dojo/promise/Promise

postCreate()

This is run after the widget has been created, but before any sub-widgets have finished being created.
Source:

postMixInProperties()

This is run after the config has been mixed into this instance.
Source:

resize(forceNatural)

Resize the image node based on (in priority order) the configured width/height properties; the current CSS dimensions; or the image's natural width/height.
Parameters:
Name Type Argument Description
forceNatural boolean <optional>
 Force usage of the image's natural dimensions
Source:

setupImageNode()

Prepare the image node
Source: