Merge branch 'FW-v5'

deltanet · Aug 6, 2021 · 821327e · 821327e
2 parents edb3e8f + 933ce3e
commit 821327e
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -80,8 +80,8 @@ Several elements of **Text Entry** have been assigned a label using the [aria-la
 No known limitations.  
 
 ----------------------------
-**Version number:**  4.3.0     
-**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
@@ -1,7 +1,7 @@
 {
   "name": "adapt-textEntry-audio",
-  "version": "4.3.0",
-  "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 text entry component to capture user text",
@@ -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
@@ -1,10 +1,12 @@
 define([
     'core/js/adapt',
-    './textEntryAudioView'
-], function(Adapt, TextEntryAudioView) {
+    './textEntryAudioView',
+    'core/js/models/componentModel'
+], function(Adapt, TextEntryAudioView, ComponentModel) {
 
     return Adapt.register('textEntry-audio', {
-        view: TextEntryAudioView
+        view: TextEntryAudioView,
+        model: ComponentModel.extend({})
     });
 
 });
diff --git 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'
         },
 
@@ -39,17 +38,27 @@ define([
 
           if (this.$('.textEntry-audio-item-textbox').val() == "") return;
 
-          this.userAnswer = this.$('.textEntry-audio-item-textbox').val();
-          this.model.set("userAnswer", this.userAnswer);
+          if (this.model.get('_isSubmitted')) {
 
-          this.initFeedback();
+            $(event.currentTarget).html(this.model.get("_buttons")._submit.buttonText);
+            $(event.currentTarget).attr('aria-label', this.model.get("_buttons")._submit.ariaLabel);
 
-          this.model.set('_isSubmitted', true);
+            this.resetUserAnswer();
 
-          this.$('.buttons-action').addClass('disabled').attr('disabled', true);
-          this.$('.buttons-action-fullwidth').addClass('disabled').attr('disabled', true);
+          } else {
 
-          this.$('.textEntry-audio-item-textbox').attr('disabled', true);
+            this.userAnswer = this.$('.textEntry-audio-item-textbox').val();
+            this.model.set("userAnswer", this.userAnswer);
+
+            this.initFeedback();
+
+            $(event.currentTarget).html(this.model.get("_buttons")._reset.buttonText);
+            $(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"));
 
@@ -59,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();
@@ -77,22 +86,22 @@ define([
               model: this.model
           });
 
-          Adapt.trigger('notify:popup', {
-              _view: this.popupView,
-              _isCancellable: true,
-              _showCloseButton: false,
-              _closeOnBackdrop: true,
-              _classes: 'textEntry-audio-popup'
-          })
+          Adapt.notify.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() {
@@ -106,21 +115,34 @@ define([
 
             this.model.set('_isSubmitted', true);
 
-            this.$('.buttons-action').addClass('disabled').attr('disabled', true);
-            this.$('.buttons-action-fullwidth').addClass('disabled').attr('disabled', true);
-
-            this.$('.textEntry-audio-item-textbox').attr('disabled', true);
-
             if (this.model.get('_canShowFeedback')) {
-              this.$('.buttons-feedback').attr('disabled', false);
+              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();
         },
 
+        resetUserAnswer: function() {
+          this.model.set('_isSubmitted', false);
+          this.model.set('userAnswer', '');
+
+          this.$('.textEntry-audio-item-textbox').val('');
+
+          this.$('.btn__action').addClass('is-disabled');
+
+          this.$('.btn__feedback').attr('disabled', true).addClass('is-disabled');
+
+          this.updateCounter();
+        },
+
         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
@@ -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,15 +36,15 @@
   }
 
   .textEntry-popup-user-answer {
-    margin-bottom: @notify-padding;
+    margin-bottom: @notify-body-margin;
     text-align: left;
     .dir-rtl & {
       text-align: right;
     }
   }
 
   .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 & {
@@ -62,9 +63,5 @@
     }
     width: 100%;
     overflow: hidden;
-
-    @media (max-width: @device-width-medium) {
-      padding-bottom: (@notify-padding-bottom / 3);
-    }
   }
 }
diff --git a/templates/textEntry-audio.hbs b/templates/textEntry-audio.hbs
@@ -1,25 +1,28 @@
-<div class="textEntry-audio-inner component-inner">
+<div class="textEntry-audio-inner component__inner">
   {{> component this}}
-  <div class="textEntry-audio-widget component-widget">
+  <div class="textEntry-audio-widget component__widget">
   	<div class="textEntry-audio-input">
       <textarea placeholder="{{compile placeholder}}" class="textEntry-audio-item-textbox" cols="2" rows="10"{{#if _characterLimit._isEnabled}} maxlength={{_characterLimit._max}}{{/if}}></textarea>
   	</div>
     {{#if _characterLimit._isEnabled}}
       <div class="textEntry-audio-counter"></div>
     {{/if}}
   </div>
-  <div class="buttons">
-    <div class="buttons-inner">
-      <div class="buttons-cluster clearfix">
-        <button class="{{#if _canShowFeedback}}buttons-action{{else}}buttons-action-fullwidth{{/if}}" aria-label="{{_buttons._submit.ariaLabel}}">
-          {{_buttons._submit.buttonText}}
-        </button>
-        {{#if _canShowFeedback}}
-        <button class="buttons-feedback" aria-label="{{_buttons._showFeedback.ariaLabel}}" disabled="true">
-          {{_buttons._showFeedback.buttonText}}
-        </button>
-        {{/if}}
-      </div>
+
+  <div class="btn__container">
+    <div class="btn__response-container">
+
+      <button class="btn-text btn__action{{#if _canShowFeedback}}{{else}} is-fullwidth{{/if}} is-disabled js-btn-action" aria-label="{{_buttons._submit.ariaLabel}} disabled="true"">
+        {{_buttons._submit.buttonText}}
+      </button>
+
+      {{#if _canShowFeedback}}
+      <button class="btn-text btn__feedback is-disabled js-btn-feedback" aria-label="{{_buttons._showFeedback.ariaLabel}}" disabled="true">
+        {{_buttons._showFeedback.buttonText}}
+      </button>
+      {{/if}}
+
     </div>
   </div>
+
 </div>
diff --git a/templates/textEntryAudioPopup.hbs b/templates/textEntryAudioPopup.hbs
@@ -1,8 +1,8 @@
-<div class="textEntry-audio-popup-inner clearfix">
+<div class="textEntry-audio-popup-inner u-clearfix">
 {{#if _showUserAnswer}}
   {{#if _feedback.title}}
-  <div id="notify-heading" class="notify-popup-title">
-    <div class="textEntry-popup-title-inner h5" role="heading" aria-level="1">
+  <div id="notify-heading" class="notify__title"{{a11y_attrs_heading 'notify'}}>
+    <div class="notify__title-inner">
       {{{compile _feedback.title}}}
     </div>
   </div>
@@ -29,8 +29,8 @@
   {{/if}}
 {{else}}
   {{#if _feedback.answerTitle}}
-  <div id="notify-heading" class="notify-popup-title">
-    <div class="textEntry-popup-title-inner h5" role="heading" aria-level="1">
+  <div id="notify-heading" class="notify__title" {{a11y_attrs_heading 'notify'}}>
+    <div class="notify__title-inner">
       {{{compile _feedback.answerTitle}}}
     </div>
   </div>
@@ -44,8 +44,8 @@
   {{/if}}
 {{/if}}
 </div>
-<div class="notify-popup-buttons">
-  <button class="notify-popup-button textEntry-close-button" aria-label="{{#if _buttons._closeFeedback.ariaLabel}}{{_buttons._closeFeedback.ariaLabel}}{{else}}{{_globals._accessibility._ariaLabels.closePopup}}{{/if}}">
+<div class="notify__btn-container">
+  <button class="btn-text notify__btn textEntry-close-button" aria-label="{{#if _buttons._closeFeedback.ariaLabel}}{{_buttons._closeFeedback.ariaLabel}}{{else}}{{_globals._accessibility._ariaLabels.closePopup}}{{/if}}">
     {{#if _buttons._closeFeedback.buttonText}}{{{_buttons._closeFeedback.buttonText}}}{{else}}{{{_globals._accessibility._ariaLabels.closePopup}}}{{/if}}
   </button>
 </div>