diff --git a/README.md b/README.md index 5313933..a364999 100644 --- a/README.md +++ b/README.md @@ -72,6 +72,10 @@ The attributes listed below are properly formatted as JSON in [*example.json*](h >>**ariaLabel** (string): Defines the default button aria label. The default is `""`. +>>**disabledText** (string): Defines the default button text when the button is disabled. If not set, `startText`, `finalText` or `text` will be used in that order. `_styleBeforeCompletion` must be set to `visible` so that the button is shown while disabled. The default is `""`. + +>>**disabledAriaLabel** (string): Defines the button aria label when using `disabledText`. The default is `""`. + >>**startText** (string): Defines the first item button text when set on the article with **\_onChildren** set to `true`. The default is `"Begin"`. >>**startAriaLabel** (string): Defines the first item button aria label when set on the article with **\_onChildren** set to `true`. The default is `""`. diff --git a/example.json b/example.json index 812755c..8a219b7 100644 --- a/example.json +++ b/example.json @@ -26,6 +26,8 @@ "_hasIcon": false, "text": "Continue", "ariaLabel": "", + "disabledText": "", + "disabledAriaLabel": "", "startText": "Begin", "startAriaLabel": "", "finalText": "Finish", diff --git a/js/TrickleButtonModel.js b/js/TrickleButtonModel.js index abc4611..af5d21a 100644 --- a/js/TrickleButtonModel.js +++ b/js/TrickleButtonModel.js @@ -118,6 +118,7 @@ export default class TrickleButtonModel extends ComponentModel { if (!trickleConfig) return; let isStart = false; let isFinal = false; + const isDisabled = this.get('_isButtonDisabled'); if (trickleConfig._onChildren) { const parentId = parentModel.get('_id'); const trickleParent = getModelContainer(parentModel); @@ -128,16 +129,22 @@ export default class TrickleButtonModel extends ComponentModel { isStart = (index === 0); isFinal = (index === trickleSiblings.length - 1 && !trickleParent.get('_canRequestChild')); } - const text = (isStart && trickleConfig._button.startText) ? + const text = (isDisabled && trickleConfig._button.disabledText) ? + trickleConfig._button.disabledText : + (isStart && trickleConfig._button.startText) ? trickleConfig._button.startText : (isFinal && trickleConfig._button.finalText) ? - trickleConfig._button.finalText : - trickleConfig._button.text; - const ariaLabel = (isStart && trickleConfig._button.startAriaLabel) ? + trickleConfig._button.finalText : + trickleConfig._button.text; + + const ariaLabel = (isDisabled && trickleConfig._button.disabledAriaLabel) ? + trickleConfig._button.disabledAriaLabel : + (isStart && trickleConfig._button.startAriaLabel) ? trickleConfig._button.startAriaLabel : (isFinal && trickleConfig._button.finalAriaLabel) ? - trickleConfig._button.finalAriaLabel : - trickleConfig._button.ariaLabel; + trickleConfig._button.finalAriaLabel : + trickleConfig._button.ariaLabel; + this.set({ buttonText: text, buttonAriaLabel: ariaLabel diff --git a/js/TrickleButtonView.js b/js/TrickleButtonView.js index 1022a95..97e39dc 100644 --- a/js/TrickleButtonView.js +++ b/js/TrickleButtonView.js @@ -32,8 +32,8 @@ class TrickleButtonView extends ComponentView { this.openPopupCount = 0; this.isAwaitingPopupClose = false; this.wasButtonClicked = false; - this.model.calculateButtonText(); this.calculateButtonState(); + this.model.calculateButtonText(); this.setupEventListeners(); this.render(); if (!this.model.isEnabled()) { @@ -131,6 +131,7 @@ class TrickleButtonView extends ComponentView { const isButtonLocked = (this.model.get('_isButtonVisible')) && isButtonDisabled; $button.toggleClass('is-locked', isButtonLocked); const $buttonText = this.$('.js-trickle-btn-text'); + this.model.calculateButtonText(); const text = this.model.get('buttonText'); const ariaLabel = this.model.get('buttonAriaLabel'); $buttonText.html(text); diff --git a/properties.schema b/properties.schema index b524a95..f900e33 100644 --- a/properties.schema +++ b/properties.schema @@ -215,6 +215,26 @@ "validators": [], "translatable": true }, + "disabledText": { + "type": "string", + "required": false, + "default": "", + "title": "Button Text when disabled", + "inputType": "Text", + "validators": [], + "translatable": true, + "help": "This text can be shown while the button is disabled" + }, + "disabledAriaLabel": { + "type": "string", + "required": false, + "default": "", + "title": "Button Aria Label when disabled", + "inputType": "Text", + "validators": [], + "translatable": true, + "help": "The aria label when 'Button Text when disabled' is set" + }, "startText": { "type": "string", "required": false, @@ -450,6 +470,26 @@ "validators": [], "translatable": true }, + "disabledText": { + "type": "string", + "required": false, + "default": "", + "title": "Button Text when disabled", + "inputType": "Text", + "validators": [], + "translatable": true, + "help": "This text can be shown while the button is disabled" + }, + "disabledAriaLabel": { + "type": "string", + "required": false, + "default": "Continue", + "title": "Button Aria Label when disabled", + "inputType": "Text", + "validators": [], + "translatable": true, + "help": "The aria label when 'Button Text when disabled' is set" + }, "startText": { "type": "string", "required": false, diff --git a/schema/article.schema.json b/schema/article.schema.json index 7c9c2d4..824c718 100644 --- a/schema/article.schema.json +++ b/schema/article.schema.json @@ -134,6 +134,24 @@ "translatable": true } }, + "disabledText": { + "type": "string", + "title": "Button text when disabled", + "default": "", + "description": "This text can be shown while the button is disabled", + "_adapt": { + "translatable": true + } + }, + "disabledAriaLabel": { + "type": "string", + "title": "Button ARIA label when disabled", + "default": "", + "description": "The aria label when 'Button text when disabled' is set", + "_adapt": { + "translatable": true + } + }, "startText": { "type": "string", "title": "First button text", diff --git a/schema/block.schema.json b/schema/block.schema.json index 00ae6bb..b1ec7c6 100644 --- a/schema/block.schema.json +++ b/schema/block.schema.json @@ -129,6 +129,24 @@ "translatable": true } }, + "disabledText": { + "type": "string", + "title": "Button text when disabled", + "default": "", + "description": "This text can be shown while the button is disabled", + "_adapt": { + "translatable": true + } + }, + "disabledAriaLabel": { + "type": "string", + "title": "Button ARIA label when disabled", + "default": "", + "description": "The aria label when 'Button text when disabled' is set", + "_adapt": { + "translatable": true + } + }, "startText": { "type": "string", "title": "First button text",