mirror of
https://github.com/rikkaneko/paste.git
synced 2025-06-06 16:45:41 +00:00
Add paste info cache to local storage (web)
Signed-off-by: Joe Ma <rikkaneko23@gmail.com>
This commit is contained in:
Joe Ma
parent
77060d5f20
commit
7a69c30b5f
2 changed files with 56 additions and 25 deletions
|
|
@ -38,9 +38,12 @@ let paste_modal = {
|
|||
expired: null,
|
||||
id_copy_btn: null,
|
||||
id_copy_btn_icon: null,
|
||||
forget_btn: null,
|
||||
};
|
||||
|
||||
let saved_modal = null;
|
||||
let cached_paste_info = null;
|
||||
let show_saved_btn = null;
|
||||
let show_qrcode = true;
|
||||
|
||||
function validate_url(path) {
|
||||
let url;
|
||||
|
|
@ -74,21 +77,9 @@ function remove_pop_alert() {
|
|||
}
|
||||
|
||||
function build_paste_modal(paste_info, show_qrcode = true, saved = true, build_only = false) {
|
||||
// Show saved modal
|
||||
if (!!!paste_info && !!!saved_modal) {
|
||||
console.err('Invalid call to build_paste_modal().');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!!!paste_info) {
|
||||
saved_modal.show();
|
||||
return;
|
||||
}
|
||||
|
||||
let tooltip = bootstrap.Tooltip.getInstance(paste_modal.id_copy_btn);
|
||||
|
||||
paste_modal.uuid.text(paste_info.link);
|
||||
paste_modal.uuid.prop('href', paste_info.link);
|
||||
paste_modal.uuid.text(paste_info.link.replace(/^https?:\/\//, ''));
|
||||
paste_modal.qrcode.prop('src', paste_info.link_qr);
|
||||
paste_modal.qrcode.prop('alt', paste_info.link);
|
||||
paste_modal.id_copy_btn_icon.addClass('bi-clipboard');
|
||||
|
|
@ -97,16 +88,27 @@ function build_paste_modal(paste_info, show_qrcode = true, saved = true, build_o
|
|||
paste_modal.id_copy_btn.removeClass('btn-success');
|
||||
tooltip.setContent({'.tooltip-inner': 'Click to copy'});
|
||||
|
||||
if (saved) {
|
||||
cached_paste_info = paste_info;
|
||||
localStorage.setItem('last_paste', JSON.stringify(paste_info));
|
||||
console.log('Paste saved');
|
||||
show_saved_btn.prop('disabled', false);
|
||||
}
|
||||
|
||||
// Hide/Show QRCode
|
||||
if (!show_qrcode) paste_modal.qrcode.addClass('d-none');
|
||||
else paste_modal.qrcode.removeClass('d-none');
|
||||
|
||||
// Hide/Show Forget button
|
||||
if (!!cached_paste_info) paste_modal.forget_btn.removeClass('d-none');
|
||||
else paste_modal.forget_btn.addClass('d-none');
|
||||
|
||||
Object.entries(paste_info).forEach(([key, val]) => {
|
||||
if (key.includes('link')) return;
|
||||
$(`#paste_info_${key}`).text(val ?? '-');
|
||||
});
|
||||
|
||||
let modal = new bootstrap.Modal(paste_modal.modal);
|
||||
if (saved) saved_modal = modal;
|
||||
if (!build_only) modal.show();
|
||||
}
|
||||
|
||||
|
|
@ -122,6 +124,7 @@ $(function () {
|
|||
paste_modal.qrcode = $('#paste_qrcode');
|
||||
paste_modal.id_copy_btn = $('#id_copy_button');
|
||||
paste_modal.id_copy_btn_icon = $('#id_copy_button_icon');
|
||||
paste_modal.forget_btn = $('#forget_btn');
|
||||
|
||||
let file_stat = $('#file_stats');
|
||||
let title = $('#paste_title');
|
||||
|
|
@ -131,10 +134,11 @@ $(function () {
|
|||
let upload_button = $('#upload_button');
|
||||
let url_validate_result = $('#url_validate_result');
|
||||
let tos_btn = $('#tos_btn');
|
||||
let show_saved_btn = $('#show_saved_button');
|
||||
show_saved_btn = $('#show_saved_button');
|
||||
let go_btn = $('#go_button');
|
||||
let go_id = $('#go_paste_id');
|
||||
let view_btn = $('#view_info_button');
|
||||
let show_qrcode_checkbox = $('#show_qrcode_checkbox');
|
||||
|
||||
// Enable bootstrap tooltips
|
||||
const tooltip_trigger_list = [].slice.call($('[data-bs-toggle="tooltip"]'));
|
||||
|
|
@ -142,6 +146,13 @@ $(function () {
|
|||
return new bootstrap.Tooltip(e);
|
||||
});
|
||||
|
||||
// Restore saved paste info
|
||||
cached_paste_info = JSON.parse(localStorage.getItem('last_paste'));
|
||||
if (!!cached_paste_info) {
|
||||
show_saved_btn.prop('disabled', false);
|
||||
console.log('Restored cache paste');
|
||||
}
|
||||
|
||||
inputs.file.on('change', function () {
|
||||
inputs.file.removeClass('is-invalid');
|
||||
file_stat.removeClass('text-danger');
|
||||
|
|
@ -205,7 +216,6 @@ $(function () {
|
|||
let formdata = new FormData(form);
|
||||
const type = formdata.get('paste-type');
|
||||
const content = formdata.get('u');
|
||||
const show_qrcode = formdata.get('qrcode') === '1';
|
||||
|
||||
inputs[type].trigger('input');
|
||||
if (inputs[type].hasClass('is-invalid') || !(!!content?.size || !!content?.length)) {
|
||||
|
|
@ -251,7 +261,6 @@ $(function () {
|
|||
show_pop_alert('Paste created!', 'alert-success');
|
||||
pass_input.val('');
|
||||
build_paste_modal(paste_info, show_qrcode);
|
||||
show_saved_btn.prop('disabled', false);
|
||||
} else {
|
||||
show_pop_alert('Unable to create paste', 'alert-warning');
|
||||
}
|
||||
|
|
@ -270,11 +279,11 @@ $(function () {
|
|||
});
|
||||
|
||||
show_saved_btn.on('click', function () {
|
||||
if (!!!saved_modal) {
|
||||
if (!!!cached_paste_info) {
|
||||
show_pop_alert('No saved paste found.', 'alert-warning');
|
||||
return;
|
||||
}
|
||||
saved_modal.show();
|
||||
build_paste_modal(cached_paste_info, show_qrcode, false);
|
||||
});
|
||||
|
||||
go_btn.on('click', function () {
|
||||
|
|
@ -297,7 +306,7 @@ $(function () {
|
|||
const res = await fetch(`${endpoint}/${uuid}/settings?${new URLSearchParams({json: '1'})}`);
|
||||
if (res.ok) {
|
||||
const paste_info = await res.json();
|
||||
build_paste_modal(paste_info, true);
|
||||
build_paste_modal(paste_info, show_qrcode, false);
|
||||
} else {
|
||||
show_pop_alert('Invalid Paste ID.', 'alert-warning');
|
||||
}
|
||||
|
|
@ -327,6 +336,23 @@ $(function () {
|
|||
}
|
||||
});
|
||||
|
||||
paste_modal.forget_btn.on('click', function () {
|
||||
let tooltip = bootstrap.Tooltip.getInstance(paste_modal.forget_btn);
|
||||
|
||||
if (!!cached_paste_info) {
|
||||
cached_paste_info = null;
|
||||
localStorage.removeItem('last_paste');
|
||||
console.log('Removed cached paste');
|
||||
tooltip.setContent({'.tooltip-inner': 'Forgotten!'});
|
||||
show_saved_btn.prop('disabled', true);
|
||||
}
|
||||
});
|
||||
|
||||
show_qrcode_checkbox.on('click', function () {
|
||||
show_qrcode = show_qrcode_checkbox.prop('checked');
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
function select_input_type(name) {
|
||||
|
|
|
|||
|
|
@ -50,7 +50,8 @@
|
|||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input class="form-control me-2" type="search" placeholder="Paste ID" aria-label="go" id="go_paste_id"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom" title="Paste ID should be in 4 characters.">
|
||||
maxlength="4" data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Paste ID should be in 4 characters.">
|
||||
<button class="btn btn-outline-success me-2" type="button" id="go_button">Go</button>
|
||||
<button class="btn btn-outline-success" type="button" id="view_info_button">Detail</button>
|
||||
</form>
|
||||
|
|
@ -140,9 +141,9 @@
|
|||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="show_qrcode_checkbox" name="qrcode" checked value="1">
|
||||
<input class="form-check-input" type="checkbox" id="show_qrcode_checkbox" checked value="1">
|
||||
<label class="form-check-label" for="show_qrcode_checkbox">
|
||||
Show QR code after upload
|
||||
Show QR code
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -257,7 +258,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-secondary me-2" id="forget_btn"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click to forget">
|
||||
Forget
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue