ComputedStyleSubPanel

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.html | 48 ++++++ .../ComputedStyleSubPanel.js | 192 +++++++++++++++++++++ .../computed-style-sub-panel.css | 62 +++++++ 3 files changed, 302 insertions(+) create mode 100644 js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html create mode 100644 js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js create mode 100644 js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css (limited to 'js/panels/CSSPanel/ComputedStyleSubPanel.reel') diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html new file mode 100644 index 00000000..c30d2fb4 --- /dev/null +++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html @@ -0,0 +1,48 @@ + + + + + + ComputedStyleSubPanel + + + + + +

+ +

+ + \ No newline at end of file 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 diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css new file mode 100644 index 00000000..e9af9b88 --- /dev/null +++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css @@ -0,0 +1,62 @@ +/* + 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. + */ + +#nj-css-filter-panel { + background-color: #474747; + box-shadow: 0 1px 1px #505050; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + text-align: center; + padding: 8px 0; + position: relative; +} +#nj-computed-sub-panel { + display:-webkit-box; + -webkit-box-flex: 1; + -webkit-box-orient: vertical; +} +#nj-computed-sub-panel .nj-sub-panel { + -webkit-box-flex: 1; + background-color: #474747; + color: #FFF; + font-family: 'Droid Sans', sans-serif; + overflow-y: scroll; +} +#nj-css-filter, #nj-css-group-select { + width: 42%; +} +#nj-css-filter { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1%2BjfqAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8%2FL5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N%2BQWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE%2BCDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9%2FNocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A%2FhXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V%2FpHDBYY1hrFGNuayJsym740u2C%2B02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT%2F%2FID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs%2BZmX8xlz7PPryjYVPiuWLskq3RV2ZsK%2FcqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta%2Bx%2F%2B5Em0mzJ%2F%2BdGj%2Ft8AyNmf2zvs9JmHt6vvmCpYtEFrcu%2BbYsc%2Fm9lSGrTq9xWbtvveWGbZtMNm%2FZarJt%2Bw6rnft3u%2B45uy9s%2F4ODOYd%2BHmk%2FJn58xUnrU%2BfOJJ%2F9dX7SRe1LR68kXv13fc5Nm1t379TfU75%2F4mHeY7En%2B59lvhB5efB1%2Flv5dxc%2BNH0y%2Ffzq64Lv4T8Ffp360%2FrP8f9%2FAA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA%2Bf8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAE6SURBVHjahJFNSwJhFIWfd2aYYMTKJEJMpOjLVv2CVrUKitpEBa3atcmglu1Cd%2F2CVlG4DP9Cyz4oiiSoxFwYTIYY1uiob4uZYbCFne09PPece4WkuzQAgT2h7skQmsxoGX8oAQXAmmyn62Hz6rPY2n9eRO1ASCRfx9Xz2DSzzGcPzYu5iGeRSIdQH8xdFqMY2OmbuiZGMRAewFmhyHFUCjxs1VByBsE%2FIQvZ4e3Tt%2FL7clzsmHe6ho7ArSckIIZSG0srelPTGvfNKcs6OTi6pu20cAxBxgaiMZtyPJxK6QHr5XF39QnpG1T6iRJCQVlPJDcDfY3SzALfUroZaFGhgUkP8systJNrpVdiFPjxCG4eBAKDERL0kudWfngE%2Fy5QI0%2BTCFWafovO%2Fyj0YNCiJm3X0E3KP3N%2BBwBmgXFVnpvsaQAAAABJRU5ErkJggg%3D%3D); + background-position: 1px 1px; + background-repeat: no-repeat; + padding-left: 11px; +} +#nj-css-filter { + margin-right: 4%; +} +#nj-css-group-select { + padding-left: 5px; +} +/* ---------------------------------------- + Computed Style List +---------------------------------------- */ +#nj-css-computed-list > div { + margin: 0 15px; + border-bottom: 1px solid #505050; + padding: 1px 0; +} +#nj-css-computed-list > div:last-child { + margin-bottom: 10px; +} +#nj-css-computed-list { + margin-top: 7px; +} +#nj-css-computed-list dt { + color: #FFF; + width: 55%; +} +#nj-computed-sub-panel.nj-css-panel-hide { + display: none; +} \ No newline at end of file -- cgit v1.2.3