markuapad 0.1.7

data/src/jsx/image_modal.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import FileAccessor from "../file_accessor"
+
+class ImageModal extends React.Component {
+
+  componentDidMount() {
+    this.grabImageData();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.file !== this.props.file) this.grabImageData();
+  }
+
+  grabImageData() {
+    FileAccessor.get(this.props.file.filename, this.forceUpdate.bind(this), "image");
+  }
+
+  getSelectedImageDataURI() {
+    let imageFile = FileAccessor.getSync(this.props.file.filename, "image")
+
+    if (!imageFile || !imageFile.data)
+      return null
+
+    return `data:${imageFile.mimetype.string};base64,${imageFile.data}`
+  }
+
+  render() {
+    return (
+      <div className="modal">
+        <div className="modal-fade-screen">
+          <div className="modal-inner">
+            <div className="modal-close" onClick={ this.props.onClose }></div>
+            <h1>{ this.props.file.filename }</h1>
+            <div className="modal-content">
+              <img src={ this.getSelectedImageDataURI() } />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ImageModal.propTypes = {
+  file: React.PropTypes.object.isRequired,
+  onClose: React.PropTypes.func.isRequired
+}
+
+export default ImageModal;

data/src/jsx/live_preview.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { fixImagePaths } from "../util"
+import { default as $ } from "jquery"
+
+class LivePreview extends React.Component {
+  componentDidUpdate(lastProps, lastState) {
+    if (this.props.previewState !== lastProps.previewState) {
+      let cursor = $("[data-markua-cursor-position='__markuaCursorPosition__']").get(0)
+      if (cursor)
+        $(React.findDOMNode(this)).animate({
+          scrollTop: cursor.offsetTop - 100
+        }, 200);
+    }
+  }
+
+  render() {
+    return (
+      <section className={`live-preview ${this.props.previewState}`}>
+        <section className="preloader"></section>
+        <section className="previewWarnigs"></section>
+        <section className="previewErrors">
+          { this.props.previewErrors }
+        </section>
+        <div ref="content" dangerouslySetInnerHTML={{ __html: fixImagePaths(this.props.html, this.forceUpdate.bind(this)) }} className="container content" />
+      </section>
+    );
+  }
+}
+
+LivePreview.propTypes = {
+  html: React.PropTypes.string.isRequired,
+  previewState: React.PropTypes.string.isRequired,
+  previewErrors: React.PropTypes.string
+}
+
+export default LivePreview;

data/src/jsx/main.jsx

@@ -0,0 +1,145 @@
+import React from "react";
+
+import Editor from "./editor";
+import Toolbar from "./toolbar";
+import FileBrowser from "./file_browser";
+import Preview from "./preview";
+import LivePreview from "./live_preview";
+import FileAccessor from "../file_accessor";
+import ImageModal from "./image_modal";
+import _ from "underscore";
+
+import { getCached } from "../util"
+
+class Main extends React.Component {
+  constructor(props) {
+    super(props);
+
+    // Setup some initial state
+    this.state = {
+      currentFile: null,
+      imageFile: null,
+      previewState: 'closed',
+      inLiveMode: true,
+      previewHtml: ""
+    }
+
+    // Autobind
+    this.onChangeFile = this.onChangeFile.bind(this);
+    this.onGeneratePreview = this.onGeneratePreview.bind(this);
+    this.onPreviewReady = this.onPreviewReady.bind(this);
+    this.onClosePreview = this.onClosePreview.bind(this);
+    this.toggleLiveMode = this.toggleLiveMode.bind(this);
+    this.onBookContentChanged = this.onBookContentChanged.bind(this);
+    this.getWorkspaceClass = this.getWorkspaceClass.bind(this);
+    this.onManuscriptChange = this.onManuscriptChange.bind(this);
+    this.onFileAdded = this.onFileAdded.bind(this);
+    this.onPreviewImage = this.onPreviewImage.bind(this);
+
+    // File access hooks
+    FileAccessor.onDelete(this.onManuscriptChange);
+    FileAccessor.onManuscriptChange(this.onManuscriptChange);
+    FileAccessor.onAdd(this.onFileAdded);
+  }
+
+  // Lifecycle methods
+  componentDidMount() {
+    // Trigger a preview right away -- since we start in live mode
+    this.onGeneratePreview();
+  }
+
+  // File event operations
+  onFileAdded(file) {
+    this.setState({ currentFile: file });
+  }
+
+  onManuscriptChange() {
+    // Re-preview
+    if (this.state.inLiveMode)
+      this.onGeneratePreview();
+  }
+
+  onPreviewImage(file) {
+    this.setState({ imageFile: file });
+  }
+
+  onChangeFile(file) {
+    this.setState({ currentFile: file });
+  }
+
+  // Preview based methods
+  onPreviewReady(errors, html) {
+    // If someone has already stopped the preview then just bail
+    if (this.state.previewState === "closed")
+      return
+
+    this.setState({ previewHtml: html, previewState: "done", previewErrors: errors })
+  }
+
+  onGeneratePreview(e) {
+    // Call out to the markua processor
+    this.setState({ previewState: "previewing" });
+    this.props.markua.run(this.onPreviewReady, { cursor: getCached("markuapad_cursor") })
+  }
+
+  onClosePreview(e) {
+    this.setState({ previewState: "closed" })
+  }
+
+  toggleLiveMode() {
+    // Clear the preview state here as well, so we don't accidentally open a preview
+    this.setState({ inLiveMode: !this.state.inLiveMode, previewState: "closed" }, () => {
+      window.dispatchEvent(new Event('resize'));
+
+      // If we transition into live mode, then kick off an initial preview;
+      if (this.state.inLiveMode)
+        this.onGeneratePreview();
+    });
+  }
+
+  onBookContentChanged() {
+    if (this.state.inLiveMode)
+      this.onGeneratePreview();
+  }
+
+  getWorkspaceClass() {
+    let workspaceClass = `workspace`;
+    workspaceClass += this.state.inLiveMode ? ' live' : '';
+    return workspaceClass;
+  }
+
+  render() {
+    return (
+      <section className="markuapad">
+        <Toolbar
+          bookTitle={this.props.bookTitle}
+          onGeneratePreview={this.onGeneratePreview}
+          toggleLiveMode={this.toggleLiveMode}
+          inLiveMode={this.state.inLiveMode}
+        />
+        <section className="main-view">
+          <section className={this.getWorkspaceClass()}>
+            <FileBrowser onPreviewImage={this.onPreviewImage} onChangeFile={this.onChangeFile} currentFile={this.state.currentFile} projectRoot={this.props.projectRoot }/>
+            <Editor
+              onBookContentChanged={this.onBookContentChanged}
+              inLiveMode={this.state.inLiveMode}
+              currentFile={this.state.currentFile}
+            />
+            { this.state.inLiveMode ? <LivePreview key='live-mode' ref="liveMode" html={this.state.previewHtml} previewState={this.state.previewState} previewErrors={this.state.previewErrors} /> : null }
+          </section>
+        </section>
+        { this.state.inLiveMode ? <span /> : <Preview key='preview' onClosePreview={this.onClosePreview} html={this.state.previewHtml} previewState={this.state.previewState} previewErrors={this.state.previewErrors} /> }
+        { this.state.imageFile ? <ImageModal file={this.state.imageFile} onClose={ _.partial(this.onPreviewImage, null) } /> : null }
+      </section>
+    );
+  }
+}
+
+Main.propTypes = {
+  markua: React.PropTypes.object.isRequired,
+  bookTitle: React.PropTypes.string.isRequired,
+  projectRoot: React.PropTypes.string.isRequired,
+  options: React.PropTypes.object.isRequired
+};
+
+export default Main;

data/src/jsx/preview.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { fixImagePaths } from "../util"
+
+class Preview extends React.Component {
+  render() {
+    let clazz = `preview ${this.props.previewState}`
+
+    return (
+      <section className={clazz}>
+        <header className="container">
+          <button className="close" onClick={this.props.onClosePreview}><i className="fa fa-times fa-2x"></i></button>
+        </header>
+        <section className="preloader"></section>
+        <section className="previewWarnigs"></section>
+        <section className="previewErrors">
+          { this.props.previewErrors }
+        </section>
+        <div dangerouslySetInnerHTML={{ __html: fixImagePaths(this.props.html, this.forceUpdate.bind(this)) }} className="container content" />
+      </section>
+    );
+  }
+}
+
+Preview.propTypes = {
+  inLiveMode: React.PropTypes.bool.isRequired,
+  onClosePreview: React.PropTypes.func.isRequired,
+  html: React.PropTypes.string.isRequired,
+  previewState: React.PropTypes.string.isRequired,
+  previewErrors: React.PropTypes.string
+}
+
+export default Preview;

data/src/jsx/toolbar.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+class Toolbar extends React.Component {
+  render() {
+    return (
+      <nav className="toolbar">
+        <h3 className="book-title">{ this.props.bookTitle}</h3>
+        <ul className="actions">
+          <li><a className={this.props.inLiveMode ? 'active' : '' } onClick={this.props.toggleLiveMode}><i className="fa fa-columns"></i> Live Mode</a></li>
+          <li><a className={this.props.inLiveMode ? 'disabled' : ''} onClick={this.props.onGeneratePreview}><i className="fa fa-play"></i> Preview</a></li>
+        </ul>
+      </nav>
+    );
+  }
+}
+
+Toolbar.propTypes = {
+  inLiveMode: React.PropTypes.bool.isRequired,
+  toggleLiveMode: React.PropTypes.func.isRequired,
+  onGeneratePreview: React.PropTypes.func.isRequired,
+  bookTitle: React.PropTypes.string.isRequired
+}
+
+export default Toolbar;

data/src/markuapad.js

@@ -0,0 +1,39 @@
+// Get the stylesheet
+require("./styles/app.scss");
+
+import _ from "underscore";
+import _string from "underscore.string";
+import Main from "./jsx/main";
+import React from "react";
+import Markua from "markua-js";
+import FileAccessor from "./file_accessor";
+
+_.string = _string;
+
+let DEFAULT_OPTIONS = {}
+
+class Markuapad {
+  constructor() {
+    this.options = DEFAULT_OPTIONS;
+  }
+
+  create(elementId, options = {}) {
+    // apply options to defaults
+    this.options = _.extend(this.options, options);
+
+    // Project Root
+    let projectTitle = options.title || "My First Markuapad Book";
+    let projectRoot = options.slug || _.string.slugify(projectTitle);
+
+    // Instantiate a new markua processor instance
+    this.markua = new Markua(projectRoot, { fileAccessor: this.options.fileAccessor })
+
+    // Setup the markuapad file accessor
+    FileAccessor.setup(this.options.fileAccessor, projectRoot);
+
+    // Render the markuapad
+    React.render(React.createFactory(Main)({ bookTitle: projectTitle, options: options, markua: this.markua, projectRoot: projectRoot }), document.getElementById(elementId));
+  }
+}
+
+export default new Markuapad();

data/src/styles/_editor.scss

@@ -0,0 +1,27 @@
+.markuapad {
+  .editor {
+    @extend %box-shadow;
+    @include flex(1);
+
+    // Advanced font feature settings break the ace editor
+    font-feature-settings: initial;
+    -webkit-font-feature-settings: initial;
+    -ms-font-feature-settings: initial;
+    -moz-font-feature-settings: initial;
+
+    // No file selected styles
+    &.nofile {
+      text-align: center;
+      padding: 15% 0;
+      background: $editor-background;
+    }
+
+    // Overrides from ace editor
+    &.emacs-mode .ace_cursor {
+      background-color: #222;
+      border: none !important;
+      border-left: 1px solid #222 !important;
+      width: 2px !important;
+    }
+  }
+}

data/src/styles/_extendables.scss

@@ -0,0 +1,115 @@
+// TODO: move these intro individual files once they get to large.. e.g. stylesheets/common/extendables/lists.scss
+// use this as the base file and include the extendables files from an extendables directory
+
+// TODO: these shadows need some serious work.. consider using linear-gradient instead of box-shadow because we will have more control. Or at least ONLY use box shadow or ONLY use inset shadow... attching them to pseudo elements as linear gradients might be good
+
+// Shadows
+$shadow-color: rgba(0, 0, 0, 0.4);
+$shadow-blur: 40px;
+$shadow-spread: -$shadow-blur / 2;
+
+// Inset
+%inset-shadow-top     { box-shadow: inset 0  7px $shadow-blur $shadow-spread $shadow-color; }
+%inset-shadow-bottom  { box-shadow: inset 0 -7px $shadow-blur $shadow-spread $shadow-color; }
+
+%inset-shadow-top-bottom {
+  box-shadow: inset 0 7px $shadow-blur $shadow-spread $shadow-color,
+              inset 0 -7px $shadow-blur $shadow-spread $shadow-color;
+}
+
+// Box shadows
+%box-shadow-top     { box-shadow: 0 -7px $shadow-blur $shadow-spread $shadow-color; }
+%box-shadow-bottom  { box-shadow: 0  7px $shadow-blur $shadow-spread $shadow-color; }
+
+%box-shadow-top-bottom {
+  box-shadow: 0  7px $shadow-blur $shadow-spread $shadow-color,
+              0 -7px $shadow-blur $shadow-spread $shadow-color;
+}
+
+// Box and Inset
+%box-shadow-bottom-inset-top {
+  box-shadow: inset 0 7px $shadow-blur $shadow-spread $shadow-color,
+                    0 7px $shadow-blur $shadow-spread $shadow-color;
+}
+
+%book-drop-shadow {
+  position: relative;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, .33);
+}
+
+%box-shadow {
+  position: relative;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.10);
+}
+%radial-drop-shadow {
+  position: relative;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  &:after{
+    content: "";
+    position: absolute;
+    z-index: -1;
+    box-shadow: 0 0 40px rgba(0,0,0,0.8);
+    bottom: 0px;
+    left: 10%;
+    right: 10%;
+    width: 80%;
+    height: 50%;
+    border-radius: 100%;
+  }
+}
+
+// Image replacement mixin http://nicolasgallagher.com/another-css-image-replacement-technique/
+%replace-text {
+  border: 0;
+  font: 0/0 a;
+  text-shadow: none;
+  color: transparent;
+}
+
+// Layout
+%absolute-center {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+}
+
+// Lists
+%horizontal-list {
+  text-align: center;
+  li {
+    text-align: inherit;
+    display: inline-block;
+    list-style-type: none;
+    margin-right: 1em;
+    &:last-child { margin-right: 0; }
+  }
+}
+
+// Transitions and animations
+%base-transition {
+  @include transition(all, $base-transition-duration, ease-in-out);
+}
+
+%vanilla-button {
+  @include appearance(none);
+  background: initial;
+  border-radius: initial;
+  color: initial;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+%close-button {
+  @extend %vanilla-button;
+
+  position: absolute;
+  right: 5px;
+  top: 5px;
+
+  padding: 5px;
+}