From 70a85334144a9516fdec7b09eb5c9856230d12f1 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 22 May 2012 14:15:22 -0700 Subject: CSS Panel - Delete un-used components --- .../css-panel/declaration.reel/declaration.css | 15 - .../css-panel/declaration.reel/declaration.html | 58 --- .../css-panel/declaration.reel/declaration.js | 218 ----------- .../style-shorthand.reel/style-shorthand.css | 41 -- .../style-shorthand.reel/style-shorthand.html | 174 --------- .../style-shorthand.reel/style-shorthand.js | 58 --- js/panels/css-panel/style.reel/style.css | 187 --------- js/panels/css-panel/style.reel/style.html | 103 ----- js/panels/css-panel/style.reel/style.js | 429 --------------------- 9 files changed, 1283 deletions(-) delete mode 100644 js/panels/css-panel/declaration.reel/declaration.css delete mode 100644 js/panels/css-panel/declaration.reel/declaration.html delete mode 100644 js/panels/css-panel/declaration.reel/declaration.js delete mode 100644 js/panels/css-panel/style-shorthand.reel/style-shorthand.css delete mode 100644 js/panels/css-panel/style-shorthand.reel/style-shorthand.html delete mode 100644 js/panels/css-panel/style-shorthand.reel/style-shorthand.js delete mode 100644 js/panels/css-panel/style.reel/style.css delete mode 100644 js/panels/css-panel/style.reel/style.html delete mode 100644 js/panels/css-panel/style.reel/style.js diff --git a/js/panels/css-panel/declaration.reel/declaration.css b/js/panels/css-panel/declaration.reel/declaration.css deleted file mode 100644 index e37d89d2..00000000 --- a/js/panels/css-panel/declaration.reel/declaration.css +++ /dev/null @@ -1,15 +0,0 @@ -/* - 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/declaration.reel/declaration.html b/js/panels/css-panel/declaration.reel/declaration.html deleted file mode 100644 index 3ff41e0c..00000000 --- a/js/panels/css-panel/declaration.reel/declaration.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - -
-
-
- - \ No newline at end of file diff --git a/js/panels/css-panel/declaration.reel/declaration.js b/js/panels/css-panel/declaration.reel/declaration.js deleted file mode 100644 index 8ab19ad6..00000000 --- a/js/panels/css-panel/declaration.reel/declaration.js +++ /dev/null @@ -1,218 +0,0 @@ -/* - 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.Declaration = Montage.create(Component, { - cssText : { - value: null - }, - focusDelegate : { - value: null - }, - includeEmptyStyle : { - value: true - }, - templateDidLoad : { - value: function() { - console.log("declaration - template did load"); - - if(this.focusDelegate) { - this.treeController.delegate = this.focusDelegate; - } - } - }, - prepareForDraw : { - value: function(e) { - console.log("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) { - this._declaration = dec; - - this.cssText = dec.cssText; - - ///// 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 - this.treeController.branchControllers[0].content.forEach(function(obj) { - this.treeController.branchControllers[0].removeObjects(obj); - }, this ); - - this.buildStyleTree(); - - if(this.includeEmptyStyle) { - this.styleTree.properties.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; - } - }, - - /* 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/style-shorthand.reel/style-shorthand.css b/js/panels/css-panel/style-shorthand.reel/style-shorthand.css deleted file mode 100644 index b77994a4..00000000 --- a/js/panels/css-panel/style-shorthand.reel/style-shorthand.css +++ /dev/null @@ -1,41 +0,0 @@ -/* - 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. -
*/ - -.css-tree-branch { - /*padding-left: 10px;*/ -} - -.css-tree-branch .css-tree-branch { - padding-left: 20px; - margin-top: 0; - margin-bottom: 0; - overflow: hidden; -} -.style-shorthand-branch > div { - background-color: #fafafa; - border-bottom: 1px solid #ededed; - position: relative; -} -.style-shorthand-branch > div:hover { - background-color: #f1f1f1; - border-bottom: 1px solid #e1e1e1; - position: relative; -} -.style-shorthand-branch > div:hover:after { - opacity: 1; -} -.style-shorthand-branch > div:after { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAJCAYAAAD%2BWDajAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyODUxMDg2RjY1NkYxMUUxODMyRUQwQzAxMzUxMjUxRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyODUxMDg3MDY1NkYxMUUxODMyRUQwQzAxMzUxMjUxRiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI4NTEwODZENjU2RjExRTE4MzJFRDBDMDEzNTEyNTFGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI4NTEwODZFNjU2RjExRTE4MzJFRDBDMDEzNTEyNTFGIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BaoqKDgAAAGhJREFUeNpibG9vP8DAwGDPgAkuMAGJ6QzYwXSQ5Bogfoom8RGIFzNVVFT8xaJ7FlD8OxOUMxeIf0HZIMWzQAywJFDVC6jxILADyL8Dl4SCKWg0A8P%2F%2F%2F%2FhGOitFch8JjSHxCFzAAIMACCjLJNKELwVAAAAAElFTkSuQmCC); - background-repeat: no-repeat; - content: "\00a0"; - height: 10px; - position: absolute; - right: 8px; - top: 4px; - width: 10px; - opacity: .3; -} - diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.html b/js/panels/css-panel/style-shorthand.reel/style-shorthand.html deleted file mode 100644 index 0311798b..00000000 --- a/js/panels/css-panel/style-shorthand.reel/style-shorthand.html +++ /dev/null @@ -1,174 +0,0 @@ - - - - - - - - - -
-
-
-
-
-
-
-
-
- - \ No newline at end of file diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.js b/js/panels/css-panel/style-shorthand.reel/style-shorthand.js deleted file mode 100644 index 028699a1..00000000 --- a/js/panels/css-panel/style-shorthand.reel/style-shorthand.js +++ /dev/null @@ -1,58 +0,0 @@ -/* - 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").Montage, - TreeNode = require("js/components/treeview/tree-node").TreeNode; - -var styleShorthand = exports.StyleShorthand= Montage.create(TreeNode, { - repetition: { value: null }, - propertyText : { value: "property" }, - valueText : { value: "value" }, - - handleSourceObjectSet: { - value: function() { - this.propertyText = this.sourceObject.name; - this.valueText = this.sourceObject.value; - } - }, - prepareForDraw : { - value: function() { -// this.styleListDisclosure.addEventListener('click', this, false); - this.treeView.contentController.addBranchController(this.arrayController); - } - }, - templateDidLoad: { - value: function() { - this.arrayController.delegate = this.treeView.contentController; - - this.branchCollapser.removeAttribute('id'); - } - }, - willDraw : { - value: function() { - - } - }, - draw:{ - value: function () { - -console.log("style shorthand - draw"); - shorthand = this; - if (this.sourceObject[this.labelKey]) { - this._labelText = this.sourceObject[this.labelKey]; - } - - } - }, - - handleClick : { - value: function(e) { - e.preventDefault(); - this.toggleExpand(); - } - } - -}); diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css deleted file mode 100644 index 6864e245..00000000 --- a/js/panels/css-panel/style.reel/style.css +++ /dev/null @@ -1,187 +0,0 @@ -/* - 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/style.reel/style.html b/js/panels/css-panel/style.reel/style.html deleted file mode 100644 index 9830a21e..00000000 --- a/js/panels/css-panel/style.reel/style.html +++ /dev/null @@ -1,103 +0,0 @@ - - - - - - - - - -
-
- -
- - \ No newline at end of file diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js deleted file mode 100644 index 858b7020..00000000 --- a/js/panels/css-panel/style.reel/style.js +++ /dev/null @@ -1,429 +0,0 @@ -/* - 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, - TreeNode = require("js/components/treeview/tree-node").TreeNode; - -exports.Style = Montage.create(TreeNode, { - 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, - rule; - - if(declarationComponent.type === 'inline') { - rule = { style : declarationComponent.declaration } - } else { - rule = this.treeView.parentComponent.declaration.parentRule; - } - - return rule; - } - }, - - getSiblingStyle : { - value: function(which) { - var styles = this.parentComponent.parentComponent.childComponents.map(function(sub){ - return sub.childComponents[0]; - }), - 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; - } - } - }, - - templateDidLoad : { - value: function() { - this.delegate = this.treeView.contentController.delegate; - - 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