diff --git a/api/js/etemplate/Et2Button/Et2Button.ts b/api/js/etemplate/Et2Button/Et2Button.ts index 13b4c8441f..db1c1d70bd 100644 --- a/api/js/etemplate/Et2Button/Et2Button.ts +++ b/api/js/etemplate/Et2Button/Et2Button.ts @@ -20,6 +20,37 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton)) protected clicked : boolean = false; private _image : string; + /** + * images to be used as background-image, if none is explicitly applied and id matches given regular expression + */ + static readonly default_background_images : 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(&|\]|$)/, + add: /(add(&|\]|$)|create)/ // customfields use create* + }; + + /** + * Classnames added automatically to buttons to set certain hover background colors + */ + static readonly default_classes : object = { + et2_button_cancel: /cancel(&|\]|$)/, // yellow + et2_button_question: /(yes|no)(&|\]|$)/, // yellow + et2_button_delete: /delete(&|\]|$)/ // red + }; + static get styles() { return [ @@ -75,12 +106,6 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton)) // Do not add icon here, no children can be added in constructor - // Define a default click handler - // If a different one gets set via attribute, it will be used instead - this.onclick = (typeof this.onclick === "function") ? this.onclick : () => - { - return this.getInstanceManager().submit(); - }; } connectedCallback() @@ -126,11 +151,44 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton)) return false; } + // Submit the form + if(this.getType() !== "buttononly") + { + return this.getInstanceManager().submit(); + } this.clicked = false; this.getInstanceManager()?.skip_close_prompt(false); return true; } + /** + * Handle changes that have to happen based on changes to properties + * + */ + requestUpdate(name : PropertyKey, oldValue) + { + super.requestUpdate(name, oldValue); + + // Default image & class are determined based on ID + if(name == "id" && this._widget_id) + { + // Check against current value to avoid triggering another update + if(!this.image) + { + let image = this._get_default_image(this._widget_id); + if(image != this._image) + { + this.image = this._get_default_image(this._widget_id); + } + } + let default_class = this._get_default_class(this._widget_id); + if(default_class && !this.classList.contains(default_class)) + { + this.classList.add(this._get_default_class(this._widget_id)); + } + } + } + render() { if(this.readonly) @@ -147,6 +205,53 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton)) `; } + /** + * Get a default image for the button based on ID + * + * @param {string} check_id + */ + _get_default_image(check_id : string) : string + { + if(!check_id) + { + return ""; + } + + if(typeof this.image == 'undefined') + { + for(const image in Et2Button.default_background_images) + { + if(check_id.match(Et2Button.default_background_images[image])) + { + return image; + } + } + } + return ""; + } + + /** + * Get a default class for the button based on ID + * + * @param check_id + * @returns {string} + */ + _get_default_class(check_id) + { + if(!check_id) + { + return ""; + } + for(var name in Et2Button.default_classes) + { + if(check_id.match(Et2Button.default_classes[name])) + { + return name; + } + } + return ""; + } + get _iconNode() : HTMLImageElement { return (Array.from(this.children)).find( diff --git a/api/js/etemplate/Et2Widget/Et2Widget.ts b/api/js/etemplate/Et2Widget/Et2Widget.ts index 04b166b61f..0942fb8bd2 100644 --- a/api/js/etemplate/Et2Widget/Et2Widget.ts +++ b/api/js/etemplate/Et2Widget/Et2Widget.ts @@ -220,8 +220,10 @@ const Et2WidgetMixin = (superClass) => */ set id(value) { + let oldValue = this._widget_id; this._widget_id = value; this.setAttribute("id", this._widget_id ? this.getInstanceManager().uniqueId + '_' + this._widget_id.replace(/\./g, '-') : ""); + this.requestUpdate("id", oldValue); } /**