From d239db89a53df1d5b59fbec9ae6bf51389e55567 Mon Sep 17 00:00:00 2001 From: deltanetdan Date: Tue, 20 Oct 2020 18:25:47 +0100 Subject: [PATCH 1/3] Basic v5 changes --- README.md | 4 ++-- bower.json | 6 +++--- js/adapt-textEntry-audio.js | 3 ++- js/textEntryAudioView.js | 4 ++-- less/textEntry-audio.less | 23 ++++++++++++----------- templates/textEntry-audio.hbs | 10 +++++----- templates/textEntryAudioPopup.hbs | 8 ++++---- 7 files changed, 30 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 33de19a..482c4db 100644 --- a/README.md +++ b/README.md @@ -86,8 +86,8 @@ Several elements of **Text Entry** have been assigned a label using the [aria-la No known limitations. ---------------------------- -**Version number:** 4.2.1 -**Framework versions supported:** 4+ +**Version number:** 5.0.0 +**Framework versions supported:** 5+ **Author / maintainer:** DeltaNet with [contributors](https://github.com/deltanet/adapt-textEntry-audio/graphs/contributors) **Accessibility support:** yes **RTL support:** yes diff --git a/bower.json b/bower.json index 56918ea..e4ca3d5 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "adapt-textEntry-audio", - "version": "4.2.1", - "framework": ">=4", + "version": "5.0.0", + "framework": ">=5", "homepage": "https://github.com/deltanet/adapt-textEntry-audio", "issues": "https://github.com/deltanet/adapt-textEntry-audio/issues", "description": "A simple text entry component with optional audio", @@ -12,5 +12,5 @@ "adapt-plugin", "adapt-component" ], - "license": "GPLv3" + "license": "GPL-3.0" } diff --git a/js/adapt-textEntry-audio.js b/js/adapt-textEntry-audio.js index dadc13a..0c242fb 100644 --- a/js/adapt-textEntry-audio.js +++ b/js/adapt-textEntry-audio.js @@ -4,7 +4,8 @@ define([ ], function(Adapt, TextEntryAudioView) { return Adapt.register('textEntry-audio', { - view: TextEntryAudioView + view: TextEntryAudioView, + model: ComponentModel.extend({}) }); }); diff --git a/js/textEntryAudioView.js b/js/textEntryAudioView.js index b084539..0dc43a9 100644 --- a/js/textEntryAudioView.js +++ b/js/textEntryAudioView.js @@ -85,13 +85,13 @@ define([ model: this.model }); - Adapt.trigger('notify:popup', { + Adapt.notify.popup({ _view: this.popupView, _isCancellable: true, _showCloseButton: false, _closeOnBackdrop: true, _classes: 'textEntry-audio-popup' - }) + }); this.listenToOnce(Adapt, { 'popup:closed': this.onPopupClosed diff --git a/less/textEntry-audio.less b/less/textEntry-audio.less index 3c4c907..0f1cf8a 100644 --- a/less/textEntry-audio.less +++ b/less/textEntry-audio.less @@ -1,8 +1,9 @@ -.textEntry-audio-component { +.textentry-audio { .textEntry-audio-input { margin-left: auto; margin-right: auto; + padding: 0 0 @item-padding 0; } .textEntry-audio-item-textbox { @@ -16,17 +17,17 @@ } .textEntry-audio-counter { - color: @foreground-color; - background-color: @background-color; - padding: @component-padding; - font-weight: @font-weight-medium; + color: @item-color-inverted; + background-color: @item-color; + padding: @notify-body-margin; + font-weight: @font-weight-regular; } } .textEntry-audio-popup { .textEntry-popup-user-title { - margin-bottom: @component-padding; + margin-bottom: @notify-title-margin; text-align: left; font-weight: @font-weight-bold; .dir-rtl & { @@ -35,7 +36,7 @@ } .textEntry-popup-user-answer { - margin-bottom: @notify-padding; + margin-bottom: @notify-body-margin; text-align: left; .dir-rtl & { text-align: right; @@ -43,7 +44,7 @@ } .textEntry-popup-feedback-title { - margin-bottom: @component-padding; + margin-bottom: @notify-title-margin; text-align: left; font-weight: @font-weight-bold; .dir-rtl & { @@ -52,8 +53,8 @@ } .textEntry-popup-body { - padding-bottom: @notify-padding-bottom; - font-size: @body-text-font-size; + padding-bottom: @notify-body-margin; + font-size: @body-size; float: left; text-align: left; .dir-rtl & { @@ -64,7 +65,7 @@ overflow: hidden; @media (max-width: @device-width-medium) { - padding-bottom: (@notify-padding-bottom / 3); + padding-bottom: (@notify-body-margin / 3); } } } diff --git a/templates/textEntry-audio.hbs b/templates/textEntry-audio.hbs index b40bf6d..1ceaa79 100644 --- a/templates/textEntry-audio.hbs +++ b/templates/textEntry-audio.hbs @@ -1,6 +1,6 @@ -
+
{{> component this}} -
+
@@ -10,10 +10,10 @@
-
- +
+ {{#if _canShowFeedback}} - + {{/if}}
diff --git a/templates/textEntryAudioPopup.hbs b/templates/textEntryAudioPopup.hbs index 8902b05..cc9a696 100644 --- a/templates/textEntryAudioPopup.hbs +++ b/templates/textEntryAudioPopup.hbs @@ -1,7 +1,7 @@ -
+
{{#if _showUserAnswer}} {{#if _feedback.title}} -
+
{{{compile _feedback.title}}}
@@ -44,8 +44,8 @@ {{/if}} {{/if}}
-
-
From 3e8e50f0216e0433a1b9f10328d862d699d3909b Mon Sep 17 00:00:00 2001 From: Robert Peek <> Date: Tue, 17 Nov 2020 11:04:22 +0000 Subject: [PATCH 2/3] Defines ComponentModel --- js/adapt-textEntry-audio.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/adapt-textEntry-audio.js b/js/adapt-textEntry-audio.js index 0c242fb..2cc8829 100644 --- a/js/adapt-textEntry-audio.js +++ b/js/adapt-textEntry-audio.js @@ -1,7 +1,8 @@ define([ 'core/js/adapt', - './textEntryAudioView' -], function(Adapt, TextEntryAudioView) { + './textEntryAudioView', + 'core/js/models/componentModel' +], function(Adapt, TextEntryAudioView, ComponentModel) { return Adapt.register('textEntry-audio', { view: TextEntryAudioView, From 777fba13b18fd46bc7ab6ee00e4031f13a612ccd Mon Sep 17 00:00:00 2001 From: Robert Peek <> Date: Wed, 18 Nov 2020 18:33:41 +0000 Subject: [PATCH 3/3] Updates for v5 changes --- js/textEntryAudioView.js | 42 ++++++++++++++++--------------- less/textEntry-audio.less | 4 --- templates/textEntry-audio.hbs | 23 +++++++++++------ templates/textEntryAudioPopup.hbs | 8 +++--- 4 files changed, 41 insertions(+), 36 deletions(-) diff --git a/js/textEntryAudioView.js b/js/textEntryAudioView.js index 0dc43a9..bb741c1 100644 --- a/js/textEntryAudioView.js +++ b/js/textEntryAudioView.js @@ -7,9 +7,8 @@ define([ var TextEntryAudioView = ComponentView.extend({ events: { - 'click .buttons-action': 'onBtnClicked', - 'click .buttons-action-fullwidth': 'onBtnClicked', - 'click .buttons-feedback': 'openPopup', + 'click .js-btn-action': 'onBtnClicked', + 'click .js-btn-feedback': 'openPopup', 'keyup .textEntry-audio-item-textbox': 'onInputChanged' }, @@ -57,6 +56,8 @@ define([ $(event.currentTarget).attr('aria-label', this.model.get("_buttons")._reset.ariaLabel); this.model.set('_isSubmitted', true); + + this.$('.btn__feedback').removeClass('is-disabled'); } Adapt.offlineStorage.set(this.model.get('_id'), this.model.get("userAnswer")); @@ -67,7 +68,7 @@ define([ initFeedback: function() { if (this.model.get('_canShowFeedback')) { - this.$('.buttons-feedback').attr('disabled', false); + this.$('.btn__feedback').attr('disabled', false); this.openPopup(); } else { this.setCompletionStatus(); @@ -86,21 +87,21 @@ define([ }); Adapt.notify.popup({ - _view: this.popupView, - _isCancellable: true, - _showCloseButton: false, - _closeOnBackdrop: true, - _classes: 'textEntry-audio-popup' + _view: this.popupView, + _isCancellable: true, + _showCloseButton: false, + _closeOnBackdrop: true, + _classes: 'textEntry-audio-popup' }); this.listenToOnce(Adapt, { - 'popup:closed': this.onPopupClosed + 'popup:closed': this.onPopupClosed }); }, onPopupClosed: function() { - this._isPopupOpen = false; - this.setCompletionStatus(); + this._isPopupOpen = false; + this.setCompletionStatus(); }, restoreUserAnswers: function() { @@ -115,15 +116,12 @@ define([ this.model.set('_isSubmitted', true); if (this.model.get('_canShowFeedback')) { - this.$('.buttons-action').html(this.model.get("_buttons")._reset.buttonText); - this.$('.buttons-action').attr('aria-label', this.model.get("_buttons")._reset.ariaLabel); - - this.$('.buttons-feedback').attr('disabled', false); - } else { - 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.$('.btn__feedback').attr('disabled', false).removeClass('is-disabled'); } + this.$('.btn__action').html(this.model.get("_buttons")._reset.buttonText); + this.$('.btn__action').attr('aria-label', this.model.get("_buttons")._reset.ariaLabel).removeClass('is-disabled'); + this.updateCounter(); }, @@ -133,7 +131,9 @@ define([ this.$('.textEntry-audio-item-textbox').val(''); - this.$('.buttons-feedback').attr('disabled', true); + this.$('.btn__action').addClass('is-disabled'); + + this.$('.btn__feedback').attr('disabled', true).addClass('is-disabled'); this.updateCounter(); }, @@ -141,6 +141,8 @@ define([ onInputChanged: function(event) { if (event) event.preventDefault(); + this.$('.btn__action').removeClass('is-disabled'); + this.updateCounter(); }, diff --git a/less/textEntry-audio.less b/less/textEntry-audio.less index 0f1cf8a..1391020 100644 --- a/less/textEntry-audio.less +++ b/less/textEntry-audio.less @@ -63,9 +63,5 @@ } width: 100%; overflow: hidden; - - @media (max-width: @device-width-medium) { - padding-bottom: (@notify-body-margin / 3); - } } } diff --git a/templates/textEntry-audio.hbs b/templates/textEntry-audio.hbs index 1ceaa79..0ab90ad 100644 --- a/templates/textEntry-audio.hbs +++ b/templates/textEntry-audio.hbs @@ -8,14 +8,21 @@
{{/if}}
-
-
-
- - {{#if _canShowFeedback}} - - {{/if}} -
+ +
+
+ + + + {{#if _canShowFeedback}} + + {{/if}} +
+
diff --git a/templates/textEntryAudioPopup.hbs b/templates/textEntryAudioPopup.hbs index cc9a696..cd75f93 100644 --- a/templates/textEntryAudioPopup.hbs +++ b/templates/textEntryAudioPopup.hbs @@ -1,8 +1,8 @@
{{#if _showUserAnswer}} {{#if _feedback.title}} -
-
+
+
{{{compile _feedback.title}}}
@@ -29,8 +29,8 @@ {{/if}} {{else}} {{#if _feedback.answerTitle}} -
-
+
+
{{{compile _feedback.answerTitle}}}