[frio] Add loading animation on comment form submit

This commit is contained in:
Hypolite Petovan 2020-02-11 23:45:47 -05:00
parent 13a10b8f20
commit 95b09aaec4
4 changed files with 46 additions and 3 deletions

View file

@ -1404,6 +1404,7 @@ function photos_content(App $a)
'$comment' => DI::l10n()->t('Comment'), '$comment' => DI::l10n()->t('Comment'),
'$submit' => DI::l10n()->t('Submit'), '$submit' => DI::l10n()->t('Submit'),
'$preview' => DI::l10n()->t('Preview'), '$preview' => DI::l10n()->t('Preview'),
'$loading' => DI::l10n()->t('Loading...'),
'$sourceapp' => DI::l10n()->t($a->sourcename), '$sourceapp' => DI::l10n()->t($a->sourcename),
'$ww' => '', '$ww' => '',
'$rand_num' => Crypto::randomDigits(12) '$rand_num' => Crypto::randomDigits(12)

View file

@ -919,6 +919,7 @@ class Post
'$myphoto' => DI::baseUrl()->remove($a->contact['thumb']), '$myphoto' => DI::baseUrl()->remove($a->contact['thumb']),
'$comment' => DI::l10n()->t('Comment'), '$comment' => DI::l10n()->t('Comment'),
'$submit' => DI::l10n()->t('Submit'), '$submit' => DI::l10n()->t('Submit'),
'$loading' => DI::l10n()->t('Loading...'),
'$edbold' => DI::l10n()->t('Bold'), '$edbold' => DI::l10n()->t('Bold'),
'$editalic' => DI::l10n()->t('Italic'), '$editalic' => DI::l10n()->t('Italic'),
'$eduline' => DI::l10n()->t('Underline'), '$eduline' => DI::l10n()->t('Underline'),

View file

@ -94,6 +94,8 @@ $(document).ready(function(){
} }
} }
let $body = $('body');
// show bulk deletion button at network page if checkbox is checked // show bulk deletion button at network page if checkbox is checked
$("body").change("input.item-select", function(){ $("body").change("input.item-select", function(){
var checked = false; var checked = false;
@ -368,6 +370,45 @@ $(document).ready(function(){
showHideEventMap(this); 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) { function openClose(theID) {

View file

@ -4,7 +4,7 @@
{{else}} {{else}}
<div class="comment-wwedit-wrapper" id="comment-edit-wrapper-{{$id}}"> <div class="comment-wwedit-wrapper" id="comment-edit-wrapper-{{$id}}">
{{/if}} {{/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="type" value="{{$type}}" />
<input type="hidden" name="profile_uid" value="{{$profile_uid}}" /> <input type="hidden" name="profile_uid" value="{{$profile_uid}}" />
<input type="hidden" name="parent" value="{{$parent}}" /> <input type="hidden" name="parent" value="{{$parent}}" />
@ -55,9 +55,9 @@
<p class="comment-edit-submit-wrapper"> <p class="comment-edit-submit-wrapper">
{{if $preview}} {{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}} {{/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> </p>
<div class="comment-edit-end clear"></div> <div class="comment-edit-end clear"></div>