From 7a28932ba8a7517bbaaabe1f5edf678416aafc9c Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 12 Mar 2012 15:29:37 -0700
Subject: CSS Panel - Adding declaration, style (tree leaf), and style
shorthand (tree branch) components
---
.../css-panel/declaration.reel/declaration.css | 6 ++
.../css-panel/declaration.reel/declaration.html | 57 +++++++++++
.../css-panel/declaration.reel/declaration.js | 105 +++++++++++++++++++++
3 files changed, 168 insertions(+)
create mode 100644 js/panels/css-panel/declaration.reel/declaration.css
create mode 100644 js/panels/css-panel/declaration.reel/declaration.html
create mode 100644 js/panels/css-panel/declaration.reel/declaration.js
(limited to 'js/panels/css-panel/declaration.reel')
diff --git a/js/panels/css-panel/declaration.reel/declaration.css b/js/panels/css-panel/declaration.reel/declaration.css
new file mode 100644
index 00000000..7f1b0f7f
--- /dev/null
+++ b/js/panels/css-panel/declaration.reel/declaration.css
@@ -0,0 +1,6 @@
+/*
+ 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.
+ */
+
diff --git a/js/panels/css-panel/declaration.reel/declaration.html b/js/panels/css-panel/declaration.reel/declaration.html
new file mode 100644
index 00000000..1f680997
--- /dev/null
+++ b/js/panels/css-panel/declaration.reel/declaration.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/panels/css-panel/declaration.reel/declaration.js b/js/panels/css-panel/declaration.reel/declaration.js
new file mode 100644
index 00000000..34819df5
--- /dev/null
+++ b/js/panels/css-panel/declaration.reel/declaration.js
@@ -0,0 +1,105 @@
+/*
+ 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,
+ ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map");
+
+exports.Declaration = Montage.create(Component, {
+ templateDidLoad : {
+ value: function() {
+ console.log("declaration - template did load");
+ }
+ },
+ _declaration: {
+ value: null
+ },
+ declaration: {
+ get: function() {
+ return this._declaration;
+ },
+ set: function(dec) {
+ this._declaration = dec;
+ console.log('here');
+ ///// creates data structure to use with tree component
+ this.buildStyleTree();
+ console.log('there');
+ this.needsDraw = true;
+ }
+ },
+
+ buildStyleTree : {
+ value: function() {
+ var styles = Array.prototype.slice.call(this._declaration).sort();
+ this.styleTree = {
+ properties : styles.map(this.styleTreeMapper, this)
+ };
+ }
+ },
+ styleTreeMapper : {
+ value: function arrayToTreeMapper(property, i, styleArray) {
+ var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property],
+ subProps, hasAll;
+
+ ///// Is this a sub property of a shorthand property?
+ if(shorthands) {
+ //debugger;
+ ///// Yes.
+ ///// Now, are all sub properties in the declaration?
+ subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]];
+ hasAll = subProps.every(function(subProp) {
+ return styleArray.indexOf(subProp) !== -1;
+ });
+
+ if(hasAll) {
+ ///// It has all sub properties
+ ///// Let's return a tree branch and remove the
+ ///// sub properties from the flat array
+
+ this._removeItemsFromArray(styleArray, subProps);
+
+ return {
+ name: shorthands[0],
+ value: this._declaration.getPropertyValue(shorthands[0]),
+ properties: subProps.map(function(p, i, array) {
+ return {
+ name: p,
+ value: this._declaration.getPropertyValue(p)
+ };
+ }, this)
+ };
+ }
+ }
+
+
+ return {
+ name: property,
+ value: this._declaration.getPropertyValue(property)
+ };
+ }
+ },
+ _removeItemsFromArray : {
+ value: function(array, items) {
+ items.forEach(function(item) {
+ var index = array.indexOf(item);
+ array.splice(index, 1);
+ }, this);
+ }
+ },
+ styleTree : {
+ value: {
+ "properties" : []
+ },
+ distinct: true
+ },
+ draw: {
+ value: function() {
+ if(this._declaration) {
+
+ }
+ }
+ }
+});
\ No newline at end of file
--
cgit v1.2.3