diff --git a/public/script.js b/public/script.js index 8908b7a2a..c19c1bdf3 100644 --- a/public/script.js +++ b/public/script.js @@ -4095,10 +4095,38 @@ function setRightTabSelectedClass(selectedButtonId) { }); } -function select_rm_info(text, charId = null) { - $("#rm_info_text").html("

" + text + "

"); +function select_rm_info(type, charId) { + + if (!type) { + toastr.error(`Invalid process (no 'type')`); + return; + } + if (type === 'char_delete') { + toastr.warning(`Character Deleted: ${charId}`); + } + if (type === 'char_create') { + toastr.success(`Character Created: ${charId}`); + } + if (type === 'char_import') { + toastr.success(`Character Imported: ${charId}`); + } + + selectRightMenuWithAnimation('rm_characters_block'); + + if (type === 'char_import' || type === 'char_create') { + + //$(`#rm_characters_block [title="${charId + '.png'}"]`).scrollIntoView({ behavior: "smooth", block: "end" }); + const element = $(`#rm_characters_block [title="${charId + '.png'}"]`).get(0); + element.scrollIntoView({ behavior: 'smooth', block: 'end' }); + + /* $(`#rm_characters_block [title="${charId + '.png'}"]`).parent.addClass('flash animated'); + setTimeout(function(){ + $(`#rm_characters_block [title="${charId + '.png'}"]`).parent.addClass('flash animated'); + }, 1000); */ + + } + - selectRightMenuWithAnimation('rm_info_block'); setRightTabSelectedClass(); prev_selected_char = charId; @@ -5163,7 +5191,7 @@ $(document).ready(function () { method: "POST", url: "/deletecharacter", beforeSend: function () { - select_rm_info("Character deleted"); + select_rm_info("char_delete", characters[this_chid].name); //$('#create_button').attr('value','Deleting...'); }, data: msg, @@ -5345,7 +5373,7 @@ $(document).ready(function () { $("#rm_info_block").transition({ opacity: 0, duration: 0 }); var $prev_img = $("#avatar_div_div").clone(); $("#rm_info_avatar").append($prev_img); - select_rm_info(`Character created

${DOMPurify.sanitize(save_name)}

`, oldSelectedChar); + select_rm_info(`char_create`, save_name); $("#rm_info_block").transition({ opacity: 1.0, duration: 2000 }); crop_data = undefined; @@ -6212,7 +6240,7 @@ $(document).ready(function () { names.push(data.file_name); let nameString = DOMPurify.sanitize(names.join(', ')); await getCharacters(); - select_rm_info(`Character imported

${nameString}

`, oldSelectedChar); + select_rm_info(`char_import`, data.file_name); $("#rm_info_block").transition({ opacity: 1, duration: 1000 }); } }, diff --git a/public/style.css b/public/style.css index d11d07aa9..1a1728ffa 100644 --- a/public/style.css +++ b/public/style.css @@ -132,6 +132,31 @@ table.responsiveTable { border-top: 2px solid grey; } +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@keyframes flash { + + 0%, + 50%, + 100% { + opacity: 1; + } + + 25%, + 75% { + opacity: 0; + } +} + +.flash { + animation-name: flash; +} + .tokenItemizingSubclass { font-size: calc(var(--mainFontSize) * 0.8); color: var(--SmartThemeEmColor); @@ -578,6 +603,7 @@ code { margin-top: 0; width: 100%; color: var(--SmartThemeBodyColor); + position: relative; } .mes q:before,