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 --- .../ComputedStyleSubPanel.js | 192 +++++++++++++++++++++ 1 file changed, 192 insertions(+) create mode 100644 js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js (limited to 'js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js') 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 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +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 -- cgit v1.2.3