pageflow-react 0.1.0

data/js/src/create_page_type.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+export default function(Component) {
+  return {
+    scroller: false,
+
+    enhance(pageElement) {
+      this._pageHooks = {...Backbone.Events};
+      this._isPreloaded = false;
+
+      this._render(pageElement);
+    },
+
+    preload(pageElement) {
+      this._isPreloaded = true;
+      this._render(pageElement);
+    },
+
+    activating(elelement, configuration, options) {
+      this._pageHooks.trigger('activating', options);
+    },
+
+    activated() {
+      this._pageHooks.trigger('activated');
+    },
+
+    deactivating() {
+      this._pageHooks.trigger('deactivating');
+    },
+
+    deactivated() {
+      this._pageHooks.trigger('deactivated');
+    },
+
+    resize() {
+      this._pageHooks.trigger('resize');
+    },
+
+    update(pageElement, configuration) {
+      pageflow.commonPageCssClasses.updateCommonPageCssClasses(pageElement, configuration);
+    },
+
+    cleanup(pageElement) {
+      ReactDOM.unmountComponentAtNode(pageElement[0]);
+    },
+
+    _render(pageElement) {
+      ReactDOM.render(React.createElement(Component, {
+        resolverSeed: pageflow.seed,
+        pageId: parseInt(pageElement.attr('id'), 10),
+        pageHooks: this._pageHooks,
+        isPreloaded: this._isPreloaded
+      }), pageElement[0]);
+    }
+  };
+};

data/js/src/create_resolver_root.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default function(Component) {
+  return class extends React.Component {
+    static childContextTypes = {
+      resolverSeed: React.PropTypes.object
+    }
+
+    getChildContext() {
+      return {
+        resolverSeed: this.props.resolverSeed || {}
+      };
+    }
+
+    render() {
+      return (
+        <Component {...this.props} />
+      );
+    }
+  };
+};

data/js/src/create_widget.jsx

@@ -0,0 +1,3 @@
+import createResolverRoot from './create_resolver_root.jsx';
+
+export default createResolverRoot;

data/js/src/create_widget_type.js

@@ -0,0 +1,12 @@
+export default function(Component) {
+  return {
+    enhance: function(element) {
+      ReactDOM.render(React.createElement(Component, {
+        resolverSeed: {
+          events: pageflow.events,
+          ...pageflow.seed
+        }
+      }), element[0]);
+    }
+  };
+};

data/js/src/index.js

@@ -0,0 +1,69 @@
+import createPage from './create_page.jsx';
+import createWidget from './create_widget.jsx';
+import createContainer from './create_container.jsx';
+import createPageType from './create_page_type';
+import createWidgetType from './create_widget_type';
+import createPageComponent from './create_page_component.jsx';
+import resolve from './resolve';
+import mutate from './mutate';
+
+import classNames from 'classnames';
+
+import PageWrapper from './components/page_wrapper.jsx';
+import PageBackground from './components/page_background.jsx';
+import PageShadow from './components/page_shadow.jsx';
+import PageContent from './components/page_content.jsx';
+import PageHeader from './components/page_header.jsx';
+import PageText from './components/page_text.jsx';
+import BackgroundImage from './components/background_image.jsx';
+import PageBackgroundImage from './components/page_background_image.jsx';
+import PageLink from './components/page_link.jsx';
+import PageThumbnail from './components/page_thumbnail.jsx';
+import LazyLoadedPageThumbnail from './components/lazy_loaded_page_thumbnail.jsx';
+
+import Draggable from 'react-draggable';
+
+export default {
+  /** @api public */
+  createContainer,
+
+  /** @api public */
+  createPage,
+
+  /** @api public */
+  createWidget,
+
+  /** @api public */
+  createPageType,
+
+  /** @api public */
+  createWidgetType,
+
+  /** @api public */
+  createPageComponent,
+
+  /** @api public */
+  resolve,
+
+  /** @api public */
+  mutate,
+
+  classNames,
+
+  components: {
+    PageWrapper,
+    PageBackground,
+    PageShadow,
+    PageContent,
+    PageHeader,
+    PageText,
+    BackgroundImage,
+    PageBackgroundImage,
+
+    PageLink,
+    PageThumbnail,
+    LazyLoadedPageThumbnail,
+
+    Draggable
+  }
+};

data/js/src/mutate.js

@@ -0,0 +1,17 @@
+import UpdatePageMutation from './mutations/update_page_mutation';
+import UpdatePageLinkMutation from './mutations/update_page_link_mutation';
+
+var mutations = {
+  updatePage: UpdatePageMutation,
+  updatePageLink: UpdatePageLinkMutation
+};
+
+export default function(mutationName, props) {
+  var mutation = mutations[mutationName];
+
+  if (!mutation) {
+    throw `Unknown mutation ${mutationName}`;
+  }
+
+  return new mutation(props).perform();
+};

data/js/src/mutations/mutation.js

@@ -0,0 +1,5 @@
+export default class {
+  constructor(props) {
+    this.props = props;
+  }
+}

data/js/src/mutations/update_page_link_mutation.js

@@ -0,0 +1,30 @@
+import Mutation from './mutation';
+
+import pageflow from 'pageflow';
+
+export default class extends Mutation {
+  perform() {
+    this._getPageLink().set(this.props.attributes);
+  }
+
+  _getPageLink() {
+    var pageLink = this._getPage().pageLinks().get(this.props.id);
+
+    if (!pageLink) {
+      throw new Error(`Could not find page link with id ${this.props.pageLinkId}.`);
+    }
+
+    return pageLink;
+  }
+
+  _getPage() {
+    var [pageId] = this.props.id.split(':');
+    var page = pageflow.pages.getByPermaId(pageId);
+
+    if (!page) {
+      throw new Error(`Could not find page with id ${pageId}.`);
+    }
+
+    return page;
+  }
+}

data/js/src/mutations/update_page_mutation.js

@@ -0,0 +1,19 @@
+import Mutation from './mutation';
+
+import pageflow from 'pageflow';
+
+export default class extends Mutation {
+  perform() {
+    this._getPage().configuration.set(this.props.attributes);
+  }
+
+  _getPage() {
+    var page = pageflow.pages.get(this.props.pageId);
+
+    if (!page) {
+      throw new Error(`Could not find page with id ${this.props.pageId}.`);
+    }
+
+    return page;
+  }
+}

data/js/src/resolve.js

@@ -0,0 +1,45 @@
+import EditorFileIdsResolver from './resolvers/editor_file_ids_resolver';
+import EditorPageResolver from './resolvers/editor_page_resolver';
+import EditorChapterResolver from './resolvers/editor_chapter_resolver';
+import SeedFileIdsResolver from './resolvers/seed_file_ids_resolver';
+import SeedPageResolver from './resolvers/seed_page_resolver';
+import SeedChapterResolver from './resolvers/seed_chapter_resolver';
+import PageTypeResolver from './resolvers/page_type_resolver';
+import CurrentParentPageResolver from './resolvers/current_parent_page_resolver';
+import I18nResolver from './resolvers/i18n_resolver';
+
+var resolvers;
+
+if (PAGEFLOW_EDITOR) {
+  resolvers = {
+    fileIds: EditorFileIdsResolver,
+    chapter: EditorChapterResolver,
+    page: EditorPageResolver
+  };
+}
+else {
+  resolvers = {
+    fileIds: SeedFileIdsResolver,
+    chapter: SeedChapterResolver,
+    page: SeedPageResolver
+  };
+}
+
+resolvers = {
+  pageType: PageTypeResolver,
+  currentParentPage: CurrentParentPageResolver,
+  i18n: I18nResolver,
+  ...resolvers
+}
+
+export default function(resolverName, options) {
+  var resolver = resolvers[resolverName];
+
+  if (!resolver) {
+    throw `Unknown resolver ${resolverName}`;
+  }
+
+  return function(callback) {
+    return new resolver(options, callback);
+  }
+};

data/js/src/resolvers/backbone_model_resolver.js

@@ -0,0 +1,118 @@
+import Resolver from './resolver';
+import createRecursiveResolver from './create_recursive_resolver';
+
+import camelize from '../utils/camelize';
+
+/**
+ * Resolve a foreign key to an object of attributes.
+ */
+class BackboneModelResolver extends Resolver {
+  constructor(options, callback) {
+    super(callback);
+    this._options = {
+      idAttribute: 'id',
+      attributesForProps: ['id'],
+      includeConfiguration: false,
+      ...options
+    };
+  }
+
+  get(props, seed) {
+    this._updateModel(props, seed || {});
+    this._updateSubscription();
+
+    return this._getPropsFromModel();
+  }
+
+  dispose() {
+    if (this._model) {
+      this._stopListening(this._model);
+    }
+  }
+
+  _updateModel(props, seed) {
+    this._prevModel = this._model;
+    this._model = this._getModel(props, seed);
+  }
+
+  _getModel(props, seed) {
+    var collection = this._options.collection(seed.ns);
+    return collection.findWhere(this._getIdConditions(props));
+  }
+
+  _getIdConditions(props) {
+    var conditions = {};
+    conditions[this._options.idAttribute] = this._getModelId(props);
+    return conditions;
+  }
+
+  _getModelId(props) {
+    return props[this._options.property];
+  }
+
+  _updateSubscription() {
+    if (this._prevModel === this._model) {
+      return;
+    }
+
+    if (this._prevModel) {
+      this._stopListening(this._prevModel);
+    }
+
+    if (this._model) {
+      this._startListening(this._model);
+    }
+  }
+
+  _startListening(model) {
+    model.on(this._getSubscribedEvents(), this._handleChange, this);
+
+    if (this._options.includeConfiguration) {
+      model.configuration.on('change', this._handleChange, this);
+    }
+  }
+
+  _stopListening(model) {
+    model.off(null, null, this);
+
+    if (this._options.includeConfiguration) {
+      model.configuration.off('change', this._handleChange, this);
+    }
+  }
+
+  _getSubscribedEvents() {
+    return this._options.attributesForProps
+               .map((attribute) => `change:${attribute}`)
+               .join(' ');
+  }
+
+  _getPropsFromModel() {
+    var props = null;
+    var model = this._model;
+
+    if (model) {
+      props = this._getPropsFromAttributes();
+
+      if (this._options.includeConfiguration) {
+        Object.assign(props, camelize.deep(model.configuration.attributes))
+      }
+    }
+
+    return props;
+  }
+
+  _getPropsFromAttributes() {
+    var model = this._model;
+
+    return this._options.attributesForProps.reduce((result, name) => {
+      if (typeof name === 'string') {
+        name = [camelize(name), name];
+      }
+
+      result[name[0]] = model.get(name[1]);
+      return result;
+    }, {})
+  }
+};
+
+export default createRecursiveResolver(BackboneModelResolver);

data/js/src/resolvers/create_recursive_resolver.js

@@ -0,0 +1,20 @@
+import ObjectResolver from './object_resolver';
+
+export default function(Resolver) {
+  return class {
+    constructor(options, callback) {
+      this._inner = new Resolver(options, callback);
+      this._objectResolver = new ObjectResolver(options.fragments, callback);
+    }
+
+    get(props, seed) {
+      const result = this._inner.get(props, seed);
+      return this._objectResolver.get(result, seed);
+    }
+
+    dispose() {
+      this._inner.dispose();
+      this._objectResolver.dispose();
+    }
+  }
+};

data/js/src/resolvers/current_parent_page_resolver.js

@@ -0,0 +1,38 @@
+import Resolver from './resolver';
+import resolve from '../resolve';
+
+import createRecursiveResolver from './create_recursive_resolver';
+
+class CurrentPageResolver extends Resolver {
+  constructor(options, callback) {
+    super(callback);
+
+    this._subscribeToPageChange();
+    this._pageResolver = resolve('page', {property: 'permaId'})(callback);
+  }
+
+  get(_, seed) {
+    return this._pageResolver.get({
+      permaId: this._currentParentPagePermaId(seed)
+    }, seed);
+  }
+
+  dispose() {
+    this._unsubscribeFromPageChange();
+  }
+
+  _currentParentPagePermaId(seed) {
+    var currentPagePermaId = pageflow.slides.currentPage().page('getPermaId');
+    return pageflow.entryData.getParentPagePermaIdByPagePermaId(currentPagePermaId);
+  }
+
+  _subscribeToPageChange() {
+    pageflow.events.on('page:change', this._handleChange, this);
+  }
+
+  _unsubscribeFromPageChange() {
+    pageflow.events.off('page:change', this._handleChange, this);
+  }
+};
+
+export default createRecursiveResolver(CurrentPageResolver);