[frio] Add new asynchronous submission of modal form

- Add loading state for jot submit buttons

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'),

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'),

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(){

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>