Skip to content

Commit

Permalink
Fix lexicon popup to make it easier to select text (#183)
Browse files Browse the repository at this point in the history
Bugfix 534 / fix to make scripture selection easier.
  • Loading branch information
PhotoNomad0 authored Dec 7, 2023
1 parent 07d5069 commit f6c2763
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 9 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "scripture-resources-rcl",
"description": "A React Component Library for Rendering Scripture Resources.",
"version": "5.5.8",
"version": "5.5.9",
"homepage": "https://scripture-resources-rcl.netlify.com/",
"repository": {
"type": "git",
Expand Down
36 changes: 28 additions & 8 deletions src/components/verse-objects/AlignedWordsObject.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { default as WordLexiconDetails } from 'tc-ui-toolkit/lib/WordLexiconDeta
import { SelectionsContext } from '../selections/Selections.context';
import { WordObject, OriginalWordObject } from '.';

const intervalBeforePopup = 500; // delay 1/2 sec. before showing popup

function AlignedWordsObject({
children,
verseKey,
Expand All @@ -19,14 +21,26 @@ function AlignedWordsObject({
translate,
}) {
const classes = useStyles();
const [anchorEl, setAnchorEl] = useState(null);
const [popupPosition, setPopupPosition] = useState(null);
const [readyToShow, setReadyToShow] = useState(false);

const handleOpen = (event) => {
setAnchorEl(event.currentTarget);
setReadyToShow(false); // make sure cleared

if (!event.buttons) { // only show popup if buttons not depressed (i.e. not selection text)
setPopupPosition(event.currentTarget); // save the anchor element for positioning

delay(intervalBeforePopup).then(() => {
setReadyToShow(true);
});
} else { // if dragging make position for popup is cleared
setPopupPosition(null);
}
};

const handleClose = () => {
setAnchorEl(null);
setPopupPosition(null);
setReadyToShow(false);
};

let selected;
Expand Down Expand Up @@ -86,8 +100,8 @@ function AlignedWordsObject({
}

if (!disableWordPopover) {
const open = Boolean(anchorEl);
const id = open ? 'popover' : undefined;
const openPopup = readyToShow && Boolean(popupPosition);
const id = openPopup ? 'popover' : undefined;
const _originalWords = originalWords.map((verseObject, index) => getOriginalWordObject(index, verseObject));

component = (
Expand All @@ -97,14 +111,14 @@ function AlignedWordsObject({
aria-haspopup="true"
onMouseEnter={handleOpen}
onMouseLeave={handleClose}
className={open ? classes.open : classes.closed}
className={openPopup ? classes.open : classes.closed}
>
{words}
</span>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
open={openPopup}
anchorEl={popupPosition}
onClose={handleClose}
className={classes.popover}
classes={{ paper: classes.paper }}
Expand Down Expand Up @@ -151,4 +165,10 @@ function translate_(key) {
return key;
}

function delay(ms) {
return new Promise((resolve) =>
setTimeout(resolve, ms),
)
}

export default AlignedWordsObject;

0 comments on commit f6c2763

Please sign in to comment.