ImageManipulation | TYPO3 TypeScript Documentation (unofficial)

Hierarchy

ImageManipulation

Constructors

constructor

new ImageManipulation(): ImageManipulation

Returns ImageManipulation

Properties

Private activeCropVariantTrigger

activeCropVariantTrigger: JQuery

Private aspectRatioTrigger

aspectRatioTrigger: JQuery

Private coverAreaSelector

coverAreaSelector: string = '.t3js-cropper-cover-area'

Private cropBox

cropBox: JQuery

Private cropImageContainerSelector

cropImageContainerSelector: string = '#t3js-crop-image-container'

Private cropImageSelector

cropImageSelector: string = '#t3js-crop-image'

Private cropInfo

cropInfo: JQuery

Private cropInfoSelector

cropInfoSelector: string = '.t3js-cropper-info-crop'

Private cropVariantTriggers

cropVariantTriggers: JQuery

Private cropper

cropper: Cropper

Private currentCropVariant

currentCropVariant: CropVariant

Private currentModal

currentModal: JQuery

Private data

data: any

Private defaultFocusArea

defaultFocusArea: Area = ...

Private defaultOpts

defaultOpts: Options = ...

Private dismissButton

dismissButton: JQuery

Private focusArea

focusArea: any

Private focusAreaSelector

focusAreaSelector: string = '#t3js-cropper-focus-area'

Private imageOriginalSizeFactor

imageOriginalSizeFactor: number

Private initialized

initialized: boolean = false

Private previewButton

previewButton: JQuery

Private resetButton

resetButton: JQuery

Private saveButton

saveButton: JQuery

Private trigger

trigger: JQuery

Methods

Private checkFocusAndCoverAreasCollision

checkFocusAndCoverAreasCollision(focusArea: Area, coverAreas: Area[]): boolean

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:774
method
checkFocusAndCoverAreas

desc
Checks is one focus area and one or more cover areas overlap

Parameters
- focusArea: Area
- coverAreas: Area[]
Returns boolean

Private convertAbsoluteToRelativeCropArea

convertAbsoluteToRelativeCropArea(cropArea: Area, imageData: ImageData): Area

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:795
method
convertAbsoluteToRelativeCropArea

desc
Converts a crop area from absolute pixel-based into relative length values

Parameters
- cropArea: Area
  
  The crop area to convert from
- imageData: ImageData
  
  The image data
Returns Area

Private convertRelativeToAbsoluteCropArea

convertRelativeToAbsoluteCropArea(cropArea: Area, imageData: ImageData): Area

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:812
method
convertRelativeToAbsoluteCropArea

desc
Converts a crop area from relative into absolute pixel-based length values

Parameters
- cropArea: Area
  
  The crop area to convert from
- imageData: ImageData
  
  The image data
Returns Area

Private cropBuiltHandler

cropBuiltHandler(): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:386
method
cropBuiltHandler

desc
Internal cropper handler. Called when the cropper has been instantiated

Returns void

Private cropEndHandler

cropEndHandler(): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:480
method
cropEndHandler

desc
Internal cropper handler. Called when the cropping ends moving

Returns void

Private cropMoveHandler

cropMoveHandler(e: CropperEvent): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:445
method
cropMoveHandler

desc
Internal cropper handler. Called when the cropping area is moving

Parameters
- e: CropperEvent
Returns void

Private cropStartHandler

cropStartHandler(): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:468
method
cropStartHandler

desc
Internal cropper handler. Called when the cropping starts moving

Returns void

Private destroy

destroy(): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:916
method
destroy

desc
Destroy the ImageManipulation including cropper and alike

Returns void

Private init

init(): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:257
method
init

desc
Initializes the cropper UI and sets up all the event bindings for the UI

Returns void

Private initCoverAreas

initCoverAreas(container: JQuery, coverAreas: Area[]): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:638
method
initCoverAreas

desc
Initialise cover areas inside the cropper container

Parameters
- container: JQuery
  
  The container element to append the cover areas
- coverAreas: Area[]
  
  An array of areas to construct the cover area elements from
Returns void

Private initFocusArea

initFocusArea(container: JQuery): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:535
method
initFocusArea

desc
Initializes the focus area inside a container and registers the resizable and draggable interfaces to it

Parameters
- container: JQuery
Returns void

Private initializeCropperModal

initializeCropperModal(): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:178
method
initializeCropperModal

desc
Initialize the cropper modal and dispatch the cropper init

Returns void

initializeTrigger

initializeTrigger(): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:164
method
initializeTrigger

desc
Assign a handler to .t3js-image-manipulation-trigger. Show the modal and kick-off image manipulation

Returns void

Private openPreview

openPreview(data: object): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:888
method
openPreview

desc
Opens a preview view with the crop variants

Parameters
- data: object
  
  The whole data object containing all the cropVariants
Returns void

Private save

save(data: {}): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:901
method
save

desc
Saves the edited cropVariants to a hidden field

Parameters
- data: {}
  
  The whole data object containing all the cropVariants
  - [key: string]: CropVariant
Returns void

Private scaleAndMoveFocusArea

scaleAndMoveFocusArea(focusArea: Area): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:708
method
scaleAndMoveFocusArea

desc
Calculation logic for moving the focus area given the specified constrains of a crop and an optional cover area

Parameters
- focusArea: Area
  
  The translation data
Returns void

Private setAspectRatio

setAspectRatio(ratio: Ratio): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:738
method
setAspectRatio

desc
Sets the cropper to a specific ratio

Parameters
- ratio: Ratio
  
  The ratio value to apply
Returns void

Private setCropArea

setCropArea(cropArea: Area): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:748
method
setCropArea

desc
Sets the cropper to a specific crop area

Parameters
- cropArea: Area
  
  The crop area to apply
Returns void

Private setPreviewImages

setPreviewImages(data: {}): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:827
method
setPreviewImages

desc
Updates the preview images in the editing section with the respective crop variants

Parameters
- data: {}
  
  The internal crop variants state
  - [key: string]: CropVariant
Returns void

Private show

show(): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:190
method
show

desc
Load the image and setup the modal UI

Returns void

Private update

update(cropVariant: CropVariant): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:492
method
update

desc
Update current cropArea position and size when changing cropVariants

Parameters
- cropVariant: CropVariant
  
  The new cropVariant to update the UI with
Returns void

Private updateCropVariantData

updateCropVariantData(currentCropVariant: CropVariant): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:726
method
updateCropVariantData

desc
Immutably updates the currently selected cropVariant data

Parameters
- currentCropVariant: CropVariant
  
  The cropVariant to immutably save
Returns void

Private updatePreviewThumbnail

updatePreviewThumbnail(cropVariant: CropVariant, cropVariantTrigger: JQuery): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:658
method
updatePreviewThumbnail

desc
Sync the cropping (and focus area) to the preview thumbnail

Parameters
- cropVariant: CropVariant
  
  The crop variant to preview in the thumbnail
- cropVariantTrigger: JQuery
  
  The crop variant element containing the thumbnail
Returns void

Static isEmptyArea

isEmptyArea(area: Area): boolean

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:110
method
isCropAreaEmpty

desc
Checks if an area is set or pristine

static
Parameters
- area: Area
  
  The area to check
Returns boolean

Static Private serializeCropVariants

serializeCropVariants(cropVariants: object): string

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:145
method
serializeCropVariants

desc
Serializes crop variants for persistence or preview

Parameters
- cropVariants: object
Returns string
string

Static toCssPercent

toCssPercent(num: number): string

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:135
method
toCssPercent

desc
Takes a number, and converts it to CSS percentage length

static
Parameters
- num: number
  
  The number to convert
Returns string

Static wait

wait(fn: () => void, ms: number): void

- Defined in typo3/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:123
method
wait

desc
window.setTimeout shim

static
Parameters
- fn: () => void
  
  The function to execute
  - - (): void
    - Returns void
- ms: number
  
  The time in [ms] to wait until execution
Returns void

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Returns ImageManipulation

Properties

Private activeCropVariantTrigger

Private aspectRatioTrigger

Private coverAreaSelector

Private cropBox

Private cropImageContainerSelector

Private cropImageSelector

Private cropInfo

Private cropInfoSelector

Private cropVariantTriggers

Private cropper

Private currentCropVariant

Private currentModal

Private data

Private defaultFocusArea

Private defaultOpts

Private dismissButton

Private focusArea

Private focusAreaSelector

Private imageOriginalSizeFactor

Private initialized

Private previewButton

Private resetButton

Private saveButton

Private trigger

Methods

Private checkFocusAndCoverAreasCollision

Parameters

focusArea: Area

coverAreas: Area[]

Returns boolean

Private convertAbsoluteToRelativeCropArea

Parameters

cropArea: Area

imageData: ImageData

Returns Area

Private convertRelativeToAbsoluteCropArea

Parameters

cropArea: Area

imageData: ImageData

Returns Area

Private cropBuiltHandler

Returns void

Private cropEndHandler

Returns void

Private cropMoveHandler

Parameters

e: CropperEvent

Returns void

Private cropStartHandler

Returns void

Private destroy

Returns void

Private init

Returns void

Private initCoverAreas

Parameters

container: JQuery

coverAreas: Area[]

Returns void

Private initFocusArea

Parameters

container: JQuery

Returns void

Private initializeCropperModal

Returns void

initializeTrigger

Returns void

Private openPreview

Parameters

data: object

Returns void