Grab correct data from API response

binarykitchen · Dec 21, 2024 · c42419e · c42419e
1 parent ab1e48e
commit c42419e
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 17 deletions.
diff --git a/src/js/main.js b/src/js/main.js
@@ -98,6 +98,7 @@ const VideomailFieldController = Marionette.Object.extend({
         quality: imageQualityPercentage / 100, // must be a float
       },
       selectors: {
+        containerId: "videomail",
         submitButtonSelector: ".submit-wrap input",
       },
       callbacks: {
@@ -136,7 +137,7 @@ const VideomailFieldController = Marionette.Object.extend({
       .request("remove:error", this.fieldModel.get("id"), "required-error");
   },
 
-  onSubmitted: function (videomail) {
+  onSubmitted: function (result) {
     let formModel = Backbone.Radio.channel("app").request("get:form", this.getFormId());
 
     if (!formModel) {
@@ -148,7 +149,7 @@ const VideomailFieldController = Marionette.Object.extend({
     Backbone.Radio.channel("form-" + formModel.get("id")).request(
       "add:extra",
       "videomail",
-      videomail,
+      result.videomail,
     );
 
     // restart submission again, this time to the real wp site
@@ -171,7 +172,7 @@ const VideomailFieldController = Marionette.Object.extend({
   },
 
   invalidate: function () {
-    // override default behaviour so that we can set our own error text here
+    // override default behavior so that we can set our own error text here
     Backbone.Radio.channel("fields").request(
       "add:error",
       this.fieldModel.get("id"),
@@ -254,21 +255,23 @@ const VideomailFieldController = Marionette.Object.extend({
       collection = this.fieldModel.collection.options.formModel.get("fields").models;
     }
 
-    return collection.reduce(function (memo, field) {
+    const formValues = collection.reduce(function (memo, field) {
       memo[field.get("key")] = field.get("value");
       return memo;
     }, {});
+
+    return formValues;
   },
 
-  adjustFormDataBeforePostingToVideomailServer: function (videomail, cb) {
+  adjustFormDataBeforePostingToVideomailServer: function (videomail) {
     const formValues = this.getFormValues();
 
     videomail.from = this.getMergeTagValue("email_from", formValues);
     videomail.to = this.getMergeTagValue("email_to", formValues);
     videomail.subject = this.getMergeTagValue("email_subject", formValues);
     videomail.body = this.getMergeTagValue("email_body", formValues);
 
-    cb(null, videomail);
+    return videomail;
   },
 
   onBeforeDestroy: function () {

diff --git a/src/php/templates/fields-videomail.html b/src/php/templates/fields-videomail.html
@@ -1,14 +1,14 @@
 <script id="tmpl-nf-field-videomail" type="text/template">
   <div id='nf-field-{{{ data.id }}}' name='nf-field-{{{ data.id }}}' class='{{{ data.classes }}} nf-element videomail'>
-    <form id='videomail'>
-      <div class='buttons' style='display:none'>
+    <div id='videomail'>
+      <section class='buttons' style='display:none'>
         <input class='record' disabled='' type='button' title='Record video' value='Record' />
         <input class='pause' disabled='' type='button' title='Pause recording' value='Pause' />
         <input class='resume' disabled='' type='button' title='Resume recording' value='Resume' />
         <input class='preview' disabled='' type='button' title='Stop recording and check video' value='Stop' />
         <input class='recordAgain' disabled='' type='button' title='Record video again' value='Record again' />
-      </div>
-    </form>
+      </section>
+    </div>
     <div id='viewVideo' style='display:none'>
       <video class='replay' />
       <button id='startOver'>Start over</button>

diff --git a/src/styl/main.styl b/src/styl/main.styl
@@ -49,6 +49,13 @@ border-radius = 2px
           input[type=button]
             margin-top 5px
             margin-right 0.5em
+            padding 0.6em
+            cursor pointer
 
             &:focus
               outline 0
+
+            &:disabled
+              cursor not-allowed
+              transition none
+              opacity 0.5
diff --git a/target/css/main.min.css b/target/css/main.min.css
diff --git a/target/js/main.min.js b/target/js/main.min.js
diff --git a/target/php/templates/fields-videomail.html b/target/php/templates/fields-videomail.html
@@ -1,14 +1,14 @@
 <script id="tmpl-nf-field-videomail" type="text/template">
   <div id='nf-field-{{{ data.id }}}' name='nf-field-{{{ data.id }}}' class='{{{ data.classes }}} nf-element videomail'>
-    <form id='videomail'>
-      <div class='buttons' style='display:none'>
+    <div id='videomail'>
+      <section class='buttons' style='display:none'>
         <input class='record' disabled='' type='button' title='Record video' value='Record' />
         <input class='pause' disabled='' type='button' title='Pause recording' value='Pause' />
         <input class='resume' disabled='' type='button' title='Resume recording' value='Resume' />
         <input class='preview' disabled='' type='button' title='Stop recording and check video' value='Stop' />
         <input class='recordAgain' disabled='' type='button' title='Record video again' value='Record again' />
-      </div>
-    </form>
+      </section>
+    </div>
     <div id='viewVideo' style='display:none'>
       <video class='replay' />
       <button id='startOver'>Start over</button>