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 --- .../css-style-rule.reel/css-style-rule.js | 48 ++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js new file mode 100644 index 00000000..f90104e1 --- /dev/null +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -0,0 +1,48 @@ +/* + 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.CssStyleRule = Montage.create(Component, { + hasTemplate: { + value: true + }, + _rule : { + value : null + }, + rule : { + get: function() { + return this._rule; + }, + set: function(rule) { + this.cssText = rule.cssText; + this.sheetName = rule.href || 'Style Tag'; + this.selector = rule.selectorText; +console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); + this._rule = rule; + } + }, + condition: { + value: false + }, + templateDidLoad : { + value: function() { + console.log("css style rule : template did load"); + //this.condition = true; + } + }, + prepareForDraw : { + value: function() { + console.log("css panel : prepare for draw"); + } + }, + draw : { + value: function() { + console.log("css panel : draw"); + } + } +}); -- cgit v1.2.3 From a43de0b808db09ed76a94bf43ca0108bedeb2e62 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 12 Mar 2012 15:25:53 -0700 Subject: CSS Panel Update - Style Rule update --- .../css-style-rule.reel/css-style-rule.js | 46 ++++++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index f90104e1..a0ff4b4e 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -8,6 +8,9 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.CssStyleRule = Montage.create(Component, { + cssText: { + value: null + }, hasTemplate: { value: true }, @@ -22,27 +25,62 @@ exports.CssStyleRule = Montage.create(Component, { this.cssText = rule.cssText; this.sheetName = rule.href || 'Style Tag'; this.selector = rule.selectorText; -console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); + + this.declaration = rule.style; + + console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); + this._rule = rule; } }, + declarationComponent: { + value: null + } , +// declarationNodeName: { +// value: "dl" +// }, +// declarationElement: { +// value: null +// }, + _declaration: { + value: null + }, + declaration: { + get: function() { + return this._declaration; + }, + set: function(dec) { + this._declaration = dec; + } + }, condition: { value: false }, templateDidLoad : { value: function() { console.log("css style rule : template did load"); - //this.condition = true; + if(this._declaration) { + this.declarationComponent.declaration = this._declaration; + } } }, prepareForDraw : { value: function() { - console.log("css panel : prepare for draw"); + console.log("css style rule : prepare for draw"); + + if(!this.declarationElement) { + ///// Create element to contain declaration + this.declarationElement = document.createElement(this.declarationNodeName); + } + + if(!this._declaration && this._rule) { + + } } }, draw : { value: function() { - console.log("css panel : draw"); + console.log("css style rule : draw"); } } }); -- cgit v1.2.3 From e39cc380ef2c0479f57b35dcadedccb0fb3fd22f Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 13 Apr 2012 01:44:45 -0700 Subject: CSS Style Rule - Show appropriate "sheet name" for inline style --- .../rule-components/css-style-rule.reel/css-style-rule.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index a0ff4b4e..dd51565a 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -23,9 +23,14 @@ exports.CssStyleRule = Montage.create(Component, { }, set: function(rule) { this.cssText = rule.cssText; - this.sheetName = rule.href || 'Style Tag'; - this.selector = rule.selectorText; + if(rule.type === 'inline') { + this.sheetName = 'Inline Style'; + } else { + this.sheetName = rule.href || 'Style Tag'; + } + + this.selector = rule.selectorText; this.declaration = rule.style; console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); -- 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 --- .../rule-components/css-style-rule.reel/css-style-rule.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index dd51565a..d85b5797 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -14,6 +14,10 @@ exports.CssStyleRule = Montage.create(Component, { hasTemplate: { value: true }, + focusDelegate : { + value: null + }, + _rule : { value : null }, @@ -67,6 +71,10 @@ exports.CssStyleRule = Montage.create(Component, { if(this._declaration) { this.declarationComponent.declaration = this._declaration; } + + if(this.focusDelegate) { + this.declarationComponent.focusDelegate = this.focusDelegate; + } } }, prepareForDraw : { -- cgit v1.2.3 From 4332599afffae987a18bb197fcfdd09bc2e94d2b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 30 Apr 2012 13:45:52 -0700 Subject: CSS Style Rule - Add code for changing selectors and showing unapplied rules --- .../css-style-rule.reel/css-style-rule.js | 66 ++++++++++++++-------- 1 file changed, 44 insertions(+), 22 deletions(-) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index d85b5797..ac22878e 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -8,6 +8,9 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.CssStyleRule = Montage.create(Component, { + unappliedClass : { + value: 'unapplied-css-rule' + }, cssText: { value: null }, @@ -17,6 +20,21 @@ exports.CssStyleRule = Montage.create(Component, { focusDelegate : { value: null }, + _applied : { + value: true, + distinct: true + }, + applied : { + get: function() { + return this._applied; + }, + set: function(value) { + if(this._applied === value) { return false; } + + this._applied = value; + this.needsDraw = true; + } + }, _rule : { value : null @@ -44,13 +62,7 @@ exports.CssStyleRule = Montage.create(Component, { }, declarationComponent: { value: null - } , -// declarationNodeName: { -// value: "dl" -// }, -// declarationElement: { -// value: null -// }, + }, _declaration: { value: null }, @@ -65,35 +77,45 @@ exports.CssStyleRule = Montage.create(Component, { condition: { value: false }, - templateDidLoad : { - value: function() { - console.log("css style rule : template did load"); - if(this._declaration) { - this.declarationComponent.declaration = this._declaration; - } + handleChange : { + value: function(e) { if(this.focusDelegate) { - this.declarationComponent.focusDelegate = this.focusDelegate; + this.focusDelegate.handleSelectorChange(this.rule, this.selectorField.value, this); } } }, + + templateDidLoad : { + value: function() { + //console.log("css style rule : template did load"); + } + }, prepareForDraw : { value: function() { - console.log("css style rule : prepare for draw"); - - if(!this.declarationElement) { - ///// Create element to contain declaration - this.declarationElement = document.createElement(this.declarationNodeName); - } + this.selectorField.addEventListener('change', this, false); - if(!this._declaration && this._rule) { + //console.log("css style rule : prepare for draw"); + } + }, + willDraw : { + value: function() { + if(this.applied) { + this.element.removeAttribute('title'); + } else { + this.element.title = "Rule does not apply to selection"; } } }, draw : { value: function() { - console.log("css style rule : draw"); + //console.log("css style rule : draw"); + if(this.applied) { + this.element.classList.remove(this.unappliedClass); + } else { + this.element.classList.add(this.unappliedClass); + } } } }); -- 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 --- .../css-style-rule.reel/css-style-rule.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index ac22878e..d2c81b93 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -86,6 +86,15 @@ exports.CssStyleRule = Montage.create(Component, { } }, + update: { + value: function() { + if(this.cssText !== this.rule.cssText) { + // TODO: add update for selector and stylesheet name + this.declarationComponent.update(); + } + } + }, + templateDidLoad : { value: function() { //console.log("css style rule : template did load"); @@ -93,8 +102,11 @@ exports.CssStyleRule = Montage.create(Component, { }, prepareForDraw : { value: function() { - this.selectorField.addEventListener('change', this, false); - + if(this.rule.type === 'inline') { + this.selectorField.readOnly = true; + } else { + this.selectorField.addEventListener('change', this, false); + } //console.log("css style rule : prepare for draw"); } -- cgit v1.2.3 From 0f56430673fa2e008f9b1c17fca8627251866935 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 1 May 2012 16:24:03 -0700 Subject: CSS Panel - Inline style editing --- .../css-panel/rule-components/css-style-rule.reel/css-style-rule.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index d2c81b93..7b5a736f 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -104,6 +104,7 @@ exports.CssStyleRule = Montage.create(Component, { value: function() { if(this.rule.type === 'inline') { this.selectorField.readOnly = true; + this.declarationComponent.type = 'inline'; } else { this.selectorField.addEventListener('change', this, false); } -- cgit v1.2.3 From 8bea1e0807f36595d762592c030d4810396ada85 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 2 May 2012 15:30:27 -0700 Subject: CSS Panel - Add focus management to styles view delegate --- .../css-panel/rule-components/css-style-rule.reel/css-style-rule.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index 7b5a736f..cfa3e605 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -90,7 +90,7 @@ exports.CssStyleRule = Montage.create(Component, { value: function() { if(this.cssText !== this.rule.cssText) { // TODO: add update for selector and stylesheet name - this.declarationComponent.update(); + //this.declarationComponent.update(); } } }, -- cgit v1.2.3 From a447eaf48ffbaea89cbb229f06e8b5a7e199f77f Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 2 May 2012 17:00:09 -0700 Subject: CSS Panel - Added element highlight on selector field hover --- .../css-style-rule.reel/css-style-rule.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index cfa3e605..7a6a3957 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -85,7 +85,20 @@ exports.CssStyleRule = Montage.create(Component, { } } }, - + handleMouseover: { + value: function(e) { + if(this.focusDelegate) { + this.focusDelegate.handleSelectorHover(this.selectorField.value, 'over'); + } + } + }, + handleMouseout: { + value: function(e) { + if(this.focusDelegate) { + this.focusDelegate.handleSelectorHover(this.selectorField.value, 'out'); + } + } + }, update: { value: function() { if(this.cssText !== this.rule.cssText) { @@ -107,11 +120,12 @@ exports.CssStyleRule = Montage.create(Component, { this.declarationComponent.type = 'inline'; } else { this.selectorField.addEventListener('change', this, false); + this.selectorField.element.addEventListener('mouseover', this, false); + this.selectorField.element.addEventListener('mouseout', this, false); } - //console.log("css style rule : prepare for draw"); - } }, + willDraw : { value: function() { if(this.applied) { -- 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. --- .../css-panel/rule-components/css-style-rule.reel/css-style-rule.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index 7a6a3957..c74502c0 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -103,7 +103,7 @@ exports.CssStyleRule = Montage.create(Component, { value: function() { if(this.cssText !== this.rule.cssText) { // TODO: add update for selector and stylesheet name - //this.declarationComponent.update(); + this.declarationComponent.update(); } } }, -- 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. --- .../css-panel/rule-components/css-style-rule.reel/css-style-rule.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index c74502c0..ac714bfa 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -29,7 +29,7 @@ exports.CssStyleRule = Montage.create(Component, { return this._applied; }, set: function(value) { - if(this._applied === value) { return false; } + if(this._applied === value || value === undefined || value === null) { return false; } this._applied = value; this.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 --- .../css-style-rule.reel/css-style-rule.js | 23 ++++++++++++++++++++++ 1 file changed, 23 insertions(+) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index ac714bfa..71fe8470 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -115,6 +115,8 @@ exports.CssStyleRule = Montage.create(Component, { }, prepareForDraw : { value: function() { + this.selectorField.keyActions = this.keyActions; + if(this.rule.type === 'inline') { this.selectorField.readOnly = true; this.declarationComponent.type = 'inline'; @@ -144,5 +146,26 @@ exports.CssStyleRule = Montage.create(Component, { this.element.classList.add(this.unappliedClass); } } + }, + + keyActions : { + value : { + hint : { + accept : [9,13], // accept hint + stop : [27], // stop editing + next : [40], // cycle to next hint + prev : [38], // cycle to prev hint + revert : [27], // revert value + backsp : [8] // backspace hit + }, + noHint : { + stop : [27,9,13], + next : [40], + prev : [38], + revert : [27], + backsp : [8] + } + }, + distinct: true } }); -- cgit v1.2.3 From d56af1a4716445db28d343182c8bfaf211eb6ab7 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 22 May 2012 11:15:47 -0700 Subject: CSS Panel - Remove console logs --- .../css-panel/rule-components/css-style-rule.reel/css-style-rule.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index 71fe8470..cfe3c24d 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -55,7 +55,7 @@ exports.CssStyleRule = Montage.create(Component, { this.selector = rule.selectorText; this.declaration = rule.style; - console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); + //console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); this._rule = rule; } -- cgit v1.2.3 From efe8f144e9506ce1c611445a1c8e4291ce3d1af7 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 22 May 2012 15:02:38 -0700 Subject: CSS Style Rule - Extract and append class name from selector on first change --- .../css-panel/rule-components/css-style-rule.reel/css-style-rule.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index cfe3c24d..e0ffb1a8 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -8,6 +8,9 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.CssStyleRule = Montage.create(Component, { + addClassNameOnChange : { + value: null + }, unappliedClass : { value: 'unapplied-css-rule' }, -- cgit v1.2.3 From 1fda3cea5f8dced1e14533969722e30b8ea1e6fa Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 29 May 2012 15:28:39 -0700 Subject: CSS Panel - Handle focus after editing selector --- .../rule-components/css-style-rule.reel/css-style-rule.js | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index e0ffb1a8..54181bf3 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -88,6 +88,14 @@ exports.CssStyleRule = Montage.create(Component, { } } }, + handleStop : { + value: function(e) { + if(this.focusDelegate) { + e._event.detail.preventDefault(); + this.focusDelegate.handleSelectorStop(this.rule, this.selectorField.value, this); + } + } + }, handleMouseover: { value: function(e) { if(this.focusDelegate) { @@ -125,6 +133,7 @@ exports.CssStyleRule = Montage.create(Component, { this.declarationComponent.type = 'inline'; } else { this.selectorField.addEventListener('change', this, false); + this.selectorField.addEventListener('stop', this, false); this.selectorField.element.addEventListener('mouseover', this, false); this.selectorField.element.addEventListener('mouseout', this, false); } -- cgit v1.2.3