mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-09-19 02:47:09 +03:00
Add modal components
This commit is contained in:
parent
9e2cbcd68d
commit
143eb683ca
@ -15,15 +15,15 @@ Prototype for MDX Deck v3
|
|||||||
- [x] mode-switch keys
|
- [x] mode-switch keys
|
||||||
- [x] mode state
|
- [x] mode state
|
||||||
- [ ] mode components
|
- [ ] mode components
|
||||||
- [ ] Presenter
|
- [x] Presenter
|
||||||
- [ ] Overview
|
- [x] Overview
|
||||||
- [ ] Grid
|
- [x] Grid
|
||||||
- [ ] Print
|
- [ ] Print
|
||||||
|
- [x] add legacy theme transformer
|
||||||
|
- [x] export theme/themes API
|
||||||
- [-] slide styles
|
- [-] slide styles
|
||||||
- [-] theme-ui
|
- [-] theme-ui
|
||||||
- [ ] port default themes over
|
- [ ] port default themes over
|
||||||
- [ ] add legacy theme transformer
|
|
||||||
- [ ] export theme/themes API
|
|
||||||
- [ ] react helmet ??? how can this even work??
|
- [ ] react helmet ??? how can this even work??
|
||||||
- [ ] custom Head component
|
- [ ] custom Head component
|
||||||
- [ ] remove Head in slides parser
|
- [ ] remove Head in slides parser
|
||||||
|
@ -15,6 +15,8 @@ import { modes } from '../constants'
|
|||||||
import convertLegacyTheme from '../convert-legacy-theme'
|
import convertLegacyTheme from '../convert-legacy-theme'
|
||||||
|
|
||||||
import Presenter from './presenter'
|
import Presenter from './presenter'
|
||||||
|
import Overview from './overview'
|
||||||
|
import Grid from './grid'
|
||||||
|
|
||||||
const Keyboard = () => {
|
const Keyboard = () => {
|
||||||
useKeyboard()
|
useKeyboard()
|
||||||
@ -64,6 +66,12 @@ export default ({
|
|||||||
case modes.presenter:
|
case modes.presenter:
|
||||||
Mode = Presenter
|
Mode = Presenter
|
||||||
break
|
break
|
||||||
|
case modes.overview:
|
||||||
|
Mode = Overview
|
||||||
|
break
|
||||||
|
case modes.grid:
|
||||||
|
Mode = Grid
|
||||||
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
36
packages/gatsby-theme-next/src/components/grid.js
Normal file
36
packages/gatsby-theme-next/src/components/grid.js
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
/** @jsx jsx */
|
||||||
|
import { jsx } from 'theme-ui'
|
||||||
|
import { navigate } from '@reach/router'
|
||||||
|
import useDeck from '../hooks/use-deck'
|
||||||
|
import { modes } from '../constants'
|
||||||
|
import SlideList from './slide-list'
|
||||||
|
|
||||||
|
export default ({ slides }) => {
|
||||||
|
const { slug, setState } = useDeck()
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
sx={{
|
||||||
|
minHeight: '100vh',
|
||||||
|
color: 'white',
|
||||||
|
bg: 'black',
|
||||||
|
}}>
|
||||||
|
<div
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
}}>
|
||||||
|
<SlideList
|
||||||
|
slides={slides}
|
||||||
|
onClick={i => {
|
||||||
|
navigate([slug, i].join('/'))
|
||||||
|
setState({ mode: modes.normal })
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
width: '25%',
|
||||||
|
m: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
63
packages/gatsby-theme-next/src/components/overview.js
Normal file
63
packages/gatsby-theme-next/src/components/overview.js
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
/** @jsx jsx */
|
||||||
|
import { jsx } from 'theme-ui'
|
||||||
|
import { navigate } from '@reach/router'
|
||||||
|
import useDeck from '../hooks/use-deck'
|
||||||
|
import Zoom from './zoom'
|
||||||
|
import Slide from './slide'
|
||||||
|
import SlideList from './slide-list'
|
||||||
|
|
||||||
|
export default ({ slides, children }) => {
|
||||||
|
const { slug, index, length } = useDeck()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
height: '100vh',
|
||||||
|
fontFamily: 'ui',
|
||||||
|
color: 'white',
|
||||||
|
bg: 'black',
|
||||||
|
}}>
|
||||||
|
<div
|
||||||
|
sx={{
|
||||||
|
width: 100 / 6 + '%',
|
||||||
|
minWidth: 0,
|
||||||
|
flex: 'none',
|
||||||
|
height: '100vh',
|
||||||
|
overflowY: 'auto',
|
||||||
|
WebkitOverflowScrolling: 'touch',
|
||||||
|
p: 2,
|
||||||
|
}}>
|
||||||
|
<SlideList
|
||||||
|
slides={slides}
|
||||||
|
zoom={1 / 6}
|
||||||
|
onClick={i => {
|
||||||
|
navigate([slug, i].join('/'))
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
sx={{
|
||||||
|
width: 500 / 6 + '%',
|
||||||
|
py: 3,
|
||||||
|
pr: 3,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100vh',
|
||||||
|
}}>
|
||||||
|
<div
|
||||||
|
sx={{
|
||||||
|
flex: '1 1 auto',
|
||||||
|
}}>
|
||||||
|
<Zoom zoom={5 / 6}>{children}</Zoom>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
sx={{
|
||||||
|
py: 3,
|
||||||
|
}}>
|
||||||
|
{index} / {length - 1}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
@ -31,7 +31,7 @@ export const Presenter = ({ slides, children }) => {
|
|||||||
width: '75%',
|
width: '75%',
|
||||||
p: 3,
|
p: 3,
|
||||||
}}>
|
}}>
|
||||||
<Zoom>{children}</Zoom>
|
<Zoom zoom={3 / 4}>{children}</Zoom>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
sx={{
|
sx={{
|
||||||
|
61
packages/gatsby-theme-next/src/components/slide-list.js
Normal file
61
packages/gatsby-theme-next/src/components/slide-list.js
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
/** @jsx jsx */
|
||||||
|
import { jsx } from 'theme-ui'
|
||||||
|
import React, { useEffect, useRef } from 'react'
|
||||||
|
import Zoom from './zoom'
|
||||||
|
import Slide from './slide'
|
||||||
|
import useDeck from '../hooks/use-deck'
|
||||||
|
|
||||||
|
const noop = () => {}
|
||||||
|
|
||||||
|
export const SlideList = ({
|
||||||
|
slides = [],
|
||||||
|
ratio = 16 / 9,
|
||||||
|
zoom = 1 / 4,
|
||||||
|
onClick = noop,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const { index } = useDeck()
|
||||||
|
const thumb = useRef(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const el = thumb.current
|
||||||
|
if (!el) return
|
||||||
|
if (typeof el.scrollIntoViewIfNeeded === 'function') {
|
||||||
|
el.scrollIntoViewIfNeeded()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
{slides.map((slide, i) => (
|
||||||
|
<div
|
||||||
|
{...props}
|
||||||
|
key={i}
|
||||||
|
role="link"
|
||||||
|
ref={i === index ? thumb : null}
|
||||||
|
onClick={e => {
|
||||||
|
onClick(i)
|
||||||
|
}}
|
||||||
|
style={
|
||||||
|
index === i
|
||||||
|
? {
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 1,
|
||||||
|
}
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
sx={{
|
||||||
|
m: 2,
|
||||||
|
cursor: 'pointer',
|
||||||
|
outline: index === i ? `4px solid cyan` : null,
|
||||||
|
}}>
|
||||||
|
<Zoom zoom={zoom} ratio={ratio}>
|
||||||
|
<Slide slide={slide} preview />
|
||||||
|
</Zoom>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SlideList
|
@ -7,7 +7,6 @@ export const Zoom = ({
|
|||||||
...props
|
...props
|
||||||
}) => (
|
}) => (
|
||||||
<div
|
<div
|
||||||
{...props}
|
|
||||||
sx={{
|
sx={{
|
||||||
width: '100%',
|
width: '100%',
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
|
@ -7,6 +7,6 @@ export default length => {
|
|||||||
if (typeof context.register !== 'function') return
|
if (typeof context.register !== 'function') return
|
||||||
context.register(context.index, 'steps', length)
|
context.register(context.index, 'steps', length)
|
||||||
}, [])
|
}, [])
|
||||||
// if (context.preview) return length
|
if (context.preview) return length
|
||||||
return context.step
|
return context.step
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user