1 files changed, 192 insertions, 0 deletions

diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js
new file mode 100644
index 00000000..0e1cf206
--- /dev/null
+++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js
@@ -0,0 +1,192 @@
+/* <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,
+    nj        = require("js/lib/NJUtils.js").NJUtils;
+
+
+exports.ComputedStyleSubPanel = Montage.create(Component, {
+    groupDropDown:      { value: null },
+    computedListEl:     { value: null },
+    searchField:        { value: null },
+
+    templateDidLoad : {
+        value : function() {
+            ///// Set current filter group
+            this._group = this.groupDropDown.value;
+            ///// Set up event listeners
+            this.groupDropDown.addEventListener('change', this);
+            this.searchField.addEventListener('input', this);
+        }
+    },
+    // prepareForDraw : {
+    //    value: function() {
+    //             
+    //    }
+    // },
+    willDraw : {
+        value: function() {
+            if(this._declaration) {
+            
+                var group = this.staticGroupingMap[this._group],
+                    matchedInGroup, elementList;
+            
+                if(this._group === 'all' && !group) {
+                    group = this.staticGroupingMap['all'] = nj.toArray(this._declaration).sort();
+                }
+            
+                ///// Filter group to show only the styles that match search filter
+                matchedInGroup = group.filter(function(item) {
+                    return (item.indexOf(this._filter) > -1);
+                }, this);
+                
+                this._elementList = matchedInGroup.map(function(propName) {
+                    var propEl = nj.make('dt'),
+                        valEl  = nj.make('dd'),
+                        contEl = nj.make('div');
+
+                    propEl.appendChild(nj.textNode(propName));
+                    propEl.title = propName;
+                    
+                    valEl.appendChild(nj.textNode(this._declaration.getPropertyValue(propName)));
+                    valEl.title = this._declaration.getPropertyValue(propName);
+                    
+                    contEl.appendChild(propEl);
+                    contEl.appendChild(valEl);
+                
+                    return contEl;
+                }, this);
+            
+                /*if(matchedInGroup.length) {
+                
+                } else {
+                
+                }*/
+            }
+        }
+    },
+    // The draw function appends the element list to the dom
+    draw: {
+        value: function() {
+            if(this._elementList) {
+                this.clearList();
+                ///// Append style elements to the list container
+                this._elementList.forEach(function(el) {
+                    this.computedListEl.appendChild(el);
+                }, this);   
+            }
+        }
+    },
+    clearList : {
+        value: function() {
+            nj.empty(this.computedListEl);
+        }
+    },
+    ///// Drop down has changed values
+    handleChange : {
+        value: function(e) {
+            this._group = this.groupDropDown.value;
+            this.needsDraw = true;
+        }
+    },
+    ///// Text input has changed values
+    handleInput : {
+        value : function(e) {
+            this._filter = this.searchField.value.trim();
+            this.needsDraw = true;
+        }
+    },
+    // Publicly accessible list of computed styles
+    declaration : {
+        get: function() {
+            return this._declaration;
+        },
+        ////// Accepts a CSSStyleDeclaration object, or dom element
+        set: function(source) {
+            var declaration, styles;
+            if(source.constructor.name === 'CSSStyleDeclaration') {
+                declaration = this._declaration = source;
+            } else {
+                ///// Get computed style of passed in node
+                declaration = this._declaration = source.ownerDocument.defaultView.getComputedStyle(source);
+            }
+            
+            this.needsDraw = true;
+        }
+    },
+    ///// Renders the styles for the current node
+    show : {
+        value : function() {
+            this.element.classList.remove(this._cssClasses.hide);
+        }
+    },
+    hide : {
+        value : function() {
+            this.element.classList.add(this._cssClasses.hide);
+        }
+    },
+    ///// Private
+    //// Stores the current CSSDeclaration object returned by getComputedStyle
+    //// which is needed to get property values
+    _declaration : {
+        enumerable: false,
+        value : null
+    },
+    ///// List of elements to append to style list
+    _elementList : {
+        value: null
+    },
+    ///// Group selected in drop down
+    _group : {
+        enumerable: false,
+        value : null
+    },
+    ///// Filter string entered in search input
+    _filter : {
+        enumerable: false,
+        value : ''
+    },
+    ///// CSS classes used in component
+    _cssClasses : {
+        value : {
+            hide : 'nj-css-panel-hide'
+        }
+    },
+    ///// List of css properties within specified catagories
+    staticGroupingMap : {
+        value : {
+            'all' : null,
+            'background' : [
+                'background-color', 'background-image', 'background-repeat', 'background-position',
+                'background-attachment'
+            ],
+            'summary' : [
+                'width', 'height', 'color', 'font-family', 'font-size', 'display'
+            ],
+            'dimensions' : [
+                'width', 'height', 'top', 'right', 'bottom', 'left',
+                'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+                'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 
+                'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
+            ],
+            'border' : [
+                'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
+                'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',
+                'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
+            ],
+            'font' : [
+                'font-family', 'font-size', 'font-weight', 'font-style', 'color', 'text-transform', 
+                'text-decoration', 'letter-spacing', 'word-spacing', 'line-height', 'text-align',
+                'vertical-align', 'direction'
+            ],
+            'layout' : [
+                'position', 'display', 'visibility', 'z-index', 'overflow-x', 'overflow-y',
+                'white-space', 'clip', 'float', 'clear'
+            ]
+        }
+    }
+});
\ No newline at end of file