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 +++++++++++---------- .../styles-view-container.html | 16 ++- js/panels/css-panel/styles-view-mediator.js | 38 +++++++ 3 files changed, 114 insertions(+), 52 deletions(-) create mode 100644 js/panels/css-panel/styles-view-mediator.js (limited to 'js/panels') 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; } } }); diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html index e8ddb139..56e965c2 100644 --- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html @@ -37,6 +37,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot } } }, + "stylesViewDelegate" : { + "module": "js/panels/css-panel/styles-view-mediator", + "name": "StylesViewMediator", + "properties": { + "ruleListContainer": {"@": "ruleListContainer"} + } + }, "ruleListContainer": { "module": "js/panels/css-panel/rule-list-container.reel", "name": "RuleListContainer" @@ -49,7 +56,14 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "module": "js/components/toolbar.reel", "name": "Toolbar", "properties": { - "element": {"#": "styles-view-toolbar"} + "element": {"#": "styles-view-toolbar"}, + "delegate": {"@": "stylesViewDelegate" }, + "buttons": [ + { + "title": "Add", + "identifier": "add" + } + ] } } } diff --git a/js/panels/css-panel/styles-view-mediator.js b/js/panels/css-panel/styles-view-mediator.js new file mode 100644 index 00000000..38b61220 --- /dev/null +++ b/js/panels/css-panel/styles-view-mediator.js @@ -0,0 +1,38 @@ +/* + 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.StylesViewMediator = Montage.create(Component, { + stylesController : { + get: function() { + return this.application.ninja.stylesController; + }, + set: function(){ + return; + } + }, + handleAddAction : { + value: function(e) { + var selector, newRule; + + ///// Add rule to the container + + ///// Get selection prefix + if(this.ruleListContainer.displayedList.selection.length > 1) { + selector = this.stylesController.generateClassName(null, true); + } else { + selector = this.stylesController.generateClassName(this.ruleListContainer.displayedList.selection[0].nodeName); + } + + newRule = this.application.ninja.stylesController.addRule("."+selector, ' { }'); + + this.ruleListContainer.displayedList.component.addRule(newRule); + + } + } +}); \ No newline at end of file -- cgit v1.2.3