@ibm-wch-sdk/rendition-utils

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

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@ibm-wch-sdk/rendition-utils
Minified + gzip package size for @ibm-wch-sdk/rendition-utils in KB

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


If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.