From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001
From: Pierre Frisch
Date: Thu, 22 Dec 2011 07:25:50 -0800
Subject: First commit of Ninja to ninja-internal

Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
---
 .../materials-popup.reel/materials-popup.css       | 162 +++++
 .../materials-popup.reel/materials-popup.html      | 122 ++++
 .../materials-popup.reel/materials-popup.js        | 674 +++++++++++++++++++++
 3 files changed, 958 insertions(+)
 create mode 100644 js/panels/Materials/materials-popup.reel/materials-popup.css
 create mode 100644 js/panels/Materials/materials-popup.reel/materials-popup.html
 create mode 100644 js/panels/Materials/materials-popup.reel/materials-popup.js

(limited to 'js/panels/Materials/materials-popup.reel')

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css
new file mode 100644
index 00000000..299dc5f9
--- /dev/null
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.css
@@ -0,0 +1,162 @@
+@charset "UTF-8";
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+.materials_popup {
+  font-size: 12px;
+  text-shadow: 1px 1px 1px #000;
+    overflow: hidden;
+}
+
+.materials_popup a:hover {
+  color: #CCC;
+}
+
+.materials_popup hr {
+  float: left;
+  clear: both;
+  width: 100%;
+  display: block;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1d1d1d), color-stop(0.75, #424242));
+  border: none;
+  height: 2px;
+  margin: 4px 0px 4px 0px;
+}
+
+#mp_title {
+    margin: 4px 0px 0px 0px;
+    text-align: center;
+}
+
+#mp_preview {
+    height: 100px;
+    text-align: center;
+}
+
+#mp_maps div div,
+#mp_maps div div:focus,
+#mp_maps div input,
+#mp_maps div input:focus {
+    margin: 0px 0px 2px 0px;
+}
+
+#mp_properties_labels,
+#mp_maps_labels {
+  display:block;
+  float: left;
+  width:86px;
+  margin: 0px 8px 2px 5px;
+  font-family: 'Droid Sans', sans-serif;
+  font-size: 12px;
+}
+
+#mp_properties_labels div,
+#mp_maps_labels div {
+  float: right;
+  clear: left;
+  width: auto;
+  margin: 0px 0px 3px 0px;
+}
+
+#mp_maps_labels div {
+  margin: 2px 0px 3px 0px !important;
+}
+
+#mp_properties_labels div {
+  margin: 6px 0px 6px 0px !important;
+}
+
+#mp_properties_colors
+{
+    float:left;
+    width: 24px;
+    margin: 0px -8px 0px 10px;
+}
+
+#mp_properties_colors button {
+  width: 22px;
+  height: 22px;
+  margin:  2px 0;
+}
+
+#mp_properties_colors input.hottext {
+  background: none;
+  float: right;
+  margin: 4px 0px;
+  padding: 0px;
+  width: 23px;
+  color: #FFF;
+  text-shadow: 1px 1px 1px #000;
+  font-family: 'Droid Sans', sans-serif;
+  font-size: 11px;
+  text-align: center;
+}
+
+#mp_properties_colors input.hottextInput {
+  background: #FFF;
+  color: #000;
+  text-shadow: none;
+  border: 1px solid #333;
+  margin: 3px -2px 5px 1px;
+  padding: 1px;
+  text-decoration: none;
+  outline: none;
+}
+
+#mp_maps_inputs
+{
+    float: left;
+    width: auto;
+}
+
+#mp_maps_inputs input {
+  float:left;
+  clear:both;
+  width: 100px;
+  background: #555;
+  border: 1px solid #333;
+  color: #FFF;
+  padding: 1px 0px 1px 0px;
+  margin: 0px 0px 0px 10px;
+  text-decoration: none !important;
+  text-shadow: 1px 1px 1px #000;
+  font-family: 'Droid Sans', sans-serif;
+  font-size: 11px;
+  letter-spacing: 1px;
+}
+
+#mp_maps_inputs input:focus {
+  outline: none;
+  margin: -1px 0px -1px 10px;
+  background: #FFF;
+  color: #000;
+  text-shadow: none;
+}
+
+
+#mp_buttons {
+    clear:both;
+    float: left;
+    margin: 0px -4px 0px 4px;
+    width: 97%;
+}
+
+#mp_buttons button {
+  height: 22px;
+  overflow: hidden;
+  display: block;
+  cursor: pointer;
+}
+
+#mp_cancel_btn {
+    float: left;
+    width: 60px;
+}
+
+#mp_ok_btn {
+    float: right;
+    width: 30px;
+}
\ No newline at end of file
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html
new file mode 100644
index 00000000..bac69f25
--- /dev/null
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html lang="en">
+	<head>
+
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
+    	<link rel="stylesheet" type="text/css" href="materials-popup.css">
+
+   		<script type="text/montage-serialization">
+        {
+            "okButton": {
+                "module": "js/components/button.reel",
+                "name": "Button",
+                "properties": {
+                    "element": {"#": "mp_ok_btn"},
+                    "label": "OK"
+                }
+            },
+            "cancelButton": {
+                "module": "js/components/button.reel",
+                "name": "Button",
+                "properties": {
+                    "element": {"#": "mp_cancel_btn"},
+                    "label": "Cancel"
+                }
+            },
+            "eventDelegator": {
+                "module": "montage/event/action-event-listener",
+                "name": "ActionEventListener",
+                "properties": {
+                    "handler": {"@": "owner"},
+                    "action": "updatePreview"
+                }
+            },
+            "propControl1": {
+                "module": "js/components/ui/property-control",
+                "name": "PropertyControl",
+                "properties": {
+                    "element": {"#": "mp_property"}
+                },
+                "bindings": {
+                    "data": {
+                        "boundObject": {"@": "materialsProperties"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration",
+                        "oneway": false
+                    }
+                },
+                "listeners": [
+                                {
+                                    "type": "propertyChange",
+                                    "listener": {"@": "eventDelegator"},
+                                    "capture": false
+                                },
+                                {
+                                    "type": "propertyChanging",
+                                    "listener": {"@": "eventDelegator"},
+                                    "capture": false
+                                }
+                            ]
+            },
+            "materialsProperties": {
+                "module": "montage/ui/repetition",
+                "name": "Repetition",
+                "properties": {
+                    "element": {"#": "mp_properties_list"}
+                },
+                "bindings": {
+                    "objects": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "materialsData",
+                        "oneway": false
+                    }
+                }
+            },
+            "owner": {
+                "module": "js/panels/Materials/materials-popup.reel",
+                "name": "MaterialsPopup",
+                "properties": {
+                    "materialsProperties": {"@": "materialsProperties"},
+                    "element": {"#": "materials_popup"},
+                    "okButton": {"@": "okButton"},
+                    "cancelButton": {"@": "cancelButton"},
+                    "materialTitle": {"#": "mp_title"}
+                }
+            }
+        }
+    </script>
+
+	</head>
+
+	<body>
+
+    	<div id="materials_popup">
+            <div id="mp_title">Material Name</div>
+
+            <hr />
+
+    		<div id="mp_preview">Preview Pane</div>
+
+            <hr />
+
+            <div id="mp_properties_list" style="-webkit-user-select: none;">
+                <div id="mp_property"></div>
+            </div>
+
+            <hr />
+            
+            <div id="mp_buttons">
+                <button id="mp_cancel_btn"></button>
+                <button id="mp_ok_btn"></button>
+            </div>
+
+    	</div>
+
+	</body>
+
+</html>
\ No newline at end of file
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
new file mode 100644
index 00000000..afdc3628
--- /dev/null
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -0,0 +1,674 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage = require("montage/core/core").Montage,
+    Component   = require("montage/ui/component").Component;
+var Button = 			require("js/components/button.reel").Button;
+
+////////////////////////////////////////////////////////////////////////
+//Exporting as MaterialsPopup
+exports.MaterialsPopup = Montage.create(Component, {
+	////////////////////////////////////////////////////////////////////
+    okButton: {
+        enumerable: false,
+        value: null
+    },
+
+    cancelButton: {
+        enumerable: false,
+        value: null
+    },
+
+    ////////////////////////////////////////////////////////////////////
+	// Material Properties
+
+    materialsProperties: {
+        enumerable: true,
+        serializable: true,
+        value: null
+    },
+
+    _materialName: {
+        enumerable: true,
+        value: "Material"
+    },
+
+	materialTitle: {
+		enumerable: true,
+		value: null
+	},
+
+	captureAction: {
+		value:function(event) {
+			switch(event._currentTarget.label)
+			{
+				case "Cancel":
+					console.log("Cancel material edit");
+					break;
+				case "OK":
+					console.log("Committing material with the following values:");
+                    for(var i=0, len=this.materialsProperties.childComponents.length; i< len; i++)
+                    {
+                        var childControl = this.materialsProperties.childComponents[i];
+                        var childValue = childControl._control[childControl._prop];
+
+                        if(typeof childValue === "object")
+                        {
+                            console.log(childControl.label + " is ");
+                            console.dir(childValue);
+                        }
+                        else
+                        {
+                            console.log(childControl.label + " is " + childValue);
+                        }
+                        console.log("--------------");
+
+                    }
+					break;
+			}
+		}
+	},
+
+    updatePreview:
+    {
+        value: function(event)
+        {
+            if(event.type === "propertyChanging")
+            {
+                this._handlePropertyChanging(event);
+            }
+            else
+            {
+                this._handlePropertyChange(event);
+            }
+        }
+    },
+
+    _handlePropertyChanging:
+    {
+        value: function(event)
+        {
+            if(typeof event.propertyValue === "object")
+            {
+                console.log(event.propertyLabel + " changing to ");
+                console.dir(event.propertyValue);
+            }
+            else
+            {
+                console.log(event.propertyLabel + " changing to " + event.propertyValue);
+            }
+
+			if (event.propertyLabel && event.propertyValue)
+				this.applyProperty( event.propertyLabel,  event.propertyValue );
+        }
+    },
+
+    _handlePropertyChange:
+    {
+        value: function(event)
+        {
+            if(typeof event.propertyValue === "object")
+            {
+                console.log(event.propertyLabel + " changed to ");
+                console.dir(event.propertyValue);
+            }
+            else
+            {
+                console.log(event.propertyLabel + " changed to " + event.propertyValue);
+            }
+
+			if (event.propertyLabel)
+				this.applyProperty( event.propertyLabel,  event.propertyValue );
+        }
+    },
+
+	applyProperty:
+	{
+		value: function( propLabel, propValue)
+		{
+			// find the property lable in the array
+			// This assumes no duplication in labels
+			if (this._propLabels)
+			{
+				// the label cones through with a trailing ':'.  remove that
+				var ch = propLabel[ propLabel.length - 1];
+				if (ch == ':')
+					propLabel = propLabel.substr(0, propLabel.length - 1);
+				
+				var index;
+				var nProps = this._propLabels.length;
+				for (var i=0;  i<nProps;  i++)
+				{
+					if (this._propLabels[i] == propLabel)
+					{
+						index = i;
+						break;
+					}
+				}
+				if ((index != null) && this._material)
+				{
+					var value = this.decodeValue( this._propTypes[index],  propValue );
+					this._material.setProperty( this._propNames[index],  value );
+				}
+			}
+		}
+	},
+
+	decodeValue:
+	{
+		value: function( type,  value )
+		{
+			var rtnValue;
+			switch (type)
+			{
+				case "color":
+					rtnValue = [ value['r']/255.0,  value['g']/255.0,  value['b']/255.0, value['a'] ];
+					break;
+
+				case "vector2d":
+				case "vector3d":
+					rtnValue = [];
+					for (var i in value)  rtnValue.push( value[i] );
+					break;
+
+				case "float":
+					rtnValue = value;
+					break;
+
+				case "file":
+					if (value && (value.length > 0))
+					{
+						var index = value.lastIndexOf( "/" );
+						if (index < 0)  index = value.lastIndexOf( "\\" );
+						if (index >= 0)
+							value = value.substr( index+1 );
+						value = "assets\\images\\" + value;
+						rtnValue = value.slice(0);
+					}
+					break;
+
+				case "checkbox":
+					rtnValue = value;
+					break;
+
+				default:
+					console.log( "unrecognized material control type: " + type );
+					break;
+			}
+			return rtnValue;
+		}
+	},
+
+    ////////////////////////////////////////////////////////////////////
+	//
+	prepareForDraw: {
+		enumerable: false,
+		value: function() {
+            this.cancelButton.addEventListener("action", this, true);
+
+            this.okButton.addEventListener("action", this, true);
+        }
+    },
+	////////////////////////////////////////////////////////////////////
+	//
+	didDraw: {
+		enumerable: false,
+		value: function() {
+           this.materialTitle.innerHTML = this._materialName;
+		}
+	},
+
+	//Garbage collection (Manual method)
+	destroy: {
+		enumerable: false,
+		value: function() {
+			// add cleanup routines here
+		}
+	},
+
+	loadMaterials:
+	{
+		enumerable: true,
+		value: function(materialID)
+		{
+           this._materialName = materialID;
+            if(	
+					(materialID === "BrickMaterial")				||
+					(materialID ===  "UberMaterial")				|| 
+					(materialID ===  "FlatMaterial")				||
+ 					(materialID ===  "BumpMetalMaterial")			||
+ 					(materialID ===  "PlasmaMaterial")				||
+ 					(materialID ===  "LinearGradientMaterial")		||
+ 					(materialID ===  "RadialGradientMaterial")		||
+ 					(materialID ===  "RadialBlurMaterial")			||
+ 					(materialID ===  "PulseMaterial")				||
+ 					(materialID ===  "TunnelMaterial")				||
+ 					(materialID ===  "TwistMaterial")				||
+ 					(materialID ===  "KeleidoscopeMaterial")		||
+ 					(materialID ===  "JuliaMaterial")				||
+ 					(materialID ===  "MandelMaterial")				||
+ 					(materialID ===  "IridescentScalesMaterial")
+				)
+			{
+				var material = MaterialsLibrary.getMaterial( materialID );
+				if (material)
+				{
+					this._material = material;
+					var matData = this.getMaterialData( material );
+					this.materialsData = matData;
+				}
+            }
+            else
+            {
+                this.materialsData = this._dummyData1;
+            }
+            
+           this.needsDraw = true;
+		}
+	},
+
+	getMaterialData:
+	{
+		value: function( material )
+		{
+			// declare the array to hold the results
+			var rtnArray = [];
+
+			var propNames = [],  propValues = [],  propTypes = [],  propLabels = [];
+			this._propNames = propNames;
+			this._propValues = propValues;
+			this._propTypes = propTypes;
+			this._propLabels = propLabels;
+			material.getAllProperties( propNames,  propValues,  propTypes,  propLabels);
+			var n = propNames.length;
+			for (var i=0;  i<n;  i++)
+			{
+				var obj;
+				switch (propTypes[i])
+				{
+					case "color":
+						obj = this.createColorData( propLabels[i], propValues[i] );
+						break;
+
+					case "vector2d":
+						obj = this.createVectorData( 2, propLabels[i], propValues[i] );
+						break;
+
+					case "vector3d":
+						obj = this.createVectorData( 3, propLabels[i], propValues[i] );
+						break;
+
+					case "float":
+						obj = this.createFloatData( propLabels[i], propValues[i] );
+						break;
+
+					case "file":
+						obj = this.createFileData( propLabels[i], propValues[i] );
+						break;
+
+					case "checkbox":
+						obj = this.createCheckboxData( propLabels[i], propValues[i] );
+						break;
+
+					default:
+						console.log( "unrecognized material control type: " + propType[i] );
+						break;
+				}
+
+				if (obj)
+				{
+					rtnArray.push( obj );
+					obj = null;
+				}
+			}
+
+			return rtnArray;
+		}
+	},
+
+	createColorData:
+	{
+		value:  function( label,  color )
+		{
+			var obj =
+			{
+				"label":		label,
+				"description":	"a color",
+				"controlType":	"ColorChip",
+                "defaults":
+                {
+					"color":	{ r:color[0]*255, g:color[1]*255, b:color[2]*255, a:color[3] }
+				}
+			};
+
+			return obj;
+		}
+	},
+
+	createFloatData:
+	{
+		value: function( label, value )
+		{
+			var obj =
+			{
+                "label":         label,
+                "description":   "floating point value",
+                "controlType":   "HotText",
+                "defaults":
+                {
+                    "minValue": 0,
+                    "maxValue": 128,
+                    "decimalPlace": 100,
+					"value": value
+                }
+			}
+
+			return obj;
+		}
+	},
+	
+	createCheckboxData:
+	{
+		value: function( label, value )
+		{
+			var obj =
+			{
+                "label":         label,
+                "description":   "checkbox",
+                "controlType":   "Button",
+                "defaults":
+                {
+                    "isToggleButton": true,
+					"value": value
+                }
+			}
+
+			return obj;
+		}
+	},
+
+	createFileData:
+	{
+		value: function( label, value )
+		{
+			var obj =
+			{
+                "label":         label,
+                "description":   "Image file",
+                "controlType":   "FileInput",
+                "defaults":
+                {
+                    "filePath": value
+                }
+            };
+
+			return obj;
+		}
+	},
+
+	createVectorData:
+	{
+		value: function( dimen, label, value )
+		{
+			var obj = 
+			{
+                "label":         label,
+                "description":   "a vector",
+                "controlType":   "InputGroup",
+                "defaults":
+                {
+                    data:[
+                        {
+                            "label":         "X",
+                            "description":   "X value",
+                            "controlType":   "HotText",
+                            "defaults":
+                            {
+								"decimalPlace": 100,
+								"minValue": -10,
+                                "maxValue":  10,
+                                "value": value[0]
+                            }
+                        },
+                        {
+                            "label":         "Y",
+                            "description":   "Y value",
+                            "controlType":   "HotText",
+                            "defaults":
+                            {
+								"decimalPlace": 100,
+								"minValue": -100,
+                                "maxValue":  100,
+								"value":	value[1]
+                           }
+                        }
+                    ]
+                }
+			}
+
+			if (dimen > 2)
+			{
+				obj["defaults"]["data"][2] =
+				{
+					"label":         "Z",
+					"description":   "Z value",
+					"controlType":   "HotText",
+					"defaults":
+					{
+						"minValue": -1.e8,
+						"maxValue":  1.e8,
+						"value":	value[2]
+					}
+				}
+			}
+
+			return obj;
+		}
+	},
+
+    _dummyData1: {
+        value: [
+            {
+                "label":         "Texture1",
+                "description":   "Texture1 value",
+                "controlType":   "FileInput",
+                "defaults":
+                {
+                    "filePath": "http://localhost/"
+                }
+            },
+            {
+                "label":         "Diffuse",
+                "description":   "Diffuse value",
+                "controlType":   "ColorChip",
+                "defaults":
+                {
+                }
+            },
+            {
+                "label":         "Specular",
+                "description":   "Specular value",
+                "controlType":   "Button",
+                "defaults":
+                {
+                    "isToggleButton": true
+                }
+            },
+            {
+                "label":         "Shininess",
+                "description":   "Shininess value",
+                "controlType":   "HotText",
+                "defaults":
+                {
+                    "minValue": 0,
+                    "maxValue": 128,
+                    "decimalPlace": 100
+                }
+            },
+            {
+                "label":         "RGB",
+                "description":   "RGB value",
+                "controlType":   "InputGroup",
+                "defaults":
+                {
+                    data:[
+                        {
+                            "label":         "R",
+                            "description":   "R value",
+                            "controlType":   "HotText",
+                            "defaults":
+                            {
+                                "minValue": 0,
+                                "maxValue": 255,
+                                "value": 255
+                            }
+                        },
+                        {
+                            "label":         "G",
+                            "description":   "G value",
+                            "controlType":   "HotText",
+                            "defaults":
+                            {
+                                "minValue": 0,
+                                "maxValue": 255
+                            }
+                        },
+                        {
+                            "label":         "B",
+                            "description":   "B value",
+                            "controlType":   "HotText",
+                            "defaults":
+                            {
+                                "minValue": 0,
+                                "maxValue": 255
+                            }
+                        }
+                    ]
+                }
+            },
+            {
+                "label":         "XYZ",
+                "description":   "XYZ value",
+                "controlType":   "InputGroup",
+                "defaults":
+                {
+                    data:[
+                        {
+                            "label":         "X",
+                            "description":   "X value",
+                            "controlType":   "TextField",
+                            "defaults":
+                            {
+                                "text": "0"
+                            }
+                        },
+                        {
+                            "label":         "Y",
+                            "description":   "Y value",
+                            "controlType":   "TextField",
+                            "defaults":
+                            {
+                                "text": "0"
+                            }
+                        },
+                        {
+                            "label":         "Z",
+                            "description":   "Z value",
+                            "controlType":   "TextField",
+                            "defaults":
+                            {
+                                "text": "1"
+                            }
+                        }
+                    ]
+                }
+            },
+            {
+                "label":         "Foo",
+                "description":   "Foo value",
+                "controlType":   "Slider",
+                "defaults":
+                {
+                    "minValue":    0,
+                    "maxValue":    100,
+                    "value":    50,
+                    "allowTrackClick": true
+                }
+            },
+            {
+                "label":         "Bar",
+                "description":   "Bar value",
+                "controlType":   "HotTextUnit",
+                "defaults":
+                {
+                    "acceptableUnits": ["%"],
+                    "value":    50,
+                    "units": "%"
+                }
+            }
+        ]
+    },
+
+    _dummyData2: {
+        value: [
+                    {
+                        "label":         "Diffuse",
+                        "description":   "Diffuse value",
+                        "controlType":   "ColorChip",
+                        "defaults":
+                        {
+                        }
+                    },
+                    {
+                        "label":         "Ambient",
+                        "description":   "Ambient value",
+                        "controlType":   "ColorChip",
+                        "defaults":
+                        {
+                        }
+                    },
+                    {
+                        "label":         "Specular",
+                        "description":   "Specular value",
+                        "controlType":   "ColorChip",
+                        "defaults":
+                        {
+                        }
+                    },
+                    {
+                        "label":         "Shininess",
+                        "description":   "Shininess value",
+                        "controlType":   "HotText",
+                        "defaults":
+                            {
+                                "minValue": 0,
+                                "maxValue": 128
+                            }
+                    }
+                ]
+    },
+    
+    _materialsData: {
+		enumerable: true,
+        serializable: true,
+	    value: this._dummyData1
+    
+	},
+
+    materialsData: {
+        enumerable: true,
+        serializable: true,
+        get: function() {
+                return this._materialsData;
+            },
+        set: function(data) {
+            this._materialsData = data;
+            this.materialsProperties.needsDraw = true;
+        }
+    }
+
+
+});
-- 
cgit v1.2.3