Skip to content

Commit

Permalink
New: Add option for disabled button text (fixes #207)
Browse files Browse the repository at this point in the history
  • Loading branch information
@swashbuck
swashbuck committed Mar 18, 2024
1 parent 8845833 commit 6512957
Show file tree
Hide file tree
Showing 7 changed files with 97 additions and 7 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Expand Up @@ -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 `""`.
Expand Down
2 changes: 2 additions & 0 deletions example.json
View file
Expand Up @@ -26,6 +26,8 @@
"_hasIcon": false,
"text": "Continue",
"ariaLabel": "",
"disabledText": "",
"disabledAriaLabel": "",
"startText": "Begin",
"startAriaLabel": "",
"finalText": "Finish",
Expand Down
19 changes: 13 additions & 6 deletions js/TrickleButtonModel.js
View file
Expand Up @@ -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);
Expand All @@ -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
Expand Down
3 changes: 2 additions & 1 deletion js/TrickleButtonView.js
View file
Expand Up @@ -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()) {
Expand Down Expand Up @@ -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);
Expand Down
40 changes: 40 additions & 0 deletions properties.schema
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
18 changes: 18 additions & 0 deletions schema/article.schema.json
View file
Expand Up @@ -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",
Expand Down
18 changes: 18 additions & 0 deletions schema/block.schema.json
View file
Expand Up @@ -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",
Expand Down

0 comments on commit 6512957

Please sign in to comment.