From eb80f8a610100f908b5cb9ffc65bfa94f8a23c21 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 8 May 2012 13:26:36 -0700
Subject: CSS Panel - Create non-tree declaration (optimized). And add updating
functionality.
---
.../style-declaration.reel/style-declaration.css | 15 ++
.../style-declaration.reel/style-declaration.html | 68 ++++++
.../style-declaration.reel/style-declaration.js | 261 +++++++++++++++++++++
3 files changed, 344 insertions(+)
create mode 100644 js/panels/css-panel/style-declaration.reel/style-declaration.css
create mode 100644 js/panels/css-panel/style-declaration.reel/style-declaration.html
create mode 100644 js/panels/css-panel/style-declaration.reel/style-declaration.js
(limited to 'js/panels/css-panel/style-declaration.reel')
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.css b/js/panels/css-panel/style-declaration.reel/style-declaration.css
new file mode 100644
index 00000000..e37d89d2
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.css
@@ -0,0 +1,15 @@
+/*
+ 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.
+ */
+
+.treeRoot > .style-shorthand-branch > div {
+ display: none;
+}
+.treeRoot > .style-shorthand-branch > dl {
+ margin-top: 4px;
+}
+.drag-over {
+ /*background-color: red;*/
+}
\ No newline at end of file
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.html b/js/panels/css-panel/style-declaration.reel/style-declaration.html
new file mode 100644
index 00000000..9123e2a0
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.js b/js/panels/css-panel/style-declaration.reel/style-declaration.js
new file mode 100644
index 00000000..80d8ff7b
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -0,0 +1,261 @@
+/*
+ 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.StyleDeclaration = Montage.create(Component, {
+ cssText : {
+ value: null
+ },
+ focusDelegate : {
+ value: null
+ },
+ includeEmptyStyle : {
+ value: true
+ },
+ styles : {
+ value: [],
+ distinct: true
+ },
+
+ templateDidLoad : {
+ value: function() {
+ console.log("Style declaration - template did load");
+
+ if(this.focusDelegate) {
+ //this.treeController.delegate = this.focusDelegate;
+ this.styleComponent.delegate = this.focusDelegate;
+ }
+ }
+ },
+ prepareForDraw : {
+ value: function(e) {
+ console.log("Style Declaration :: prepare for draw");
+ this._element.addEventListener('drop', this, false);
+ this.element.addEventListener('dragenter', this, false);
+ this.element.addEventListener('dragleave', this, false);
+ }
+ },
+ _declaration: {
+ value: null
+ },
+ declaration: {
+ get: function() {
+ return this._declaration;
+ },
+ set: function(dec) {
+ if(this._declaration) {
+ this.arrayController.removeObjects(this.styles);
+ }
+console.log("dec being set", this);
+ this._declaration = dec;
+
+ this.cssText = dec.cssText;
+
+ Array.prototype.slice.call(dec).forEach(function(prop, index) {
+ this.styles.push({
+ name: prop,
+ value: dec.getPropertyValue(prop)
+ });
+
+ }, this);
+
+ if(this.includeEmptyStyle) {
+ this.styles.push({
+ "name": "property",
+ "value" : "value",
+ "isEmpty": true
+ });
+ }
+ ///// creates data structure to use with tree component
+ //this.buildStyleTree();
+
+// if(this.includeEmptyStyle) {
+// this.styleTree.properties.push({
+// "name": "property",
+// "value" : "value",
+// "isEmpty": true
+// });
+// }
+
+ this.needsDraw = true;
+ }
+ },
+
+ update : {
+ value: function() {
+ if(this.declaration.cssText !== this.cssText) {
+ ///// Needs update
+//debugger;
+
+ this.styles = null;
+ this.styles = [];
+
+ Array.prototype.slice.call(this.declaration).forEach(function(prop, index) {
+ this.styles.push({
+ name: prop,
+ value: this.declaration.getPropertyValue(prop)
+ });
+
+ }, this);
+
+ if(this.includeEmptyStyle) {
+ this.styles.push({
+ "name": "property",
+ "value" : "value",
+ "isEmpty": true
+ });
+ }
+//debugger;
+ 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
+ },
+
+// addNewStyleAfter : {
+// value: function(style) {
+// style.parentComponent.parentComponent.contentController.addObjects({
+// name: 'property',
+// value: 'value',
+// isEmpty: true,
+// treeNodeType: 'leaf'
+// });
+// style.parentComponent.parentComponent.needsDraw = true;
+// }
+// },
+
+ addNewStyle : {
+ value: function() {
+ this.styles.push({
+ "name": "property",
+ "value" : "value",
+ "isEmpty": true
+ });
+ }
+ },
+
+
+ /* drag/drop events */
+ handleDrop : {
+ value: function(e) {
+ console.log('dropped');
+ }
+ },
+ handleDragenter : {
+ value: function(e) {
+ console.log("dec - drag enter");
+ this.element.classList.add("drag-over");
+ }
+ },
+ handleDragleave : {
+ value: function(e) {
+ if(this.element === e._event.toElement || this._containsElement(e._event.toElement)) {
+ //// Dragged-over element is inside of component element
+ //// I.e. it's not really a "drag leave"
+ e.stopPropagation();
+ e.preventDefault();
+ return false;
+ }
+
+ console.log("DECLARATION - ELEMENT NOT IN DEC", e._event.toElement);
+
+ //console.log("dec - drag leave");
+ this.element.classList.remove("drag-over");
+ }
+ },
+
+ draw: {
+ value: function() {
+ if(this._declaration) {
+
+ }
+ }
+ },
+
+ _containsElement : {
+ value: function(innerElement) {
+ var isInComponent = false,
+ parent = innerElement.parentNode;
+
+ while (parent !== document) {
+ if(parent === this.element) {
+ isInComponent = true;
+ break;
+ }
+ parent = parent.parentNode;
+ }
+
+ return isInComponent;
+ }
+ }
+});
\ No newline at end of file
--
cgit v1.2.3