Initial commit of component render classes.

src/ui/DOMController.tsx

@@ -0,0 +1,171 @@
+/** @license
+ *  Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ *  use this file except in compliance with the License. You may obtain a copy
+ *  of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *  License for the specific language governing permissions and limitations
+ *  under the License.
+ */
+
+import "./overlay/styles.less";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Constants as CONST } from "../lib/Constants";
+import { Messaging } from "../lib/Messaging";
+import { Options } from "./overlay/Options";
+import { Overlay } from "./overlay/Overlay";
+import { Variable } from "../core/variables/Variable";
+import { remixer } from "../core/Remixer";
+
+/**
+ * Interface for the properties assigned to a React class.
+ * @interface
+ */
+interface ControllerProps {
+  wrapperElement: HTMLElement;
+}
+
+/**
+ * Interface for the state of a React class.
+ * @interface
+ */
+interface ControllerState {
+  /** An array of Variables. */
+  variables: Array<Variable>;
+
+  /** The current route to render. */
+  route: Route;
+}
+
+/**
+ * Avaialble routes to render.
+ */
+enum Route {
+  Variables,
+  Options
+}
+
+/**
+ * A React component class that renders an MDL-styled card containing child
+ * components detemrined by its current Route.
+ *
+ * As determined by the Route, the card content can be either:
+ *   1) The overlay with configurable control components per assigned Variables.
+ *   2) An options page used to configure Remixer session properties.
+ *
+ * @class
+ * @extends React.Component
+ */
+export class DOMController extends React.Component<ControllerProps, ControllerState> {
+
+  /**
+   * Default constructor.
+   * @constructor
+   * @type {DOMController}
+   */
+  constructor(props: ControllerProps) {
+    super(props);
+    this.state = {variables: remixer.attachedInstance.variablesArray, route: Route.Variables};
+  }
+
+  /**
+   * The component will mount. Lets register for messaging and key events.
+   * @override
+   */
+  componentDidMount() {
+    Messaging.register(this.onMessageReceived.bind(this));
+    this.addKeyListener();
+  }
+
+  /**
+   * The component will unmount. Lets unregister.
+   * @override
+   */
+  componentWillUnmount() {
+    Messaging.unregister();
+    this.removeKeyListener();
+  }
+
+  /**
+   * Handles receiving of window message.
+   * @param {MessageEvent} event The received message event.
+   */
+  onMessageReceived(event: MessageEvent): void {
+    if (event.data === Messaging.type.ToggleVisibility) {
+      this.toggleVisiblity();
+    }
+  }
+
+  /** Adds a key listener. */
+  addKeyListener(): void {
+    document.addEventListener(CONST.KEY_EVENT_DOWN, (e: KeyboardEvent) => {
+      if (e.keyCode === CONST.KEY_CODE_ESC) {
+        this.toggleVisiblity();
+      }
+    });
+  }
+
+  /** Removes a key listener. */
+  removeKeyListener(): void {
+    document.removeEventListener(CONST.KEY_EVENT_DOWN);
+  }
+
+  /** Toggles the Remixer overlay visibility. */
+  toggleVisiblity() {
+    this.props.wrapperElement.classList.toggle(CONST.CSS_CLASS_VISIBLE);
+  }
+
+  /**
+   * Updates the state to new route.
+   * @param {Event} event The route to update to.
+   */
+  updateRoute(event: Event) {
+    let newRoute: Route = (this.state.route === Route.Options) ? Route.Variables : Route.Options;
+    this.setState({variables: this.state.variables, route: newRoute});
+  }
+
+  /**
+   * Renders the component via React.
+   * @override
+   */
+  render() {
+    return (
+      <div className="rmx-card-wide mdl-card mdl-shadow--6dp">
+        <div className="mdl-card__title" ref="myInput">
+          <h2 className="mdl-card__title-text">Remixer</h2>
+
+        </div>
+        <div className="mdl-card__menu">
+          <button className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"
+            onClick={this.updateRoute.bind(this)}>
+              <i className="material-icons">menu</i>
+          </button>
+        </div>
+        <div className="mdl-card__supporting-text mdl-card__actions mdl-card--border">
+          {(() => {
+            switch (this.state.route) {
+              case Route.Variables:
+                return <Overlay variables={this.state.variables} />;
+              case Route.Options:
+                return <Options variables={this.state.variables} />;
+             }
+            })()
+           }
+        </div>
+      </div>
+    );
+  }
+}
+
+/**
+ * Renders the DOMController component to the overlay wrapper element.
+ */
+let element = document.getElementById(CONST.ID_OVERLAY_WRAPPER);
+ReactDOM.render(<div><DOMController wrapperElement={element} /></div>, element);

src/ui/components/ColorSwatchComponent.tsx

@@ -0,0 +1,72 @@
+/** @license
+ *  Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ *  use this file except in compliance with the License. You may obtain a copy
+ *  of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *  License for the specific language governing permissions and limitations
+ *  under the License.
+ */
+
+import * as React from "react";
+import { Component } from "./Component";
+
+/**
+ * A React component class that renders a color swatch picker component.
+ * @class
+ * @extends Component
+ */
+export class ColorSwatchComponent extends Component {
+
+  /** @override */
+  static numberOfLines: number = 2;
+
+  /** @override */
+  get id(): string {
+    return `rmx-swatch-${this.props.variable.key}`;
+  }
+
+  /** @override */
+  componentWillReceiveProps() {
+    // We will manually need to update the MDL component here to new state
+    // when receiving new props.
+    this.state = {selectedValue: this.props.variable.selectedValue};
+  }
+
+  /**
+   * Handles a click event on this component.
+   * @param {string} value The new selectedValue.
+   */
+  handleClick(value: string) {
+    this.updateSelectedValue(value);
+  }
+
+  /** @override */
+  render() {
+    let possibleValues: Array<string> = this.props.variable["possibleValues"];
+    let selectedValue: string = this.state.selectedValue;
+
+    // Ensure selected value is choosable from possible values.
+    if (possibleValues.indexOf(selectedValue) === -1) {
+      possibleValues.push(selectedValue);
+    };
+
+    return (
+      <div>
+        {possibleValues.map((value: string, i: number) => (
+          <div className="rmx-color-item" style={ {backgroundColor: value} }
+            value={value} key={this.id + "-" + i} ref={value}
+            onClick={this.handleClick.bind(this, value)} data={value}>
+              { (selectedValue === value) ? <i className="material-icons">check</i> : "" }
+          </div>
+        ))}
+      </div>
+    );
+  }
+}

src/ui/components/Component.tsx

@@ -0,0 +1,87 @@
+/** @license
+ *  Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ *  use this file except in compliance with the License. You may obtain a copy
+ *  of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *  License for the specific language governing permissions and limitations
+ *  under the License.
+ */
+
+import * as React from "react";
+import { ComponentFactory, ComponentProps } from "./ComponentFactory";
+
+/**
+ * Interface for a Component class.
+ * @interface
+ */
+interface ComponentType {
+  id: string;
+  updateSelectedValue(newValue: any): void;
+}
+
+/**
+ * Interface for the state of a Component class.
+ * @interface
+ */
+interface ComponentState {
+  selectedValue: any;
+}
+
+/**
+ * A React component class that Remixer control components should subclass.
+ * @class
+ * @extends React.Component
+ * @implements Component
+ */
+export class Component extends React.Component<ComponentProps, ComponentState> implements ComponentType {
+  constructor(props: ComponentProps) {
+    super(props);
+    this.state = {selectedValue: props.variable.selectedValue};
+  }
+
+  /**
+   * Number of lines to render this component. Defaults to 1.
+   * @override
+   * @static
+   * @type {number}
+   */
+  static numberOfLines: number = 1;
+
+  /**
+   * The HTML id for this component. Subclasses should override and provide a
+   * unique id in the form of `rmx-{component-name}-key`.
+   *
+   * As an example: rmx-switch-title.
+   *
+   * @readonly.
+   * @return {string} The HTML element ID.
+   */
+  id: string;
+
+  /**
+   * The component will mount. Dynamicly generate MDL elements require
+   * calling `upgradeElement` for each component.
+   * @override
+   */
+  componentDidMount() {
+    for (let key in this.refs) {
+      window["componentHandler"].upgradeElement(this.refs[key]);
+    }
+  }
+
+  /**
+   * Updates the state and selected value.
+   * @param {any} newValue The new value to update to.
+   */
+  updateSelectedValue(newValue: any) {
+    this.setState({selectedValue: newValue});
+    this.props.variable.selectedValue = newValue;
+  }
+}