[frio] Add new asynchronous submission of modal form

- Add loading state for jot submit buttons

diff --git a/include/conversation.php b/include/conversation.php
index 0194e4ea56368486ca46736fa782d07391778730..a5884847662d9b8ac2a6aa5310d4a7240a882f09 100644 (file)
--- a/include/conversation.php
+++ b/include/conversation.php
@@ -1214,6 +1214,7 @@ function status_editor(App $a, $x, $notes_cid = 0, $popup = false)
                '$return_path'  => $query_str,
                '$action'       => 'item',
                '$share'        => ($x['button'] ?? '') ?: DI::l10n()->t('Share'),
+               '$loading'      => DI::l10n()->t('Loading...'),
                '$upload'       => DI::l10n()->t('Upload photo'),
                '$shortupload'  => DI::l10n()->t('upload photo'),
                '$attach'       => DI::l10n()->t('Attach file'),

diff --git a/mod/editpost.php b/mod/editpost.php
index 2bbc2f2b61ed9ce5be8f31316262944bf558f8fc..ca5db3e08105b7372f14f85a37cfc860b8962f07 100644 (file)
--- a/mod/editpost.php
+++ b/mod/editpost.php
@@ -70,6 +70,7 @@ function editpost_content(App $a)
                '$return_path' => '/display/' . $item['guid'],
                '$action' => 'item',
                '$share' => DI::l10n()->t('Save'),
+               '$loading' => DI::l10n()->t('Loading...'),
                '$upload' => DI::l10n()->t('Upload photo'),
                '$shortupload' => DI::l10n()->t('upload photo'),
                '$attach' => DI::l10n()->t('Attach file'),

diff --git a/view/theme/frio/templates/jot-header.tpl b/view/theme/frio/templates/jot-header.tpl
index 9f226cda4997bba86e2e5334738e60bf463f2fb8..67b136ae16b205ae8388c71091e7ecec6a551a9d 100644 (file)
--- a/view/theme/frio/templates/jot-header.tpl
+++ b/view/theme/frio/templates/jot-header.tpl
@@ -67,11 +67,53 @@
                        jotTextOpenUI(document.getElementById("profile-jot-text"));
                        jotActive();
                        addeditortext(embedcode);
-               });
-               $('body').on('fbrowser.file.main', function(e, filename, embedcode, id) {
+               })
+               .on('fbrowser.file.main', function(e, filename, embedcode, id) {
                        jotTextOpenUI(document.getElementById("profile-jot-text"));
                        jotActive();
                        addeditortext(embedcode);
+               })
+               // Asynchronous jot submission
+               .on('submit', '#profile-jot-form', function (e) {
+                       e.preventDefault();
+
+                       // Disable jot submit buttons during processing
+                       let $share = $('#profile-jot-submit').button('loading');
+                       let $sharePreview = $('#profile-jot-preview-submit').button('loading');
+
+                       let formData = new FormData(e.target);
+                       // This cancels the automatic redirection after item submission
+                       formData.delete('return');
+
+                       $.ajax({
+                               url: 'item',
+                               data: formData,
+                               processData: false,
+                               contentType: false,
+                               type: 'POST',
+                       })
+                       .then(function () {
+                               // Reset to form for jot reuse in the same page
+                               e.target.reset();
+                               $('#jot-modal').modal('hide');
+                       })
+                       .always(function() {
+                               // Reset the post_id_random to avoid duplicate post errors
+                               let new_post_id_random = Math.floor(Math.random() * (Number.MAX_SAFE_INTEGER - (Number.MAX_SAFE_INTEGER / 10))) + Number.MAX_SAFE_INTEGER / 10;
+                               $('#profile-jot-form [name=post_id_random]').val(new_post_id_random);
+
+                               // Reset jot submit button state
+                               $share.button('reset');
+                               $sharePreview.button('reset');
+
+                               // Force the display update of the edited post/comment
+                               if (formData.get('post_id')) {
+                                       force_update = true;
+                                       update_item = formData.get('post_id');
+                               }
+
+                               NavUpdate();
+                       })
                });
 
                $('#wall-image-upload').on('click', function(){

diff --git a/view/theme/frio/templates/jot.tpl b/view/theme/frio/templates/jot.tpl
index d4a430eccfaaf76a14071106627b10763a23357a..fe756880fe3243e821d92534f669a98b89955de0 100644 (file)
--- a/view/theme/frio/templates/jot.tpl
+++ b/view/theme/frio/templates/jot.tpl
@@ -104,7 +104,11 @@
                                                <li><button type="button" class="btn-link" id="profile-nolocation" onclick="jotClearLocation();" title="{{$noloc}}">{{$shortnoloc}}</button></li>
                                                -->
 
-                                               <li role="presentation" class="pull-right"><button class="btn btn-primary" type="submit" id="profile-jot-submit" name="submit" ><i class="fa fa-paper-plane fa-fw" aria-hidden="true"></i> {{$share}}</button></li>
+                                               <li role="presentation" class="pull-right">
+                                                       <button class="btn btn-primary" type="submit" id="profile-jot-submit" name="submit" data-loading-text="{{$loading}}">
+                                                               <i class="fa fa-paper-plane fa-fw" aria-hidden="true"></i> {{$share}}
+                                                       </button>
+                                               </li>
                                                <li role="presentation" id="character-counter" class="grey jothidden text-info pull-right"></li>
                                                <li role="presentation" id="profile-rotator-wrapper" class="pull-right" style="display: {{$visitor}};" >
                                                        <img role="presentation" id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait}}" style="display: none;" />
@@ -124,7 +128,11 @@
 
                                <div id="jot-preview-share" class="minimize" aria-labelledby="jot-preview-lnk" role="tabpanel" aria-hidden="true">
                                        <ul id="profile-jot-preview-submit-wrapper" class="jothidden nav nav-pills">
-                                               <li role="presentation" class="pull-right"><button class="btn btn-primary" type="submit" id="profile-jot-peview-submit" name="submit" ><i class="fa fa-paper-plane fa-fw" aria-hidden="true"></i> {{$share}}</button></li>
+                                               <li role="presentation" class="pull-right">
+                                                       <button class="btn btn-primary" type="submit" id="profile-jot-preview-submit" name="submit" data-loading-text="{{$loading}}">
+                                                               <i class="fa fa-paper-plane fa-fw" aria-hidden="true"></i> {{$share}}
+                                                       </button>
+                                               </li>
                                        </ul>
                                </div>