This repository has been archived by the owner on Mar 23, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
229 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,3 +5,4 @@ | |
/node_modules | ||
/umd | ||
npm-debug.log* | ||
package-lock.json |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
html { box-sizing: border-box } | ||
*, *:before, *:after { box-sizing: inherit } | ||
|
||
body { | ||
margin: 0; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,20 @@ | ||
import React, {Component} from 'react' | ||
import {render} from 'react-dom' | ||
import React, { Component } from "react"; | ||
import { render } from "react-dom"; | ||
|
||
import Example from '../../src' | ||
import "./index.css"; | ||
|
||
import { Deck, Slide } from "../../src"; | ||
import { IFrame, Title } from "../../src/templates"; | ||
|
||
const slides = [ | ||
<Title>1</Title>, | ||
<IFrame src="https://brnbw.com">Caption</IFrame> | ||
]; | ||
|
||
class Demo extends Component { | ||
render() { | ||
return <div> | ||
<h1>maximum-overbusiness Demo</h1> | ||
<Example/> | ||
</div> | ||
return <Deck slides={slides} />; | ||
} | ||
} | ||
|
||
render(<Demo/>, document.querySelector('#demo')) | ||
render(<Demo />, document.querySelector("#demo")); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import React, { Component } from "react"; | ||
import P from "prop-types"; | ||
import { | ||
BrowserRouter as Router, | ||
Switch, | ||
Route, | ||
Redirect | ||
} from "react-router-dom"; | ||
import Navigation from "./Navigation"; | ||
import theme from "./themes/blank"; | ||
|
||
export default class Deck extends Component { | ||
static defaultProps = { | ||
theme: theme | ||
}; | ||
|
||
static childContextTypes = { | ||
slides: P.array.isRequired, | ||
deckProps: P.object.isRequired, | ||
theme: P.object.isRequired | ||
}; | ||
|
||
getChildContext() { | ||
const { theme, slides, ...props } = this.props; | ||
|
||
return { | ||
slides, | ||
deckProps: props, | ||
theme | ||
}; | ||
} | ||
|
||
render() { | ||
return ( | ||
<Router> | ||
<Switch> | ||
<Route path="/:slide" component={Navigation} /> | ||
<Redirect from="/" to="/1" /> | ||
</Switch> | ||
</Router> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import React, { Component } from "react"; | ||
import P from "prop-types"; | ||
import Viewport from './Viewport' | ||
|
||
export default class Navigation extends Component { | ||
static contextTypes = { | ||
slides: P.array.isRequired, | ||
deckProps: P.object.isRequired | ||
}; | ||
|
||
componentDidMount() { | ||
window.addEventListener("keydown", this.handleKeyDown); | ||
window.addEventListener("touchend", this.handleTouchEnd); | ||
} | ||
|
||
componentWillUnmount() { | ||
window.removeEventListener("keydown", this.handleKeyDown); | ||
window.removeEventListener("touchend", this.handleTouchEnd); | ||
} | ||
|
||
handleKeyDown = event => { | ||
switch (event.keyCode) { | ||
case 8: // bckspc | ||
case 33: // pg up | ||
case 37: // left arr | ||
this.navigate(-1); | ||
break; | ||
case 32: // space | ||
case 34: // pg dwn | ||
case 39: // right arr | ||
this.navigate(1); | ||
break; | ||
default: | ||
break; | ||
} | ||
}; | ||
|
||
handleTouchEnd = event => { | ||
this.navigate(1); | ||
}; | ||
|
||
navigate = direction => { | ||
const { history, match: { params } } = this.props; | ||
const { slides } = this.context; | ||
|
||
const nextSlide = Math.max( | ||
1, | ||
Math.min(slides.length, parseInt(params.slide, 10) + direction) | ||
); | ||
|
||
history.push(`/${nextSlide}`); | ||
}; | ||
|
||
render() { | ||
const { match: { params } } = this.props; | ||
const { slides, deckProps } = this.context; | ||
const slideIndex = parseInt(params.slide, 10) - 1; | ||
|
||
return <Viewport {...deckProps}>{slides[slideIndex]}</Viewport>; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import React from "react"; | ||
import P from "prop-types"; | ||
|
||
const Slide = ({ style, ...props }, { theme: { slide: slideTheme } }) => ( | ||
<div style={{ ...slideTheme.style, ...style }} {...props} /> | ||
); | ||
|
||
Slide.contextTypes = { | ||
theme: P.object.isRequired | ||
}; | ||
|
||
export default Slide; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import React, { Fragment } from 'react' | ||
|
||
export default ({ children }, { slideNum }) => <Fragment /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import React from "react"; | ||
import P from "prop-types"; | ||
|
||
const Viewport = ({ style, ...props }, { theme: { deck } }) => ( | ||
<div style={{ ...deck.style, ...style }} {...props} /> | ||
); | ||
|
||
Viewport.contextTypes = { | ||
theme: P.object.isRequired | ||
}; | ||
|
||
export default Viewport; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
function Clicker(window) { | ||
this.listeners = { | ||
next: [], | ||
prev: [] | ||
} | ||
|
||
window.addEventListener('keydown', this._keyDown) | ||
window.removeEventListener('keydown', this._keyDown) | ||
} | ||
|
||
Clicker.prototype.on = function(event, cb) { | ||
this.listeners[event].push(cb) | ||
|
||
return function off () { | ||
this.listeners[event].remove(cb) | ||
} | ||
} | ||
|
||
Clicker.prototype._keyDown = function(event) { | ||
switch (event.keyCode) { | ||
case 8: // bckspc | ||
case 33: // pg up | ||
case 37: // left arr | ||
this.listeners['next'].forEach(cb => cb(event)) | ||
break; | ||
case 32: // space | ||
case 34: // pg dwn | ||
case 39: // right arr | ||
this.listeners['prev'].forEach(cb => cb(event)) | ||
break; | ||
default: | ||
break; | ||
} | ||
} | ||
|
||
module.exports = new Clicker(window) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,3 @@ | ||
import React, {Component} from 'react' | ||
|
||
export default class extends Component { | ||
render() { | ||
return <div> | ||
<h2>Welcome to React components</h2> | ||
</div> | ||
} | ||
} | ||
export const Deck = require('./Deck').default | ||
export const Slide = require('./Slide').default | ||
export const Slides = require('./Slides').default |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import React from "react"; | ||
import { Slide } from "./"; | ||
|
||
export const Title = ({ children, ...props }) => ( | ||
<Slide {...props}> | ||
<h1>{children}</h1> | ||
</Slide> | ||
); | ||
|
||
export const IFrame = ({ src, children, style, ...props }) => ( | ||
<Slide style={{ ...style, flexFlow: "column" }} {...props}> | ||
<header style={{ flex: "0 0 auto" }}> | ||
<input type="text" value={src} readOnly /> | ||
{children} | ||
</header> | ||
<iframe | ||
src={src} | ||
title="slide" | ||
{...props} | ||
style={{ flex: "1 1 auto", width: "100%", border: "0" }} | ||
/> | ||
</Slide> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
export default { | ||
deck: { | ||
style: { height: "100vh", display: "flex" } | ||
}, | ||
slide: { | ||
style: { | ||
width: "100%", | ||
display: "flex", | ||
alignItems: "center", | ||
justifyContent: "center" | ||
} | ||
} | ||
}; |