From 1433f2bdf2e5b8c5c18fed5e9c17fd983ab3606d Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 2 Mar 2012 10:55:51 -0800 Subject: CSS Panel - Updating components, created toolbar components, and small changes to styles controller --- js/panels/css-panel/rule-list.reel/rule-list.css | 29 +++++++ js/panels/css-panel/rule-list.reel/rule-list.html | 85 ++++++++++++++++++ js/panels/css-panel/rule-list.reel/rule-list.js | 100 ++++++++++++++++++++++ 3 files changed, 214 insertions(+) create mode 100644 js/panels/css-panel/rule-list.reel/rule-list.css create mode 100644 js/panels/css-panel/rule-list.reel/rule-list.html create mode 100644 js/panels/css-panel/rule-list.reel/rule-list.js (limited to 'js/panels/css-panel/rule-list.reel') diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css new file mode 100644 index 00000000..5f9092f3 --- /dev/null +++ b/js/panels/css-panel/rule-list.reel/rule-list.css @@ -0,0 +1,29 @@ +/* + 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. + */ +.rule-list-container { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-box-flex: 1; +} +.rule-list { + background-color: #FFF; + background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px); + color: #333; + font-family: monospace; + padding: 0; + margin: 0; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-box-flex: 1; +} +.rule-list li { + list-style-type: none; + margin: 3px 6px; + position: relative; +} +.rule-list li { + +} \ No newline at end of file diff --git a/js/panels/css-panel/rule-list.reel/rule-list.html b/js/panels/css-panel/rule-list.reel/rule-list.html new file mode 100644 index 00000000..69154d8d --- /dev/null +++ b/js/panels/css-panel/rule-list.reel/rule-list.html @@ -0,0 +1,85 @@ + + + + + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js new file mode 100644 index 00000000..11cda89c --- /dev/null +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -0,0 +1,100 @@ +/* + 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.RuleList = Montage.create(Component, { + hasTemplate: { + value: true + }, + _rules: { + value: null + }, + rules: { + get: function() { + return this._rules; + }, + set: function(list) { + if(!list) { + return null; + } + console.log('list: ', list); + this._rules = list; + this.needsDraw = this._needsAppend = true; + } + }, + _contentController: { + value: null + }, + contentController: { + get: function() { + return this._contentController; + }, + set: function(controller) { + + Object.defineBinding(this, 'rules', { + "boundObject": controller, + "boundObjectPropertyPath": "ruleList", + "oneway": true + + }); + + this._contentController = controller; + } + }, + templateDidLoad : { + value: function() { + console.log("Rule List : template did load"); + //this.condition = true; + } + }, + prepareForDraw : { + value: function() { + console.log("Rule List : prepare for draw"); + } + }, + draw : { + value: function() { + if(this._needsAppend) { + this._rules.forEach(function(rule) { + var componentBase = this.supportedRules[rule.type], + instance, el; + + if(componentBase) { + el = document.createElement(this.ruleNodeName); + instance = componentBase.create(); + instance.element = el; + instance.rule = rule; + this.listElement.appendChild(el); + instance.needsDraw = true; + } + + + }, this); + } + console.log("Rule List : draw"); + } + }, + _createRuleComponent: { + value: function(ruleType) { + + } + }, + ruleNodeName : { + value: 'li' + }, + ruleComponents : { + value: { + "1" : 'css-style-rule', + "3" : 'css-import-rule', + "4" : 'css-media-rule', + "5" : 'css-font-face-rule', + "6" : 'css-page-rule', + "10" : 'namespace-rule' + } + } +}); -- cgit v1.2.3 From 42d9f27afea3066cbccf22c76753f407fd340c30 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 12 Mar 2012 15:24:29 -0700 Subject: CSS Panel Update - Rule List component update --- js/panels/css-panel/rule-list.reel/rule-list.css | 6 ++--- js/panels/css-panel/rule-list.reel/rule-list.html | 7 ++--- js/panels/css-panel/rule-list.reel/rule-list.js | 33 ++++++++--------------- 3 files changed, 15 insertions(+), 31 deletions(-) (limited to 'js/panels/css-panel/rule-list.reel') diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css index 5f9092f3..8bb90331 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.css +++ b/js/panels/css-panel/rule-list.reel/rule-list.css @@ -12,10 +12,11 @@ background-color: #FFF; background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px); color: #333; + display: -webkit-box; font-family: monospace; padding: 0; margin: 0; - display: -webkit-box; + overflow-y: scroll; -webkit-box-orient: vertical; -webkit-box-flex: 1; } @@ -23,7 +24,4 @@ list-style-type: none; margin: 3px 6px; position: relative; -} -.rule-list li { - } \ No newline at end of file diff --git a/js/panels/css-panel/rule-list.reel/rule-list.html b/js/panels/css-panel/rule-list.reel/rule-list.html index 69154d8d..efede847 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.html +++ b/js/panels/css-panel/rule-list.reel/rule-list.html @@ -14,8 +14,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "module" : "js/panels/css-panel/rule-list.reel", "name" : "RuleList", "properties" : { - "element" : {"#" : "container"}, - "listElement": {"#": "rules-list"} + "element" : {"#" : "rule-list"} } } } @@ -78,8 +77,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot -
- -
+ \ No newline at end of file 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 11cda89c..44d6d864 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -11,6 +11,9 @@ exports.RuleList = Montage.create(Component, { hasTemplate: { value: true }, + listElement : { + value: null + }, _rules: { value: null }, @@ -22,34 +25,19 @@ exports.RuleList = Montage.create(Component, { if(!list) { return null; } + //debugger; console.log('list: ', list); this._rules = list; - this.needsDraw = this._needsAppend = true; - } - }, - _contentController: { - value: null - }, - contentController: { - get: function() { - return this._contentController; - }, - set: function(controller) { - - Object.defineBinding(this, 'rules', { - "boundObject": controller, - "boundObjectPropertyPath": "ruleList", - "oneway": true - - }); - - this._contentController = controller; + this.needsDraw = true; + this._needsAppend = true; } }, templateDidLoad : { value: function() { console.log("Rule List : template did load"); //this.condition = true; + this.needsDraw = true; + //debugger; } }, prepareForDraw : { @@ -59,6 +47,7 @@ exports.RuleList = Montage.create(Component, { }, draw : { value: function() { + console.log("Rule List - Draw"); if(this._needsAppend) { this._rules.forEach(function(rule) { var componentBase = this.supportedRules[rule.type], @@ -66,10 +55,10 @@ exports.RuleList = Montage.create(Component, { if(componentBase) { el = document.createElement(this.ruleNodeName); - instance = componentBase.create(); + instance = Montage.create(componentBase); instance.element = el; instance.rule = rule; - this.listElement.appendChild(el); + this.element.appendChild(instance.element); instance.needsDraw = true; } -- cgit v1.2.3 From 40e03e102c14a343efee1bdcf32d0d244e3f8344 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 13 Mar 2012 15:52:33 -0700 Subject: CSS Panel - Style updates for collapsing branches --- js/panels/css-panel/rule-list.reel/rule-list.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/css-panel/rule-list.reel') diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css index 8bb90331..e4a10657 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.css +++ b/js/panels/css-panel/rule-list.reel/rule-list.css @@ -16,7 +16,7 @@ font-family: monospace; padding: 0; margin: 0; - overflow-y: scroll; + overflow-y: auto; -webkit-box-orient: vertical; -webkit-box-flex: 1; } -- cgit v1.2.3 From 4afb01e3b8261ab5e9492bfc63ad17e44dfcb934 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 16 Mar 2012 15:08:29 -0700 Subject: CSS Panel Updates - CSS tweaks and cleanup --- js/panels/css-panel/rule-list.reel/rule-list.css | 3 +- js/panels/css-panel/rule-list.reel/rule-list.html | 56 ----------------------- 2 files changed, 1 insertion(+), 58 deletions(-) (limited to 'js/panels/css-panel/rule-list.reel') diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css index e4a10657..0f744511 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.css +++ b/js/panels/css-panel/rule-list.reel/rule-list.css @@ -22,6 +22,5 @@ } .rule-list li { list-style-type: none; - margin: 3px 6px; - position: relative; + margin: 0; } \ No newline at end of file diff --git a/js/panels/css-panel/rule-list.reel/rule-list.html b/js/panels/css-panel/rule-list.reel/rule-list.html index efede847..c11e488d 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.html +++ b/js/panels/css-panel/rule-list.reel/rule-list.html @@ -19,62 +19,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot } } - -- cgit v1.2.3 From c0fce534c255ef1e25779e2f0e8de95bb4e160cf Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 23 Apr 2012 11:55:08 -0700 Subject: CSS Panel - Add styles view delegate. Add handling for adding rules to stylesheets --- js/panels/css-panel/rule-list.reel/rule-list.js | 112 +++++++++++++----------- 1 file changed, 61 insertions(+), 51 deletions(-) (limited to 'js/panels/css-panel/rule-list.reel') 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 44d6d864..ebd7428b 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -8,15 +8,10 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.RuleList = Montage.create(Component, { - hasTemplate: { - value: true - }, - listElement : { - value: null - }, - _rules: { - value: null - }, + + ruleNodeName : { value: 'li' }, + + _rules: { value: null }, rules: { get: function() { return this._rules; @@ -28,62 +23,77 @@ exports.RuleList = Montage.create(Component, { //debugger; console.log('list: ', list); this._rules = list; + + ///// remove previsouly added rules + if(this.childComponents){ + this.childComponents.forEach(function(ruleComponent) { + this.removeRule(ruleComponent); + }, this); + } + + this._rules.forEach(function(rule) { + this.addRule(rule); + }, this); + this.needsDraw = true; - this._needsAppend = true; + } }, - templateDidLoad : { - value: function() { - console.log("Rule List : template did load"); - //this.condition = true; - this.needsDraw = true; - //debugger; - } + + childComponents : { + value: [], + distinct: true }, - prepareForDraw : { - value: function() { - console.log("Rule List : prepare for draw"); - } + + rulesToDraw : { + value: [], + distinct: true }, - draw : { - value: function() { - console.log("Rule List - Draw"); - if(this._needsAppend) { - this._rules.forEach(function(rule) { - var componentBase = this.supportedRules[rule.type], - instance, el; - - if(componentBase) { - el = document.createElement(this.ruleNodeName); - instance = Montage.create(componentBase); - instance.element = el; - instance.rule = rule; - this.element.appendChild(instance.element); - instance.needsDraw = true; - } + addRule: { + value: function(rule) { + var componentBase = this.supportedRules[rule.type], + instance, el; - }, this); + ///// Draw the rule if we have a template for the rule type + if(componentBase) { + instance = Montage.create(componentBase); + instance.rule = rule; + this.rulesToDraw.push(instance); + this.needsDraw = true; } - console.log("Rule List : draw"); } }, - _createRuleComponent: { - value: function(ruleType) { + update : { + value: function() { + this.childComponents.forEach(function(component) { + component.update(); + }, this); + + //// TODO: find new styles based on selection } }, - ruleNodeName : { - value: 'li' + + willDraw : { + value: function() { + this.rulesToDraw.forEach(function(component) { + component.element = document.createElement(this.ruleNodeName); + }, this); + + } }, - ruleComponents : { - value: { - "1" : 'css-style-rule', - "3" : 'css-import-rule', - "4" : 'css-media-rule', - "5" : 'css-font-face-rule', - "6" : 'css-page-rule', - "10" : 'namespace-rule' + + draw : { + value: function() { + //// Iterate through all rules that need draw and append them + this.rulesToDraw.forEach(function(component) { + this.element.appendChild(component.element); + component.needsDraw = true; + }, this); + + ///// Null out any rules that were just drawn + this.rulesToDraw.length = 0; } } }); -- cgit v1.2.3 From 143105a0b9c7765898b22d53489b4bd8df3dff2e Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 26 Apr 2012 03:15:49 -0700 Subject: CSS Panel - add handlers for css panel actions --- js/panels/css-panel/rule-list.reel/rule-list.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'js/panels/css-panel/rule-list.reel') 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 ebd7428b..0faff07e 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -8,7 +8,9 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.RuleList = Montage.create(Component, { - + focusDelegate : { + value: null + }, ruleNodeName : { value: 'li' }, _rules: { value: null }, @@ -59,6 +61,11 @@ exports.RuleList = Montage.create(Component, { if(componentBase) { instance = Montage.create(componentBase); instance.rule = rule; + + if(this.focusDelegate) { + instance.focusDelegate = this.focusDelegate; + } + this.rulesToDraw.push(instance); this.needsDraw = true; } -- cgit v1.2.3 From 2b78627d5f5332d01ef9649c9596cc3689b6867b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 30 Apr 2012 13:45:08 -0700 Subject: Rule List - Scroll to bottom code --- js/panels/css-panel/rule-list.reel/rule-list.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) (limited to 'js/panels/css-panel/rule-list.reel') 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 0faff07e..4ed3ec11 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -8,10 +8,9 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.RuleList = Montage.create(Component, { - focusDelegate : { - value: null - }, + focusDelegate : { value: null }, ruleNodeName : { value: 'li' }, + _needsScrollToBottom: { value: null }, _rules: { value: null }, rules: { @@ -69,6 +68,8 @@ exports.RuleList = Montage.create(Component, { this.rulesToDraw.push(instance); this.needsDraw = true; } + + return instance; } }, @@ -93,9 +94,18 @@ exports.RuleList = Montage.create(Component, { draw : { value: function() { + ///// If needed, scroll to bottom + if(this._needsScrollToBottom) { + ///// Make sure the appended rule item is visible (scrolled-to) + this.element.scrollTop = this.element.offsetHeight; + console.log("Scroll top:", this.element.scrollTop); + this._needsScrollToBottom = false; + } + //// Iterate through all rules that need draw and append them this.rulesToDraw.forEach(function(component) { this.element.appendChild(component.element); + this._needsScrollToBottom = this.needsDraw = true; component.needsDraw = true; }, this); -- cgit v1.2.3 From 9a94c6fb5f82d18139b48341788a0ffca23ae0af Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 1 May 2012 11:15:14 -0700 Subject: CSS Panel - Added removing of rules/styles --- js/panels/css-panel/rule-list.reel/rule-list.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) (limited to 'js/panels/css-panel/rule-list.reel') 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 4ed3ec11..8d179248 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -25,7 +25,7 @@ exports.RuleList = Montage.create(Component, { console.log('list: ', list); this._rules = list; - ///// remove previsouly added rules + ///// remove previously added rules if(this.childComponents){ this.childComponents.forEach(function(ruleComponent) { this.removeRule(ruleComponent); @@ -50,7 +50,10 @@ exports.RuleList = Montage.create(Component, { value: [], distinct: true }, - + rulesToRemove : { + value: [], + distinct: true + }, addRule: { value: function(rule) { var componentBase = this.supportedRules[rule.type], @@ -73,6 +76,14 @@ exports.RuleList = Montage.create(Component, { } }, + removeRule : { + value: function(rule) { + this.childComponents.splice(this.childComponents.indexOf(rule), 1); + this.rulesToRemove.push(rule); + this.needsDraw = true; + } + }, + update : { value: function() { this.childComponents.forEach(function(component) { @@ -106,11 +117,18 @@ exports.RuleList = Montage.create(Component, { this.rulesToDraw.forEach(function(component) { this.element.appendChild(component.element); this._needsScrollToBottom = this.needsDraw = true; + this.childComponents.push(component); component.needsDraw = true; }, this); + //// Iterate through all rules that need draw and append them + this.rulesToRemove.forEach(function(component) { + this.element.removeChild(component.element); + }, this); + ///// Null out any rules that were just drawn this.rulesToDraw.length = 0; + this.rulesToRemove.length = 0; } } }); -- cgit v1.2.3 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/rule-list.reel/rule-list.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels/css-panel/rule-list.reel') 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() } }, -- cgit v1.2.3 From 5330de3ddb40a4db8a2a0572725ab64b23770b3b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 8 May 2012 14:49:37 -0700 Subject: CSS Panel - Added update of new rules to rule list --- js/panels/css-panel/rule-list.reel/rule-list.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels/css-panel/rule-list.reel') 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 be9f61d7..c9eeb64b 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -85,13 +85,13 @@ exports.RuleList = Montage.create(Component, { }, update : { - value: function() { + value: function(rules) { this.childComponents.forEach(function(component) { component.update(); }, this); //// TODO: find new styles based on selection - if() + } }, -- cgit v1.2.3 From 830b6577ee25a6955bd4e275f216e1cadeff168c Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 10 May 2012 13:20:19 -0700 Subject: CSS Panel - Rule List refactor Improved adding, updating, and sorting of rules in rule list. --- js/panels/css-panel/rule-list.reel/rule-list.js | 168 +++++++++++++++--------- 1 file changed, 103 insertions(+), 65 deletions(-) (limited to 'js/panels/css-panel/rule-list.reel') 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 c9eeb64b..5f6afee5 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -12,35 +12,6 @@ exports.RuleList = Montage.create(Component, { ruleNodeName : { value: 'li' }, _needsScrollToBottom: { value: null }, - _rules: { value: null }, - rules: { - get: function() { - return this._rules; - }, - set: function(list) { - if(!list) { - return null; - } - //debugger; - console.log('list: ', list); - this._rules = list; - - ///// remove previously added rules - if(this.childComponents){ - this.childComponents.forEach(function(ruleComponent) { - this.removeRule(ruleComponent); - }, this); - } - - this._rules.forEach(function(rule) { - this.addRule(rule); - }, this); - - this.needsDraw = true; - - } - }, - childComponents : { value: [], distinct: true @@ -54,51 +25,98 @@ exports.RuleList = Montage.create(Component, { value: [], distinct: true }, - addRule: { - value: function(rule) { - var componentBase = this.supportedRules[rule.type], - instance, el; - ///// Draw the rule if we have a template for the rule type - if(componentBase) { - instance = Montage.create(componentBase); - instance.rule = rule; + update : { + value: function(rules) { + this.childComponents.forEach(function(component) { + component.update(); + }, this); + } + }, - if(this.focusDelegate) { - instance.focusDelegate = this.focusDelegate; + _rules: { value: null }, + rules: { + get: function() { + return this._rules; + }, + set: function(list) { + if(!list) { + return null; + } + + var foundIndices = []; + + //// Iterate existing rules, update those which rule exists in new + //// rule list + this.childComponents.forEach(function(ruleComponent, i, drawnRules) { + //// If rule exists in new list, update it + var index = list.indexOf(ruleComponent.rule); + + if(ruleComponent.rule.type === 'inline') { + //// Let's emulate finding the line rule at the first index + index = 0; } - this.rulesToDraw.push(instance); - this.needsDraw = true; - } + if(index !== -1) { + // found rule in our component list, or it's the inline rule + ruleComponent.update(); + foundIndices.push(index); + } else { + this.rulesToRemove.push(ruleComponent); + } + }, this); - return instance; - } - }, + //// Find rules to add + list.forEach(function(rule, index) { + //// If we haven't updated the rule already, + //// we're dealing with a new rule to add + if(foundIndices.indexOf(index) === -1) { + this.addRule(rule, index); + } + }, this); + + this._rules = list; - removeRule : { - value: function(rule) { - this.childComponents.splice(this.childComponents.indexOf(rule), 1); - this.rulesToRemove.push(rule); this.needsDraw = true; + } }, - update : { - value: function(rules) { - this.childComponents.forEach(function(component) { - component.update(); - }, this); + addRule: { + value: function(rule, atIndex) { + var insertIndex = atIndex || this.childComponents.length; - //// TODO: find new styles based on selection + this.rulesToDraw.push({ + rule: rule, + index: insertIndex, + instance : null + }); + this.needsDraw = true; } }, willDraw : { value: function() { - this.rulesToDraw.forEach(function(component) { - component.element = document.createElement(this.ruleNodeName); + this.rulesToDraw.forEach(function(ruleObj) { + var el = document.createElement(this.ruleNodeName); + + var componentBase = this.supportedRules[ruleObj.rule.type], + instance; + + ///// Draw the rule if we have a template for the rule type + if(!componentBase) { return false; } + + instance = Montage.create(componentBase); + instance.element = document.createElement(this.ruleNodeName); + instance.rule = ruleObj.rule; + + if(this.focusDelegate) { + instance.focusDelegate = this.focusDelegate; + } + + ruleObj.instance = instance; + }, this); } @@ -114,21 +132,41 @@ exports.RuleList = Montage.create(Component, { this._needsScrollToBottom = false; } - //// Iterate through all rules that need draw and append them - this.rulesToDraw.forEach(function(component) { - this.element.appendChild(component.element); - this._needsScrollToBottom = this.needsDraw = true; - this.childComponents.push(component); - component.needsDraw = true; + //// Iterate through all rules needing removal + console.log("Rule List :: Rules to draw:,", this.rulesToDraw.length); + this.rulesToRemove.forEach(function(ruleComponent) { + var componentIndex = this.childComponents.indexOf(ruleComponent); + this.childComponents.splice(componentIndex, 1); + this.element.removeChild(ruleComponent.element); }, this); //// Iterate through all rules that need draw and append them - this.rulesToRemove.forEach(function(component) { - this.element.removeChild(component.element); + this.rulesToDraw.forEach(function(ruleObj) { + var ruleAtIndex = this.childComponents[ruleObj.index]; + + if(ruleAtIndex) { + //// Insert rule at appropriate index + this.element.insertBefore(ruleObj.instance.element, ruleAtIndex.element); + } else { + this.element.appendChild(ruleObj.instance.element); + } + + this._needsScrollToBottom = this.needsDraw = true; + this.childComponents.push(ruleObj.instance); + ruleObj.instance.needsDraw = true; }, this); ///// Null out any rules that were just drawn this.rulesToDraw.length = 0; + + } + }, + + didDraw : { + value: function() { + this.rulesToRemove.forEach(function(ruleObj) { + ruleObj.instance = null; + }, this); this.rulesToRemove.length = 0; } } -- cgit v1.2.3 From 1db59a64c0db27878ce45858748b5a74b273dcb1 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 10 May 2012 15:22:41 -0700 Subject: CSS Panel - fix issue with hover/scroll to top --- js/panels/css-panel/rule-list.reel/rule-list.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/css-panel/rule-list.reel') diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css index 0f744511..1d998f3d 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.css +++ b/js/panels/css-panel/rule-list.reel/rule-list.css @@ -12,7 +12,7 @@ background-color: #FFF; background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px); color: #333; - display: -webkit-box; + display: block; font-family: monospace; padding: 0; margin: 0; -- cgit v1.2.3 From 1c73ff78bb6a251ded84ab34ed7f341844c030f1 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 10 May 2012 17:14:12 -0700 Subject: CSS Panel - Fixed removing rules and checking to see if rules apply on add. --- js/panels/css-panel/rule-list.reel/rule-list.js | 26 ++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) (limited to 'js/panels/css-panel/rule-list.reel') 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 5f6afee5..bca298df 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -83,19 +83,28 @@ exports.RuleList = Montage.create(Component, { }, addRule: { - value: function(rule, atIndex) { + value: function(rule, atIndex, applies, drawCallback) { var insertIndex = atIndex || this.childComponents.length; this.rulesToDraw.push({ rule: rule, index: insertIndex, - instance : null + instance : null, + applies : applies, + callback : drawCallback }); this.needsDraw = true; } }, + removeRule: { + value: function(ruleComponent) { + this.rulesToRemove.push(ruleComponent); + this.needsDraw = true; + } + }, + willDraw : { value: function() { this.rulesToDraw.forEach(function(ruleObj) { @@ -110,6 +119,7 @@ exports.RuleList = Montage.create(Component, { instance = Montage.create(componentBase); instance.element = document.createElement(this.ruleNodeName); instance.rule = ruleObj.rule; + instance.applied = ruleObj.applies; if(this.focusDelegate) { instance.focusDelegate = this.focusDelegate; @@ -156,17 +166,23 @@ exports.RuleList = Montage.create(Component, { ruleObj.instance.needsDraw = true; }, this); - ///// Null out any rules that were just drawn - this.rulesToDraw.length = 0; - } }, didDraw : { value: function() { + this.rulesToDraw.forEach(function(ruleObj) { + if(typeof ruleObj.callback === 'function') { + ruleObj.callback(ruleObj.instance); + } + }); + this.rulesToRemove.forEach(function(ruleObj) { ruleObj.instance = null; }, this); + + ///// Null out any rules that were just drawn + this.rulesToDraw.length = 0; this.rulesToRemove.length = 0; } } -- cgit v1.2.3 From bbca3e05b39d43ce13c2f3e48cb33630ed7948b9 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 16 May 2012 14:14:25 -0700 Subject: CSS Panel - Added flag to draw method to improve perceived loading time --- js/panels/css-panel/rule-list.reel/rule-list.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'js/panels/css-panel/rule-list.reel') 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 bca298df..b7244a2c 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -184,6 +184,9 @@ exports.RuleList = Montage.create(Component, { ///// Null out any rules that were just drawn this.rulesToDraw.length = 0; this.rulesToRemove.length = 0; + + this.parentComponent.ruleListDrawn = true; + this.parentComponent.needsDraw = true; } } }); -- cgit v1.2.3 From f71e8f853605f0eb4deaf16263124aac1aad9ee1 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 21 May 2012 12:02:08 -0700 Subject: CSS Panel - Allow ":" to be used in selector field --- js/panels/css-panel/rule-list.reel/rule-list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/css-panel/rule-list.reel') 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 b7244a2c..2cd5ac5c 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -61,7 +61,7 @@ exports.RuleList = Montage.create(Component, { // found rule in our component list, or it's the inline rule ruleComponent.update(); foundIndices.push(index); - } else { + } else if(!rule.applied) { /// remove rule (unless unapplied) this.rulesToRemove.push(ruleComponent); } }, this); -- cgit v1.2.3 From b5bbf69e59dbadf6504955875cc13d893efe3259 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 21 May 2012 17:04:23 -0700 Subject: Rule List Container - Handle drawing multiple rules at the same time Fixes problems when dropping multiple images on to stage and the selection changes too quickly --- js/panels/css-panel/rule-list.reel/rule-list.css | 4 ++++ js/panels/css-panel/rule-list.reel/rule-list.js | 29 ++++++++++++++++++++---- 2 files changed, 29 insertions(+), 4 deletions(-) (limited to 'js/panels/css-panel/rule-list.reel') diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css index 1d998f3d..2aba01da 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.css +++ b/js/panels/css-panel/rule-list.reel/rule-list.css @@ -23,4 +23,8 @@ .rule-list li { list-style-type: none; margin: 0; +} + +.hidden-rule-list { + display: none; } \ No newline at end of file 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 2cd5ac5c..3e18c3bf 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -12,6 +12,21 @@ exports.RuleList = Montage.create(Component, { ruleNodeName : { value: 'li' }, _needsScrollToBottom: { value: null }, + _hide : { + value: null + }, + hide : { + get: function() { + return this._hide; + }, + set: function(value) { + if(value === this._hide) { return; } + + this._hide = value; + this.needsDraw = true; + } + }, + childComponents : { value: [], distinct: true @@ -138,12 +153,10 @@ exports.RuleList = Montage.create(Component, { if(this._needsScrollToBottom) { ///// Make sure the appended rule item is visible (scrolled-to) this.element.scrollTop = this.element.offsetHeight; - console.log("Scroll top:", this.element.scrollTop); this._needsScrollToBottom = false; } //// Iterate through all rules needing removal - console.log("Rule List :: Rules to draw:,", this.rulesToDraw.length); this.rulesToRemove.forEach(function(ruleComponent) { var componentIndex = this.childComponents.indexOf(ruleComponent); this.childComponents.splice(componentIndex, 1); @@ -166,6 +179,12 @@ exports.RuleList = Montage.create(Component, { ruleObj.instance.needsDraw = true; }, this); + if(this.hide) { + this.element.classList.add('hidden-rule-list'); + } else { + this.element.classList.remove('hidden-rule-list'); + } + } }, @@ -185,8 +204,10 @@ exports.RuleList = Montage.create(Component, { this.rulesToDraw.length = 0; this.rulesToRemove.length = 0; - this.parentComponent.ruleListDrawn = true; - this.parentComponent.needsDraw = true; + if(!this.parentComponent.ruleListDrawn) { + this.parentComponent.ruleListDrawn = true; + this.parentComponent.needsDraw = true; + } } } }); -- 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/rule-list.reel/rule-list.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'js/panels/css-panel/rule-list.reel') diff --git a/js/panels/css-panel/rule-list.reel/rule-list.html b/js/panels/css-panel/rule-list.reel/rule-list.html index c11e488d..67b17f48 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.html +++ b/js/panels/css-panel/rule-list.reel/rule-list.html @@ -11,8 +11,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot