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 +++++++++++++
.../rule-list-container.html | 44 ++++++
.../rule-list-container.js | 123 +++++++++++++++
.../style-shorthand.reel/style-shorthand.css | 14 ++
.../style-shorthand.reel/style-shorthand.html | 167 +++++++++++++++++++++
.../style-shorthand.reel/style-shorthand.js | 56 +++++++
js/panels/css-panel/style.reel/style.css | 23 +++
js/panels/css-panel/style.reel/style.html | 57 +++++++
js/panels/css-panel/style.reel/style.js | 40 +++++
11 files changed, 692 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
create mode 100644 js/panels/css-panel/rule-list-container.reel/rule-list-container.html
create mode 100644 js/panels/css-panel/rule-list-container.reel/rule-list-container.js
create mode 100644 js/panels/css-panel/style-shorthand.reel/style-shorthand.css
create mode 100644 js/panels/css-panel/style-shorthand.reel/style-shorthand.html
create mode 100644 js/panels/css-panel/style-shorthand.reel/style-shorthand.js
create mode 100644 js/panels/css-panel/style.reel/style.css
create mode 100644 js/panels/css-panel/style.reel/style.html
create mode 100644 js/panels/css-panel/style.reel/style.js
(limited to 'js/panels/css-panel')
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
diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.html b/js/panels/css-panel/rule-list-container.reel/rule-list-container.html
new file mode 100644
index 00000000..6c6ecfed
--- /dev/null
+++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
new file mode 100644
index 00000000..03c609d7
--- /dev/null
+++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
@@ -0,0 +1,123 @@
+/*
+ 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;
+
+exports.RuleListContainer = Montage.create(Component, {
+ ruleListComponent : {
+ value: null
+ },
+ templateDidLoad: {
+ value: function() {
+ console.log('rule list container - tempalte did load');
+ }
+ },
+ _getRuleList : {
+ value: function(s) {
+ var ruleListsOfType, i, list, matchesAll;
+
+ ruleListsOfType = this.ruleLists.filter(function(list) {
+ return list.selectionType = s.selectionType;
+ });
+
+ for(i = 0; i
+ 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.
+ */
+
+.css-tree-branch {
+ padding-left: 10px;
+}
+.css-tree-branch .css-tree-branch {
+ padding-left: 20px;
+ margin-top: 0;
+ margin-bottom: 0;
+}
\ No newline at end of file
diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.html b/js/panels/css-panel/style-shorthand.reel/style-shorthand.html
new file mode 100644
index 00000000..391aa846
--- /dev/null
+++ b/js/panels/css-panel/style-shorthand.reel/style-shorthand.html
@@ -0,0 +1,167 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.js b/js/panels/css-panel/style-shorthand.reel/style-shorthand.js
new file mode 100644
index 00000000..00749faa
--- /dev/null
+++ b/js/panels/css-panel/style-shorthand.reel/style-shorthand.js
@@ -0,0 +1,56 @@
+/*
+ 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").Montage,
+ TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+var styleShorthand = exports.StyleShorthand= Montage.create(TreeNode, {
+ repetition: { value: null },
+ propertyText : { value: "property" },
+ valueText : { value: "value" },
+
+ handleSourceObjectSet: {
+ value: function() {
+ this.propertyText = this.sourceObject.name;
+ this.valueText = this.sourceObject.value;
+ }
+ },
+ prepareForDraw : {
+ value: function() {
+ this.styleListDisclosure.addEventListener('click', this, false);
+ this.treeView.contentController.addBranchController(this.arrayController);
+ }
+ },
+ templateDidLoad: {
+ value: function() {
+ this.arrayController.delegate = this.treeView.contentController;
+ }
+ },
+ willDraw : {
+ value: function() {
+
+ }
+ },
+ draw:{
+ value: function () {
+
+console.log("style shorthand - draw");
+ shorthand = this;
+ if (this.sourceObject[this.labelKey]) {
+ this._labelText = this.sourceObject[this.labelKey];
+ }
+
+ }
+ },
+
+ handleClick : {
+ value: function(e) {
+ e.preventDefault();
+ this.toggleExpand();
+ }
+ }
+
+});
diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css
new file mode 100644
index 00000000..7aa67e55
--- /dev/null
+++ b/js/panels/css-panel/style.reel/style.css
@@ -0,0 +1,23 @@
+/*
+ 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.
+ */
+
+.css-property, .css-value {
+ border: 1px solid rgba(0,0,0,0);
+ border-radius: 2px;
+ margin: 0;
+ outline: none;
+ padding: 0 2px;
+}
+.css-property {
+ display: inline-block;
+ color: rgb(200,0,0);
+ max-width: 68%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.css-value {
+ display: inline;
+}
\ No newline at end of file
diff --git a/js/panels/css-panel/style.reel/style.html b/js/panels/css-panel/style.reel/style.html
new file mode 100644
index 00000000..bd911f34
--- /dev/null
+++ b/js/panels/css-panel/style.reel/style.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
new file mode 100644
index 00000000..6860a97f
--- /dev/null
+++ b/js/panels/css-panel/style.reel/style.js
@@ -0,0 +1,40 @@
+/*
+ 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,
+ TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+exports.Style = Montage.create(TreeNode, {
+ propertyText : {
+ value: "property"
+ },
+ valueText : {
+ value: "value"
+ },
+ handleSourceObjectSet: {
+ value: function() {
+ //debugger;
+ this.propertyText = this.sourceObject.name;
+ this.valueText = this.sourceObject.value;
+ }
+ },
+ templateDidLoad : {
+ value: function() {
+ console.log("style - template did load");
+ }
+ },
+ draw : {
+ value : function() {
+ //debugger;
+ if(this.sourceObject[this.labelKey]) {
+ this._labelText = this.sourceObject[this.labelKey];
+ } else {
+ console.log("Label key unknown");
+ }
+
+ }
+ }
+});
\ No newline at end of file
--
cgit v1.2.3