First commit of Ninja to ninja-internal

Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>

1 files changed, 405 insertions, 0 deletions

diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
new file mode 100644
index 00000000..0940be3c
--- /dev/null
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -0,0 +1,405 @@
+/* <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;
+////////////////////////////////////////////////////////////////////////
+//Exporting as ColorWheel
+exports.GradientPicker = Montage.create(Component, {
+        ////////////////////////////////////////////////////////////////////
+        //
+        hasTemplate: {
+                enumerable: true,
+        value: true
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    _updating: {
+        enumerable: false,
+        value: false
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    _value: {
+        enumerable: false,
+        value: null
+    },
+        ////////////////////////////////////////////////////////////////////
+    //
+    value: {
+        enumerable: true,
+        get: function() {
+            return this._value;
+        },
+        set: function(value) {
+            this._value = value;
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    _mode: {
+        enumerable: false,
+        value: 'linear'
+    },
+        ////////////////////////////////////////////////////////////////////
+    //
+    mode: {
+        enumerable: true,
+        get: function() {
+            return this._mode;
+        },
+        set: function(value) {
+                this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
+                //
+            this._mode = value;
+            //
+            this._dispatchEvent('change', false);
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    prepareForDraw: {
+        enumerable: false,
+        value: function() {
+                //
+                }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    willDraw: {
+        enumerable: false,
+        value: function() {
+                //Getting component views from layout
+                this.element._components = {trackCover: this.element.getElementsByClassName('cp_gp_slider')[0].getElementsByClassName('cover')[0], gradientTrack: this.element.getElementsByClassName('cp_gp_slider')[0].getElementsByClassName('track')[0], stopsContainer: this.element.getElementsByClassName('cp_gp_slider')[0].getElementsByClassName('chips')[0]};
+                this.element._trackWidth = parseInt(getComputedStyle(this.element._components.stopsContainer).getPropertyCSSValue('width').cssText);
+                //TODO: Fix events and remove this hack
+                this.element._components.trackCover.addEventListener('mouseover', function () {
+                                if (!this._updating) {                  
+                                this.element._components.trackCover.style.display = 'none';
+                        }
+                }.bind(this), true);
+                //
+                this.element.getElementsByClassName('cp_gp_linear')[0].addEventListener('change', function (e){
+                        this.mode = 'linear';
+                }.bind(this), true);
+                //
+                this.element.getElementsByClassName('cp_gp_radial')[0].addEventListener('change', function (e){
+                        this.mode = 'radial';
+                }.bind(this), true);    
+                }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    draw: {
+        enumerable: false,
+        value: function() {
+                //
+                if (this.mode === 'linear') {
+                        this.element.getElementsByClassName('cp_gp_linear')[0].checked = 'true';
+                } else if (this.mode === 'radial') {
+                        this.element.getElementsByClassName('cp_gp_radial')[0].checked = 'true';
+                }
+                //
+                if (!this.value) {
+                        this.addDefaultStops();
+                        } else {
+                                //Temp holder
+                                var stops = this.value;
+                                //Adding stops from preset value
+                                for (var i=0; stops[i]; i++) {
+                                        this.addStop({color: {mode: stops[i].mode, value: stops[i].value}, percent:stops[i].position}, true);
+                                }
+                        }
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+        didDraw: {
+        enumerable: false,
+        value: function() {
+                        //
+                        this.element._components.gradientTrack.addEventListener('click', this, false);
+                
+                
+                
+                
+                
+                ////////////////////////////////////////////////////////////
+                        ////////////////////////////////////////////////////////////
+                        //TODO: Determing a better way to get screen position
+                        var element = this.element._components.gradientTrack;
+                this.element._trackX = 0, this.element._trackY = 0;
+                //
+                        while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
+                        this.element._trackX += element.offsetLeft - element.scrollLeft;
+                        this.element._trackY += element.offsetTop - element.scrollTop;
+                        element = element.parentNode;
+                }
+                ////////////////////////////////////////////////////////////
+                ////////////////////////////////////////////////////////////
+                
+                //This is forever changing, not sure why
+                //console.log(this.element._trackX, this.element._trackY);
+                
+                
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    addDefaultStops: {
+        enumerable: false,
+        value: function() {
+                this.addStop({color: {mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}}, percent: 0}, true);
+                        this.addStop({color: {mode: 'rgb', value: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0, 0, 0)'}}, percent: 100}, true);
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+        addStop: {
+        enumerable: false,
+        value: function(data, silent) {
+                if (this.application.ninja.colorController.colorPopupManager) {
+                        //Hiding any open popups (of gradient buttons)
+                        this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
+                        //Creating stop elements
+                        var stop = document.createElement('div'),
+                                holder = document.createElement('div'),
+                                        tooltip = document.createElement('span'),
+                                        button = document.createElement('button');
+                                //Setting up elements
+                                stop.appendChild(tooltip);
+                                stop.appendChild(holder);
+                                holder.appendChild(button);
+                                //Adding events to the stops
+                                stop.addEventListener('mousedown', this, false);
+                                stop.addEventListener('mouseup', this, false);
+                                //Storing refereces to buttons and actual stop container
+                                button.stop = stop;
+                                stop.button = button;
+                                //Adding stop to container
+                                this.element._components.stopsContainer.appendChild(stop);
+                                //Checking for bounds to add stop
+                                if (data.percent >= 0 && data.percent <= 100) {
+                                        this.positionStop(stop, data.percent);
+                                        button.stopPosition = data.percent;
+                                }
+                                //Creating an instance of input chip
+                                this.application.ninja.colorController.addButton('chip', button);
+                                //Initialing button with color data
+                                button.color(data.color.mode, data.color.value);
+                                //Button popup data
+                                button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, panel: true};
+                                //Listening for color events from button
+                                button.addEventListener('change', this, false);
+                                //Dispatching event depending on type of mode
+                                if (!silent) {
+                                        this._dispatchEvent('change', false);
+                                } else {
+                                        this._dispatchEvent('change', true);
+                                }