spectacle-code-slide/src/CodeSlideControlHelpers.js at a4eb7ed98b0e08e224a1268c1f9f81af6706e935 · jamiebuilds/spectacle-code-slide · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
const React = require('react');

const blinkAnimation = 'code-slide-control-helpers-blink';
const shakeAnimation = 'code-slide-control-helpers-shake';

const getContainerTransform = (extraTransform = '') => `translate(-100%, -100%) ${extraTransform}`

const styles = {
  container: {
    position: 'fixed',
    bottom: '-15%',
    transform: getContainerTransform()
  },
  controlKey: {
    height: '50px',
    width: '50px',
    backgroundColor: 'white',
    color: 'black',
    margin: '15px 0',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: '8px',
    border: 'solid 1px rgba(0, 0, 0, 0.4)',
    opacity: 0.3
  },
  controlKeyActive: {
    animation: `2.5s ease-in-out infinite alternate ${blinkAnimation} `
  },
  containerPristine: {
    animation: `2.5s ease-in-out infinite 1s alternate ${shakeAnimation}`
  }
};

class CodeSlideControlHelpers extends React.Component {
  render() {
    const { hasNextRange, pristine } = this.props;
    return (
      <div style={{position: 'relative'}}>
        <div style={{position: 'absolute', left: '99%'}}>
          <div
              style={{
                ...styles.container,
                ...pristine ? styles.containerPristine : {}
              }}
          >
            <style>{`
              @keyframes ${blinkAnimation} {
                0%, 35% {
                  opacity: 1;
                }
                50% {
                  opacity: 0.5;
                }
                65%, 100% {
                  opacity: 1;
                }
              }
              @keyframes ${shakeAnimation} {
                0%, 40% {
                  transform: ${getContainerTransform()};
                }
                45% {
                  transform: ${getContainerTransform('translateX(3px)')};
                }
                50% {
                  transform: ${getContainerTransform('translateX(-5px)')};
                }
                55% {
                  transform: ${getContainerTransform('translateX(4px)')};
                }
                60%, 100% {
                  transform: ${getContainerTransform()};
                }
              }
            `}</style>
            <div style={styles.controls}>
              <div style={styles.controlKey}>
                ↑
              </div>
              <div
                style={{
                  ...styles.controlKey,
                  ...hasNextRange ? styles.controlKeyActive : {},
                }}
              >
                ↓
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

module.exports = CodeSlideControlHelpers;