Skip to content
Permalink
Browse files

initial commit

  • Loading branch information...
mathisonian committed Aug 17, 2018
1 parent 709cef9 commit 220d5b58af50a6a272c688404918e26f71f05160
@@ -0,0 +1,63 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Typescript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

.idyll
build

*.twb
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
{{#title}}
<title>
{{title}}
</title>
<meta property="og:title" content="{{title}}">
{{/title}}
{{^title}}
<title>Idyll</title>
<meta property="og:title" content="Idyll Project">
{{/title}}
<meta charset="utf-8">
{{#shareImageUrl}}
<meta property="og:image" content="{{shareImageUrl}}">
<meta name="twitter:image:src" content="{{shareImageUrl}}">
<meta name="twitter:card" content="summary_large_image">
{{/shareImageUrl}}
{{#shareImageWidth}}
<meta property="og:image:width" content="{{shareImageWidth}}">
{{/shareImageWidth}}
{{#shareImageHeight}}
<meta property="og:image:width" content="{{shareImageHeight}}">
{{/shareImageHeight}}
<meta property="og:type" content="article">

{{#description}}
<meta property="og:description" content="{{description}}">
<meta property="description" content="{{description}}">
{{/description}}
{{#url}}
<meta property="og:url" content="{{url}}">
{{/url}}
{{#twitterHandle}}
<meta property="twitter:creator" content="{{twitterHandle}}">
{{/twitterHandle}}
{{#usesTex}}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css">
{{/usesTex}}
{{#googleFontsUrl}}
<link rel="stylesheet" href="{{googleFontsUrl}}">
{{/googleFontsUrl}}
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="static/idyll_styles.css">

</head>
<body>
<div id="idyll-mount">{{{idyllContent}}}</div>
<script src="static/idyll_index.js"></script>
</body>
</html>
@@ -0,0 +1,14 @@
const React = require('react');

class CustomComponent extends React.Component {
render() {
const { idyll, hasError, updateProps, ...props } = this.props;
return (
<div {...props}>
This is a custom component
</div>
);
}
}

module.exports = CustomComponent;
@@ -0,0 +1,30 @@
const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');

const size = 600;

class CustomD3Component extends D3Component {

initialize(node, props) {
const svg = this.svg = d3.select(node).append('svg');
svg.attr('viewBox', `0 0 ${size} ${size}`)
.style('width', '100%')
.style('height', 'auto');

svg.append('circle')
.attr('r', 20)
.attr('cx', Math.random() * size)
.attr('cy', Math.random() * size);
}

update(props) {
this.svg.selectAll('circle')
.transition()
.duration(750)
.attr('cx', Math.random() * size)
.attr('cy', Math.random() * size);
}
}

module.exports = CustomD3Component;
@@ -0,0 +1,39 @@
const React = require('react');
const EmbedContainer = require('react-oembed-container').default;

class OEmbed extends React.Component {

constructor(props) {
super(props);
this.state = {
markup: ''
};
}

componentDidMount() {
const provider = "https://app.flourish.studio/api/v1/oembed";
const url = this.props.url;

fetch(`${provider.replace('{format}', 'json')}?format=json&url=${encodeURIComponent(url)}`)
.then((response) => response.json())
.then((json) => {
console.log(json);
this.setState({
markup: json.html
});
})
}
render() {
const { idyll, hasError, updateProps, ...props } = this.props;
console.log('setting markup', this.state.markup);
if (this.state.markup) {
console.log('setting');
return (
<div dangerouslySetInnerHTML={{ __html: this.state.markup }} />
);
}
return null;
}
}

module.exports = OEmbed;
@@ -0,0 +1,32 @@
const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');

const size = 600;

class ScrollLock extends D3Component {

initialize(node, props) {
if (props.locked) {
console.log('locking')
d3.select('body').style('overflow', 'hidden').style('width', '100vw').style('height', '100vh');
window.scrollTo(0, 0);
}
}

update(props, oldProps) {
if (props.locked !== oldProps.locked) {
if (props.locked) {
console.log('locking')

d3.select('body').style('overflow', 'hidden').style('width', '100vw').style('height', '100vh');
} else {
console.log('unlocking')
window.scrollTo(0, 0);
d3.select('body').style('overflow', 'auto').style('width', '100vw').style('height', 'auto');
}
}
}
}

module.exports = ScrollLock;
@@ -0,0 +1,157 @@
const React = require('react');
const { filterChildren, mapChildren } = require('idyll-component-children');
import TextContainer from './text-container';
const d3 = require('d3-selection');

const styles = {
SCROLL_GRAPHIC: {
top: 0,
left: 0,
right: 0,
bottom: 'auto',
height: '100vh',
width: '100%',
transform: `translate3d(0, 0, 0)`,
zIndex: -1
},

SCROLL_GRAPHIC_INNER: {
position: 'absolute',
// right: '1rem',
left: 0,
right: 0,
top: '50%',
transform: 'translateY(-50%)'
}
}

let id = 0;

class Scroller extends React.Component {
constructor(props) {
super(props);
this.id = id++;
this.state = {
graphicHeight: 0,
graphicWidth: 0
};

this.SCROLL_STEP_MAP = {};
this.SCROLL_NAME_MAP = {};
}

componentDidMount() {
require('intersection-observer');
const scrollama = require('scrollama');
// instantiate the scrollama
const scroller = scrollama();
this.handleResize();

// setup the instance, pass callback functions
scroller
.setup({
step: `#idyll-scroll-${this.id} .idyll-step`, // required
container: `#idyll-scroll-${this.id}`, // required (for sticky)
graphic: `#idyll-scroll-${this.id} .idyll-scroll-graphic` // required (for sticky)
})
.onStepEnter(this.handleStepEnter.bind(this))
// .onStepExit(handleStepExit)
.onContainerEnter(this.handleContainerEnter.bind(this))
//.onContainerExit(this.handleContainerExit.bind(this));


// setup resize event
window.addEventListener('resize', this.handleResize.bind(this));
}

handleStepEnter({ element, index, direction }) {
this.SCROLL_STEP_MAP[index] && this.SCROLL_STEP_MAP[index]();
let update = { currentStep: index };
if (this.SCROLL_NAME_MAP[index]) {
update.currentState = this.SCROLL_NAME_MAP[index];
}
this.props.updateProps && this.props.updateProps(update);
if (index === Object.keys(this.SCROLL_STEP_MAP).length - 1) {
d3.select('body').style('overflow', 'auto');
}
}

handleResize() {
this.setState({
graphicHeight: window.innerHeight + 'px',
graphicWidth: window.innerWidth + 'px',
});
}

handleContainerEnter(response) {
if (this.props.disableScroll && (!this.props.currentStep || this.props.currentStep < Object.keys(this.SCROLL_STEP_MAP).length - 1)) {
d3.select('body').style('overflow', 'hidden');
}
}

componentWillReceiveProps(nextProps) {
if (nextProps.disableScroll && this.props.currentStep !== nextProps.currentStep) {
d3.selectAll(`#idyll-scroll-${this.id} .idyll-step`)
.filter(function (d, i) { return i === nextProps.currentStep; })
.node()
.scrollIntoView({ behavior: 'smooth' });
}
if (nextProps.disableScroll && this.props.currentState !== nextProps.currentState) {
d3.selectAll(`#idyll-scroll-${this.id} .idyll-step`)
.filter((d, i) => { return nextProps.currentState === this.SCROLL_NAME_MAP[i] })
.node()
.scrollIntoView({ behavior: 'smooth' });
}
if (nextProps.disableScroll && (!nextProps.currentStep || nextProps.currentStep < Object.keys(this.SCROLL_STEP_MAP).length - 1)) {
d3.select('body').style('overflow', 'hidden');
}
}

registerStep(elt, name, val) {
this.SCROLL_STEP_MAP[elt] = val;
this.SCROLL_NAME_MAP[elt] = name;
}

render() {
const { hasError, updateProps, idyll, children, ...props } = this.props;
const { graphicHeight, graphicWidth } = this.state;

const graphicChildren = filterChildren(
children,
(c) => {
return c.type.name && c.type.name.toLowerCase() === 'graphic';
}
);

return (
<div ref={(ref) => this.ref = ref} className="idyll-scroll" id={`idyll-scroll-${this.id}`}
style={Object.assign({ position: 'relative' })}>
{
(graphicChildren && graphicChildren.length) ?
<div className="idyll-scroll-graphic"
style={Object.assign({ height: graphicHeight }, styles.SCROLL_GRAPHIC)} >
<div style={Object.assign({ width: graphicWidth }, styles.SCROLL_GRAPHIC_INNER)}>
{graphicChildren}
</div>
</div> : null
}
<TextContainer idyll={idyll}>
<div className="idyll-scroll-text">
{mapChildren(filterChildren(
children,
(c) => {
return !c.type.name || c.type.name.toLowerCase() === 'step';
}
), (c) => {
return React.cloneElement(c, {
registerStep: this.registerStep.bind(this)
});
})}
</div>
</TextContainer>
</div>
);
}
}

export default Scroller;
Oops, something went wrong.

0 comments on commit 220d5b5

Please sign in to comment.
You can’t perform that action at this time.