pageflow-react 0.1.0

data/js/src/components/page_background.jsx

@@ -0,0 +1,11 @@
+import {Component} from 'react';
+
+export default class extends Component {
+  render() {
+    return (
+      <div className="backgroundArea">
+        {this.props.children}
+      </div>
+    );
+  }
+};

data/js/src/components/page_background_image.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import LazyBackgroundImage from './lazy_background_image.jsx';
+
+export default class PageBackgroundImage extends React.Component {
+  render() {
+    return (
+      <LazyBackgroundImage imageFileId={this.props.page.backgroundImageId}
+                           position={[this.props.page.backgroundImageX, this.props.page.backgroundImageY]}
+                           className="background background_image" />
+    );
+  }
+};

data/js/src/components/page_content.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Scroller from './scroller';
+import createPageComponent from '../create_page_component.jsx';
+
+export default class PageContent extends React.Component {
+  static childContextTypes = {
+    pageScroller: React.PropTypes.object
+  }
+
+  getChildContext() {
+    this._pageScroller = this._pageScroller || {
+      disable: () => {
+        this.refs.scroller.disable();
+      },
+      enable: () => {
+        this.refs.scroller.enable();
+      }
+    };
+
+    return {
+      pageScroller: this._pageScroller,
+    };
+  }
+
+  render() {
+    return (
+      <div className="content">
+        <Scroller ref="scroller">
+          <div className="contentWrapper">
+            {this.props.children}
+          </div>
+        </Scroller>
+      </div>
+    );
+  }
+
+  pageWillActivate(options) {
+    this.refs.scroller.resetPosition({position: options.position})
+  }
+
+  pageDidActivate() {
+    this.refs.scroller.enable()
+  }
+
+  pageWillDeactivate() {
+    this.refs.scroller.disable()
+  }
+};
+
+export default createPageComponent(PageContent);

data/js/src/components/page_header.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default class extends React.Component {
+  render() {
+    return (
+      <div className="page_header">
+        <h2>
+          <span className="tagline">{this.props.page.tagline}</span>
+          <span className="title">{this.props.page.title}</span>
+          <span className="subtitle">{this.props.page.subtitle}</span>
+        </h2>
+      </div>
+    );
+  }
+};

data/js/src/components/page_link.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export default class PageLink extends React.Component {
+  render() {
+    return (
+      <a href={this._href()}
+         className={this.props.className}
+         onClick={this._handleClick.bind(this)}>
+        {this.props.children}
+      </a>
+    );
+  }
+
+  _href() {
+    if (this._targetPage()) {
+      return '#' + this._targetPage().permaId;
+    }
+    else {
+      return '#missing';
+    }
+  }
+
+  _handleClick(event) {
+    if (this._targetPage()) {
+      pageflow.slides.goToByPermaId(this._targetPage().permaId, {
+        transition: this.props.pageLink.pageTransition
+      });
+    }
+    event.preventDefault();
+  }
+
+  _targetPage() {
+    return this.props.pageLink.targetPage;
+  }
+};

data/js/src/components/page_shadow.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default class PageShadow extends React.Component {
+  render() {
+    return (
+      <div className="shadow_wrapper">
+        <div className="shadow" style={this.style()} />
+      </div>
+    );
+  }
+
+  style() {
+    if ('gradientOpacity' in this.props.page) {
+      return {
+        opacity: this.props.page.gradientOpacity / 100
+      };
+    }
+  }
+};

data/js/src/components/page_text.jsx

@@ -0,0 +1,17 @@
+import {Component} from 'react';
+
+export default class PageText extends Component {
+  render() {
+    return (
+      <div className="contentText">
+        <p dangerouslySetInnerHTML={this.text()} />
+      </div>
+    );
+  }
+
+  text() {
+    return {__html: this.props.page.text};
+  }
+};
+
+export default PageText;

data/js/src/components/page_thumbnail.jsx

@@ -0,0 +1,86 @@
+import classNames from 'classnames';
+
+import createContainer from '../create_container.jsx';
+import resolve from '../resolve';
+import camelize from '../utils/camelize';
+
+export function PageThumbnail(props) {
+  return (
+    <div className={className(props)} />
+  );
+};
+
+PageThumbnail.defaultProps = {
+  imageStyle: 'navigation_thumbnail_large'
+};
+
+function className(props) {
+  return classNames(
+    {load_image: props.lazy && props.loaded},
+    props.className,
+    typeClassName(props.page),
+    thumbnailClassName(props)
+  );
+}
+
+function typeClassName(page) {
+  return page ? `is_${page.type.name}` : 'is_dangling';
+}
+
+function thumbnailClassName(props) {
+  var candidate = firstPresentCandidate(props);
+
+  if (candidate) {
+    return thumbnailCandidateClassName(props, candidate);
+  }
+}
+
+function firstPresentCandidate(props) {
+  return thumbnailCandidates(props).find(candidate => {
+    var id = thumbnailCandidateId(props, candidate);
+    var ids = props.fileIds[candidate.collectionName] || [];
+
+    return (id && ids.includes(id));
+  });
+}
+
+function thumbnailCandidates(props) {
+  return [
+    customThumbnailCandidate(props),
+    ...pageTypeCandidates(props.page)
+  ];
+}
+
+function customThumbnailCandidate(props) {
+  return {
+    id: props.customThumbnailId,
+    cssClassPrefix: 'pageflow_image_file',
+    collectionName: 'image_files'
+  }
+}
+
+function pageTypeCandidates(page) {
+  return page ? page.type.thumbnailCandidates : [];
+}
+
+function thumbnailCandidateClassName(props, candidate) {
+  return [
+    props.lazy ? 'lazy' : null,
+    candidate.cssClassPrefix,
+    props.imageStyle,
+    thumbnailCandidateId(props, candidate)
+  ].filter(Boolean).join('_');
+}
+
+function thumbnailCandidateId(props, candidate) {
+  return 'id' in candidate ? candidate.id : props.page[camelize(candidate.attribute)];
+}
+
+export default createContainer(PageThumbnail, {
+  fragments: {
+    page: {
+      type: resolve('pageType')
+    },
+    fileIds: resolve('fileIds')
+  }
+});

data/js/src/components/page_wrapper.jsx

@@ -0,0 +1,11 @@
+import {Component} from 'react';
+
+export default class extends Component {
+  render() {
+    return (
+      <div className="content_and_background">
+        {this.props.children}
+      </div>
+    );
+  }
+};

data/js/src/components/scroller.js

@@ -0,0 +1,43 @@
+import {Component} from 'react';
+import ReactDom from 'react-dom';
+
+/** @api private */
+class Scroller extends Component {
+  render() {
+    return (
+      <div ref="wrapper" className="scroller"><div>{this.props.children}</div></div>
+    );
+  }
+
+  componentDidMount() {
+    if (typeof jQuery !== 'undefined') {
+      var element = jQuery(ReactDOM.findDOMNode(this.refs.wrapper));
+
+      element.scroller();
+      window.sss = this.scroller = element.scroller('instance');
+    }
+  }
+
+  componentDidUpdate() {
+    this.scroller.refresh();
+  }
+
+  enable() {
+    this.scroller.enable();
+    this.scroller.afterAnimationHook();
+  }
+
+  disable() {
+    this.scroller.disable();
+  }
+
+  resetPosition(options) {
+    this.scroller.resetPosition(options);
+  }
+
+  resetPosition(options) {
+    this.scroller.resetPosition(options);
+  }
+};
+
+export default Scroller;

data/js/src/create_container.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import ObjectResolver from './resolvers/object_resolver';
+
+export default function(Component, options) {
+  options = options || {};
+
+  if (options.editorOnly && !PAGEFLOW_EDITOR) {
+    return class extends React.Component {
+      render() {
+        return false;
+      }
+    };
+  }
+
+  return class extends React.Component {
+    static contextTypes = {
+      resolverSeed: React.PropTypes.object
+    }
+
+    constructor(props, context) {
+      super(props, context);
+
+      this._resolver = new ObjectResolver(
+        options.fragments,
+        this._handleChange.bind(this)
+      );
+
+      this.state = this._resolve(props);
+    }
+
+    componentWillReceiveProps(nextProps) {
+      this.setState(this._resolve(nextProps));
+    }
+
+    componentWillUnmount() {
+      this._resolver.dispose();
+    }
+
+    _handleChange() {
+      this.setState(this._resolve(this.props));
+    }
+
+    _resolve(props) {
+      return this._resolver.get(props, this.context.resolverSeed);
+    }
+
+    render() {
+      return (<Component {...this.state} />);
+    }
+  };
+
+};

data/js/src/create_page.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import createContainer from './create_container.jsx';
+import createResolverRoot from './create_resolver_root.jsx';
+import resolve from './resolve';
+
+export default function(Component, options = {}) {
+  const ContainerComponent = createContainer(Component, {
+    fragments: {
+      page: resolve('page', {
+        property: 'pageId'
+      }),
+      ...(options.fragments || {})
+    },
+  });
+
+  class Page extends React.Component {
+    static childContextTypes = {
+      pageHooks: React.PropTypes.object,
+      pageIsPreloaded: React.PropTypes.bool
+    }
+
+    getChildContext() {
+      return {
+        pageHooks: this.props.pageHooks,
+        pageIsPreloaded: this.props.isPreloaded
+      };
+    }
+
+    render() {
+      return (
+        <ContainerComponent pageId={this.props.pageId} />
+      );
+    }
+  };
+
+  return createResolverRoot(Page);
+};

data/js/src/create_page_component.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+export default function(Component) {
+  return class extends React.Component {
+    static contextTypes = {
+      pageHooks: React.PropTypes.object
+    }
+
+    componentDidMount() {
+      var component = this.refs.component;
+
+      this.context.pageHooks.on({
+        activating: (options) => {
+          trigger('pageWillActivate', options);
+        },
+
+        activated: () => {
+          trigger('pageDidActivate');
+        },
+
+        deactivating: () => {
+          trigger('pageDidDeactivate');
+        },
+
+        resize: () => {
+          trigger('pageDidResize');
+        },
+      }, this);
+
+      function trigger(name, options) {
+        if (typeof component[name] === 'function') {
+          component[name].call(component, options);
+        }
+      }
+    }
+
+    componentWillUnmount() {
+      this.context.pageHooks.off(null, null, this);
+    }
+
+    render() {
+      return (<Component {...this.props} ref="component" />);
+    }
+  }
+};