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.
---
js/panels/css-panel/css-style.reel/css-style.css | 187 +++++++++
js/panels/css-panel/css-style.reel/css-style.html | 103 +++++
js/panels/css-panel/css-style.reel/css-style.js | 445 +++++++++++++++++++++
.../css-style-rule.reel/css-style-rule.html | 25 +-
.../css-style-rule.reel/css-style-rule.js | 2 +-
js/panels/css-panel/rule-list.reel/rule-list.js | 1 +
.../style-declaration.reel/style-declaration.css | 15 +
.../style-declaration.reel/style-declaration.html | 68 ++++
.../style-declaration.reel/style-declaration.js | 261 ++++++++++++
js/panels/css-panel/styles-view-delegate.js | 5 +-
10 files changed, 1107 insertions(+), 5 deletions(-)
create mode 100644 js/panels/css-panel/css-style.reel/css-style.css
create mode 100644 js/panels/css-panel/css-style.reel/css-style.html
create mode 100644 js/panels/css-panel/css-style.reel/css-style.js
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')
diff --git a/js/panels/css-panel/css-style.reel/css-style.css b/js/panels/css-panel/css-style.reel/css-style.css
new file mode 100644
index 00000000..6864e245
--- /dev/null
+++ b/js/panels/css-panel/css-style.reel/css-style.css
@@ -0,0 +1,187 @@
+/*
+ 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.
+ */
+
+/* ------------------------
+ Style item container styles
+------------------------ */
+.style-item {
+ border-bottom: 1px solid rgba(0,0,0,0);
+ cursor: url(/js/../images/tools/hand_down.png), default;
+ display: block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.style-item:hover {
+ border-right: 3px double #999;
+ margin-right: 3px;
+}
+
+/* ------------------------
+ Invalid Style
+------------------------ */
+.style-item-invalid {
+ background-repeat: no-repeat;
+ background-position: 6px 2px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMzYyMERFNTQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMzYyMERFNjQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAzNjIwREUzNDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAzNjIwREU0NDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bc4fwegAAAWpJREFUeNo8kLtLA0EQxr%2B9l3lcDAaCBsEqEOysBFEQsRAsRVCEpBREsbIUSxtBrAxEewsrK8VHQIhK%2FoIUUVJIQFFjYi65XDZ36%2Bz5GFgWZr75fjPDhBD4C%2BucjWgaphjQdTgK%2FfPi5a%2FGpPDtjEVjERyqKlag%2FlY8gHPsfzSwPbQgbDyfIs6vURa3EKK8Jf6jmhUy51yiWDlBUDED2NF0JKGQS3IPVn4ATXqIL0EYJgwD42YQG4quE45EggOtCwbWrUM1Ej%2F0jkXDAYaOtOa6iIH2YSQOBugPj4KN3aFdnIThkprynoeUYjtwIRO0hCLxiU3wp12odgl0AXhUa3VQ0xoWCqEApiNhEpFzt7Tm%2F4Tzo9kGvtq4UjNzqJB1mswURvNoqayP57V7KcB7HfZnE8v%2BHYtZtmiGcBzqQ1TSZUPP85HVlo1MfCaX94WPpSO83qwO6wbWCTtBQocoD70eDgZncw3Z%2BC3AAFMzlxlnnpevAAAAAElFTkSuQmCC);
+ opacity: 0.5;
+}
+.style-item.style-item-invalid:hover input {
+ visibility: hidden;
+}
+.style-item-invalid.edit-style-item {
+ opacity: 1;
+}
+/* ------------------------
+ Checkbox
+------------------------ */
+
+.style-item input {
+ height: 10px;
+ width: 10px;
+ margin: 0 6px;
+ visibility: hidden;
+}
+.style-item:hover input, .style-item-disabled input {
+ visibility: visible;
+}
+.style-item-disabled {
+ opacity: .5;
+}
+
+/* ------------------------
+ Property/value styles
+------------------------ */
+
+.css-property, .css-value {
+ border: 1px solid rgba(0,0,0,0);
+ border-radius: 2px;
+ cursor: pointer;
+ margin: 0;
+ outline: none;
+ padding: 0 2px;
+}
+.css-property:hover, .css-value:hover {
+ background-color: #FFDECC;
+}
+.css-property:focus, .css-value:focus {
+ border: 1px solid rgba(0,0,0,0);
+ box-shadow: none;
+}
+.css-property:after {
+ color: #333;
+ content: ":";
+}
+.css-value:after {
+ content: ";";
+}
+.css-property {
+ display: inline-block;
+ color: rgb(200,0,0);
+ max-width: 68%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.css-value {
+ display: inline;
+}
+
+/* ------------------------
+ Editable Styles
+------------------------ */
+
+.style-item .editable {
+ background-color: transparent;
+ border: 1px solid #999;
+ box-shadow: 1px 1px 1px #CCC;
+ color: #333;
+ cursor: text;
+ display: inline-block;
+ margin-right: 7px;
+ max-width: none;
+ overflow: visible;
+ -webkit-user-select: text;
+}
+.style-item .editable:after {
+ position: relative;
+ margin-right: -7px;
+ right: -1px;
+}
+.style-item .hintable-hint {
+ color: #bdbdbd;
+}
+
+/* ------------------------
+ Empty Style (Add Style)
+------------------------ */
+.add-style-button {
+ display: none;
+}
+.empty-css-style {
+ cursor: default;
+ -webkit-transition: -webkit-transform .2s cubic-bezier(0.44, 0.19, 0, 0.99);
+ -webkit-transform: translate3d(-120px, 0, 0);
+ overflow: visible;
+}
+.empty-css-style:hover {
+ border-right-style: none;
+}
+.empty-css-style .add-style-button {
+ cursor: pointer;
+ color: #333;
+ display: inline-block;
+ font-family: "Droid Sans", sans-serif;
+ background: -webkit-linear-gradient(top, rgba(242,242,242,1) 1%,rgba(221,221,221,1) 100%);
+ border-radius: 5px;
+ border: 1px solid #CCC;
+ padding: 1px 10px 0;
+ position: absolute;
+ left: 140px;
+ text-shadow: 1px 1px 0 #FFF;
+ -webkit-transition: opacity .2s cubic-bezier(0.44, 0.19, 0, 0.99);
+}
+.empty-css-style .add-style-button:hover {
+ background: -webkit-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
+}
+.empty-css-style .add-style-button:active {
+ background: -webkit-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(252,252,252,1) 99%);
+}
+.empty-css-style .css-property, .empty-css-style .css-value {
+ -webkit-transition: opacity .2s cubic-bezier(0.44, 0.19, 0, 0.99);
+ opacity: 0;
+}
+.empty-css-style.edit-empty-style .css-property, .empty-css-style.edit-empty-style .css-value {
+ opacity: 1;
+}
+.empty-css-style.edit-empty-style {
+ border-right-style: none;
+ -webkit-transform: translate3d(0, 0, 0);
+}
+.empty-css-style.edit-empty-style .css-property, .empty-css-style.edit-empty-style .css-value {
+ color: #adadad;
+}
+.empty-css-style.edit-empty-style .add-style-button {
+ opacity: 0;
+}
+.empty-css-style input[type="checkbox"] {
+ visibility: hidden;
+}
+/* ------------------------
+ Drag/Drop Styles
+------------------------ */
+
+.style-item.dragged {
+ background: none;
+ border-right-style: none;
+ opacity: .85;
+}
+.style-item.dragging {
+ background-color: #f2f2f2;
+ opacity: .55;
+}
+.style-item.drag-enter {
+ border-bottom: 1px solid #CCC;
+}
\ No newline at end of file
diff --git a/js/panels/css-panel/css-style.reel/css-style.html b/js/panels/css-panel/css-style.reel/css-style.html
new file mode 100644
index 00000000..66ff4d5b
--- /dev/null
+++ b/js/panels/css-panel/css-style.reel/css-style.html
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
new file mode 100644
index 00000000..b021dc0f
--- /dev/null
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -0,0 +1,445 @@
+/*
+ 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.CssStyle = Montage.create(Component, {
+ delegate : { value: null },
+ disabledClass : { value: 'style-item-disabled' },
+ editingStyleClass : { value: 'edit-style-item' },
+ editNewEmptyClass : { value: 'edit-empty-style' },
+ invalidStyleClass : { value: "style-item-invalid" },
+
+ propertyText : { value: "property" },
+ _valueText : { value: "value" },
+ valueText : {
+ get: function() {
+ return this._valueText;
+ },
+ set: function(text) {
+ this._valueText = text;
+ this.units = this.getUnits(text);
+ }
+ },
+ browserValue: {
+ value: null
+ },
+ _priority: { value: "", distinct: true },
+ priority: {
+ get: function() {
+ return this._priority;
+ },
+ set: function(value) {
+ this._priority = value;
+ }
+ },
+
+ getUnits : {
+ value: function(val) {
+ if(val.split(/\s/).length > 1) {
+ return false;
+ } else if(/(px|em|pt|in|cm|mm|ex|pc|%)$/.test(val)) {
+ return val.replace(/^.*(px|em|pt|in|cm|mm|ex|pc|%).*/, '$1');
+ }
+ return null;
+ }
+ },
+
+ _enabled : { value: true, distinct: true },
+ enabled : {
+ get: function() {
+ return this._enabled;
+ },
+ set: function(value) {
+ this._enabled = value;
+ this.delegate.handleStyleToggle(this.getRule(), this._enabled, this);
+ this.needsDraw = true;
+ }
+ },
+
+ _empty : { value: null },
+ empty : {
+ get: function() {
+ return this._empty;
+ },
+ set: function(isEmpty) {
+ if(this._empty === isEmpty) { return false; }
+ this._empty = isEmpty;
+ this.needsDraw = true;
+ }
+ },
+
+ dirty : {
+ get: function() {
+ return this.propertyField.isDirty || this.valueField.isDirty;
+ },
+ set: function(value) {
+ return false;
+ }
+ },
+
+ _invalid: { value: null },
+ invalid : {
+ get: function() { return this._invalid; },
+ set: function(value) {
+ this._invalid = value;
+ this.needsDraw = true;
+ }
+ },
+
+ _editing : { value : null },
+ editing : {
+ get: function() {
+ return this._editing;
+ },
+ set: function(value) {
+ if(this._editing === value) { return false; }
+
+ this._editing = value;
+ this.needsDraw = true;
+ }
+ },
+
+ _editingNewStyle : {
+ value: null
+ },
+ editingNewStyle : {
+ get: function() {
+ return this._editingNewStyle;
+ },
+ set: function(value) {
+ if(this._editingNewStyle === value) {
+ return false;
+ }
+
+ this._editingNewStyle = value;
+ this.needsDraw = true;
+ }
+ },
+
+ remove : {
+ value: function() {
+ var branchController = this.parentComponent.parentComponent.contentController;
+
+ ///// Remove style property from declaration
+ this.treeView.parentComponent.declaration.removeProperty(this.propertyField._preEditValue);
+
+ ///// Remove data from branch controller and update UI
+ branchController.removeObjects(this.sourceObject);
+ }
+ },
+
+ getRule : {
+ value: function() {
+ //var declarationComponent = this.treeView.parentComponent,
+ var declarationComponent = this.parentComponent.parentComponent.parentComponent,
+ rule;
+
+ if(declarationComponent.type === 'inline') {
+ rule = { style : declarationComponent.declaration }
+ } else {
+ rule = this.parentComponent.parentComponent.parentComponent.declaration.parentRule;
+ }
+
+ return rule;
+ }
+ },
+
+ getSiblingStyle : {
+ value: function(which) {
+ var styles = this.parentComponent.childComponents,
+ index = styles.indexOf(this);
+
+ switch (which) {
+ case "first":
+ return styles[0];
+ case "last":
+ return styles[styles.length-1];
+ case "next":
+ return (index+1 < styles.length) ? styles[index+1] : null;
+ case "prev":
+ return (index-1 >= 0) ? styles[index-1] : null;
+ }
+ }
+ },
+
+
+ handleEvent : {
+ value: function(e) {
+ console.log(e);
+ }
+ },
+
+ handleDragstart : {
+ value: function(e) {
+ e.dataTransfer.effectAllowed = 'move';
+ e.dataTransfer.setData('Text', 'my styles, baby!');
+ this.element.classList.add("dragged");
+ }
+ },
+
+ handleDragend : {
+ value: function(e) {
+ this.element.classList.remove("dragging");
+ this.element.classList.remove("dragged");
+ }
+ },
+ handleDrag : {
+ value: function(e) {
+ this.element.classList.add("dragging");
+ }
+ },
+ handleDrop : {
+ value: function(e) {
+ this.element.classList.remove("drag-enter");
+ }
+ },
+
+ handleWebkitTransitionEnd : {
+ value: function(e) {
+ console.log("trans end");
+ }
+ },
+ handleClick : {
+ value: function(e) {
+ console.log("handle Add button click");
+ this.propertyField.start();
+ //this.editingNewStyle = true;
+ this.editingNewStyle = this.editing = true;
+ }
+ },
+
+ handleStart : {
+ value: function(e) {
+ this.editing = true;
+
+ if(this.empty) {
+ this.editingNewStyle = true;
+ }
+ }
+ },
+
+ //// Handler for both hintable components
+ handlePropertyStop : {
+ value: function(e) {
+ var event = e;
+ ///// Function to determine if an empty (new) style should return
+ ///// to showing the add button, i.e. the fields were not clicked
+ function fieldsClicked() {
+ var clicked;
+ if(e._event.detail.originalEventType === 'mousedown') {
+ clicked = e._event.detail.originalEvent.target;
+ return clicked === this.propertyField.element || clicked === this.valueField.element;
+ }
+ return false;
+ }
+
+ this.editing = false;
+
+ if(this.sourceObject.isEmpty && !this.dirty && !fieldsClicked.bind(this)()) {
+ ///// Show add button
+ this.editingNewStyle = false;
+ }
+
+ this.delegate.handlePropertyStop(e, this);
+ }
+ },
+ //// Handler for both hintable components
+ handleValueStop : {
+ value: function(e) {
+ var event = e;
+ ///// Function to determine if an empty (new) style should return
+ ///// to showing the add button, i.e. the fields were not clicked
+ function fieldsClicked() {
+ var clicked;
+ if(e._event.detail.originalEventType === 'mousedown') {
+ clicked = e._event.detail.originalEvent.target;
+ return clicked === this.propertyField.element || clicked === this.valueField.element;
+ }
+ return false;
+ }
+
+ this.editing = false;
+
+ if(this.sourceObject.isEmpty && !this.dirty && !fieldsClicked.bind(this)()) {
+ ///// Show add button
+ this.editingNewStyle = false;
+ }
+
+ this.delegate.handleValueStop(e, this);
+ }
+ },
+
+ handlePropertyChange : {
+ value: function(e) {
+ var property = this.propertyField.value,
+ oldProperty = this.propertyField._preEditValue,
+ value = this.valueField.value,
+ rule = this.getRule();
+
+ this.delegate.handlePropertyChange(rule, property, value, oldProperty, this);
+ }
+ },
+ handleValueChange : {
+ value: function(e) {
+ var property = this.propertyField.value,
+ value = this.valueField.value,
+ rule = this.getRule();
+
+ this.delegate.handleValueChange(rule, property, value, this);
+ }
+ },
+
+ handlePropertyDirty : {
+ value: function(e) {
+ this.empty = false;
+ }
+ },
+
+ handleValueDirty : {
+ value: function(e) {
+ this.empty = false;
+ }
+ },
+
+// handleSourceObjectSet: {
+// value: function() {
+// this.propertyText = this.sourceObject.name;
+// this.valueText = this.sourceObject.value;
+//
+// if(this.sourceObject.isEmpty) {
+// this.empty = true;
+// }
+// }
+// },
+
+ _sourceObject : { value: null },
+ sourceObject: {
+ get: function() {
+ return this._sourceObject;
+ },
+ set: function(sourceObject) {
+ this._sourceObject = sourceObject;
+
+ this.propertyText = sourceObject.name;
+ this.valueText = sourceObject.value;
+
+ if(sourceObject.isEmpty) {
+ this.empty = true;
+ }
+ }
+ },
+
+ templateDidLoad : {
+ value: function() {
+ //this.delegate = this.treeView.contentController.delegate;
+//debugger;
+ //this.propertyField.hints = this.propertyNames;
+ }
+ },
+
+ prepareForDraw : {
+ value: function() {
+ console.log("style's prepare for draw");
+ this.element.addEventListener('dragstart', this, false);
+ this.element.addEventListener('drag', this, false);
+ this.element.addEventListener('dragend', this, false);
+ this.element.addEventListener('drop', this, false);
+ this.element.addEventListener('webkitTransitionEnd', this, false);
+
+ ///// Add listeners to the value/property fields
+ this.propertyField.addEventListener('start', this, false);
+ this.valueField.addEventListener('start', this, false);
+ this.propertyField.addEventListener('stop', this, false);
+ this.valueField.addEventListener('stop', this, false);
+ this.propertyField.addEventListener('dirty', this, false);
+ this.valueField.addEventListener('dirty', this, false);
+// this.propertyField.addEventListener('change', this, false);
+// this.valueField.addEventListener('change', this, false);
+ this.propertyField.addEventListener('paste', this, false);
+ this.valueField.addEventListener('paste', this, false);
+
+
+ if(this.empty) {
+ this.addStyleButton.addEventListener('click', this, false);
+ } else {
+ this.addStyleButton.removeEventListener('click', this, false);
+ }
+
+ }
+ },
+
+ handlePaste: {
+ value: function(e) {
+ this.delegate.handlePaste(e);
+ }
+ },
+
+ setToolTips : {
+ value: function() {
+ this.propertyField.element.title = this.propertyField.value;
+ this.valueField.element.title = this.valueField.value;
+ }
+ },
+
+ willDraw : {
+ value: function() {
+ if(this.invalid) {
+ this._element.title = "Unrecognized Style";
+ } else {
+ this._element.removeAttribute('title');
+ }
+
+ this.setToolTips();
+ }
+ },
+
+ draw : {
+ value : function() {
+ if(this.empty) {
+ this.element.draggable = false;
+ this.element.classList.add('empty-css-style');
+ if(!this.addStyleButton.parentNode) {
+ console.log("Adding style for ", this.propertyText);
+ this.element.appendChild(this.addStyleButton);
+ this.addStyleButton.addEventListener('click', this, false);
+ }
+ } else {
+ this.element.draggable = true;
+ this.element.classList.remove('empty-css-style');
+ if(this.addStyleButton.parentNode) {
+ console.log("Removing style for ", this.propertyText);
+ this.element.removeChild(this.addStyleButton);
+ }
+ }
+
+ if(this._enabled) {
+ this.element.classList.remove(this.disabledClass);
+ } else {
+ this.element.classList.add(this.disabledClass);
+ }
+
+ if(this._editingNewStyle) {
+ this.element.classList.add(this.editNewEmptyClass);
+ } else {
+ this.element.classList.remove(this.editNewEmptyClass);
+ }
+
+ if(this._invalid) {
+ this._element.classList.add(this.invalidStyleClass);
+ } else {
+ this._element.classList.remove(this.invalidStyleClass);
+ }
+
+ if(this.editing) {
+ this._element.classList.add(this.editingStyleClass);
+ } else {
+ this._element.classList.remove(this.editingStyleClass);
+ }
+ }
+ }
+});
\ No newline at end of file
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
index bf101719..05ea669f 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
@@ -49,8 +49,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
}
},
"declaration": {
- "module": "js/panels/css-panel/declaration.reel",
- "name": "Declaration",
+ "module": "js/panels/css-panel/style-declaration.reel",
+ "name": "StyleDeclaration",
"properties": {
"element": {"#": "declaration-list"}
},
@@ -76,6 +76,27 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
}
}
+
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
index 7a6a3957..c74502c0 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -103,7 +103,7 @@ exports.CssStyleRule = Montage.create(Component, {
value: function() {
if(this.cssText !== this.rule.cssText) {
// TODO: add update for selector and stylesheet name
- //this.declarationComponent.update();
+ this.declarationComponent.update();
}
}
},
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js
index 8d179248..be9f61d7 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -91,6 +91,7 @@ exports.RuleList = Montage.create(Component, {
}, this);
//// TODO: find new styles based on selection
+ if()
}
},
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
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index c3bfdc75..71b4a8dd 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -184,7 +184,8 @@ exports.StylesViewMediator = Montage.create(Component, {
if(nextFocus) {
nextFocus.propertyField.start();
} else {
- style.treeView.parentComponent.addNewStyleAfter(style);
+ //style.parentComponent.parentComponent.addNewStyleAfter(style);
+ style.parentComponent.parentComponent.addNewStyle();
style.editingNewStyle = false;
setTimeout(function() {
style.getSiblingStyle('next').propertyField.start();
@@ -253,7 +254,7 @@ exports.StylesViewMediator = Montage.create(Component, {
this._dispatchChange(property, browserValue);
if(style.editingNewStyle) {
- style.treeView.parentComponent.addNewStyleAfter(style);
+ style.parentComponent.parentComponent.addNewStyle();
style.editingNewStyle = false;
}
}
--
cgit v1.2.3