markuapad 0.1.7

data/src/jsx/editor.jsx

@@ -0,0 +1,122 @@
+import React from "react";
+import ace from "brace";
+import javascript from "brace/mode/markdown";
+import monokai from "brace/theme/xcode";
+import emacsKeys from "brace/keybinding/emacs"
+import FileAccessor from "../file_accessor";
+import _ from "underscore";
+
+class Editor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onCurrentFileLoaded = this.onCurrentFileLoaded.bind(this);
+
+    // Make the editor changed function not spammy
+    this.onEditorChanged = _.debounce(this.onEditorChanged.bind(this), 100);
+    this.onCursorChanged = this.onCursorChanged.bind(this)
+  }
+
+  // Setup all the editor options when we mount.
+  componentDidMount() {
+    this.setupEditor();
+  }
+
+  // If we get a file change from outside our domain, switch to it.
+  // TODO: maybe show a merge warning or something?
+  componentDidUpdate(lastProps, lastState) {
+    if (lastProps.currentFile !== this.props.currentFile) {
+      this.setupEditor();
+    }
+  }
+
+  setupEditor() {
+    if (!this.props.currentFile) return;
+
+    // Setup the ace editor
+    this.editor = ace.edit(this.refs.editor.getDOMNode());
+    this.editor.getSession().setMode('ace/mode/markdown');
+    this.editor.setTheme('ace/theme/xcode');
+    this.editor.setKeyboardHandler('ace/keyboard/emacs');
+    this.editor.renderer.setShowGutter(false);
+    this.editor.renderer.setPadding(20);
+    this.editor.renderer.setScrollMargin(20);
+    this.editor.setShowPrintMargin(false);
+    this.editor.setFontSize(14);
+    this.editor.$blockScrolling = Infinity;
+    this.editor.session.setUseWrapMode(true);
+    this.editor.setHighlightActiveLine(false);
+
+    // When the editor changes, alert us
+    this.editor.on("change", this.onEditorChanged)
+    this.editor.getSession().selection.on("changeCursor", this.onCursorChanged)
+
+    // Get the current file to put in the ace editor
+    FileAccessor.get(this.props.currentFile.filename, this.onCurrentFileLoaded, this.props.currentFile.type);
+  }
+
+  // When someone changes the cursor, we need to tell the file that we have a changed cursor
+  onCursorChanged() {
+    let count = 0,
+        position = this.editor.getCursorPosition(),
+        i = 0,
+        src = this.editor.getValue();
+
+    while(count < position.row && (i = src.indexOf('\n', i) + 1)) { count++; }
+    FileAccessor.setCursor(this.props.currentFile.filename, i);
+  }
+
+  // When the editor value changes, then we have to set our current state,
+  // then update the file through the data store.
+  onEditorChanged() {
+    let value = this.editor.getValue();
+
+    if (value === this.state.currentFileValue)
+      return
+    else {
+      this.setState({ currentFileValue: value })
+      FileAccessor.save(this.props.currentFile.filename, this.props.currentFile.type, value, this.props.onBookContentChanged);
+    }
+  }
+
+  // After we load a file, set the value of the editor to it
+  onCurrentFileLoaded(error, contents) {
+    if (error)
+      return console.error(error)
+    else {
+      // Focus the editor
+      this.editor.focus;
+
+      // Set the value of it
+      this.setState({ currentFileValue: contents }, () => this.editor.setValue(contents, -1));
+    }
+  }
+
+  renderEditor() {
+    return (
+      <section ref="editor" className="editor"></section>
+    );
+  }
+
+  renderNoFileHelp() {
+    return (
+      <section className="editor nofile">
+        <h3>No file selected.</h3>
+        <p>Click one in the list on the left to start editing</p>
+      </section>
+    );
+  }
+
+  render() {
+    return (
+      this.props.currentFile ? this.renderEditor() : this.renderNoFileHelp()
+    );
+  }
+}
+
+Editor.propTypes = {
+  currentFile: React.PropTypes.object,
+  inLiveMode: React.PropTypes.bool.isRequired,
+  onBookContentChanged: React.PropTypes.func.isRequired
+}
+
+export default Editor;

data/src/jsx/file_browser.jsx

@@ -0,0 +1,252 @@
+import React from "react";
+import _ from "underscore";
+import FileBrowserListItem from "./file_browser_list_item";
+import FileAccessor from "../file_accessor";
+import HTML5Backend from 'react-dnd/modules/backends/HTML5';
+import { DragDropContext } from 'react-dnd';
+
+import _string from "underscore.string";
+_.string = _string;
+
+class FileBrowser extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      files: [],
+      closed: false,
+      fileMode: 'manuscript',
+      busy: false
+    };
+
+    // Autobind
+    this.toggleClose = this.toggleClose.bind(this);
+    this.newFile = this.newFile.bind(this);
+    this.createFile = this.createFile.bind(this);
+    this.createImageFile = this.createImageFile.bind(this);
+    this.listManuscript = this.listManuscript.bind(this);
+    this.onDeleteFile = this.onDeleteFile.bind(this);
+    this.onChangeMode = this.onChangeMode.bind(this);
+    this.onFileDeleted = this.onFileDeleted.bind(this);
+    this.listCode = this.listCode.bind(this);
+    this.listManuscript = this.listManuscript.bind(this);
+    this.listImage = this.listImage.bind(this);
+    this.moveFile = this.moveFile.bind(this);
+    this.saveManuscript = this.saveManuscript.bind(this);
+
+    // Hook up events
+    FileAccessor.onDelete(this.onFileDeleted);
+  }
+
+  componentDidMount() {
+    this.listManuscript();
+  }
+
+  componentDidUpdate(lastProps, lastState) {
+    if (lastState.fileMode && lastState.fileMode !== this.state.fileMode) {
+      this[`list${_.string.capitalize(this.state.fileMode)}`]()
+    }
+  }
+
+  // We need to rechoose an appropriate file
+  onFileDeleted() {
+    this.props.onChangeFile(this.state.files[0])
+  }
+
+  // List what files we have
+  listManuscript() {
+    this.busy(true);
+    FileAccessor.listFiles((error, files) => {
+      this.busy(false);
+      if (error)
+        console.error(error);
+      else {
+        this.setState({ files: files });
+      }
+    });
+  }
+
+  // List what files we have
+  listImage() {
+    this.busy(true);
+    FileAccessor.listImages((error, files) => {
+      this.busy(false);
+      if (error)
+        console.error(error);
+      else {
+        this.setState({ files: files });
+      }
+    });
+  }
+
+  // List what files we have
+  listCode() {
+    this.busy(true);
+    FileAccessor.listCode((error, files) => {
+      this.busy(false);
+      if (error)
+        console.error(error);
+      else {
+        this.setState({ files: files });
+      }
+    });
+  }
+
+  // Set busy (loading) state
+  busy(busyState) {
+    this.setState({ busy: busyState });
+  }
+
+  // No longer in the loading state
+  free() {
+    this.setState({ busy: false });
+  }
+
+  // Close the browser
+  toggleClose(e) {
+    this.setState({ closed: !this.state.closed });
+  }
+
+  onChangeMode(fileMode) {
+    this.setState({ fileMode: fileMode });
+  }
+
+  // Create a new image file
+  createImageFile(e) {
+    let fileNode = this.refs.imageFile.getDOMNode()
+
+    FileAccessor.newImage(fileNode, () => {
+      fileNode.value = '';
+      this.setState({ creatingFile: false });
+      this[`list${_.string.capitalize(this.state.fileMode)}`]()
+    });
+
+    e.stopPropagation();
+    e.preventDefault();
+    return false
+  }
+
+  // Actually create a new file
+  createFile(e) {
+    let fileNode = this.refs.filename.getDOMNode()
+    FileAccessor.new(fileNode.value, this.state.fileMode, '', (error, file) => {
+      fileNode.value = '';
+      this.setState({ creatingFile: false });
+      this[`list${_.string.capitalize(this.state.fileMode)}`]()
+
+      // Change to the new file
+      this.props.onChangeFile(file)
+    });
+
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  // Open the new file form
+  newFile(e) {
+    this.setState({ creatingFile: !this.state.creatingFile })
+  }
+
+  // Delete a file
+  onDeleteFile(file) {
+    FileAccessor.delete(file.filename, this.state.fileMode, this[`list${_.string.capitalize(this.state.fileMode)}`]);
+  }
+
+  // Save the manuscript, usually to preserve the order of the files since
+  // The manuscript files order in the ui is a mapping to book.txt
+  saveManuscript() {
+    if (this.state.fileMode !== "manuscript") return;
+    FileAccessor.saveManuscript(this.state.files);
+  }
+
+  // Reorder a file in the list
+  moveFile(draggedItem, targetItem) {
+    let files = _.clone(this.state.files)
+
+    let draggedItemIndex = files.indexOf(draggedItem)
+    let targetItemIndex = files.indexOf(targetItem)
+
+
+    files.splice(draggedItemIndex, 1);
+    files.splice(targetItemIndex, 0, draggedItem);
+    this.setState({ files: files });
+  }
+
+  renderFileCreator() {
+    if (!this.state.creatingFile) return;
+
+    if (this.state.fileMode === "image") {
+      let imageForm = (
+        <form onSubmit={this.createImageFile} className="file-name">
+          <input type="file" ref="imageFile" />
+          <button>Submit</button>
+        </form>
+      );
+      let noUploadHelp = (<p>Sorry, image uploads are not supported</p>);
+      return FileAccessor.supportsImageUploads() ? imageForm : noUploadHelp;
+    }
+    else {
+      return (
+        <form onSubmit={this.createFile} className="file-name">
+          <input type="text" ref="filename" placeholder="Type a filename..."></input>
+          <button>Create</button>
+        </form>
+      );
+    }
+  }
+
+  renderFilesList() {
+    if (this.state.busy)
+      return <i className="busy-indicator fa fa-spin fa-2x fa-circle-o-notch"></i>;
+    else {
+      return (
+        <ul className="files-list">
+          {
+            _.map(this.state.files, (file, i) => {
+              return (
+                <FileBrowserListItem
+                  saveManuscript={this.saveManuscript}
+                  moveFile={this.moveFile}
+                  key={i}
+                  fileMode={this.state.fileMode}
+                  onDeleteFile={this.onDeleteFile}
+                  onChangeFile={this.props.onChangeFile}
+                  onPreviewImage={this.props.onPreviewImage}
+                  isCurrent={this.props.currentFile === file}
+                  file={file} />
+              )
+            })
+          }
+        </ul>
+      )
+    }
+  }
+
+  render() {
+    let clazz = `file-browser ${this.state.closed ? "closed" : "open"}`
+    let newFileClassName = `new-file${ this.state.creatingFile ? " active" : ""}`;
+    return (
+      <section className={clazz}>
+        <ul className="file-types-list">
+          <li><a onClick={_.partial(this.onChangeMode, 'manuscript')}><h4 className={`title${this.state.fileMode === 'manuscript' ? ' selected' : ''}`}>files</h4></a></li>
+          <li><a onClick={_.partial(this.onChangeMode, 'image')}><h4 className={`title${this.state.fileMode === 'image' ? ' selected' : ''}`}>images</h4></a></li>
+          <li><a onClick={_.partial(this.onChangeMode, 'code')}><h4 className={`title${this.state.fileMode === 'code' ? ' selected' : ''}`}>code</h4></a></li>
+        </ul>
+        <div className={newFileClassName} onClick={this.newFile}>
+          <i className="fa fa-plus"> </i>
+        </div>
+        { this.renderFileCreator() }
+        { this.renderFilesList() }
+        <button className="close-button" onClick={this.toggleClose}><span></span></button>
+      </section>
+    );
+  }
+}
+
+FileBrowser.propTypes = {
+  projectRoot: React.PropTypes.string.isRequired,
+  onChangeFile: React.PropTypes.func.isRequired,
+  currentFile: React.PropTypes.string.isRequired
+};
+
+export default DragDropContext(HTML5Backend)(FileBrowser);

data/src/jsx/file_browser_list_item.jsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { DragSource, DropTarget } from 'react-dnd';
+
+const fileSource = {
+  beginDrag(props) {
+    // Return the data describing the dragged item
+    return props.file
+  }
+}
+
+const fileTarget = {
+  hover(props, monitor) {
+    const draggedFile = monitor.getItem()
+
+    if (draggedFile !== props.file)
+      props.moveFile(draggedFile, props.file)
+  },
+
+  drop(props, monitor) {
+    props.saveManuscript()
+  }
+}
+
+@DropTarget('file', fileTarget, connect => ({
+  connectDropTarget: connect.dropTarget()
+}))
+@DragSource('file', fileSource, (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging()
+}))
+export default class FileBrowserListItem {
+  constructor(props) {
+    this.onDelete = this.onDelete.bind(this);
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onDelete(e) {
+    if (confirm("Are you sure you want to delete this file?"))
+      this.props.onDeleteFile(this.props.file)
+
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  onChange(e) {
+    if (this.props.file.type === "image")
+      this.props.onPreviewImage(this.props.file)
+    else
+      this.props.onChangeFile(this.props.file)
+  }
+
+  getFileIconClass() {
+    switch (this.props.fileMode) {
+      case 'manuscript':
+        return 'fa-file-o';
+      case 'images':
+        return 'fa-file-image';
+      case 'code':
+        return 'fa-code';
+    }
+  }
+
+  render() {
+    let clazz = `files-list-item${this.props.isCurrent ? ' current' : ''}${this.props.file.parent ? ' child' : ''}${this.props.isDragging ? ' dragging' : ''}`
+
+    return this.props.connectDragSource(this.props.connectDropTarget(
+      <li className={clazz} onClick={this.onChange}>
+        <a>
+          <i className={`fa ${this.getFileIconClass()}`}></i> { this.props.file.filename }
+        </a>
+        <button onClick={this.onDelete}><i className="fa fa-times"></i></button>
+      </li>
+    ));
+  }
+}
+
+FileBrowserListItem.propTypes = {
+  file: React.PropTypes.object.isRequired,
+  fileMode: React.PropTypes.string.isRequired,
+  moveFile: React.PropTypes.func.isRequired,
+  saveManuscript: React.PropTypes.func.isRequired,
+  isCurrent: React.PropTypes.bool.isRequired,
+  onDeleteFile: React.PropTypes.func.isRequired,
+  onChangeFile: React.PropTypes.func.isRequired,
+  onPreviewImage: React.PropTypes.func.isRequired
+}