Skip to content

Commit

Permalink
Fix #1809 Tutorial fails in 3D view mode (#1839)
Browse files Browse the repository at this point in the history 
* Fixed tutorial error on missing selector

* Added tutorial epic
  • Loading branch information
@allyoucanmap @offtherailz
allyoucanmap authored and offtherailz committed May 18, 2017
1 parent 73c6c14 commit f05a3b9
Show file tree
Hide file tree
Showing 26 changed files with 1,235 additions and 507 deletions.
2 changes: 2 additions & 0 deletions docma-config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@
"web/client/selectors/index.jsdoc",
"web/client/selectors/map.js",
"web/client/selectors/maptype.js",
"web/client/selectors/tutorial.js",

"web/client/reducers/index.jsdoc",
"web/client/reducers/controls.js",
Expand All @@ -136,6 +137,7 @@
"web/client/epics/globeswitcher.js",
"web/client/epics/maptype.js",
"web/client/epics/search.js",
"web/client/epics/tutorial.js",
"web/client/epics/wfsquery.js",

"web/client/utils/index.jsdoc",
Expand Down
24 changes: 19 additions & 5 deletions web/client/actions/__tests__/tutorial-test.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/**
/*
* Copyright 2017, GeoSolutions Sas.
* All rights reserved.
*
Expand All @@ -14,11 +14,15 @@ var {
UPDATE_TUTORIAL,
DISABLE_TUTORIAL,
RESET_TUTORIAL,
CLOSE_TUTORIAL,
TOGGLE_TUTORIAL,
startTutorial,
setupTutorial,
updateTutorial,
disableTutorial,
resetTutorial
resetTutorial,
closeTutorial,
toggleTutorial
} = require('../tutorial');

describe('Test the tutorial actions', () => {
Expand Down Expand Up @@ -46,13 +50,11 @@ describe('Test the tutorial actions', () => {
it('updateTutorial', () => {
const tour = 'tour';
const steps = 'steps';
const error = 'error';
const retval = updateTutorial(tour, steps, error);
const retval = updateTutorial(tour, steps);
expect(retval).toExist();
expect(retval.type).toBe(UPDATE_TUTORIAL);
expect(retval.tour).toBe(tour);
expect(retval.steps).toBe(steps);
expect(retval.error).toBe(error);
});

it('disableTutorial', () => {
Expand All @@ -67,4 +69,16 @@ describe('Test the tutorial actions', () => {
expect(retval.type).toBe(RESET_TUTORIAL);
});

it('closeTutorial', () => {
const retval = closeTutorial();
expect(retval).toExist();
expect(retval.type).toBe(CLOSE_TUTORIAL);
});

it('toggleTutorial', () => {
const retval = toggleTutorial();
expect(retval).toExist();
expect(retval.type).toBe(TOGGLE_TUTORIAL);
});

});
28 changes: 22 additions & 6 deletions web/client/actions/tutorial.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/**
/*
* Copyright 2017, GeoSolutions Sas.
* All rights reserved.
*
Expand All @@ -11,7 +11,8 @@ const SETUP_TUTORIAL = 'SETUP_TUTORIAL';
const UPDATE_TUTORIAL = 'UPDATE_TUTORIAL';
const DISABLE_TUTORIAL = 'DISABLE_TUTORIAL';
const RESET_TUTORIAL = 'RESET_TUTORIAL';

const CLOSE_TUTORIAL = 'CLOSE_TUTORIAL';
const TOGGLE_TUTORIAL = 'TOGGLE_TUTORIAL';

function startTutorial() {
return {
Expand All @@ -29,12 +30,11 @@ function setupTutorial(steps, style, checkbox, defaultStep) {
};
}

function updateTutorial(tour, steps, error) {
function updateTutorial(tour, steps) {
return {
type: UPDATE_TUTORIAL,
tour,
steps,
error
steps
};
}

Expand All @@ -51,15 +51,31 @@ function resetTutorial() {
};
}

function closeTutorial() {
return {
type: CLOSE_TUTORIAL
};
}

function toggleTutorial() {
return {
type: TOGGLE_TUTORIAL
};
}

module.exports = {
START_TUTORIAL,
SETUP_TUTORIAL,
UPDATE_TUTORIAL,
DISABLE_TUTORIAL,
RESET_TUTORIAL,
CLOSE_TUTORIAL,
TOGGLE_TUTORIAL,
startTutorial,
setupTutorial,
updateTutorial,
disableTutorial,
resetTutorial
resetTutorial,
closeTutorial,
toggleTutorial
};
148 changes: 76 additions & 72 deletions web/client/components/tutorial/Tutorial.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/**
/*
* Copyright 2017, GeoSolutions Sas.
* All rights reserved.
*
Expand All @@ -13,7 +13,7 @@ const I18N = require('../I18N/I18N');
require('react-joyride/lib/react-joyride-compiled.css');
require('./style/tutorial.css');

const introStyle = {
const defaultIntroStyle = {
backgroundColor: 'transparent',
color: '#fff',
mainColor: '#fff',
Expand All @@ -31,8 +31,7 @@ const introStyle = {
padding: 10
},
button: {
color: '#fff',
backgroundColor: '#078aa3'
color: '#fff'
},
close: {
display: 'none'
Expand All @@ -42,54 +41,20 @@ const introStyle = {
}
};

const errorStyle = {
mainColor: '#888',
backgroundColor: 'transparent',
header: {
fontFamily: 'Georgia, serif',
fontSize: '1.5em',
borderBottom: '1px solid #dd0733',
backgroundColor: '#fff',
padding: 10
},
main: {
fontSize: '0.9em',
backgroundColor: '#fff',
padding: 10
},
footer: {
backgroundColor: '#fff',
padding: 10
},
button: {
color: '#fff',
backgroundColor: '#dd0733'
},
skip: {
color: '#AAA'
},
close: {
margin: 10
}
};

const Tutorial = React.createClass({
propTypes: {
toggle: React.PropTypes.bool,
status: React.PropTypes.string,
preset: React.PropTypes.string,
presetList: React.PropTypes.object,
intro: React.PropTypes.bool,
introPosition: React.PropTypes.number,
rawSteps: React.PropTypes.array,
nextLabel: React.PropTypes.string,
showCheckbox: React.PropTypes.bool,
defaultStep: React.PropTypes.object,
introStyle: React.PropTypes.object,
error: React.PropTypes.object,

steps: React.PropTypes.array,
tourAction: React.PropTypes.string,
stepIndex: React.PropTypes.number,
steps: React.PropTypes.array,
run: React.PropTypes.bool,
autoStart: React.PropTypes.bool,
keyboardNavigation: React.PropTypes.bool,
Expand All @@ -105,10 +70,7 @@ const Tutorial = React.createClass({
showSkipButton: React.PropTypes.bool,
showStepsProgress: React.PropTypes.bool,
tooltipOffset: React.PropTypes.number,
type: React.PropTypes.string,
disableOverlay: React.PropTypes.bool,
debug: React.PropTypes.bool,

actions: React.PropTypes.object
},
getDefaultProps() {
Expand All @@ -117,26 +79,19 @@ const Tutorial = React.createClass({
status: 'run',
preset: 'map',
presetList: {},
intro: true,
introPosition: (window.innerHeight - 348) / 2,
rawSteps: [],
nextLabel: 'next',
showCheckbox: true,
defaultStep: {
title: '',
text: '',
position: 'bottom',
type: 'click',
allowClicksThruHole: true
type: 'click'
},
introStyle: introStyle,
error: {
style: errorStyle,
text: <I18N.Message msgId="tutorial.error"/>
},

steps: [],
introStyle: defaultIntroStyle,
tourAction: 'next',
stepIndex: 0,
steps: [],
run: true,
autoStart: true,
keyboardNavigation: true,
Expand All @@ -148,14 +103,11 @@ const Tutorial = React.createClass({
scrollToFirstStep: true,
showBackButton: true,
showOverlay: true,
allowClicksThruHole: false,
showSkipButton: false,
showStepsProgress: true,
allowClicksThruHole: true,
showSkipButton: true,
showStepsProgress: false,
tooltipOffset: 10,
type: 'continuous',
disableOverlay: false,
debug: false,

actions: {
onSetup: () => {},
onStart: () => {},
Expand All @@ -173,14 +125,27 @@ const Tutorial = React.createClass({
},
componentWillUpdate(newProps) {
if (this.props.steps.length > 0) {
if (!this.props.toggle && newProps.toggle
|| this.props.intro && !newProps.intro && newProps.status === 'run'
|| this.props.status === 'run' && newProps.status === 'error'
|| this.props.status === 'error' && newProps.status === 'error') {
if (!this.props.toggle && newProps.toggle) {
this.props.actions.onStart();
this.joyride.reset(true);
} else if (this.props.status === 'run' && newProps.status === 'error'
|| this.props.status === 'error' && newProps.status === 'error') {

const index = this.checkFirstValidStep(newProps.stepIndex, newProps.tourAction);

if (index === -1) {
this.closeTour();
} else {
this.joyride.setState({
index,
isRunning: true,
shouldRedraw: true,
shouldRenderTooltip: true
});
this.props.actions.onStart();
}

} else if (this.props.status === 'run' && newProps.status === 'close') {
this.props.actions.onClose();
this.closeTour();
}
}
},
Expand All @@ -189,8 +154,15 @@ const Tutorial = React.createClass({
this.props.actions.onReset();
},
onTour(tour) {
if (this.props.steps.length > 0 && tour && tour.type && tour.type.split(':')[1] !== 'before') {
this.props.actions.onUpdate(tour, this.props.steps, this.props.error);
if (this.props.steps.length > 0 && tour && tour.type) {
const type = tour.type.split(':');
if (type[0] !== 'tooltip' && type[1] === 'before'
|| tour.action === 'start'
|| type[1] === 'target_not_found'
|| tour.type === 'finished') {
this.props.actions.onUpdate(tour, this.props.steps);

}
}
},
render() {
Expand All @@ -208,7 +180,7 @@ const Tutorial = React.createClass({
back: <I18N.Message msgId="tutorial.back"/>,
close: <I18N.Message msgId="tutorial.close"/>,
last: <I18N.Message msgId="tutorial.last"/>,
next: <I18N.Message msgId={'tutorial.' + this.props.nextLabel}/>,
next: <I18N.Message msgId={'tutorial.next'}/>,
skip: <I18N.Message msgId="tutorial.skip"/>
}}
resizeDebounce={this.props.resizeDebounce}
Expand All @@ -223,9 +195,9 @@ const Tutorial = React.createClass({
showSkipButton={this.props.showSkipButton}
showStepsProgress={this.props.showStepsProgress}
tooltipOffset={this.props.tooltipOffset}
type={this.props.type}
disableOverlay={this.props.disableOverlay}
debug={this.props.debug}
type={'continuous'}
debug={false}
callback={this.onTour}
/>
);
Expand All @@ -236,10 +208,42 @@ const Tutorial = React.createClass({
<div>
{joy}
<div id="intro-tutorial" className="tutorial-presentation-position" style={{top: this.props.introPosition}}></div>
<div id="error-tutorial" className="tutorial-presentation-position" style={{top: this.props.introPosition + 200}}></div>
</div>

);
},
checkFirstValidStep(index, action) {
let steps = [].concat(this.props.steps);

if (action === 'back') {
steps = steps.slice(0, index);
steps.sort((a, b) => b.index - a.index);
} else {
steps = steps.slice(index + 1, this.props.steps.length);
steps.sort((a, b) => a.index - b.index);
}

steps = steps.filter((step) => {
return document.querySelector(step.selector);
}).map((step) => {
return step.index;
});

return steps && steps.length > 0 ? steps[0] : -1;
},
closeTour() {
const index = document.querySelector(this.props.steps[0].selector) ? 0 : this.checkFirstValidStep(0, 'next');

if (index === -1) {
this.props.actions.onReset();
} else {
this.joyride.setState({
index,
shouldRedraw: true
});
}

this.props.actions.onClose();
}
});

Expand Down
Loading

0 comments on commit f05a3b9

Please sign in to comment.