Light Dark System

Button Mixin

ButtonMixin Mixin

Overview

ButtonMixin is what makes a button an eTemplate button rather than a plain one: it knows how to submit the surrounding template, and it gives a button sensible defaults based on what the button is called. 

export class Et2Button extends Et2InputWidget(ButtonMixin(SlButton)) { … }

Submitting

Clicking a button submits the template it lives in. Two properties change that:

Property Effect
noSubmit click does not submit at all - the button is only there for its click handler
noValidation submits without running validation first

noValidation is for buttons where the current values matter more than their correctness - a “Cancel”, or a step that saves a draft. A returning false from the click handler also cancels the submit, which is the usual way to make submitting conditional.

Defaults chosen from the id

A button with no image gets one picked from its id, and may also get a colour class. This is why a button called save looks like a save button without anyone saying so.

The id is matched against a table of patterns (default_background_images in the source). Among them: save, apply, cancel, delete, discard, edit, next/continue, finish, back/previous, copy, more, yes/check, no, ok, close, link, add/create.

Three ids also pick up a colour (default_classes): cancel and yes/no become yellow, delete becomes red.

The patterns are anchored so they match the end of an id or a […] segment, which is what lets button[cancel] and cancel both match while cancellation does not. Setting image explicitly always wins.

Some ids additionally register a keyboard shortcut - save binds Ctrl+S, for instance.

hideOnReadonly

A readonly button is shown greyed out by default. hideOnReadonly is meant to restore the older behaviour of hiding it entirely.

noSubmit and noValidation are the button half of the submit story; what each widget contributes to a submit is on Et2InputWidget.

Used by

This mixin is applied by the following widgets.

Properties

Name Description Type Default
default_background_images images to be used as background-image, if none is explicitly applied and id matches given regular expression object { save: /save(&|]|$)/, apply: /apply(&|]|$)/, cancel: /cancel(&|]|$)/, delete: /delete(&|]|$)/, discard: /discard(&|]|$)/, edit: /edit(&|[|]|$)/, next: /(next|continue)(&|]|$)/, finish: /finish(&|]|$)/, back: /(back|previous)(&|]|$)/, copy: /copy(&|]|$)/, more: /more(&|]|$)/, check: /(yes|check)(&|]|$)/, cancelled: /no(&|]|$)/, ok: /ok(&|]|$)/, close: /close(&|]|$)/, link: /link(&|]|_|$)/, add: /(add(&|]|$)|create)/ // customfields use create* }
default_classes Classnames added automatically to buttons to set certain hover background colors object { et2_button_cancel: /cancel(&|]|$)/, // yellow et2_button_question: /(yes|no)(&|]|$)/, // yellow et2_button_delete: /delete(&|]|$)/ // red }
hideOnReadonly If button is set to readonly, do we want to hide it completely (old behaviour) or show it as disabled (default) Something’s not quite right here, as the attribute shows up as “hideonreadonly” instead of “hide” but it does not show up without the “attribute”, and attribute:“hideonreadonly” does not show as an attribute boolean false
noSubmit Button should submit the etemplate Return false from the click handler to cancel the submit, or set noSubmit to true to skip submitting. boolean false
noValidation When submitting, skip the validation step. Allows to submit etemplates directly to the server. boolean false

Methods

Name Description Arguments
getInputNode() Reimplemented to pass aria-attributes to button -
isDirty() Always return false as a button is never dirty -
_get_default_class() Get a default class for the button based on ID check_id:
_get_default_image() Get a default image for the button based on ID check_id: string
_register_default_keyhandler() If button ID has a default keyboard shortcut (eg: Save: Ctrl+S), register with egw_keymanager check_id: string