diff --git a/common/app/routes/challenges/components/step/Step.jsx b/common/app/routes/challenges/components/step/Step.jsx
index 8e1b6f391c..df8297cec5 100644
--- a/common/app/routes/challenges/components/step/Step.jsx
+++ b/common/app/routes/challenges/components/step/Step.jsx
@@ -4,11 +4,14 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import PureComponent from 'react-pure-render/component';
import ReactTransitionReplace from 'react-css-transition-replace';
+import LightBox from 'react-images';
import {
goToStep,
completeAction,
- submitChallenge
+ submitChallenge,
+ openLightBoxImage,
+ closeLightBoxImage
} from '../../redux/actions';
import { challengeSelector } from '../../redux/selectors';
import { Button, Col, Image, Row } from 'react-bootstrap';
@@ -19,16 +22,19 @@ const mapStateToProps = createSelector(
state => state.challengesApp.currentIndex,
state => state.challengesApp.previousIndex,
state => state.challengesApp.isActionCompleted,
+ state => state.challengesApp.isLightBoxOpen,
(
{
challenge: { description = [] }
},
currentIndex,
previousIndex,
- isActionCompleted
+ isActionCompleted,
+ isLightBoxOpen
) => ({
currentIndex,
isActionCompleted,
+ isLightBoxOpen,
step: description[currentIndex],
steps: description,
numOfSteps: description.length,
@@ -39,7 +45,9 @@ const mapStateToProps = createSelector(
const dispatchActions = {
goToStep,
completeAction,
- submitChallenge
+ submitChallenge,
+ openLightBoxImage,
+ closeLightBoxImage
};
export class StepChallenge extends PureComponent {
@@ -47,6 +55,7 @@ export class StepChallenge extends PureComponent {
super(...args);
this.handleNextClick = this.handleNextClick.bind(this);
this.handleBackClick = this.handleBackClick.bind(this);
+ this.handleLightBoxOpen = this.handleLightBoxOpen.bind(this);
}
static displayName = 'StepChallenge';
static propTypes = {
@@ -58,7 +67,10 @@ export class StepChallenge extends PureComponent {
numOfSteps: PropTypes.number,
goToStep: PropTypes.func,
completeAction: PropTypes.func,
- submitChallenge: PropTypes.func
+ submitChallenge: PropTypes.func,
+ isLightBoxOpen: PropTypes.bool,
+ openlightBoxImage: PropTypes.func,
+ closeLightBoxImage: PropTypes.func
};
handleNextClick() {
@@ -75,6 +87,13 @@ export class StepChallenge extends PureComponent {
goToStep(currentIndex - 1);
}
+ handleLightBoxOpen(e) {
+ if (!(e.ctrlKey || e.metaKey)) {
+ e.preventDefault();
+ this.props.openLightBoxImage();
+ }
+ }
+
renderActionButton(action, completeAction) {
const isApiAction = action === '#';
const buttonCopy = isApiAction ?
@@ -158,7 +177,11 @@ export class StepChallenge extends PureComponent {
className=''
key={ imgUrl }
>
-
+
{ this.renderImages(steps) }
+
);
diff --git a/common/app/routes/challenges/redux/actions.js b/common/app/routes/challenges/redux/actions.js
index 550adc1c4a..a62eeabe95 100644
--- a/common/app/routes/challenges/redux/actions.js
+++ b/common/app/routes/challenges/redux/actions.js
@@ -7,6 +7,8 @@ import types from './types';
// step
export const goToStep = createAction(types.goToStep);
export const completeAction = createAction(types.completeAction);
+export const openLightBoxImage = createAction(types.openLightBoxImage);
+export const closeLightBoxImage = createAction(types.closeLightBoxImage);
// challenges
export const fetchChallenge = createAction(
diff --git a/common/app/routes/challenges/redux/reducer.js b/common/app/routes/challenges/redux/reducer.js
index d9543b3ead..9308f60cde 100644
--- a/common/app/routes/challenges/redux/reducer.js
+++ b/common/app/routes/challenges/redux/reducer.js
@@ -18,6 +18,7 @@ const initialUiState = {
previousIndex: -1,
// step action
isActionCompleted: false,
+ isLightBoxOpen: false,
// project is ready to submit
isSubmitting: false,
output: `/**
@@ -121,6 +122,14 @@ const mainReducer = handleActions(
...state,
isActionCompleted: true
}),
+ [types.openLightBoxImage]: state => ({
+ ...state,
+ isLightBoxOpen: true
+ }),
+ [types.closeLightBoxImage]: state => ({
+ ...state,
+ isLightBoxOpen: false
+ }),
// classic/modern
[types.initOutput]: (state, { payload: output }) => ({
diff --git a/common/app/routes/challenges/redux/types.js b/common/app/routes/challenges/redux/types.js
index e786c8b55b..9073cd5b84 100644
--- a/common/app/routes/challenges/redux/types.js
+++ b/common/app/routes/challenges/redux/types.js
@@ -4,6 +4,8 @@ export default createTypes([
// step
'goToStep',
'completeAction',
+ 'openLightBoxImage',
+ 'closeLightBoxImage',
// challenges
'fetchChallenge',
diff --git a/package.json b/package.json
index 07d4c704fc..dff29f1bb5 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,7 @@
"react-css-transition-replace": "^1.2.0-beta",
"react-dom": "^15.0.2",
"react-fontawesome": "^0.3.3",
+ "react-images": "^0.4.6",
"react-motion": "~0.4.2",
"react-no-ssr": "^1.0.1",
"react-pure-render": "^1.0.2",