@ibm-wch-sdk/rendition-utils

Software development kit to simplify the development of Angular based single page applications against Watson Content Hub.

Usage no npm install needed!

<script type="module">
  import ibmWchSdkRenditionUtils from 'https://cdn.skypack.dev/@ibm-wch-sdk/rendition-utils';
</script>

README

ibm-wch-sdk-rendition-utils

Exposes framework independent APIs to support the implementation of ibm-wch-sdk-ng and similar SDK.

Details

Refer to the documentation.

Changes

CHANGELOG

Class documentation

Refer to the documentation.

Utils

TBD

Changelog

Current

Added

  • Initial version

@ibm-wch-sdk/rendition-utils

Index

External modules

@ibm-wch-sdk/rendition-utils > "index"

External module: "index"

Index

@ibm-wch-sdk/rendition-utils > "utils/empty.image"

External module: "utils/empty.image"

Index

Variables

Variables

<Const> TRANSPARENT_PIXEL

● TRANSPARENT_PIXEL: "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="

Defined in utils/empty.image.ts:1

@ibm-wch-sdk/rendition-utils > "utils/rendition.utils"

External module: "utils/rendition.utils"

Index

Interfaces

Variables

Functions

Variables

<Const> DEFAULT_RENDITION

● DEFAULT_RENDITION: "default" = "default"

Defined in utils/rendition.utils.ts:8

<Const> LOGGER

● LOGGER: "RenditionDirective" = "RenditionDirective"

Defined in utils/rendition.utils.ts:4

<Const> RENDITION_REGEXP

● RENDITION_REGEXP: RegExp = /resize=(\d+)(?:px)?:(\d+)(?:px)?&crop=(\d+)(?:px)?:(\d+)(?:px)?;(\d+)(?:px)?,(\d+)(?:px)?/

Defined in utils/rendition.utils.ts:287

Regular expression to detect the renditions settings. Make sure to not use the 'g' flag!

<Const> _mathFloor

● _mathFloor: floor = Math.floor

Defined in utils/rendition.utils.ts:51

<Const> _mathRound

● _mathRound: round = Math.round

Defined in utils/rendition.utils.ts:52

<Const> jsonStringify

● jsonStringify: stringify = JSON.stringify

Defined in utils/rendition.utils.ts:6

Functions

_appendQueryString

▸ _appendQueryString(aBaseUrl: string, aQueryString: string): string

Defined in utils/rendition.utils.ts:62

Appends a query string to a base URL that may or may not have a query part. If it has a query, the previous query is removed

Parameters:

Name Type Description
aBaseUrl string current base URL
aQueryString string string to append

Returns: string the resulting URL

_approx

▸ _approx(aNumber: number): number

Defined in utils/rendition.utils.ts:76

Approximate a floating number to a fixed number of decimals

Parameters:

Name Type Description
aNumber number number to approximate

Returns: number the approximated number

_binaryIndexOf

▸ _binaryIndexOf<T,K>(aSearchElement: K, aArray: T[], aCmp: function): number

Defined in utils/rendition.utils.ts:118

Executes a binary search for an element

Type parameters:

T

K

Parameters:

Name Type Description
aSearchElement K element to look for
aArray T[] array to search
aCmp function comparision function

Returns: number the index

_clip

▸ _clip(aValue: number, aMin: number, aMax: number): number

Defined in utils/rendition.utils.ts:334

Clips a value against the given boundaries

Parameters:

Name Type Description
aValue number the value to clip
aMin number the min value
aMax number the max value

Returns: number the clipped value

_compareByAspect

▸ _compareByAspect(aLeft: RenditionBean, aRight: RenditionBean): number

Defined in utils/rendition.utils.ts:161

Compares renditions by aspect

Parameters:

Name Type Description
aLeft RenditionBean left value to compare
aRight RenditionBean right value to compare

Returns: number comparison result

_compareByWidth

▸ _compareByWidth(aLeft: Rendition | RenditionBean, aRight: Rendition | RenditionBean): number

Defined in utils/rendition.utils.ts:172

Compares renditions by width

Parameters:

Name Type Description
aLeft Rendition | RenditionBean left value to compare
aRight Rendition | RenditionBean right value to compare

Returns: number comparison result

_compareByWidthAndHeight

▸ _compareByWidthAndHeight(aLeft: Rendition | RenditionBean, aRight: Rendition | RenditionBean): number

Defined in utils/rendition.utils.ts:187

Compares renditions by width

Parameters:

Name Type Description
aLeft Rendition | RenditionBean left value to compare
aRight Rendition | RenditionBean right value to compare

Returns: number comparison result

_compareNumbers

▸ _compareNumbers(aLeft: number, aRight: number): number

Defined in utils/rendition.utils.ts:150

Safe number comparison

Parameters:

Name Type Description
aLeft number left value to compare
aRight number right value to compare

Returns: number comparison result

_createDimension

▸ _createDimension(aWidth: number, aHeight: number): Dimension

Defined in utils/rendition.utils.ts:26

Constructs a dimensions object based on width and height

Parameters:

Name Type Description
aWidth number the width
aHeight number the height

Returns: Dimension the dimension object

_createRenditionBean

▸ _createRenditionBean(aTargetAspect: number, aRendition: Rendition, aImage: Image): RenditionBean

Defined in utils/rendition.utils.ts:88

Constructs the rendition bean based on the actual rendition

Parameters:

Name Type Description
aTargetAspect number desired target aspect
aRendition Rendition the rendition
aImage Image

Returns: RenditionBean the bean

_equalsWidth

▸ _equalsWidth(aLeft: Rendition | RenditionBean, aRight: Rendition | RenditionBean): boolean

Defined in utils/rendition.utils.ts:202

Tests if the width of two renditions is equal

Parameters:

Name Type Description
aLeft Rendition | RenditionBean left rendition
aRight Rendition | RenditionBean right rendition

Returns: boolean true if equal

_findBestAspects

▸ _findBestAspects(aRenditions: RenditionBean[], aLogger: Logger): RenditionBean[]

Defined in utils/rendition.utils.ts:230

Returns a list of renditions with the best matching aspect ratio

Parameters:

Name Type Description
aRenditions RenditionBean[] the renditions
aLogger Logger the logger

Returns: RenditionBean[] the renditions with the best matching aspect ratio

_findBestWidth

▸ _findBestWidth(aWidth: number, aRenditions: RenditionBean[], aLogger: Logger): RenditionBean | undefined

Defined in utils/rendition.utils.ts:257

Find the rendition with the best width, i.e. the closest width that is larger than the given width

Parameters:

Name Type Description
aWidth number desired width
aRenditions RenditionBean[] renditions
aLogger Logger the logger

Returns: RenditionBean | undefined the selected rendition

_findByWidth

▸ _findByWidth(aLeft: number, aRight: Rendition | RenditionBean): number

Defined in utils/rendition.utils.ts:216

Compares renditions by width

Parameters:

Name Type Description
aLeft number left value to compare
aRight Rendition | RenditionBean right value to compare

Returns: number comparison result

_getDecodedQueryString

▸ _getDecodedQueryString(aUrl: string): string | undefined

Defined in utils/rendition.utils.ts:295

Checks if the URL has a query string and decodes it if so.

Parameters:

Name Type Description
aUrl string the URL

Returns: string | undefined the decoded query string or undefined

_getRendition

▸ _getRendition(aDstWidth: number, aDstHeight: number, aImage: Image, aLogger: Logger): ScaledImage

Defined in utils/rendition.utils.ts:516

Builds a query string for the Akamai rendition service such that the resulting image matches the desired dimensions. The algorithm first finds the renditions with the best matching aspect ratio. Out of the result set it then selects the nearest rendition that is large or equal in size, because that most likely represents the desired excerpt best. It then fixes the aspect ration and computes the new transform.

In case the image would be scaled up, we return the identity scaling and let the browser scale the image.

Parameters:

Name Type Description
aDstWidth number desired image width
aDstHeight number desired image height
aImage Image the image
aLogger Logger the logger

Returns: ScaledImage the URL string

_getScaledImageFromRendition

▸ _getScaledImageFromRendition(aRenditionName: string, aImage: Image, aLogger: Logger): ScaledImage

Defined in utils/rendition.utils.ts:480

Returns the scaled image given the rendition name explicitly

Parameters:

Name Type Description
aRenditionName string the name of the rendition
aImage Image the image
aLogger Logger the actual logger

Returns: ScaledImage the scaled image

_getScaledImageFromRenditionBean

▸ _getScaledImageFromRenditionBean(aDstWidth: number, aDstHeight: number, aBean: RenditionBean, aLogger: Logger): ScaledImage

Defined in utils/rendition.utils.ts:353

Builds a query string for the Akamai rendition service such that the resulting image matches the desired dimensions. The algorithm first finds the renditions with the best matching aspect ratio. Out of the result set it then selects the nearest rendition that is large or equal in size, because that most likely represents the desired excerpt best. It then fixes the aspect ration and computes the new transform.

In case the image would be scaled up, we return the identity scaling and let the browser scale the image.

Parameters:

Name Type Description
aDstWidth number desired image width
aDstHeight number desired image height
aBean RenditionBean the rendition bean
aLogger Logger the logger

Returns: ScaledImage the URL string

_getSourceSet

▸ _getSourceSet(aImage: Image, aOrigin: string): string

Defined in utils/rendition.utils.ts:554

Computes the source set from the available renditions

Parameters:

Name Type Description
aImage Image the image
aOrigin string the origin

Returns: string the source set

_parseNumber

▸ _parseNumber(aValue: string): number

Defined in utils/rendition.utils.ts:312

Parses a string into a number

Parameters:

Name Type Description
aValue string the value to parse

Returns: number the decoded string

_round

▸ _round(aValue: number): number

Defined in utils/rendition.utils.ts:322

Rounding function

Parameters:

Name Type Description
aValue number the value to round

Returns: number the rounded value

@ibm-wch-sdk/rendition-utils

Index

External modules

@ibm-wch-sdk/rendition-utils > "utils/rendition.utils" > Dimension

Interface: Dimension

Exposes the concept of a dimension

Hierarchy

Dimension

Index

Properties

Properties

h

● h: number

Defined in utils/rendition.utils.ts:15

w

● w: number

Defined in utils/rendition.utils.ts:14

@ibm-wch-sdk/rendition-utils > "utils/rendition.utils" > RenditionBean

Interface: RenditionBean

Hierarchy

RenditionBean

Index

Properties

Properties

aspect

● aspect: number

Defined in utils/rendition.utils.ts:44

diff

● diff: number

Defined in utils/rendition.utils.ts:47

height

● height: number

Defined in utils/rendition.utils.ts:46

image

● image: Image

Defined in utils/rendition.utils.ts:42

rendition

● rendition: Rendition

Defined in utils/rendition.utils.ts:43

width

● width: number

Defined in utils/rendition.utils.ts:45

@ibm-wch-sdk/rendition-utils > "utils/rendition.utils" > ScaledImage

Interface: ScaledImage

Hierarchy

ScaledImage

Index

Properties

Properties

container

● container: Dimension

Defined in utils/rendition.utils.ts:37

image

● image: Image

Defined in utils/rendition.utils.ts:35

img

● img: Dimension

Defined in utils/rendition.utils.ts:36

url

● url: string

Defined in utils/rendition.utils.ts:38