add progress bar to comments
parent
2d9580c30c
commit
c6dcb2e93d
|
|
@ -126,7 +126,13 @@ function post_reply(id){
|
|||
catch(e) {}
|
||||
|
||||
const xhr = createXhrWithFormKey("/reply", "POST", form);
|
||||
|
||||
const upload_prog = document.getElementById(`upload-prog-c_${id}`);
|
||||
xhr[0].upload.onprogress = (e) => {handleUploadProgress(e, upload_prog)};
|
||||
|
||||
xhr[0].onload=function(){
|
||||
upload_prog.classList.add("d-none")
|
||||
|
||||
let data
|
||||
try {data = JSON.parse(xhr[0].response)}
|
||||
catch(e) {console.log(e)}
|
||||
|
|
@ -178,7 +184,13 @@ function comment_edit(id){
|
|||
}
|
||||
catch(e) {}
|
||||
const xhr = createXhrWithFormKey("/edit_comment/"+id, "POST", form);
|
||||
|
||||
const upload_prog = document.getElementById(`upload-prog-edit-c_${id}`);
|
||||
xhr[0].upload.onprogress = (e) => {handleUploadProgress(e, upload_prog)};
|
||||
|
||||
xhr[0].onload=function(){
|
||||
upload_prog.classList.add("d-none")
|
||||
|
||||
let data
|
||||
try {data = JSON.parse(xhr[0].response)}
|
||||
catch(e) {console.log(e)}
|
||||
|
|
@ -230,8 +242,14 @@ function post_comment(fullname, hide){
|
|||
const xhr = new XMLHttpRequest();
|
||||
url = '/comment';
|
||||
xhr.open("POST", url);
|
||||
|
||||
const upload_prog = document.getElementById(`upload-prog-${fullname}`);
|
||||
xhr.upload.onprogress = (e) => {handleUploadProgress(e, upload_prog)};
|
||||
|
||||
xhr.setRequestHeader('xhr', 'xhr');
|
||||
xhr.onload=function(){
|
||||
upload_prog.classList.add("d-none")
|
||||
|
||||
let data
|
||||
try {data = JSON.parse(xhr.response)}
|
||||
catch(e) {console.log(e)}
|
||||
|
|
|
|||
|
|
@ -574,3 +574,15 @@ function cancel_files(element) {
|
|||
|
||||
if (typeof checkForRequired === "function") checkForRequired();
|
||||
}
|
||||
|
||||
function handleUploadProgress(e, upload_prog) {
|
||||
const bar = upload_prog.firstElementChild;
|
||||
const percentIndicator = upload_prog.lastElementChild;
|
||||
|
||||
upload_prog.classList.remove("d-none")
|
||||
if (e.lengthComputable) {
|
||||
const progressPercent = Math.floor((e.loaded / e.total) * 100);
|
||||
bar.value = progressPercent;
|
||||
percentIndicator.textContent = progressPercent + '%';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -173,19 +173,6 @@ document.addEventListener('keydown', (e) => {
|
|||
|
||||
checkRepost();
|
||||
|
||||
const uploadfilelist = document.getElementById('upload-filelist');
|
||||
const bar = document.getElementById('file-progress');
|
||||
const percentIndicator = document.getElementById('progress-percent');
|
||||
|
||||
function handleUploadProgress(evt) {
|
||||
uploadfilelist.classList.remove("d-none")
|
||||
if (evt.lengthComputable) {
|
||||
const progressPercent = Math.floor((evt.loaded / evt.total) * 100);
|
||||
bar.value = progressPercent;
|
||||
percentIndicator.textContent = progressPercent + '%';
|
||||
}
|
||||
}
|
||||
|
||||
function submit(form) {
|
||||
submitButton.disabled = true;
|
||||
|
||||
|
|
@ -198,11 +185,15 @@ function submit(form) {
|
|||
actionPath = form.getAttribute("action");
|
||||
|
||||
xhr.open("POST", actionPath);
|
||||
xhr.upload.onprogress = handleUploadProgress;
|
||||
|
||||
const upload_prog = document.getElementById('upload-prog');
|
||||
xhr.upload.onprogress = (e) => {handleUploadProgress(e, upload_prog)};
|
||||
|
||||
xhr.setRequestHeader('xhr', 'xhr');
|
||||
|
||||
xhr.onload = function() {
|
||||
uploadfilelist.classList.add("d-none")
|
||||
upload_prog.classList.add("d-none")
|
||||
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
const post_id = JSON.parse(xhr.response)['post_id'];
|
||||
|
||||
|
|
|
|||
|
|
@ -259,21 +259,29 @@
|
|||
{% if v and v.id==c.author_id %}
|
||||
|
||||
<div id="comment-edit-{{c.id}}" class="d-none comment-write collapsed child">
|
||||
<input hidden name="formkey" value="{{v|formkey}}">
|
||||
<textarea autocomplete="off" {% if v.longpost %}minlength="280"{% endif %} maxlength="{% if v.bird %}140{% else %}10000{% endif %}" data-preview="preview-edit-{{c.id}}" data-nonce="{{g.nonce}}" data-oninput="markdown(this);charLimit('comment-edit-body-{{c.id}}','charcount-edit-{{c.id}}')" id="comment-edit-body-{{c.id}}" data-id="{{c.id}}" name="body" form="comment-edit-form-{{c.id}}" class="file-ta comment-box form-control rounded" placeholder="Add your comment..." rows="3">{{c.body}}</textarea>
|
||||
<input hidden name="formkey" value="{{v|formkey}}">
|
||||
<textarea autocomplete="off" {% if v.longpost %}minlength="280"{% endif %} maxlength="{% if v.bird %}140{% else %}10000{% endif %}" data-preview="preview-edit-{{c.id}}" data-nonce="{{g.nonce}}" data-oninput="markdown(this);charLimit('comment-edit-body-{{c.id}}','charcount-edit-{{c.id}}')" id="comment-edit-body-{{c.id}}" data-id="{{c.id}}" name="body" form="comment-edit-form-{{c.id}}" class="file-ta comment-box form-control rounded" placeholder="Add your comment..." rows="3">{{c.body}}</textarea>
|
||||
|
||||
<div class="text-small font-weight-bold mt-1" id="charcount-edit-{{c.id}}" style="right: 1rem; bottom: 0.5rem; z-index: 3;"></div>
|
||||
<div class="text-small font-weight-bold mt-1" id="charcount-edit-{{c.id}}" style="right: 1rem; bottom: 0.5rem; z-index: 3;"></div>
|
||||
|
||||
<div class="comment-format">
|
||||
<small class="btn btn-secondary format m-0" data-nonce="{{g.nonce}}" data-onclick="getGifs('comment-edit-body-{{c.id}}')" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF"><span class="font-weight-bolder text-uppercase">GIF</span></small>
|
||||
<div class="comment-format">
|
||||
<small class="btn btn-secondary format m-0" data-nonce="{{g.nonce}}" data-onclick="getGifs('comment-edit-body-{{c.id}}')" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF"><span class="font-weight-bolder text-uppercase">GIF</span></small>
|
||||
|
||||
<small class="btn btn-secondary format m-0 ml-2" data-nonce="{{g.nonce}}" data-onclick="loadEmojis('comment-edit-body-{{c.id}}')" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></small>
|
||||
<small class="btn btn-secondary format m-0 ml-2" data-nonce="{{g.nonce}}" data-onclick="loadEmojis('comment-edit-body-{{c.id}}')" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></small>
|
||||
|
||||
{{macros.file_input('file-edit-reply-' ~ c.id, False)}}
|
||||
</div>
|
||||
<a class="text-small mt-3 d-inline-block" href="/formatting" {% if v and v.newtab %}data-target="t" target="_blank"{% endif %}>Formatting help</a>
|
||||
|
||||
<button type="button" id="edit-btn-{{c.id}}" form="comment-edit-form-{{c.id}}" class="btn btn-primary ml-2 fl-r commentmob" data-nonce="{{g.nonce}}" data-onclick="comment_edit('{{c.id}}');remove_dialog()">Save Edit</button>
|
||||
|
||||
<button type="button" id="cancel-edit-{{c.id}}" data-nonce="{{g.nonce}}" data-onclick="toggleEdit('{{c.id}}');remove_dialog()" class="btn btn-link text-muted ml-auto fl-r commentmob">Cancel</button>
|
||||
|
||||
<span id="upload-prog-edit-{{c.fullname}}" class="d-none mt-1 mr-2 fl-r">
|
||||
<progress max="100"></progress>
|
||||
<span></span>
|
||||
</span>
|
||||
|
||||
{{macros.file_input('file-edit-reply-' ~ c.id, False)}}
|
||||
</div>
|
||||
<a class="text-small mt-3 d-inline-block" href="/formatting" {% if v and v.newtab %}data-target="t" target="_blank"{% endif %}>Formatting help</a>
|
||||
<button type="button" id="edit-btn-{{c.id}}" form="comment-edit-form-{{c.id}}" class="btn btn-primary ml-2 fl-r commentmob" data-nonce="{{g.nonce}}" data-onclick="comment_edit('{{c.id}}');remove_dialog()">Save Edit</button>
|
||||
<button type="button" id="cancel-edit-{{c.id}}" data-nonce="{{g.nonce}}" data-onclick="toggleEdit('{{c.id}}');remove_dialog()" class="btn btn-link text-muted ml-auto fl-r commentmob">Cancel</button>
|
||||
<div id="preview-edit-{{c.id}}" class="preview mb-3 mt-5"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -536,8 +544,16 @@
|
|||
{{macros.file_input('file-upload-reply-' ~ c.fullname, True)}}
|
||||
</div>
|
||||
|
||||
<button type="button" data-nonce="{{g.nonce}}" data-onclick="remove_dialog()" class="btn btn-link text-muted ml-auto" data-toggleelement="reply-message-{{c.fullname}}" data-toggleattr="d-none">Cancel</button>
|
||||
<button type="button" id="save-reply-to-{{c.id}}" class="btn btn-primary ml-2" data-nonce="{{g.nonce}}" data-onclick="post_reply('{{c.id}}');remove_dialog()">Reply</button>
|
||||
<div class="ml-auto">
|
||||
<span id="upload-prog-{{c.fullname}}" class="d-none mt-1 mr-2">
|
||||
<progress max="100"></progress>
|
||||
<span></span>
|
||||
</span>
|
||||
|
||||
<button type="button" data-nonce="{{g.nonce}}" data-onclick="remove_dialog()" class="btn btn-link text-muted ml-auto" data-toggleelement="reply-message-{{c.fullname}}" data-toggleattr="d-none">Cancel</button>
|
||||
|
||||
<button type="button" id="save-reply-to-{{c.id}}" class="btn btn-primary ml-2" data-nonce="{{g.nonce}}" data-onclick="post_reply('{{c.id}}');remove_dialog()">Reply</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="message-reply-{{c.id}}" class="preview mt-2"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
<label class='mt-4' for="title">Post Title</label>
|
||||
<input autocomplete="off" class="form-control allow-emojis" id="post-title" type="text" name="title" placeholder="Required" value="{{title}}" minlength="1" maxlength="500" required data-nonce="{{g.nonce}}" data-oninput="checkForRequired();savetext()">
|
||||
<button type="button" data-nonce="{{g.nonce}}" data-onclick="loadEmojis('post-title')" class="btn btn-secondary format d-inline-block m-0 ml-2" id="emoji-reply-btn-2" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></button>
|
||||
<button type="button" data-nonce="{{g.nonce}}" data-onclick="loadEmojis('post-title')" class="btn btn-secondary format d-inline-block m-0" id="emoji-reply-btn-2" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></button>
|
||||
<div id="urlblock">
|
||||
<label for="URL" class="mt-3">URL</label>
|
||||
<input autocomplete="off" class="form-control" id="post-url" name="url" type="url" placeholder="Optional if you have text." value="{{request.values.get('url','')}}" required data-nonce="{{g.nonce}}" data-oninput="checkForRequired();hide_image();savetext();checkRepost();autoSuggestTitle()">
|
||||
|
|
@ -97,9 +97,9 @@
|
|||
<a href="/" class="btn btn-secondary">Cancel</a>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<span id="upload-filelist" class="d-none mr-2">
|
||||
<progress id="file-progress" max="100"></progress>
|
||||
<span id="progress-percent"></span>
|
||||
<span id="upload-prog" class="d-none mr-2">
|
||||
<progress max="100"></progress>
|
||||
<span></span>
|
||||
</span>
|
||||
<button type="submit" class="btn btn-primary" id="create_button" type="submit">Post</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -141,9 +141,16 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
<button type="button" id="save-reply-to-{{target_fullname}}" form="reply-to-{{target_fullname}}" class="btn btn-primary text-whitebtn ml-auto fl-r" data-nonce="{{g.nonce}}" data-onclick="post_comment('{{target_fullname}}', '{{hide}}');remove_dialog();">Comment</button>
|
||||
|
||||
{% if enable_cancel_button %}
|
||||
<button type="button" data-nonce="{{g.nonce}}" data-onclick="remove_dialog()" data-toggleelement="reply-to-{{target_fullname}}" data-toggleattr="d-none" class="btn btn-link text-muted ml-auto fl-r mr-3">Cancel</button>
|
||||
{% endif %}
|
||||
|
||||
<span id="upload-prog-{{target_fullname}}" class="d-none mt-1 mr-2 fl-r">
|
||||
<progress max="100"></progress>
|
||||
<span></span>
|
||||
</span>
|
||||
|
||||
<div id="form-preview-{{target_fullname}}" class="preview mb-3 mt-5"></div>
|
||||
<div class="form-text text-small p-0 m-0"><a href="/formatting" {% if v and v.newtab %}data-target="t" target="_blank"{% endif %}>Formatting help</a></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue