1 files changed, 416 insertions, 0 deletions

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..84841f5b
--- /dev/null
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -0,0 +1,416 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+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" },
+    emptyStyleClass   : { value: "empty-css-style" },
+    source            : { value: null },
+    units             : { value: null },
+
+    propertyText : {
+        value: "property",
+        distinct: true
+    },
+
+    _valueText : {
+        value: "value",
+        distinct: true
+    },
+    valueText : {
+        get: function() {
+            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);
+        }
+    },
+    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.parentComponent.parentComponent.parentComponent
+            return declarationComponent.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;
+            }
+        }
+    },
+
+    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");
+        }
+    },
+
+    handleClick : {
+        value: function(e) {
+            this.buttonClicked = true;
+            this.propertyField.start();
+        }
+    },
+
+    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;
+