@aurigma/ui-framework
Version:
A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.
484 lines (281 loc) • 10.4 kB
Markdown
# Class: AuWizard
Implements a multi-step editor.
## Hierarchy
* any
↳ **AuWizard**
## Implements
* [IEditorElement](../interfaces/ieditorelement.md)
## Index
### Constructors
* [constructor](auwizard.md#constructor)
### Properties
* [downloadUrl](auwizard.md#downloadurl)
* [driver](auwizard.md#driver)
* [editorState](auwizard.md#editorstate)
* [varManager](auwizard.md#varmanager)
### Methods
* [_okButtonClick](auwizard.md#_okbuttonclick)
* [addCustomPropertyInScope](auwizard.md#addcustompropertyinscope)
* [appendVars](auwizard.md#appendvars)
* [closeEditorPopup](auwizard.md#closeeditorpopup)
* [closeModal](auwizard.md#closemodal)
* [createEditorSnapshot](auwizard.md#createeditorsnapshot)
* [debug](auwizard.md#debug)
* [downloadFile](auwizard.md#downloadfile)
* [downloadFilesAsZip](auwizard.md#downloadfilesaszip)
* [getJsonProcessor](auwizard.md#getjsonprocessor)
* [getUncompiledWidgetNames](auwizard.md#getuncompiledwidgetnames)
* [hideEditorPopup](auwizard.md#hideeditorpopup)
* [manageCustomTopBarVisibility](auwizard.md#managecustomtopbarvisibility)
* [manageDefaultTopBarVisibility](auwizard.md#managedefaulttopbarvisibility)
* [nextStep](auwizard.md#nextstep)
* [onBackToProductButtonClick](auwizard.md#onbacktoproductbuttonclick)
* [openProjects](auwizard.md#openprojects)
* [prevStep](auwizard.md#prevstep)
* [restoreEditor](auwizard.md#restoreeditor)
* [saveProject](auwizard.md#saveproject)
* [showEditorPopup](auwizard.md#showeditorpopup)
* [showModal](auwizard.md#showmodal)
* [showPreloader](auwizard.md#showpreloader)
* [showToast](auwizard.md#showtoast)
* [switchToStep](auwizard.md#switchtostep)
* [toggleDrawerByClickOnShade](auwizard.md#toggledrawerbyclickonshade)
* [toggleShade](auwizard.md#toggleshade)
## Constructors
### constructor
\+ **new AuWizard**(): *[AuWizard](auwizard.md)*
**Returns:** *[AuWizard](auwizard.md)*
## Properties
### downloadUrl
• **downloadUrl**: *string* = ""
Url of the blob object to download by the user, which is created in [downloadFilesAsZip](auwizard.md#downloadfilesaszip).
___
### driver
• **driver**: *IDriver*
*Implementation of [IEditorElement](../interfaces/ieditorelement.md).[driver](../interfaces/ieditorelement.md#driver)*
A reference to an e-commerce driver.
___
### editorState
• **editorState**: *string* = ""
An editor state calculated in [createEditorSnapshot](auwizard.md#createeditorsnapshot).
___
### varManager
• **varManager**: *[IVariableManager](../interfaces/ivariablemanager.md)* = new VariableManager(this)
An object for managing variables.
## Methods
### _okButtonClick
▸ **_okButtonClick**(`event`: any): *Promise‹void›*
**Parameters:**
Name | Type |
------ | ------ |
`event` | any |
**Returns:** *Promise‹void›*
___
### addCustomPropertyInScope
▸ **addCustomPropertyInScope**(`name`: string, `property`: any, `inform`: boolean): *void*
Adds a custom property to the compilation scope.
**Parameters:**
Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`name` | string | - | The property name. |
`property` | any | - | A value of the property. |
`inform` | boolean | true | - |
**Returns:** *void*
___
### appendVars
▸ **appendVars**(`varsDictionary`: kvObject‹string, any›): *void*
_Deprecated, use [varManager.append()](../interfaces/ivariablemanager.md#append) instead._ Appends values to the current `vars` object.
**Parameters:**
Name | Type | Description |
------ | ------ | ------ |
`varsDictionary` | kvObject‹string, any› | An object, which will be merged with the current `vars`. |
**Returns:** *void*
___
### closeEditorPopup
▸ **closeEditorPopup**(`isForce`: boolean): *void*
Close editor popup and dispose editor instance.
**Parameters:**
Name | Type | Default |
------ | ------ | ------ |
`isForce` | boolean | false |
**Returns:** *void*
___
### closeModal
▸ **closeModal**(`name`: string): *Promise‹void›*
Close a modal window by its name.
**Parameters:**
Name | Type |
------ | ------ |
`name` | string |
**Returns:** *Promise‹void›*
___
### createEditorSnapshot
▸ **createEditorSnapshot**(`force`: boolean): *Promise‹string›*
Creates an editor snapshot, which can be used to restore the editor state.
**Parameters:**
Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`force` | boolean | false | If `true`, then this method also saves the product by using the [Customer's Canvas IFrame API](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/editor-class.html#_aurigma_design_editor_iframe_Editor_saveProduct_member_1_) of the Customer's Canvas IFrame API. |
**Returns:** *Promise‹string›*
A compressed Base64 string, which can be passed to [restoreEditor](auwizard.md#restoreeditor).
___
### debug
▸ **debug**(`name`: string | string[]): *void*
Debugs widgets.
**Parameters:**
Name | Type | Description |
------ | ------ | ------ |
`name` | string | string[] | The widget name or an array of widget names for debugging. |
**Returns:** *void*
___
### downloadFile
▸ **downloadFile**(`url`: string, `filename`: string, `newTab`: boolean): *Promise‹void›*
Downloads a file by URL.
**Parameters:**
Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`url` | string | - | The URL of the file that should be downloaded. |
`filename` | string | - | The name to be assigned to the downloaded file. |
`newTab` | boolean | false | If `true`, opens the link in a new tab. |
**Returns:** *Promise‹void›*
___
### downloadFilesAsZip
▸ **downloadFilesAsZip**(`files`: Array‹[DownloadingModel](downloadingmodel.md)›): *Promise‹string›*
Downloads multiple files and packs them to a ZIP archive.
**Parameters:**
Name | Type | Description |
------ | ------ | ------ |
`files` | Array‹[DownloadingModel](downloadingmodel.md)› | An array of objects `{url:string, filename:string}` describing files that should be downloaded and zipped. |
**Returns:** *Promise‹string›*
The URL of the archive.
___
### getJsonProcessor
▸ **getJsonProcessor**(): *JsonProcessor*
Returns an instance of the JsonProcessor.
**Returns:** *JsonProcessor*
___
### getUncompiledWidgetNames
▸ **getUncompiledWidgetNames**(): *string[]*
**Returns:** *string[]*
___
### hideEditorPopup
▸ **hideEditorPopup**(): *void*
Hide editor popup
**Returns:** *void*
___
### manageCustomTopBarVisibility
▸ **manageCustomTopBarVisibility**(`display`: boolean): *void*
Changes the visibility of a custom TopBar.
**Parameters:**
Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`display` | boolean | false | If `true`, displays the TopBar. By default, the custom TopBar is hidden. |
**Returns:** *void*
___
### manageDefaultTopBarVisibility
▸ **manageDefaultTopBarVisibility**(`display`: boolean): *void*
Changes the visibility of the default TopBar.
**Parameters:**
Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`display` | boolean | false | If `true`, displays the TopBar. By default, the default TopBar is hidden. |
**Returns:** *void*
___
### nextStep
▸ **nextStep**(): *void*
Activates the next step in the editor.
**Returns:** *void*
___
### onBackToProductButtonClick
▸ **onBackToProductButtonClick**(): *void*
**Returns:** *void*
___
### openProjects
▸ **openProjects**(): *void*
Open popup window with saved projects
**Returns:** *void*
___
### prevStep
▸ **prevStep**(): *void*
Activates the previous step in the editor.
**Returns:** *void*
___
### restoreEditor
▸ **restoreEditor**(`snapshot`: string): *Promise‹void›*
Restores the editor state.
**Parameters:**
Name | Type | Description |
------ | ------ | ------ |
`snapshot` | string | A compressed Base64 string representing the editor snapshot. You can obtain this string in [createEditorSnapshot](auwizard.md#createeditorsnapshot). |
**Returns:** *Promise‹void›*
___
### saveProject
▸ **saveProject**(): *void*
Open dialog for entering project name
**Returns:** *void*
___
### showEditorPopup
▸ **showEditorPopup**(): *void*
Show editor popup
**Returns:** *void*
___
### showModal
▸ **showModal**(`name`: string, `isAutoStart`: boolean): *Promise‹void›*
Shows a modal window by its name.
**Parameters:**
Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`name` | string | - | The name of the modal window. |
`isAutoStart` | boolean | false | If `true`, shows the modal window after initializing the editor. |
**Returns:** *Promise‹void›*
___
### showPreloader
▸ **showPreloader**(`isPreload`: boolean, `message`: string | string[], `timeout`: number): *void*
Shows and hides a preloader.
Under the hood, this method uses a counter to manage the preloader. If `counter > 0`, then it shows the preloader, otherwise, it hides the preloader. The default value of the counter is `0`.
```
"onClick": [
"{{#function main.showPreloader(true, 'Creating print files...')}}",
"{{#function $['editor'].getHiResImages(800,800)}}",
"{{#function main.showPreloader(false)}}"
]
```
**Parameters:**
Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`isPreload` | boolean | - | If `true`, increments the counter. If `false`, decrements the counter. |
`message` | string | string[] | [""] | A text message that appears next to the preloader icon. |
`timeout` | number | 5 | - |
**Returns:** *void*
___
### showToast
▸ **showToast**(`eventData`: object): *void*
**Parameters:**
▪ **eventData**: *object*
Name | Type |
------ | ------ |
`duration?` | number |
`message` | string |
**Returns:** *void*
___
### switchToStep
▸ **switchToStep**(`index`: number, `force`: boolean): *void*
Activates a step by its index.
**Parameters:**
Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`index` | number | - | The zero-based index of the required step. |
`force` | boolean | false | - |
**Returns:** *void*
___
### toggleDrawerByClickOnShade
▸ **toggleDrawerByClickOnShade**(): *void*
**Returns:** *void*
___
### toggleShade
▸ **toggleShade**(`value`: boolean): *void*
**Parameters:**
Name | Type |
------ | ------ |
`value` | boolean |
**Returns:** *void*