From fa65ba8c205c3977009540a5a3c777252559b2a9 Mon Sep 17 00:00:00 2001 From: Robert Peek Date: Fri, 28 Feb 2020 16:05:14 +0000 Subject: [PATCH] Fixes #18 --- README.md | 10 +++++++++- bower.json | 2 +- example.json | 5 +++++ js/textEntryAudioView.js | 28 +++++++++++++++++++++++++++- less/textEntry-audio.less | 7 +++++++ properties.schema | 34 ++++++++++++++++++++++++++++++++++ templates/textEntry-audio.hbs | 5 ++++- 7 files changed, 87 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b102769..eb9d18f 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,14 @@ The attributes listed below are used in *components.json* to configure **Text En **placeholder** (string): This text appears in the text entry box before the user interacts with it. +**_characterLimit** (object): This `_characterLimit` attributes group stores the properties for the maximum character length. It contains values for **_isEnabled**, **_max**, and **text**. + +>**_isEnabled** (boolean): Setting this to `true` will set the maximum character length specified. The default is `false`. + +>**_max** (number): This sets the character limit for the text entry box. + +>**text** (string): This defines the text to prefix the number of characters remaining. + **_buttons** (object): This `_buttons` attributes group stores the properties for the buttons. It contains values for **_submit**, **_reset**, **_showFeedback**, and **_closeFeedback**. >**_submit** (object): This `_submit` attributes group stores the properties for the Submit button. It contains values for **buttonText**, and **ariaLabel**. @@ -78,7 +86,7 @@ Several elements of **Text Entry** have been assigned a label using the [aria-la No known limitations. ---------------------------- -**Version number:** 4.1.1 +**Version number:** 4.2.0 **Framework versions supported:** 4+ **Author / maintainer:** DeltaNet with [contributors](https://github.com/deltanet/adapt-textEntry-audio/graphs/contributors) **Accessibility support:** yes diff --git a/bower.json b/bower.json index 2144416..fd05164 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "adapt-textEntry-audio", - "version": "4.1.1", + "version": "4.2.0", "framework": ">=4", "homepage": "https://github.com/deltanet/adapt-textEntry-audio", "issues": "https://github.com/deltanet/adapt-textEntry-audio/issues", diff --git a/example.json b/example.json index 8657dcb..d588541 100644 --- a/example.json +++ b/example.json @@ -14,6 +14,11 @@ "body":"Body text", "instruction":"Instruction text", "placeholder": "Enter your thoughts here", + "_characterLimit": { + "_isEnabled": true, + "_max": 255, + "text": "Characters remaining:" + }, "_buttons": { "_submit": { "buttonText": "Submit", diff --git a/js/textEntryAudioView.js b/js/textEntryAudioView.js index a5582c3..9586d8a 100644 --- a/js/textEntryAudioView.js +++ b/js/textEntryAudioView.js @@ -9,7 +9,8 @@ define([ events: { 'click .buttons-action': 'onBtnClicked', 'click .buttons-action-fullwidth': 'onBtnClicked', - 'click .buttons-feedback': 'openPopup' + 'click .buttons-feedback': 'openPopup', + 'keyup .textEntry-audio-item-textbox': 'onInputChanged' }, initialize: function() { @@ -29,6 +30,8 @@ define([ if (this.model.get('_setCompletionOn') === 'inview') { this.setupInviewCompletion(); } + + this.updateCounter(); }, onBtnClicked: function(event) { @@ -120,6 +123,8 @@ define([ this.$('.buttons-action-fullwidth').html(this.model.get("_buttons")._reset.buttonText); this.$('.buttons-action-fullwidth').attr('aria-label', this.model.get("_buttons")._reset.ariaLabel); } + + this.updateCounter(); }, resetUserAnswer: function() { @@ -129,6 +134,27 @@ define([ this.$('.textEntry-audio-item-textbox').val(''); this.$('.buttons-feedback').attr('disabled', true); + + this.updateCounter(); + }, + + onInputChanged: function(event) { + if (event) event.preventDefault(); + + this.updateCounter(); + }, + + updateCounter: function() { + if (!this.model.get('_characterLimit')._isEnabled) return; + + var length = this.$('.textEntry-audio-item-textbox').val().length; + + var max = this.model.get('_characterLimit')._max; + var text = this.model.get('_characterLimit').text; + + var output = text+" "+(max - length); + + this.$('.textEntry-audio-counter').html(output); }, isCorrect: function() { diff --git a/less/textEntry-audio.less b/less/textEntry-audio.less index 516eb3b..3c4c907 100644 --- a/less/textEntry-audio.less +++ b/less/textEntry-audio.less @@ -14,6 +14,13 @@ border: 1px solid @item-color; margin: 0; } + + .textEntry-audio-counter { + color: @foreground-color; + background-color: @background-color; + padding: @component-padding; + font-weight: @font-weight-medium; + } } .textEntry-audio-popup { diff --git a/properties.schema b/properties.schema index d7b6023..bb1498c 100644 --- a/properties.schema +++ b/properties.schema @@ -78,6 +78,40 @@ "validators": [], "translatable": true }, + "_characterLimit": { + "type": "object", + "title": "Character Limit", + "required": false, + "properties": { + "_isEnabled": { + "type": "boolean", + "required": false, + "default": false, + "title": "Is Enabled", + "inputType": "Checkbox", + "validators": [], + "help": "Controls whether there is a character limit." + }, + "_max": { + "type": "number", + "required": false, + "title": "Max Number", + "inputType": "Number", + "default": 255, + "validators": ["number"], + "help": "This sets the maximum character limit. If 'Record interaction' is enabled the maximum should be 255 to be SCORM 1.2 compliant." + }, + "text": { + "type": "string", + "required": false, + "default": "", + "title": "Prefix Text", + "inputType": "Text", + "validators": [], + "translatable": true + } + } + }, "_buttons": { "type":"object", "title": "Buttons", diff --git a/templates/textEntry-audio.hbs b/templates/textEntry-audio.hbs index 94a920f..b40bf6d 100644 --- a/templates/textEntry-audio.hbs +++ b/templates/textEntry-audio.hbs @@ -2,8 +2,11 @@ {{> component this}}
- +
+ {{#if _characterLimit._isEnabled}} +
+ {{/if}}