scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat: [UEPR-44] handled interaction with highlighted element

Browse source
This commit is contained in:
MiroslavDionisiev 2024-10-10 12:49:04 +03:00
parent 8a76614bea
commit ebad69d7d1
6 changed files with 64 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/journeys/driver-journey/driver-journey.jsx
View file

@ -11,12 +11,15 @@ const DriverJourney = ({configProps, driverObj}) => {
useEffect(() => {
const driverSteps = steps.map((step, index) => {
const {sectionComponents = {}, ...popoverProps} = step.popover;
const {sectionComponents = {}, callback, ...popoverProps} = step.popover;
return {
...step,
popover: {
...popoverProps,
onPopoverRender: popover => {
if (callback) {
callback();
}
const portalData = [];
for (const [section, component] of Object.entries(
sectionComponents

22
src/components/journeys/editor-journey/editor-journey.jsx
View file

@ -138,8 +138,8 @@ const openTutorial = (onActivateDeck, tutorial, driverObj) => {
driverObj.destroy();
};
const ownOptingPicked = (setIsOnOwnOptionPicked, driverObg) => {
setIsOnOwnOptionPicked(true);
const ownOptingPicked = (setCanViewTutorialsHighlight, driverObg) => {
setCanViewTutorialsHighlight(true);
driverObg.destroy();
};
@ -165,7 +165,7 @@ const EditorJourneyDescription = ({title, descriptionData}) => (
</>
);
const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight}) => {
const [driverObj] = useState(() => (
driver()
));
@ -290,7 +290,7 @@ const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
{
imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
text: intl.formatMessage(messages.onMyOwnTitle),
handleOnClick: () => ownOptingPicked(setIsOnOwnOptionPicked, driverObj)
handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
}
]}
/>
@ -318,7 +318,7 @@ const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
{
imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
text: intl.formatMessage(messages.onMyOwnTitle),
handleOnClick: () => ownOptingPicked(setIsOnOwnOptionPicked, driverObj)
handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
}
]}
/>
@ -347,7 +347,7 @@ const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
{
imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
text: intl.formatMessage(messages.onMyOwnTitle),
handleOnClick: () => ownOptingPicked(setIsOnOwnOptionPicked, driverObj)
handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
}
]}
/>
@ -375,7 +375,7 @@ const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
{
imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
text: intl.formatMessage(messages.onMyOwnTitle),
handleOnClick: () => ownOptingPicked(setIsOnOwnOptionPicked, driverObj)
handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
}
]}
/>
@ -403,7 +403,7 @@ const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
{
imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
text: intl.formatMessage(messages.onMyOwnTitle),
handleOnClick: () => ownOptingPicked(setIsOnOwnOptionPicked, driverObj)
handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
}
]}
/>
@ -431,13 +431,13 @@ const EditorJourney = ({onActivateDeck, setIsOnOwnOptionPicked}) => {
{
imgSrc: '/images/onboarding-journeys/On-Own-Icon.png',
text: intl.formatMessage(messages.onMyOwnTitle),
handleOnClick: () => ownOptingPicked(setIsOnOwnOptionPicked, driverObj)
handleOnClick: () => ownOptingPicked(setCanViewTutorialsHighlight, driverObj)
}
]}
/>
}
}
}], [onActivateDeck, setIsOnOwnOptionPicked]
}], [onActivateDeck, setCanViewTutorialsHighlight]
);
return (
@ -463,7 +463,7 @@ EditorJourneyDescription.propTypes = {
EditorJourney.propTypes = {
onActivateDeck: PropTypes.func,
setIsOnOwnOptionPicked: PropTypes.func
setCanViewTutorialsHighlight: PropTypes.func
};
module.exports = EditorJourney;

27
src/components/journeys/project-journey/project-journey.jsx
View file

@ -2,6 +2,8 @@ const React = require('react');
const {driver} = require('driver.js');
const DriverJourney = require('../driver-journey/driver-journey.jsx');
const {defineMessages, useIntl} = require('react-intl');
const {useState} = require('react');
const PropTypes = require('prop-types');
require('./project-journey.scss');
const messages = defineMessages({
@ -17,8 +19,8 @@ const messages = defineMessages({
}
});
const ProjectJourney = () => {
const [driverObj] = React.useState(() => (
const ProjectJourney = ({setCanViewProjectJourney}) => {
const [driverObj] = useState(() => (
driver()
));
@ -27,12 +29,26 @@ const ProjectJourney = () => {
const steps = [{
element: 'div[class^="stage_green-flag-overlay-wrapper"] > div',
popover: {
callback: () => {
const greenFlagButton = document.querySelector('div[class^="stage_green-flag-overlay-wrapper"] > div');
greenFlagButton.addEventListener('click', () => {
setCanViewProjectJourney(false);
driverObj.destroy();
});
},
description: intl.formatMessage(messages.playProject)
}
},
{
element: '.remix-button',
popover: {
callback: () => {
const remixButton = document.querySelector('.remix-button');
remixButton.addEventListener('click', () => {
setCanViewProjectJourney(false);
driverObj.destroy();
});
},
description: intl.formatMessage(messages.remixProject)
}
}];
@ -45,6 +61,9 @@ const ProjectJourney = () => {
'next',
'previous'
],
onDestroyed: () => {
setCanViewProjectJourney(false);
},
nextBtnText: 'Next',
prevBtnText: 'Previous',
showProgress: false,
@ -55,4 +74,8 @@ const ProjectJourney = () => {
);
};
ProjectJourney.propTypes = {
setCanViewProjectJourney: PropTypes.func
};
module.exports = ProjectJourney;

16
src/components/journeys/tutorials-highlight/tutorials-highlight.jsx
View file

@ -3,6 +3,7 @@ const {driver} = require('driver.js');
const DriverJourney = require('../driver-journey/driver-journey.jsx');
const {defineMessages, useIntl} = require('react-intl');
const PropTypes = require('prop-types');
const {useState} = require('react');
require('./tutorials-highlight.scss');
const messages = defineMessages({
@ -13,8 +14,8 @@ const messages = defineMessages({
}
});
const TutorialsHighlight = ({setIsOnOwnOptionPicked}) => {
const [driverObj] = React.useState(() => (
const TutorialsHighlight = ({setCanViewTutorialsHighlight}) => {
const [driverObj] = useState(() => (
driver()
));
@ -24,6 +25,13 @@ const TutorialsHighlight = ({setIsOnOwnOptionPicked}) => {
element: '.tutorials-button',
popover: {
showButtons: ['close'],
callback: () => {
const tutorialsButton = document.querySelector('.tutorials-button');
tutorialsButton.addEventListener('click', () => {
setCanViewTutorialsHighlight(false);
driverObj.destroy();
});
},
side: 'bottom',
description: intl.formatMessage(messages.tutorialsHighlight)
}
@ -36,7 +44,7 @@ const TutorialsHighlight = ({setIsOnOwnOptionPicked}) => {
showProgress: false,
overlayOpacity: 0,
onDestroyed: () => {
setIsOnOwnOptionPicked(false);
setCanViewTutorialsHighlight(false);
},
steps: steps
}}
@ -46,7 +54,7 @@ const TutorialsHighlight = ({setIsOnOwnOptionPicked}) => {
};
TutorialsHighlight.propTypes = {
setIsOnOwnOptionPicked: PropTypes.func
setCanViewTutorialsHighlight: PropTypes.func
};
module.exports = TutorialsHighlight;

7
src/views/preview/presentation.jsx
View file

@ -150,6 +150,9 @@ const PreviewPresentation = ({
visibilityInfo
}) => {
const [hasSubmittedComment, setHasSubmittedComment] = useState(false);
const [canViewProjectJourney, setCanViewProjectJourney] = useState(
queryString.parse(location.search, {parseBooleans: true}).showJourney
);
const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : '';
const revisedDate = ((projectInfo.history && projectInfo.history.modified)) ? projectInfo.history.modified : '';
const showInstructions = editable || projectInfo.instructions ||
@ -259,8 +262,8 @@ const PreviewPresentation = ({
<React.Fragment>
{
isProjectLoaded &&
queryString.parse(location.search, {parseBooleans: true}).showJourney &&
<ProjectJourney />
canViewProjectJourney &&
<ProjectJourney setCanViewProjectJourney={setCanViewProjectJourney} />
}
{showEmailConfirmationBanner && <EmailConfirmationBanner
/* eslint-disable react/jsx-no-bind */

10
src/views/preview/project-view.jsx
View file

@ -50,7 +50,7 @@ const TutorialsHighlight = require('../../components/journeys/tutorials-highligh
const IntlGUIWithProjectHandler = ({...props}) => {
const [showJourney, setShowJourney] = useState(false);
const [isOnOwnOptionPicked, setIsOnOwnOptionPicked] = useState(false);
const [canViewTutorialsHighlight, setCanViewTutorialsHighlight] = useState(false);
const prevProjectId = usePrevious(props.projectId);
useEffect(() => {
@ -72,10 +72,14 @@ const IntlGUIWithProjectHandler = ({...props}) => {
{showJourney && (
<EditorJourney
onActivateDeck={props.onActivateDeck}
setIsOnOwnOptionPicked={setIsOnOwnOptionPicked}
setCanViewTutorialsHighlight={setCanViewTutorialsHighlight}
/>
)}
{canViewTutorialsHighlight && (
<TutorialsHighlight
setCanViewTutorialsHighlight={setCanViewTutorialsHighlight}
/>
)}
{isOnOwnOptionPicked && <TutorialsHighlight setIsOnOwnOptionPicked={setIsOnOwnOptionPicked} />}
</>
);
};