From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Wed, 12 Feb 2020 04:45:47 +0000 (-0500)
Subject: [frio] Add loading animation on comment form submit
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=95b09aaec4949875eb784a6da443d0eaad99bc21;p=friendica.git

[frio] Add loading animation on comment form submit
---

diff --git a/mod/photos.php b/mod/photos.php
index c683cc086a..5e5917452c 100644
--- a/mod/photos.php
+++ b/mod/photos.php
@@ -1404,6 +1404,7 @@ function photos_content(App $a)
 						'$comment' => DI::l10n()->t('Comment'),
 						'$submit' => DI::l10n()->t('Submit'),
 						'$preview' => DI::l10n()->t('Preview'),
+						'$loading' => DI::l10n()->t('Loading...'),
 						'$sourceapp' => DI::l10n()->t($a->sourcename),
 						'$ww' => '',
 						'$rand_num' => Crypto::randomDigits(12)
diff --git a/src/Object/Post.php b/src/Object/Post.php
index f55dbde0d5..7b8f4b00d6 100644
--- a/src/Object/Post.php
+++ b/src/Object/Post.php
@@ -919,6 +919,7 @@ class Post
 				'$myphoto'     => DI::baseUrl()->remove($a->contact['thumb']),
 				'$comment'     => DI::l10n()->t('Comment'),
 				'$submit'      => DI::l10n()->t('Submit'),
+				'$loading'     => DI::l10n()->t('Loading...'),
 				'$edbold'      => DI::l10n()->t('Bold'),
 				'$editalic'    => DI::l10n()->t('Italic'),
 				'$eduline'     => DI::l10n()->t('Underline'),
diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js
index 29d043a6a4..2ea3aa6d2f 100644
--- a/view/theme/frio/js/theme.js
+++ b/view/theme/frio/js/theme.js
@@ -94,6 +94,8 @@ $(document).ready(function(){
 		}
 	}
 
+	let $body = $('body');
+
 	// show bulk deletion button at network page if checkbox is checked
 	$("body").change("input.item-select", function(){
 		var checked = false;
@@ -368,6 +370,45 @@ $(document).ready(function(){
 		showHideEventMap(this);
 	});
 
+	// Comment form submit
+	$body.on('submit', '.comment-edit-form', function(e) {
+		e.preventDefault();
+
+		let $form = $(this);
+		let id = $form.data('item-id');
+		let $commentSubmit = $form.find('.comment-edit-submit').button('loading');
+
+		unpause();
+		commentBusy = true;
+
+		$.post(
+			'item',
+			$form.serialize(),
+			'json'
+		)
+		.then(function(data) {
+			if (data.success) {
+				$('#comment-edit-wrapper-' + id).hide();
+				let $textarea = $('#comment-edit-text-' + id);
+				$textarea.val('');
+				if ($textarea.get(0)) {
+					commentClose($textarea.get(0), id);
+				}
+				if (timer) {
+					clearTimeout(timer);
+				}
+				timer = setTimeout(NavUpdate,10);
+				force_update = true;
+				update_item = id;
+			}
+			if (data.reload) {
+				window.location.href = data.reload;
+			}
+		})
+		.always(function() {
+			$commentSubmit.button('reset');
+		});
+	})
 });
 
 function openClose(theID) {
diff --git a/view/theme/frio/templates/comment_item.tpl b/view/theme/frio/templates/comment_item.tpl
index b60f5c429e..d4284d39b8 100644
--- a/view/theme/frio/templates/comment_item.tpl
+++ b/view/theme/frio/templates/comment_item.tpl
@@ -4,7 +4,7 @@
 {{else}}
 <div class="comment-wwedit-wrapper" id="comment-edit-wrapper-{{$id}}">
 {{/if}}
-	<form class="comment-edit-form" data-item-id="{{$id}}" id="comment-edit-form-{{$id}}" action="item" method="post" onsubmit="post_comment({{$id}}); return false;">
+	<form class="comment-edit-form" data-item-id="{{$id}}" id="comment-edit-form-{{$id}}" action="item" method="post">
 		<input type="hidden" name="type" value="{{$type}}" />
 		<input type="hidden" name="profile_uid" value="{{$profile_uid}}" />
 		<input type="hidden" name="parent" value="{{$parent}}" />
@@ -55,9 +55,9 @@
 
 		<p class="comment-edit-submit-wrapper">
 {{if $preview}}
-			<button type="button" class="btn btn-defaul btn-sm" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}"><i class="fa fa-eye"></i> {{$preview}}</button>
+			<button type="button" class="btn btn-defaul btn-sm comment-edit-preview" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}"><i class="fa fa-eye"></i> {{$preview}}</button>
 {{/if}}
-			<button type="submit" class="btn btn-primary btn-sm" id="comment-edit-submit-{{$id}}" name="submit"><i class="fa fa-envelope"></i> {{$submit}}</button>
+			<button type="submit" class="btn btn-primary btn-sm comment-edit-submit" id="comment-edit-submit-{{$id}}" name="submit" data-loading-text="{{$loading}}"><i class="fa fa-envelope"></i> {{$submit}}</button>
 		</p>
 
 		<div class="comment-edit-end clear"></div>