Interface: SNAPButton
Properties
_name
• Optional _name: string
css
• Optional css: string
Simple css class definition, used by the default of getIcon.
Optional
icon
• Optional icon: string
Simple icon url, used by the default of getIcon.
Optional
label
• label: string
Simple labeling, used by the default of getLabel.
supportsComponentPath
• Optional supportsComponentPath: boolean
Whether the button is applied to elements specifying no actual, but a component path preview ID prefixed with "#".
Optional
supportsInedit
• Optional supportsInedit: boolean
Whether the button is applied to elements that can be edited in-place.
Optional
Methods
afterExecute
▸ Optional afterExecute(scope, item, error?): void
Will be called after execute.
Parameters
| Name | Type | Description |
|---|---|---|
scope |
SNAPButtonScope |
|
item |
any |
See getItems. |
error? |
Error |
If an uncaught error appears. |
Returns
void
Optional
beforeExecute
▸ Optional beforeExecute(scope, item): void
Will be called before execute.
Parameters
| Name | Type | Description |
|---|---|---|
scope |
SNAPButtonScope |
|
item |
any |
See getItems |
Returns
void
Optional
execute
▸ Optional execute(scope, item): Promise\<void>
Will be called, when the button (or an item) is clicked.
Parameters
| Name | Type | Description |
|---|---|---|
scope |
SNAPButtonScope |
|
item |
any |
See getItems |
Returns
Promise\<void>
Optional
getIcon
▸ Optional getIcon(scope): void
Use scope.$button to define the appearance of the button.
Parameters
| Name | Type |
|---|---|
scope |
SNAPButtonScope |
Returns
void
Example
// the default callback is defined as:
TPP_BROKER.registerButton({
icon = null,
css = null,
getIcon = async ({ $button }) =>
(css !== null && !$button.classList.add(css))
|| (icon !== null && ($button.style.backgroundImage = `url(${icon})`))
|| $button.classList.add('tpp-icon-action'),
...
});
Optional
getItems
▸ Optional getItems(scope): any[]
If this is not an empty list, a dropdown will be rendered; the default is (scope) => [] An item could be anything, but it needs a property called label, which appears in the dropdown.
Parameters
| Name | Type |
|---|---|
scope |
SNAPButtonScope |
Returns
any[]
Optional
getLabel
▸ Optional getLabel(scope): void
The tooltip ( [title] ) for this button.
Parameters
| Name | Type |
|---|---|
scope |
SNAPButtonScope |
Returns
void
Example
// the default callback is defined as:
TPP_BROKER.registerButton({
label = '',
getLabel = () => label,
...
});
Example
// localize
TPP_BROKER.registerButton({
getLabel: ({ language }) => language.toLowerCase() === 'de' ? 'Deutsche Bezeichnung' : 'English Label',
...
});
Optional
isEnabled
▸ Optional isEnabled(scope): Promise\<boolean>
Whether this button should be enabled or not; the default is (scope) => false
Parameters
| Name | Type |
|---|---|
scope |
SNAPButtonScope |
Returns
Promise\<boolean>
Optional
isVisible
▸ Optional isVisible(scope): Promise\<boolean>
Whether this button should be rendered or not; the default is (scope) => true. Be careful with your Promise here: the rendering of all buttons only happens after all Button#isVisible calls. That's why ButtonScope.$button doesn't exist in SNAPButtonScope this time.
Parameters
| Name | Type |
|---|---|
scope |
SNAPButtonScope |
Returns
Promise\<boolean>
Optional