Initial commit of component render classes.

src/core/variables/Variable.ts

@@ -45,7 +45,7 @@ export interface VariableListParams extends VariableParams {
  * @extends Function
  */
 export interface VariableCallback extends Function {
-  variable: Variable;
+  variable?: Variable;
 }
 
 /**
@@ -78,7 +78,7 @@ export class Variable implements VariableParams {
     this.defaultValue = defaultValue;
     this._selectedValue = defaultValue;
     if (callback) {
-      this.callbacks.push(callback);
+      this._callbacks.push(callback);
     }
     this._initialized = true;
   }
@@ -156,6 +156,14 @@ export class Variable implements VariableParams {
     return this._callbacks;
   }
 
+  /**
+   * Adds a callback to array of callbacks.
+   * @param {VariableCallback} callback The callback to add.
+   */
+  addCallback(callback: VariableCallback): any {
+    this._callbacks.push(callback);
+  }
+
   /**
    * Invokes each of the callback methods.
    */
@@ -170,7 +178,7 @@ export class Variable implements VariableParams {
    * @param {VariableCallback} callback The callback to add and execute.
    */
   addAndExecuteCallback(callback: VariableCallback): void {
-    this.callbacks.push(callback);
+    this._callbacks.push(callback);
     callback(this);
   }
 

src/ui/DOMController.tsx

@@ -0,0 +1,100 @@
+/** @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 { KeyCode, KeyEvent, CSS } from "../lib/Constants";
+import { Messaging } from "../lib/Messaging";
+import { Overlay } from "./overlay/Overlay";
+import { Variable } from "../core/variables/Variable";
+
+/**
+ * Interface for the properties assigned to the DOMController component.
+ * @interface
+ */
+interface ControllerProps {
+  wrapperElement: HTMLElement;
+  variables: Array<Variable>;
+  updateVariable(variable: Variable, selectedValue: any): void;
+}
+
+/**
+ * Renders an MDL card-styled overlay containing a child control for each
+ * variable.
+ * @class
+ * @extends React.Component
+ */
+export class DOMController extends React.Component<ControllerProps, void> {
+
+  /** @override */
+  componentDidMount() {
+    // Register for messaging and key events.
+    Messaging.register(this.onMessageReceived.bind(this));
+    this.addKeyListener();
+  }
+
+  /** @override */
+  componentWillUnmount() {
+    // Unregister for messaging and key events.
+    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.toggleVisibility();
+    }
+  }
+
+  /** Adds a key listener. */
+  addKeyListener(): void {
+    document.addEventListener(KeyEvent.DOWN, (e: KeyboardEvent) => {
+      if (e.keyCode === KeyCode.ESC) {
+        this.toggleVisibility();
+      }
+    });
+  }
+
+  /** Removes a key listener. */
+  removeKeyListener(): void {
+    document.removeEventListener(KeyEvent.DOWN);
+  }
+
+  /** Toggles the Remixer overlay visibility. */
+  toggleVisibility() {
+    this.props.wrapperElement.classList.toggle(CSS.RMX_VISIBLE);
+  }
+
+  /** @override */
+  render() {
+    return (
+      <div className="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__supporting-text mdl-card__actions mdl-card--border">
+          <Overlay
+            variables={this.props.variables}
+            updateVariable={this.props.updateVariable}
+          />
+        </div>
+      </div>
+    );
+  }
+}

src/ui/controls/ColorSwatchControl.tsx

@@ -0,0 +1,100 @@
+/** @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 { ColorControlProps } from "./controlProps";
+import { CSS, VariableType } from "../../lib/Constants";
+
+/**
+ * A color swatch picker control consisting of a single color swatch for each
+ * possible value.
+ * @class
+ * @extends React.Component
+ */
+export class ColorSwatchControl extends React.Component<ColorControlProps, void> {
+
+  /** Handles the update event for this control. */
+  onClick = (event: React.FormEvent<HTMLElement>): void => {
+    this.props.updateVariable(
+      this.props.variable,
+      (event.target as HTMLElement).dataset["value"]
+    );
+  }
+
+  /** @override */
+  shouldComponentUpdate(nextProps: ColorControlProps) {
+    return nextProps.variable !== this.props.variable;
+  }
+
+  /** @override */
+  render() {
+    const {
+      title,
+      possibleValues,
+      selectedValue
+    } = this.props.variable;
+
+    return (
+      <div className={`${CSS.RMX_COLOR_SWATCH} ${CSS.MDL_LIST_ITEM} ${CSS.MDL_TWO_LINE}`}>
+        <span className={CSS.MDL_PRIMARY}>
+          <span>{title}
+            <span className={CSS.RMX_SELECTED_VALUE}>{selectedValue}</span>
+          </span>
+          <span className={CSS.MDL_SECONDARY}>
+            {possibleValues.map((value: string) => (
+              <ColorSwatch color={value} key={value}
+                isSelected={selectedValue === value}
+                onClick={this.onClick}
+              />
+            ))}
+          </span>
+        </span>
+      </div>
+    );
+  }
+}
+
+/**
+ * Interface containing properties for a single color swatch.
+ * @interface
+ */
+interface ColorSwatchProps {
+  color: string;
+  isSelected: boolean;
+  onClick: any;
+}
+
+/**
+ * Returns a single color swatch displayed within the `ColorSwatchControl`.
+ * @param {ColorSwatchProps} props The color swatch properties.
+ */
+function ColorSwatch(props: ColorSwatchProps) {
+  const {
+    color,
+    isSelected,
+    onClick,
+  } = props;
+  return (
+    <div
+      className={CSS.RMX_COLOR_SWATCH_ITEM}
+      style={{backgroundColor: color}}
+      data-value={color}
+      onClick={onClick}
+    >
+      {isSelected ? <i className="material-icons">check</i> : ""}
+    </div>
+  );
+}

src/ui/controls/DropdownControl.tsx

@@ -0,0 +1,75 @@
+/** @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 { CSS } from "../../lib/Constants";
+import { StringControlProps } from "./controlProps";
+
+/**
+ * A dropdown control.
+ * @class
+ * @extends React.Component
+ */
+export class DropdownControl extends React.Component<StringControlProps, void> {
+
+  /** Handles the update event for this control. */
+  onClick = (event: React.FormEvent<HTMLElement>): void => {
+    this.props.updateVariable(
+      this.props.variable,
+      (event.target as HTMLElement).dataset["value"]
+    );
+  }
+
+  /** @override */
+  shouldComponentUpdate(nextProps: StringControlProps) {
+    return nextProps.variable !== this.props.variable;
+  }
+
+  /** @override */
+  render() {
+    const {
+      title,
+      key,
+      possibleValues,
+      selectedValue
+    } = this.props.variable;
+    const id = `${CSS.RMX_DROPDOWN}-${key}`;
+
+    return (
+      <div className={`${CSS.RMX_DROPDOWN} ${CSS.MDL_LIST_ITEM}`}>
+        <span className={CSS.MDL_PRIMARY}>{title}</span>
+        <span className={CSS.MDL_SECONDARY}>
+          <button id={id} className="mdl-button mdl-js-button">
+            <span>
+              {selectedValue}<i className="material-icons">arrow_drop_down</i>
+            </span>
+          </button>
+          <ul
+            className="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+            htmlFor={id}
+          >
+            {possibleValues.map((value: string) => (
+              <li className="mdl-menu__item" key={value}
+                onClick={this.onClick}
+                data-value={value}>{value}
+              </li>
+            ))}
+          </ul>
+        </span>
+      </div>
+    );
+  }
+}

src/ui/controls/RadioListControl.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 { CSS, VariableType } from "../../lib/Constants";
+import { StringControlProps } from "./controlProps";
+
+/**
+ * A radio list control.
+ * @class
+ * @extends React.Component
+ */
+export class RadioListControl extends React.Component<StringControlProps, void> {
+
+  /** Handles the update event for this control. */
+  onChange = (event: React.FormEvent<HTMLInputElement>): void => {
+    this.props.updateVariable(
+      this.props.variable,
+      (event.target as HTMLInputElement).value
+    );
+  }
+
+  /** @override */
+  shouldComponentUpdate(nextProps: StringControlProps) {
+    return nextProps.variable !== this.props.variable;
+  }
+
+  /** @override */
+  render() {
+    const {
+      title,
+      key,
+      possibleValues,
+      selectedValue
+    } = this.props.variable;
+    const id = `${CSS.RMX_RADIO_LIST_ITEM}-${key}`;
+
+    return (
+      <div className={`${CSS.RMX_RADIO_LIST} ${CSS.MDL_LIST_ITEM}`}>
+        <span className={CSS.MDL_PRIMARY}>{title}</span>
+        <span className={CSS.MDL_SECONDARY}>
+          {possibleValues.map((value: string, i: number) => (
+            <label className={`${CSS.RMX_RADIO_LIST_ITEM} mdl-radio mdl-js-radio mdl-js-ripple-effect`}
+              htmlFor={`${id}-${i}`} key={value}
+            >
+              <input type="radio" id={`${id}-${i}`}
+                className="mdl-radio__button"
+                name="options" value={value}
+                checked={selectedValue === value}
+                onChange={this.onChange}
+              />
+              <span className="mdl-radio__label">{value}</span>
+            </label>
+          ))}
+        </span>
+      </div>
+    );
+  }
+}