Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add mouse events support for slides navigation #821

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add mouse events support for slides navigation #821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
97635ab
Add navigation through slides with mouse clicks
ulisesantana May 28, 2022
00fd691
Add mouse events docs
ulisesantana May 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 9 additions & 12 deletions packages/gatsby-plugin/src/deck.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { ThemeProvider, merge } from 'theme-ui'
import split from './split-slides'
import { Context } from './context'
import Keyboard from './keyboard'
import Mouse from './mouse'
import modes from './modes'
import Storage from './storage'
import Container from './container'
Expand All @@ -23,9 +24,8 @@ export default props => {
const slide = slides[index]

const [mode, setMode] = React.useState(modes.default)
const toggleMode = next => setMode(current =>
current === next ? modes.default : next
)
const toggleMode = next =>
setMode(current => (current === next ? modes.default : next))

const [step, setStep] = React.useState(0)
const [steps, setSteps] = React.useState(0)
Expand Down Expand Up @@ -80,7 +80,7 @@ export default props => {
if (steps && step > 0) {
setStep(n => n - 1)
} else {
setIndex(n => n > 0 ? n - 1 : n)
setIndex(n => (n > 0 ? n - 1 : n))
setStep(0)
setSteps(0)
}
Expand All @@ -90,7 +90,7 @@ export default props => {
if (step < steps) {
setStep(n => n + 1)
} else {
setIndex(n => n < slides.length - 1 ? n + 1 : n)
setIndex(n => (n < slides.length - 1 ? n + 1 : n))
setStep(0)
setSteps(0)
}
Expand All @@ -101,18 +101,15 @@ export default props => {
return (
<Context.Provider value={context}>
<Keyboard />
<Mouse />
<Storage />
<Helmet>
{slides.head.children}
{theme.googleFont && <link rel='stylesheet' href={theme.googleFont} />}
{theme.googleFont && <link rel="stylesheet" href={theme.googleFont} />}
</Helmet>
<ThemeProvider
theme={theme}
components={theme.components}>
<ThemeProvider theme={theme} components={theme.components}>
<Container>
<Slide>
{slide}
</Slide>
<Slide>{slide}</Slide>
</Container>
</ThemeProvider>
</Context.Provider>
Expand Down
33 changes: 33 additions & 0 deletions packages/gatsby-plugin/src/mouse.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react'
import { useDeck } from './context'

export const useMouse = () => {
const context = useDeck()

React.useEffect(() => {
const onClick = e => {
e.preventDefault()
context.next()
}
const onRightClick = e => {
e.preventDefault()
if (e.altKey) {
return
}
context.previous()
}

document.addEventListener('click', onClick)
document.addEventListener('contextmenu', onRightClick)

return () => {
document.removeEventListener('click', onClick)
document.removeEventListener('contextmenu', onRightClick)
}
}, [context])
}

export default () => {
useMouse()
return false
}
147 changes: 73 additions & 74 deletions packages/gatsby-plugin/test/deck.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,46 @@
import React from 'react'
import {
render,
fireEvent,
cleanup
} from '@testing-library/react'
import { render, fireEvent, cleanup } from '@testing-library/react'
import Deck from '../src/deck'
import {
Steps,
Header,
Footer,
} from '../src'
import { Steps, Header, Footer } from '../src'

afterEach(cleanup)

let __key = 0
const Comp = ({
originalType,
mdxType,
...props
}) => React.createElement(originalType, props)
const Comp = ({ originalType, mdxType, ...props }) =>
React.createElement(originalType, props)

const x = (tag, props, children) =>
React.createElement(Comp, {
key: __key++,
tag,
originalType: tag,
mdxType: tag,
...props
}, children)
React.createElement(
Comp,
{
key: __key++,
tag,
originalType: tag,
mdxType: tag,
...props,
},
children
)

const mdx = [
x('div', null, 'One'),
x('hr', null),
x('div', null, 'Two'),
]
const mdx = [x('div', null, 'One'), x('hr', null), x('div', null, 'Two')]

const deckProps = {
children: mdx,
location: {
hash: '',
pathname: '/',
},
navigate: jest.fn()
navigate: jest.fn(),
}

test('renders', () => {
const tree = render(
<Deck {...deckProps} />
)
const tree = render(<Deck {...deckProps} />)
const text = tree.getByText('One')
expect(text).toBeTruthy()
})

test('advances one slide with right arrow key', () => {
const tree =render (
<Deck {...deckProps} />
)
const tree = render(<Deck {...deckProps} />)
fireEvent.keyDown(document.body, {
keyCode: 39,
})
Expand All @@ -64,9 +49,7 @@ test('advances one slide with right arrow key', () => {
})

test('advances one slide with down arrow key', () => {
const tree =render (
<Deck {...deckProps} />
)
const tree = render(<Deck {...deckProps} />)
fireEvent.keyDown(document.body, {
keyCode: 40,
})
Expand All @@ -75,9 +58,7 @@ test('advances one slide with down arrow key', () => {
})

test('advances one slide with spacebar key', () => {
const tree =render (
<Deck {...deckProps} />
)
const tree = render(<Deck {...deckProps} />)
fireEvent.keyDown(document.body, {
keyCode: 32,
})
Expand All @@ -86,18 +67,23 @@ test('advances one slide with spacebar key', () => {
})

test('advances one slide with page down key', () => {
const tree =render (
<Deck {...deckProps} />
)
const tree = render(<Deck {...deckProps} />)
fireEvent.keyDown(document.body, {
keyCode: 34,
})
const text = tree.getByText('Two')
expect(text).toBeTruthy()
})

test('advances one slide with mouse click', () => {
const tree = render(<Deck {...deckProps} />)
expect(tree.getByText('One')).toBeTruthy()
fireEvent.click(document.body)
expect(tree.getByText('Two')).toBeTruthy()
})

test('goes back one slide with left arrow key', () => {
const tree =render (
const tree = render(
<Deck
{...deckProps}
location={{
Expand All @@ -113,7 +99,7 @@ test('goes back one slide with left arrow key', () => {
})

test('goes back one slide with up arrow key', () => {
const tree =render (
const tree = render(
<Deck
{...deckProps}
location={{
Expand All @@ -129,7 +115,7 @@ test('goes back one slide with up arrow key', () => {
})

test('goes back one slide with page up key', () => {
const tree =render (
const tree = render(
<Deck
{...deckProps}
location={{
Expand All @@ -145,7 +131,7 @@ test('goes back one slide with page up key', () => {
})

test('goes back one slide with shift + space bar', () => {
const tree =render (
const tree = render(
<Deck
{...deckProps}
location={{
Expand All @@ -161,10 +147,38 @@ test('goes back one slide with shift + space bar', () => {
expect(text).toBeTruthy()
})

test('ignores meta keys', () => {
const tree =render (
<Deck {...deckProps} />
test('goes back one slide with right click', () => {
const tree = render(
<Deck
{...deckProps}
location={{
hash: '#1',
}}
/>
)
expect(tree.getByText('Two')).toBeTruthy()
fireEvent.contextMenu(document.body)
expect(tree.getByText('One')).toBeTruthy()
})

test('allow context menu when alt button is pressed while clicking right button', () => {
const tree = render(
<Deck
{...deckProps}
location={{
hash: '#1',
}}
/>
)
expect(tree.getByText('Two')).toBeTruthy()
fireEvent.contextMenu(document.body, {
altKey: true,
})
expect(tree.getByText('Two')).toBeTruthy()
})

test('ignores meta keys', () => {
const tree = render(<Deck {...deckProps} />)
fireEvent.keyDown(document.body, {
metaKey: true,
keyCode: 39,
Expand All @@ -174,9 +188,7 @@ test('ignores meta keys', () => {
})

test('ignores ctrl keys', () => {
const tree =render (
<Deck {...deckProps} />
)
const tree = render(<Deck {...deckProps} />)
fireEvent.keyDown(document.body, {
ctrlKey: true,
keyCode: 39,
Expand All @@ -186,12 +198,12 @@ test('ignores ctrl keys', () => {
})

test('initializes print mode', () => {
const tree =render (
const tree = render(
<Deck
{...deckProps}
location={{
hash: '',
pathname: '/print'
pathname: '/print',
}}
/>
)
Expand All @@ -203,7 +215,9 @@ test('initializes print mode', () => {

describe('steps', () => {
const children = [
x('div', null,
x(
'div',
null,
<Steps>
<div>A</div>
<div>B</div>
Expand All @@ -215,12 +229,7 @@ describe('steps', () => {
]

test('increments step', () => {
const tree =render (
<Deck
{...deckProps}
children={children}
/>
)
const tree = render(<Deck {...deckProps} children={children} />)
fireEvent.keyDown(document.body, {
keyCode: 39,
})
Expand All @@ -231,12 +240,7 @@ describe('steps', () => {
})

test('decrements step', () => {
const tree =render (
<Deck
{...deckProps}
children={children}
/>
)
const tree = render(<Deck {...deckProps} children={children} />)
fireEvent.keyDown(document.body, { keyCode: 39 })
fireEvent.keyDown(document.body, { keyCode: 39 })
fireEvent.keyDown(document.body, { keyCode: 37 })
Expand All @@ -255,12 +259,7 @@ test('renders with Header and Footer', () => {
x('hr', null),
x('div', null, 'Two'),
]
const tree =render (
<Deck
{...deckProps}
children={children}
/>
)
const tree = render(<Deck {...deckProps} children={children} />)
const header = tree.getByText('Header')
const footer = tree.getByText('Footer')
expect(header).toBeTruthy()
Expand Down
9 changes: 9 additions & 0 deletions packages/mdx-deck/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,15 @@ which will show a preview of the next slide, a timer, and speaker notes.
The presentation can be opened in two separate windows at the same time,
and it will stay in sync with the other window.

## Mouse Events

| Key | Description |
|-------------| -------------------------------------------- |
| Right click | Go to previous slide (or step in [Steps][]) |
| Left click | Go to next slide (or step in [Steps][]) |

In any case you need the default behaviour for right-click (show up the context menu) you can right-click while pressing `ALT` button.

## Keyboard Shortcuts

| Key | Description |
Expand Down