resource editor module

modules/resource-editor/.eslintrc

@@ -0,0 +1,56 @@
+env:
+  es6: true
+  node: true
+  browser: true
+extends: 'eslint:recommended'
+ecmaFeatures:
+  arrowFunctions: true
+  classes: true
+  defaultParams: true
+  destructuring: true
+  forOf: true
+  modules: true
+  objectLiteralComputedProperties: true
+  objectLiteralDuplicateProperties: true
+  objectLiteralShorthandMethods: true
+  objectLiteralShorthandProperties: true
+  restParams: true
+  spread: true
+  templateStrings: true
+  jsx: true
+  experimentalObjectRestSpread: true
+
+plugins:
+  - react
+
+parser: babel-eslint
+
+rules:
+  # two spaces with indents for switch/case
+  indent: [2, 2, {"SwitchCase": 1}]
+
+  # don't require strict mode
+  strict: 0
+
+  # allow console.log()
+  no-console: 0
+
+  # allow while(true)
+  no-constant-condition: 0
+
+  # unused arguments must be prefixed with an underscore
+  no-unused-vars: [2, {"vars": "all", "argsIgnorePattern": "^_"}]
+
+  # use single-quotes, unless the string has single-quotes inside it
+  # in which case double quotes are ok
+  quotes: [2, "single", "avoid-escape"]
+
+  # always require semi-colons
+  semi: [2, "always"]
+
+  # require unix line-endings
+  linebreak-style: [2, "unix"]
+
+  # ignore unused React imports
+  react/jsx-uses-react: 1
+

modules/resource-editor/debuggerUI/index.js

@@ -0,0 +1,24 @@
+var ResourceEditorUI = Class(function() {
+
+  this.init = function() {
+    this._childWindow = null;
+
+    devkit.addModuleButton({
+      iconClassName: 'fa fa-folder-open'
+    }).on('Select', this.toggleVisibility.bind(this));
+  };
+
+  this.toggleVisibility = function() {
+    if (this._childWindow && !this._childWindow.closed) {
+      this._childWindow.focus();
+    } else {
+      var url = location.protocol + '//' + location.host;
+      url += devkit.getSimulator().getURL();
+      url += 'modules/resource-editor/extension/ui/';
+      this._childWindow = window.open(url, '_blank');
+    }
+  };
+
+});
+
+module.exports = new ResourceEditorUI();

modules/resource-editor/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "resource-editor",
+  "author": "Martin Hunt",
+  "version": "0.0.1",
+  "devkit": {
+    "extensions": {
+      "debuggerUI": ["debuggerUI"],
+      "standaloneUI": {
+        "ui": {
+          "src": "ui",
+          "html5History": true
+        }
+      }
+    },
+    "pluginBuilder": {
+      "generic": [
+        { "src": "ui" }
+      ],
+      "jsio": [
+        { "src": "debuggerUI" }
+      ]
+    }
+  },
+  "dependencies": {
+    "bluebird": "^3.0.6",
+    "classnames": "^2.2.1",
+    "filesize": "^3.1.4",
+    "history": "=1.13",
+    "http-fs": "git+https://github.com/weebygames/http-fs.git",
+    "html5-upload-reader": "git+https://github.com/weebygames/html5-upload-reader.git#master",
+    "qrcode.react": "^0.5.2",
+    "react": "^0.14.3",
+    "react-dom": "^0.14.3",
+    "react-file-drop": "^0.1.7",
+    "react-http-fs-file-tree": "git+https://github.com/weebygames/react-http-fs-file-tree.git#v0.0.1",
+    "react-router": "^1.0.0"
+  },
+  "devDependencies": {
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13"
+  }
+}

modules/resource-editor/ui/components/ContextMenu.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+
+class ContextMenu extends React.Component {
+  render() {
+    const files = this.props.files;
+    const fs = this.props.fs;
+
+    let entries = this.props.entries.map(renderEntry.bind(this));
+
+    let menuStyle = {
+      left: this.props.x,
+      top: this.props.y
+    };
+
+    return (
+      <div className="ContextMenu" style={menuStyle}>
+        {entries}
+      </div>
+    );
+  }
+}
+
+
+class ContextMenuEntry extends React.Component {
+  handleOnClick(_event) {
+    _event.stopPropagation();
+    this.props.closeMenu(null, this.props.entry.data);
+  }
+
+  render() {
+    const entry = this.props.entry;
+
+    if (entry.entries) {
+      let content = entry.entries.map(renderEntry.bind(this));
+      content.push(<div className="divider"></div>);
+      return <div>{content}</div>;
+    }
+
+    return <div
+      className="ContextMenuEntry"
+      onClick={this.handleOnClick.bind(this)}
+    >
+      {entry.title}
+    </div>;
+  }
+}
+
+let renderEntry = function(entry) {
+  return React.createElement(ContextMenuEntry, {
+    entry: entry,
+    closeMenu: this.props.closeMenu
+  });
+}
+
+
+/** Returns a promise that will reject with the closure method, or resolve with
+  *   the selected entry data
+  */
+export default function openContextMenu(x, y, entries) {
+  // Make the overlay
+  let overlay = document.createElement('div');
+  overlay.className = 'context-menu-container';
+
+  // Close handler
+  let _onClose;
+  let closeMenu = function(err, res) {
+    ReactDOM.unmountComponentAtNode(overlay);
+    document.body.removeChild(overlay);
+
+    // Remove listeners
+    overlay.removeEventListener('click', handleMouseOut);
+    window.removeEventListener('keydown', handleKeyOut);
+
+    if (err) {
+      _onClose.reject(err);
+    } else {
+      _onClose.resolve(res);
+    }
+  }
+
+  // Close listeners
+  let handleMouseOut = function(_event) {
+    if (_event.target === overlay) {
+      closeMenu('clickOut');
+    }
+  };
+  overlay.addEventListener('click', handleMouseOut);
+  let handleKeyOut = function(e) {
+    if (e.keyCode == 27) {
+      closeMenu('escOut');
+    }
+  };
+  window.addEventListener('keydown', handleKeyOut);
+
+  // Make the menu component
+  let menuCmpt = React.createElement(ContextMenu, {
+    x: x,
+    y: y,
+    entries: entries,
+    closeMenu: closeMenu
+  });
+
+  // Add to screen and render
+  document.body.appendChild(overlay);
+  ReactDOM.render(menuCmpt, overlay);
+  return new Promise((resolve, reject) => {
+    _onClose = {resolve, reject};
+  });
+}

modules/resource-editor/ui/components/FileInspector.js

@@ -0,0 +1,41 @@
+import path from 'path';
+import React from 'react';
+import filesize from 'filesize';
+
+import mime from 'mime';
+import FilePreview from './FilePreview';
+
+const FILE_SIZE_OPTS = {
+  spacer: ''
+};
+
+export default class FileInspector extends React.Component {
+  constructor() {
+    super();
+    this.state = {};
+  }
+
+  handleImageSize = (width, height) => {
+    this.setState({dimensions: width + 'x' + height});
+  }
+
+  render() {
+    const file = this.props.file;
+    if (!file) { return <div className="FileInspector" />; }
+
+    const mimeType = mime.lookup(file.path);
+
+    return <div className="FileInspector">
+      <FilePreview
+        fs={this.props.fs}
+        file={file}
+        onImageSize={this.handleImageSize} />
+      <div className="metadata">
+        <div className="filePath">directory: {path.dirname(file.path)}</div>
+        <div className="mimeType">mime type: {mimeType}</div>
+        {('size' in file) && <div className="fileSize">file size: {filesize(file.size, FILE_SIZE_OPTS).toUpperCase()}</div>}
+        {this.state.dimensions && <div className="dimensions">dimensions: {this.state.dimensions}</div>}
+      </div>
+    </div>;
+  }
+}