From ab14942c8028110a7a2014ad6a7cc30f37d567bd Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Mon, 22 Apr 2019 09:40:04 -0400
Subject: [PATCH] Starting to play with Draggable for cards.
---
src/components/cards/card.css | 6 +++
src/components/cards/cards.jsx | 98 +++++++++++++++++++---------------
src/reducers/cards.js | 2 +
3 files changed, 62 insertions(+), 44 deletions(-)
diff --git a/src/components/cards/card.css b/src/components/cards/card.css
index d18360a8c..bd2ff2829 100644
--- a/src/components/cards/card.css
+++ b/src/components/cards/card.css
@@ -9,6 +9,12 @@
min-width: 468px;
}
+.card-container-overlay {
+ margin: auto;
+ pointer-events: none;
+ overflow: hidden;
+}
+
.left-card, .right-card {
height: 90%;
position: absolute;
diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index 9b7dfe7b2..f5a702770 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -3,6 +3,7 @@ import React, {Fragment} from 'react';
import classNames from 'classnames';
import {FormattedMessage} from 'react-intl';
import Draggable from 'react-draggable';
+import Box from '../box/box.jsx';
import styles from './card.css';
@@ -277,55 +278,64 @@ const Cards = props => {
const steps = content[activeDeckId].steps;
return (
- <Draggable
- bounds="parent"
- position={{x: x, y: y}}
- onDrag={onDrag}
- onStart={onStartDrag}
- onStop={onEndDrag}
+ <Box
+ // Use static `cards-overlay` class for bounds of draggables
+ className={styles.cardContainerOverlay}
+ style={{
+ width: 500, // props.stageSize.width,
+ height: 500 // props.stageSize.height
+ }}
>
- <div className={styles.cardContainer}>
- <div className={styles.card}>
- <CardHeader
- expanded={expanded}
- step={step}
- totalSteps={steps.length}
- onCloseCards={onCloseCards}
- onShowAll={onShowAll}
- onShrinkExpandCards={onShrinkExpandCards}
- />
- <div className={expanded ? styles.stepBody : styles.hidden}>
- {steps[step].deckIds ? (
- <PreviewsStep
- content={content}
- deckIds={steps[step].deckIds}
- onActivateDeckFactory={onActivateDeckFactory}
- onShowAll={onShowAll}
- />
- ) : (
- steps[step].video ? (
- <VideoStep
- dragging={dragging}
- video={translateVideo(steps[step].video, locale)}
+ <Draggable
+ bounds="parent"
+ position={{x: x, y: y}}
+ onDrag={onDrag}
+ onStart={onStartDrag}
+ onStop={onEndDrag}
+ >
+ <div className={styles.cardContainer}>
+ <div className={styles.card}>
+ <CardHeader
+ expanded={expanded}
+ step={step}
+ totalSteps={steps.length}
+ onCloseCards={onCloseCards}
+ onShowAll={onShowAll}
+ onShrinkExpandCards={onShrinkExpandCards}
+ />
+ <div className={expanded ? styles.stepBody : styles.hidden}>
+ {steps[step].deckIds ? (
+ <PreviewsStep
+ content={content}
+ deckIds={steps[step].deckIds}
+ onActivateDeckFactory={onActivateDeckFactory}
+ onShowAll={onShowAll}
/>
) : (
- <ImageStep
- image={translateImage(steps[step].image, locale)}
- title={steps[step].title}
- />
- )
- )}
- {steps[step].trackingPixel && steps[step].trackingPixel}
+ steps[step].video ? (
+ <VideoStep
+ dragging={dragging}
+ video={translateVideo(steps[step].video, locale)}
+ />
+ ) : (
+ <ImageStep
+ image={translateImage(steps[step].image, locale)}
+ title={steps[step].title}
+ />
+ )
+ )}
+ {steps[step].trackingPixel && steps[step].trackingPixel}
+ </div>
+ <NextPrevButtons
+ expanded={expanded}
+ isRtl={isRtl}
+ onNextStep={step < steps.length - 1 ? onNextStep : null}
+ onPrevStep={step > 0 ? onPrevStep : null}
+ />
</div>
- <NextPrevButtons
- expanded={expanded}
- isRtl={isRtl}
- onNextStep={step < steps.length - 1 ? onNextStep : null}
- onPrevStep={step > 0 ? onPrevStep : null}
- />
</div>
- </div>
- </Draggable>
+ </Draggable>
+ </Box>
);
};
diff --git a/src/reducers/cards.js b/src/reducers/cards.js
index c54161f4c..4e5c4af11 100644
--- a/src/reducers/cards.js
+++ b/src/reducers/cards.js
@@ -31,6 +31,8 @@ const reducer = function (state, action) {
visible: false
});
case SHRINK_EXPAND_CARDS:
+ // Set new position here based on bounds
+ console.log('TODO: set new position based on bounds');
return Object.assign({}, state, {
expanded: !state.expanded
});
--
GitLab