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 ++++++++++++++++++++++
3 files changed, 735 insertions(+)
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
(limited to 'js/panels/css-panel/css-style.reel')
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
--
cgit v1.2.3
From 6056a569caab94bdbdc2c60b58907109ff468dd3 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Thu, 10 May 2012 13:21:38 -0700
Subject: Style Declaration - Improved updating of styles using binding.
---
js/panels/css-panel/css-style.reel/css-style.js | 43 ++++---------------------
1 file changed, 6 insertions(+), 37 deletions(-)
(limited to 'js/panels/css-panel/css-style.reel')
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index b021dc0f..face668e 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -13,6 +13,7 @@ exports.CssStyle = Montage.create(Component, {
editingStyleClass : { value: 'edit-style-item' },
editNewEmptyClass : { value: 'edit-empty-style' },
invalidStyleClass : { value: "style-item-invalid" },
+ emptyStyleClass : { value: "empty-css-style" },
propertyText : { value: "property" },
_valueText : { value: "value" },
@@ -240,7 +241,7 @@ exports.CssStyle = Montage.create(Component, {
this.editing = false;
- if(this.sourceObject.isEmpty && !this.dirty && !fieldsClicked.bind(this)()) {
+ if(this.empty && !this.dirty && !fieldsClicked.bind(this)()) {
///// Show add button
this.editingNewStyle = false;
}
@@ -265,7 +266,7 @@ exports.CssStyle = Montage.create(Component, {
this.editing = false;
- if(this.sourceObject.isEmpty && !this.dirty && !fieldsClicked.bind(this)()) {
+ if(this.empty && !this.dirty && !fieldsClicked.bind(this)()) {
///// Show add button
this.editingNewStyle = false;
}
@@ -306,39 +307,9 @@ exports.CssStyle = Montage.create(Component, {
}
},
-// 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;
+ this.propertyField.hints = this.propertyNames;
}
},
@@ -402,17 +373,15 @@ exports.CssStyle = Montage.create(Component, {
value : function() {
if(this.empty) {
this.element.draggable = false;
- this.element.classList.add('empty-css-style');
+ this.element.classList.add(this.emptyStyleClass);
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');
+ this.element.classList.remove(this.emptyStyleClass);
if(this.addStyleButton.parentNode) {
- console.log("Removing style for ", this.propertyText);
this.element.removeChild(this.addStyleButton);
}
}
--
cgit v1.2.3
From 62a47c22cf5fb76289a50be8e73de1ae8c55c78f Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Wed, 16 May 2012 14:59:43 -0700
Subject: CSS Panel - Fix toggling style on/off.
---
js/panels/css-panel/css-style.reel/css-style.js | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
(limited to 'js/panels/css-panel/css-style.reel')
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index face668e..61723284 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -22,7 +22,7 @@ exports.CssStyle = Montage.create(Component, {
return this._valueText;
},
set: function(text) {
- this._valueText = text;
+ this._valueText = this.browserValue = text;
this.units = this.getUnits(text);
}
},
@@ -315,7 +315,6 @@ exports.CssStyle = Montage.create(Component, {
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);
--
cgit v1.2.3
From 5c4cfc1a52b1cb079b1fa6f02aedcaef1ad2bc38 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Thu, 17 May 2012 19:53:13 -0700
Subject: CSS Style - minor css fix
---
js/panels/css-panel/css-style.reel/css-style.css | 1 +
1 file changed, 1 insertion(+)
(limited to 'js/panels/css-panel/css-style.reel')
diff --git a/js/panels/css-panel/css-style.reel/css-style.css b/js/panels/css-panel/css-style.reel/css-style.css
index 6864e245..4f7f6b9c 100644
--- a/js/panels/css-panel/css-style.reel/css-style.css
+++ b/js/panels/css-panel/css-style.reel/css-style.css
@@ -165,6 +165,7 @@
}
.empty-css-style.edit-empty-style .add-style-button {
opacity: 0;
+ cursor: default;
}
.empty-css-style input[type="checkbox"] {
visibility: hidden;
--
cgit v1.2.3
From 7f0dad901bef6512357a7a768fda1cb3106ac864 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Thu, 17 May 2012 19:55:18 -0700
Subject: CSS Panel - Fix style declaration interaction
---
js/panels/css-panel/css-style.reel/css-style.js | 32 +++++++++++++++----------
1 file changed, 20 insertions(+), 12 deletions(-)
(limited to 'js/panels/css-panel/css-style.reel')
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index 61723284..3a07f8f1 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -15,8 +15,15 @@ exports.CssStyle = Montage.create(Component, {
invalidStyleClass : { value: "style-item-invalid" },
emptyStyleClass : { value: "empty-css-style" },
- propertyText : { value: "property" },
- _valueText : { value: "value" },
+ propertyText : {
+ value: "property",
+ distinct: true
+ },
+
+ _valueText : {
+ value: "value",
+ distinct: true
+ },
valueText : {
get: function() {
return this._valueText;
@@ -207,10 +214,8 @@ exports.CssStyle = Montage.create(Component, {
},
handleClick : {
value: function(e) {
- console.log("handle Add button click");
+ this.buttonClicked = true;
this.propertyField.start();
- //this.editingNewStyle = true;
- this.editingNewStyle = this.editing = true;
}
},
@@ -282,6 +287,8 @@ exports.CssStyle = Montage.create(Component, {
value = this.valueField.value,
rule = this.getRule();
+ this.propertyText = property;
+
this.delegate.handlePropertyChange(rule, property, value, oldProperty, this);
}
},
@@ -291,6 +298,8 @@ exports.CssStyle = Montage.create(Component, {
value = this.valueField.value,
rule = this.getRule();
+ this.valueText = value;
+
this.delegate.handleValueChange(rule, property, value, this);
}
},
@@ -333,13 +342,6 @@ exports.CssStyle = Montage.create(Component, {
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);
- }
-
}
},
@@ -364,6 +366,12 @@ exports.CssStyle = Montage.create(Component, {
this._element.removeAttribute('title');
}
+ if(this.empty) {
+ this.addStyleButton.addEventListener('click', this, false);
+ } else {
+ this.addStyleButton.removeEventListener('click', this, false);
+ }
+
this.setToolTips();
}
},
--
cgit v1.2.3
From 197a7646e472fcea616764685c8d03c6063e66f5 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 18 May 2012 14:05:06 -0700
Subject: CSS Panel - Add support for deleting style sheets
---
js/panels/css-panel/css-style.reel/css-style.js | 13 ++-----------
1 file changed, 2 insertions(+), 11 deletions(-)
(limited to 'js/panels/css-panel/css-style.reel')
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index 3a07f8f1..1787665f 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -143,17 +143,8 @@ exports.CssStyle = Montage.create(Component, {
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;
+ var declarationComponent = this.parentComponent.parentComponent.parentComponent
+ return declarationComponent.rule;
}
},
--
cgit v1.2.3
From 13da56e791b7478ad3dbb8162a583a6b2c8c4b6b Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 18 May 2012 17:27:31 -0700
Subject: Style Declaration - Handle removing styles
Removed sorting and had to put a null check in the style component because the valueText was being set to undefined and causing an error. Check with montage on why that is happening.
---
js/panels/css-panel/css-style.reel/css-style.js | 5 +++++
1 file changed, 5 insertions(+)
(limited to 'js/panels/css-panel/css-style.reel')
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index 1787665f..dd84c7e9 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -14,6 +14,7 @@ exports.CssStyle = Montage.create(Component, {
editNewEmptyClass : { value: 'edit-empty-style' },
invalidStyleClass : { value: "style-item-invalid" },
emptyStyleClass : { value: "empty-css-style" },
+ source : { value: null },
propertyText : {
value: "property",
@@ -29,6 +30,10 @@ exports.CssStyle = Montage.create(Component, {
return this._valueText;
},
set: function(text) {
+ /// TODO: Figure out why montage is trying to set this to undefined
+ /// TODO: when the style object is removed from the repetition
+ if(text === null || text === undefined) { return; }
+
this._valueText = this.browserValue = text;
this.units = this.getUnits(text);
}
--
cgit v1.2.3
From 1e6f46ba556ca3270c89fb848d93856804dd1cc8 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 21 May 2012 12:40:05 -0700
Subject: CSS Style Component - Moved unit identification to local change
handler instead of delegate
---
js/panels/css-panel/css-style.reel/css-style.js | 13 ++++++++++++-
1 file changed, 12 insertions(+), 1 deletion(-)
(limited to 'js/panels/css-panel/css-style.reel')
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index dd84c7e9..331faa2f 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -15,6 +15,7 @@ exports.CssStyle = Montage.create(Component, {
invalidStyleClass : { value: "style-item-invalid" },
emptyStyleClass : { value: "empty-css-style" },
source : { value: null },
+ units : { value: null },
propertyText : {
value: "property",
@@ -292,7 +293,17 @@ exports.CssStyle = Montage.create(Component, {
value: function(e) {
var property = this.propertyField.value,
value = this.valueField.value,
- rule = this.getRule();
+ rule = this.getRule(),
+ units;
+
+ ///// Auto-fill units if not provided and units
+ ///// not previously stored
+ units = this.getUnits(value);
+ if(this.units && units === null && parseInt(value)) {
+ value += this.units;
+ } else if (value !== '0') {
+ this.units = units;
+ }
this.valueText = value;
--
cgit v1.2.3
From 5d107812df641e64ef5987b4a746a87ee7239d85 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 22 May 2012 11:17:11 -0700
Subject: CSS Style - Remove console logs
---
js/panels/css-panel/css-style.reel/css-style.js | 12 ------------
1 file changed, 12 deletions(-)
(limited to 'js/panels/css-panel/css-style.reel')
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index 331faa2f..327448b0 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -172,13 +172,6 @@ exports.CssStyle = Montage.create(Component, {
}
},
-
- handleEvent : {
- value: function(e) {
- console.log(e);
- }
- },
-
handleDragstart : {
value: function(e) {
e.dataTransfer.effectAllowed = 'move';
@@ -204,11 +197,6 @@ exports.CssStyle = Montage.create(Component, {
}
},
- handleWebkitTransitionEnd : {
- value: function(e) {
- console.log("trans end");
- }
- },
handleClick : {
value: function(e) {
this.buttonClicked = true;
--
cgit v1.2.3
From e7a3193bdc33856795f8b96c255fd0c7e2f189a3 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 22 May 2012 11:17:48 -0700
Subject: CSS Style - turning drag/drop off
---
js/panels/css-panel/css-style.reel/css-style.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'js/panels/css-panel/css-style.reel')
diff --git a/js/panels/css-panel/css-style.reel/css-style.html b/js/panels/css-panel/css-style.reel/css-style.html
index 66ff4d5b..c4b6dd59 100644
--- a/js/panels/css-panel/css-style.reel/css-style.html
+++ b/js/panels/css-panel/css-style.reel/css-style.html
@@ -95,7 +95,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
-
+
--
cgit v1.2.3
From baeff46187e106a238b23631fe35b9760b70dcc7 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 22 May 2012 13:18:12 -0700
Subject: CSS Style - Remove drag/drop UI stuff
---
js/panels/css-panel/css-style.reel/css-style.css | 6 +++---
js/panels/css-panel/css-style.reel/css-style.js | 4 ++--
2 files changed, 5 insertions(+), 5 deletions(-)
(limited to 'js/panels/css-panel/css-style.reel')
diff --git a/js/panels/css-panel/css-style.reel/css-style.css b/js/panels/css-panel/css-style.reel/css-style.css
index 4f7f6b9c..524884bd 100644
--- a/js/panels/css-panel/css-style.reel/css-style.css
+++ b/js/panels/css-panel/css-style.reel/css-style.css
@@ -9,15 +9,15 @@
------------------------ */
.style-item {
border-bottom: 1px solid rgba(0,0,0,0);
- cursor: url(/js/../images/tools/hand_down.png), default;
+ /*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;
+ /*border-right: 3px double #999;*/
+ /*margin-right: 3px;*/
}
/* ------------------------
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index 327448b0..8fd0f156 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -374,14 +374,14 @@ exports.CssStyle = Montage.create(Component, {
draw : {
value : function() {
if(this.empty) {
- this.element.draggable = false;
+ //this.element.draggable = false;
this.element.classList.add(this.emptyStyleClass);
if(!this.addStyleButton.parentNode) {
this.element.appendChild(this.addStyleButton);
this.addStyleButton.addEventListener('click', this, false);
}
} else {
- this.element.draggable = true;
+ //this.element.draggable = true;
this.element.classList.remove(this.emptyStyleClass);
if(this.addStyleButton.parentNode) {
this.element.removeChild(this.addStyleButton);
--
cgit v1.2.3
From 1c3da2901f454ad2c18e20216bb2517740a1c080 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 22 May 2012 14:28:00 -0700
Subject: CSS Panel - Update components to use new serialization format
---
js/panels/css-panel/css-style.reel/css-style.html | 32 ++++++-----------------
1 file changed, 8 insertions(+), 24 deletions(-)
(limited to 'js/panels/css-panel/css-style.reel')
diff --git a/js/panels/css-panel/css-style.reel/css-style.html b/js/panels/css-panel/css-style.reel/css-style.html
index c4b6dd59..00cebf39 100644
--- a/js/panels/css-panel/css-style.reel/css-style.html
+++ b/js/panels/css-panel/css-style.reel/css-style.html
@@ -11,8 +11,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
-
+
--
cgit v1.2.3
From 0eb95ff2dbba1fe7213eed2e0140b4d07bda3dd5 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 22 May 2012 15:47:56 -0700
Subject: CSS Style - Fix issue when changing value to same value minus units.
---
js/panels/css-panel/css-style.reel/css-style.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
(limited to 'js/panels/css-panel/css-style.reel')
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index 8fd0f156..84841f5b 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -292,8 +292,8 @@ exports.CssStyle = Montage.create(Component, {
} else if (value !== '0') {
this.units = units;
}
-
- this.valueText = value;
+
+ this.valueField.value = value;
this.delegate.handleValueChange(rule, property, value, this);
}
--
cgit v1.2.3