malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Fix tooltip modal for story pages

Browse Source
This commit is contained in:
Tetrakern 2024-10-25 00:17:50 +02:00
parent 252ecd3715
commit c7d645ac28
4 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/application.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
js/complete.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
single-fcn_story.php
View File

@ -71,7 +71,7 @@ get_header(
do_action( 'fictioneer_story_after_header', $hook_args );
?>
<section class="story__summary"><?php
<section class="story__summary content-section"><?php
if ( $password_required ) {
if ( $password_note ) {
echo '<div class="story__password-note infobox">' . $password_note . '</div>';

36
src/js/application.js
View File

@ -1623,25 +1623,27 @@ _$$('dialog').forEach(element => {
});
// Open tooltip modal
_$('.content-section')?.addEventListener('click', event => {
if (event.target.closest('[data-click-action*="open-tooltip-modal"]') && !window.getSelection().toString()) {
const modal = _$$$('fictioneer-tooltip-dialog');
const header = event.target.dataset.dialogHeader;
const content = event.target.dataset.dialogContent;
_$$('.content-section').forEach(section => {
section.addEventListener('click', event => {
if (event.target.closest('[data-click-action*="open-tooltip-modal"]') && !window.getSelection().toString()) {
const modal = _$$$('fictioneer-tooltip-dialog');
const header = event.target.dataset.dialogHeader;
const content = event.target.dataset.dialogContent;
if (content.length > 200) {
modal.style.setProperty('--modal-width', '400px');
} else {
modal.style.removeProperty('--modal-width');
if (content.length > 200) {
modal.style.setProperty('--modal-width', '400px');
} else {
modal.style.removeProperty('--modal-width');
}
if (header) {
modal.querySelector('[data-finder="tooltip-dialog-header"]').innerHTML = header;
}
modal.querySelector('[data-finder="tooltip-dialog-content"]').innerHTML = content;
modal.showModal();
}
if (header) {
modal.querySelector('[data-finder="tooltip-dialog-header"]').innerHTML = header;
}
modal.querySelector('[data-finder="tooltip-dialog-content"]').innerHTML = content;
modal.showModal();
}
});
});
// =============================================================================