Add title tooltip to expression sprites Closes #2596
| @@ -196,6 +196,8 @@ async function visualNovelSetCharacterSprites(vnContainer, spriteFolderName, exp | ||
| 196 | 196 | } |
| 197 | 197 | |
| 198 | 198 | const expressionImage = vnContainer.find(`.expression-holder[data-avatar="${avatar}"]`); |
| 199 | + /** @type {JQuery<HTMLElement>} */ | |
| 200 | + let img; | |
| 199 | 201 | |
| 200 | 202 | const memberSpriteFolderName = getSpriteFolderName({ original_avatar: character.avatar }, character.name); |
| 201 | 203 | |
| @@ -212,7 +214,7 @@ async function visualNovelSetCharacterSprites(vnContainer, spriteFolderName, exp | ||
| 212 | 214 | await validateImages(memberSpriteFolderName, true); |
| 213 | 215 | setExpressionOverrideHtml(true); // <= force clear expression override input |
| 214 | 216 | const path = spriteFile?.imageSrc || ''; |
| 215 | 217 | const img = expressionImage.find('img'); |
| 216 | 218 | await setImage(img, path); |
| 217 | 219 | } |
| 218 | 220 | expressionImage.toggleClass('hidden', !spriteFile); |
| @@ -224,13 +226,19 @@ async function visualNovelSetCharacterSprites(vnContainer, spriteFolderName, exp | ||
| 224 | 226 | $('#visual-novel-wrapper').append(template); |
| 225 | 227 | dragElement($(template[0])); |
| 226 | 228 | template.toggleClass('hidden', !spriteFile); |
| 227 | 229 | awaitimg setImage(= template.find('img'), spriteFile?.imageSrc || ''); |
| 230 | + await setImage(img, spriteFile?.imageSrc || ''); | |
| 228 | 231 | const fadeInPromise = new Promise(resolve => { |
| 229 | 232 | template.fadeIn(250, () => resolve()); |
| 230 | 233 | }); |
| 231 | 234 | setSpritePromises.push(fadeInPromise); |
| 232 | 235 | } |
| 233 | 236 | |
| 237 | + img.attr('data-sprite-folder-name', spriteFolderName); | |
| 238 | + img.attr('data-expression', expression); | |
| 239 | + img.attr('data-sprite-filename', spriteFile?.fileName || null); | |
| 240 | + img.attr('title', expression); | |
| 241 | + | |
| 234 | 242 | if (spriteFile) console.info(`Expression set for group member ${character.name}`, { expression: spriteFile.expression, file: spriteFile.fileName }); |
| 235 | 243 | else if (expressionImage.length) console.info(`Expression unset for group member ${character.name} - No sprite found`, { expression: expression }); |
| 236 | 244 | else console.info(`Expression not available for group member ${character.name}`, { expression: expression }); |
| @@ -1395,6 +1403,7 @@ async function setExpression(spriteFolderName, expression, { force = false, over | ||
| 1395 | 1403 | expressionClone.attr('data-sprite-folder-name', spriteFolderName); |
| 1396 | 1404 | expressionClone.attr('data-expression', expression); |
| 1397 | 1405 | expressionClone.attr('data-sprite-filename', spriteFile.fileName); |
| 1406 | + expressionClone.attr('title', expression); | |
| 1398 | 1407 | //add invisible clone to html |
| 1399 | 1408 | expressionClone.appendTo($('#expression-holder')); |
| 1400 | 1409 | |
| @@ -1454,9 +1463,8 @@ async function setExpression(spriteFolderName, expression, { force = false, over | ||
| 1454 | 1463 | } |
| 1455 | 1464 | else { |
| 1456 | 1465 | img.attr('data-sprite-folder-name', spriteFolderName); |
| 1457 | - img.attr('data-expression', expression); | |
| 1458 | 1466 | |
| 1459 | 1467 | $(img).off('error'); |
| 1460 | 1468 | |
| 1461 | 1469 | if (extension_settings.expressions.showDefault && expression !== RESET_SPRITE_LABEL) { |
| 1462 | 1470 | setDefaultEmojiForImage(img, expression); |
| @@ -1484,6 +1492,7 @@ function setDefaultEmojiForImage(img, expression) { | ||
| 1484 | 1492 | img.attr('src', defImgUrl); |
| 1485 | 1493 | img.attr('data-expression', expression); |
| 1486 | 1494 | img.attr('data-sprite-filename', null); |
| 1495 | + img.attr('title', expression); | |
| 1487 | 1496 | img.addClass('default'); |
| 1488 | 1497 | } |
| 1489 | 1498 | |
| @@ -1496,6 +1505,7 @@ function setNoneForImage(img, expression) { | ||
| 1496 | 1505 | img.attr('src', ''); |
| 1497 | 1506 | img.attr('data-expression', expression); |
| 1498 | 1507 | img.attr('data-sprite-filename', null); |
| 1508 | + img.attr('title', expression); | |
| 1499 | 1509 | img.removeClass('default'); |
| 1500 | 1510 | } |
| 1501 | 1511 | |