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