Merge branch 'release/v0.5.8' into stable

CHANGELOG.md

@@ -1,3 +1,21 @@
+## 0.5.8
+
+### Bug Fixes
+
+* [Renames defaultValue to initialValue throughout.](https://github.com/material-foundation/material-remixer-js/commit/bf4c7bfb5427e070aeb7b26fb8e66643696fffa6)
+* [Updates webpack config source mapping.](https://github.com/material-foundation/material-remixer-js/commit/7cb0c9b37ee614c1e3fa1ecc74cd196e4fec83e4)
+* [Fixes title when deserializing variable.](https://github.com/material-foundation/material-remixer-js/commit/46f241031fb91a1732721f4772bbeb2737ac0b1c)
+* [Updates localStorage schema](https://github.com/material-foundation/material-remixer-js/commit/a6ca1b2341af96635ef184ba1992ea1d745dbe00)
+* [Fixes Variable.clone() wrongly setting selectedValue to initialValue.](https://github.com/material-foundation/material-remixer-js/commit/19ef8e4af6b3eafe997a7d561740f6915a50202e)
+* [Updates overlay title bar background color.](https://github.com/material-foundation/material-remixer-js/commit/130026e9a356db0185ebee70b8f964f2248aa39b)
+* [Cleans up remote controller class.](https://github.com/material-foundation/material-remixer-js/commit/715812d56d61aa8daeadbba20abc72ed9eed0030)
+* [Makes deserialize publicly available.](https://github.com/material-foundation/material-remixer-js/commit/ded22f9c3da46bdc87250f141d5a1b15551d8057)
+
+### New Features
+
+* [Updates MDL controls to allow remote updates.](https://github.com/material-foundation/material-remixer-js/commit/823d8e29320b790bc5331ce6b9b0f27ca1b0ce54)
+* [Adds ability to sync with remote controller.](https://github.com/material-foundation/material-remixer-js/commit/7a4847dc9e169f1742a94cb09941006f58a61a6c)
+
 ## 0.5.7
 
 * [Updates webpack configuration.](https://github.com/material-foundation/material-remixer-js/commit/fffca3cf29960defe0b280cbe60f37308dc1aaf5)

package.json

@@ -31,13 +31,15 @@
   },
   "devDependencies": {
     "@types/chai": "^3.4.34",
+    "@types/lodash.throttle": "^4.1.0",
     "@types/mocha": "^2.2.33",
     "@types/react": "^0.14.50",
     "@types/react-addons-test-utils": "^0.14.15",
     "@types/react-dom": "^0.14.19",
     "@types/sinon": "^1.16.32",
     "@types/sinon-chai": "^2.7.27",
     "@types/tinycolor2": "^1.1.0",
+    "@types/uuid": "^2.0.29",
     "chai": "^3.5.0",
     "codecov.io": "^0.1.6",
     "copyfiles": "^1.0.0",
@@ -73,9 +75,12 @@
     "webpack-dev-server": "^2.2.0-rc.0"
   },
   "dependencies": {
+    "firebase": "^3.6.5",
+    "lodash.throttle": "^4.1.1",
     "material-design-lite": "^1.2.1",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
-    "tinycolor2": "^1.4.1"
+    "tinycolor2": "^1.4.1",
+    "uuid": "^3.0.1"
   }
 }

src/core/Remixer.ts

@@ -22,6 +22,7 @@ import { Messaging } from "../lib/Messaging";
 import { NumberVariable } from "./variables/NumberVariable";
 import { IRangeVariableParams, RangeVariable } from "./variables/RangeVariable";
 import { IVariableCallback, IVariableKeyMap, Variable } from "./variables/Variable";
+import { Remote } from "../lib/Remote";
 import { StringVariable } from "./variables/StringVariable";
 
 import "../ui/styles/iframe.less";
@@ -81,7 +82,7 @@ class Remixer {
     if (!this._frameElement) {
       let frame = document.createElement("IFRAME") as HTMLFrameElement;
       frame.id = CSS.RMX_OVERLAY_FRAME;
-      frame.setAttribute("sandbox", "allow-scripts allow-same-origin");
+      frame.setAttribute("sandbox", "allow-scripts allow-same-origin allow-popups");
       document.getElementsByTagName("body")[0].appendChild(frame);
 
       // Until `srcdoc` is fully compatible with all browsers, lets simply
@@ -110,10 +111,16 @@ class Remixer {
    * Appends the HTML iFrame to body of client app. Attaches key listener to
    * toggle Overlay visibility.
    * @static
+   * @param {{}} remoteConfig The optional firebase configuration. Provide this
+   *                          configuration if you wish to use the remote
+   *                          controller.
    */
-  static start(): void {
+  static start(remoteConfig?: {}): void {
     this._sharedInstance.appendFrameToBody();
     this._sharedInstance.addKeyListener();
+    if (remoteConfig) {
+      Remote.initializeRemote(remoteConfig);
+    }
   }
 
   /**
@@ -238,13 +245,14 @@ class Remixer {
     let existingVariable = this.getVariable(key);
     if (existingVariable) {
       // Variable with key already exists, so only add callback.
-      // TODO(cjcox:) Determin what to do if variable key already exists.
+      // TODO(cjcox:) Determine what to do if variable key already exists.
     } else {
       this._sharedInstance._variables[key] = variable;
       let storedVariable = LocalStorage.getVariable(key);
       if (storedVariable) {
         // Update variable if exists in storage.
         this.updateVariable(variable, storedVariable.selectedValue);
+        Remote.saveVariable(variable, false);
       } else {
         // Save variable first time.
         this.saveVariable(variable);
@@ -281,21 +289,52 @@ class Remixer {
   }
 
   /**
-   * Updates the selected value of a given Variable from the Remixer shared instance.
+   * Updates the selected value of a given Variable from the Remixer shared
+   * instance.
    * @static
    * @param {Variable} variable      The Variable to update.
    * @param {any}      selectedValue The new selected value.
    */
   static updateVariable(variable: Variable, selectedValue: any): void {
-    variable.selectedValue = selectedValue;
+    if (variable.selectedValue !== selectedValue) {
+      variable.selectedValue = selectedValue;
+    }
+  }
+
+  /**
+   * Clones and updates the selected value of a given Variable from the Remixer
+   * shared instance. Allows immutability update required for React rendering.
+   * @static
+   * @param {Variable} variable The variable to clone and update.
+   * @param {any} selectedValue The new selected value.
+   */
+  static cloneAndUpdateVariable(variable: Variable, selectedValue: any): void {
+    if (variable.selectedValue !== selectedValue) {
+      let clonedVariable = variable.clone();
+      this.attachedInstance._variables[variable.key] = clonedVariable;
+      this.updateVariable(clonedVariable, selectedValue);
+    }
   }
 
   /**
-   * Saves the Variable to local storage.
+   * Saves the Variable to both local storage and remote.
+   * @static
    * @param {Variable} variable The Variable to save.
    */
   static saveVariable(variable: Variable): void {
     LocalStorage.saveVariable(variable);
+
+    // Save remotely. If remote sharing is disabled, a call to this method
+    // will simply be a no-op.
+    Remote.saveVariable(variable);
+  }
+
+  /**
+   * Returns the current remote controller class.
+   * @return {Remote}
+   */
+  get remote(): Remote {
+    return Remote.attachedInstance;
   }
 }
 

src/core/__tests__/BooleanVariable_test.ts

@@ -13,13 +13,13 @@ chai.use(sinonChai);
 describe("BooleanVariable", () => {
   const key: string = "test variable";
   const sanitizedKey: string = "test_variable";
-  const defaultValue: boolean = true;
+  const initialValue: boolean = true;
   let callbackSpy: sinon.SinonSpy;
   let variable: BooleanVariable;
 
   beforeEach(() => {
     callbackSpy = sinon.spy();
-    variable = remixer.addBooleanVariable(key, defaultValue, callbackSpy);
+    variable = remixer.addBooleanVariable(key, initialValue, callbackSpy);
   });
 
   it("should create a new variable", () => {

src/core/__tests__/ColorVariable_test.ts

@@ -13,7 +13,7 @@ chai.use(sinonChai);
 describe("ColorVariable", () => {
   const key: string = "test variable";
   const sanitizedKey: string = "test_variable";
-  const defaultValue: string = "#4285F4";
+  const initialValue: string = "#4285F4";
   const limitedToValues: string[] = ["#4285F4", "#0F9D58", "#DB4437"];
   let callbackSpy: sinon.SinonSpy;
   let variable: ColorVariable;
@@ -22,7 +22,7 @@ describe("ColorVariable", () => {
     callbackSpy = sinon.spy();
     variable = remixer.addColorVariable(
       key,
-      defaultValue,
+      initialValue,
       limitedToValues,
       callbackSpy,
     );

src/core/__tests__/NumberVariable_test.ts

@@ -13,7 +13,7 @@ chai.use(sinonChai);
 describe("NumberVariable", () => {
   const key: string = "test variable";
   const sanitizedKey: string = "test_variable";
-  const defaultValue: number = 20;
+  const initialValue: number = 20;
   const limitedToValues: number[] = [10, 20, 30, 40];
   let callbackSpy: sinon.SinonSpy;
   let variable: NumberVariable;
@@ -22,7 +22,7 @@ describe("NumberVariable", () => {
     callbackSpy = sinon.spy();
     variable = remixer.addNumberVariable(
       key,
-      defaultValue,
+      initialValue,
       limitedToValues,
       callbackSpy,
     );

src/core/__tests__/RangeVariable_test.ts

@@ -13,7 +13,7 @@ chai.use(sinonChai);
 describe("RangeVariable", () => {
   const key: string = "test variable";
   const sanitizedKey: string = "test_variable";
-  const defaultValue: number = 1;
+  const initialValue: number = 1;
   const minValue: number = 0;
   const maxValue: number = 1;
   const increment: number = 0.1;
@@ -24,7 +24,7 @@ describe("RangeVariable", () => {
     callbackSpy = sinon.spy();
     variable = remixer.addRangeVariable(
       key,
-      defaultValue,
+      initialValue,
       minValue,
       maxValue,
       increment,

src/core/__tests__/StringVariable_test.ts

@@ -13,7 +13,7 @@ chai.use(sinonChai);
 describe("StringVariable", () => {
   const key: string = "test variable";
   const sanitizedKey: string = "test_variable";
-  const defaultValue: string = "B";
+  const initialValue: string = "B";
   const limitedToValues: string[] = ["A", "B", "C", "D"];
   let callbackSpy: sinon.SinonSpy;
   let variable: StringVariable;
@@ -22,7 +22,7 @@ describe("StringVariable", () => {
     callbackSpy = sinon.spy();
     variable = remixer.addStringVariable(
       key,
-      defaultValue,
+      initialValue,
       limitedToValues,
       callbackSpy,
     );

src/core/variables/BooleanVariable.ts

@@ -24,7 +24,7 @@ import { IVariableCallback, IVariableParams, Variable } from "./Variable";
  * @extends IVariableParams
  */
 interface IBooleanVariableParams extends IVariableParams {
-  defaultValue: boolean;
+  initialValue: boolean;
   selectedValue: boolean;
 }
 
@@ -40,16 +40,16 @@ export class BooleanVariable extends Variable implements IBooleanVariableParams
    * Creates an instance of a BooleanVariable.
    * @constructor
    * @param  {string}            key          A unique key for the Variable.
-   * @param  {boolean}           defaultValue The default value.
+   * @param  {boolean}           initialValue The initial selected value.
    * @param  {IVariableCallback} callback     The callback to invoke when updated.
    * @return {BooleanVariable}
    */
   constructor(
     key: string,
-    defaultValue: boolean,
+    initialValue: boolean,
     callback?: IVariableCallback,
   ) {
-    super(key, DataType.BOOLEAN, defaultValue, callback);
+    super(key, DataType.BOOLEAN, initialValue, callback);
     this.controlType = ControlType.SWITCH;
   }
 
@@ -58,7 +58,7 @@ export class BooleanVariable extends Variable implements IBooleanVariableParams
    * @return {BooleanVariable} Returns the cloned variable.
    */
   clone() {
-    let cloned = new BooleanVariable(this.key, this.defaultValue, null);
+    let cloned = new BooleanVariable(this.key, this.selectedValue, null);
     cloned.title = this.title;
     cloned._callbacks = this._callbacks.slice();
     return cloned;
@@ -71,7 +71,6 @@ export class BooleanVariable extends Variable implements IBooleanVariableParams
    */
   serialize(): ISerializableData {
     let data = super.serialize();
-    data.defaultValue = this.defaultValue;
     data.selectedValue = this.selectedValue;
     return data;
   }
@@ -83,6 +82,8 @@ export class BooleanVariable extends Variable implements IBooleanVariableParams
    * @return {BooleanVariable}        A new initialized BooleanVariable.
    */
   static deserialize(data: ISerializableData): BooleanVariable {
-    return new BooleanVariable(data.key, data.selectedValue);
+    let variable = new BooleanVariable(data.key, data.selectedValue);
+    variable.title = data.title;
+    return variable;
   }
 }

src/core/variables/ColorVariable.ts

@@ -26,7 +26,7 @@ import { IVariableCallback, IVariableListParams, Variable } from "./Variable";
  * @extends IVariableListParams
  */
 interface IColorVariableParams extends IVariableListParams {
-  defaultValue: string;
+  initialValue: string;
   selectedValue: string;
   limitedToValues?: string[];
 }
@@ -43,18 +43,18 @@ export class ColorVariable extends Variable implements IColorVariableParams {
    * Creates an instance of a ColorVariable.
    * @constructor
    * @param  {string}            key             A unique key for the Variable.
-   * @param  {string}            defaultValue    The default value.
+   * @param  {string}            initialValue    The initial selected value.
    * @param  {string[]}          limitedToValues The array of allowed values.
    * @param  {IVariableCallback} callback        The callback to invoke when updated.
    * @return {ColorVariable}
    */
   constructor(
     key: string,
-    defaultValue: string,
+    initialValue: string,
     limitedToValues?: string[],
     callback?: IVariableCallback,
   ) {
-    super(key, DataType.COLOR, defaultValue, callback);
+    super(key, DataType.COLOR, initialValue, callback);
     this.limitedToValues = limitedToValues ? limitedToValues : [];
     this.controlType = (this.limitedToValues.length > 0) ?
         ControlType.COLOR_LIST : ControlType.COLOR_INPUT;
@@ -77,7 +77,7 @@ export class ColorVariable extends Variable implements IColorVariableParams {
   clone() {
     let cloned = new ColorVariable(
       this.key,
-      this.defaultValue,
+      this.selectedValue,
       this.limitedToValues,
     );
     cloned.title = this.title;
@@ -117,6 +117,8 @@ export class ColorVariable extends Variable implements IColorVariableParams {
     let limitedToValues = data.limitedToValues.map((color: string) => {
       return TinyColor(color).toHexString();
     });
-    return new ColorVariable(data.key, selectedValue, limitedToValues);
+    let variable = new ColorVariable(data.key, selectedValue, limitedToValues);
+    variable.title = data.title;
+    return variable;
   }
 }