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 --- js/panels/css-panel/styles-view-delegate.js | 233 ++++++++++++++++++++++++++++ 1 file changed, 233 insertions(+) create mode 100644 js/panels/css-panel/styles-view-delegate.js (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js new file mode 100644 index 00000000..a76d25ad --- /dev/null +++ b/js/panels/css-panel/styles-view-delegate.js @@ -0,0 +1,233 @@ +/* + 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, + Keyboard = require("js/mediators/keyboard-mediator").Keyboard; + +exports.StylesViewMediator = Montage.create(Component, { + newClassPrefix : { + value: "new-class" + }, + stylesController : { + get: function() { + return this.application.ninja.stylesController; + }, + set: function(){ + return; + } + }, + + handleSelectorChange : { + value: function(rule, newSelector, ruleComponent) { + if(newSelector === "") { + //debugger; + ruleComponent.parentComponent.removeRule(ruleComponent); + return false; + } + + rule.selectorText = newSelector; + + ruleComponent.applied = this.ruleListContainer.displayedList.selection.every(function(el) { + return this._doesSelectorTargetElement(newSelector, el); + }, this); + + } + }, + + ///// Add rule button action + handleAddAction : { + value: function(e) { + var selector, + newRule, + applies = true; + + ///// Get selection prefix + if(this.ruleListContainer.displayedList.selection.length > 1) { + selector = this.stylesController.generateClassName(null, true); + } else { + selector = this.stylesController.generateClassName(this.newClassPrefix); + } + + ///// Create the rule with generated selector + newRule = this.application.ninja.stylesController.addRule('.'+selector, ' { }'); + + ///// Add the generated class to each element in selection + ///// and check whether it applies to the element + this.ruleListContainer.displayedList.selection.forEach(function(el) { + this.stylesController.addClass(el, selector); + + if(applies) { + applies = (this._doesSelectorTargetElement('.'+selector, el)); + } + },this); + + ///// Add rule directly to the rule list + this.ruleListContainer.displayedList.component.addRule(newRule).applied = applies; + + } + }, + + _doesSelectorTargetElement : { + value: function doesSelectorTargetElement(selector, element) { + var doc = element.ownerDocument, + matchingEls = Array.prototype.slice.call(doc.querySelectorAll(selector)); + return matchingEls.indexOf(element) !== -1; + } + }, + + ///// Enable/Disable Style when checkbox is clicked + handleStyleToggle : { + value: function(rule, enable, style) { + if(enable) { + this.stylesController.setStyle(rule, style.propertyText, style.valueText, style.priority); + } else { + this.stylesController.deleteStyle(rule, style.propertyText); + } + + this._dispatchChange(); + } + }, + + handlePropertyStop: { + value: function(e, style) { + var key, nextFocus; + + console.log("Handle Style Stop"); + + if(e._event.detail.type === 'keydown') { + key = e._event.detail.keyCode; + + if(key === Keyboard.ENTER || key === Keyboard.TAB) { + e._event.detail.preventDefault(); + + if(e._event.detail.shiftKey) { + nextFocus = style.getSiblingStyle('prev') || style.getSiblingStyle('last'); + nextFocus.valueField.start(); + } else { + style.valueField.start(); + } + } + } + } + }, + handleValueStop: { + value: function(e, style) { + var key, nextFocus + console.log("Handle Value Stop"); + console.log("Editing new style: ", style.editingNewStyle); + + if(e._event.detail.type === 'keydown') { + key = e._event.detail.keyCode; + + if(key === Keyboard.ENTER || key === Keyboard.TAB) { + e._event.detail.preventDefault(); + + if(e._event.detail.shiftKey) { + style.propertyField.start(); + } else { + nextFocus = style.getSiblingStyle('next'); + if(nextFocus) { + nextFocus.propertyField.start(); + } else { + style.treeView.parentComponent.addNewStyleAfter(style); + style.editingNewStyle = false; + setTimeout(function() { + style.getSiblingStyle('next').propertyField.start(); + }, 50); + } + } + } + } + } + }, + handlePropertyChange : { + value: function(rule, property, value, oldProperty, style) { + var browserValue; + + if(style.editingNewStyle) { + return false; + } + + if(property === '') { + style.remove(); + this._dispatchChange(oldProperty, browserValue); + return false; + } + + ///// Remove old property and add new one + this.stylesController.deleteStyle(rule, oldProperty); + browserValue = this.stylesController.setStyle(rule, property, value); + + ///// Mark style as invalid if the browser doesn't accept it + style.invalid = (browserValue === null); + + console.log("BrowserValue: ", browserValue, rule); + + this._dispatchChange(property, browserValue); + } + }, + handleValueChange : { + value: function(rule, property, value, style) { + var browserValue, units; + + if(value === '') { + style.remove(); + this._dispatchChange(property, browserValue); + return false; + } + + ///// Auto-fill units if not provided and units + ///// not previously stored + units = style.getUnits(value); + if(style.units && units === null && parseInt(value)) { + value += style.units; + style.valueField.value = value; + } else if (value !== '0') { + style.units = units; + } + + ///// update value + browserValue = this.stylesController.setStyle(rule, property, value); + + ///// Mark style as invalid if the browser doesn't accept it + style.invalid = (browserValue === null); + + console.log("BrowserValue: ", browserValue, rule); + + this._dispatchChange(property, browserValue); + + if(style.editingNewStyle) { + style.treeView.parentComponent.addNewStyleAfter(style); + style.editingNewStyle = false; + } + } + }, + + handlePaste : { + value: function(e) { + var text = document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text")).trim(); + + if(text.matches(/([a-zA-Z-]+:[a-zA-Z-]+){,1}/)) { + + } + } + }, + + _dispatchChange : { + value: function(property, value) { + this.application.ninja.stage.updatedStage = true; + NJevent('elementChange', { + type : 'cssChange', + data: { + "prop": property, + "value": value + }, + redraw: null + }); + } + } +}); \ No newline at end of file -- 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 --- js/panels/css-panel/styles-view-delegate.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index a76d25ad..7e0987eb 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -9,9 +9,9 @@ var Montage = require("montage/core/core").Montage, Keyboard = require("js/mediators/keyboard-mediator").Keyboard; exports.StylesViewMediator = Montage.create(Component, { - newClassPrefix : { - value: "new-class" - }, + newClassPrefix : { value: "new-class" }, + elementOutlineClass : { value: "nj-element-highlight" }, + stylesController : { get: function() { return this.application.ninja.stylesController; @@ -21,6 +21,17 @@ exports.StylesViewMediator = Montage.create(Component, { } }, + handleSelectorHover : { + value: function(selector, direction) { + var elements = this.stylesController._activeDocument._document.querySelectorAll(selector), + method = (direction === "out") ? "remove" : "add"; + + Array.prototype.slice.call(elements).forEach(function(el) { + el.classList[method](this.elementOutlineClass); + }, this); + } + }, + handleSelectorChange : { value: function(rule, newSelector, ruleComponent) { if(newSelector === "") { -- cgit v1.2.3 From a183eff03cef60840ed360b3c9fc750b923a0a6b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 2 May 2012 17:12:58 -0700 Subject: CSS Panel - Fix issue with wrong style value when re-enabling style. --- js/panels/css-panel/styles-view-delegate.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 7e0987eb..ec0026a1 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -94,7 +94,7 @@ exports.StylesViewMediator = Montage.create(Component, { handleStyleToggle : { value: function(rule, enable, style) { if(enable) { - this.stylesController.setStyle(rule, style.propertyText, style.valueText, style.priority); + this.stylesController.setStyle(rule, style.propertyText, style.browserValue, style.priority); } else { this.stylesController.deleteStyle(rule, style.propertyText); } @@ -203,6 +203,7 @@ exports.StylesViewMediator = Montage.create(Component, { ///// update value browserValue = this.stylesController.setStyle(rule, property, value); + style.browserValue = browserValue; ///// Mark style as invalid if the browser doesn't accept it style.invalid = (browserValue === null); -- cgit v1.2.3 From 560d9255ed1bba04f3dc3f4320307f7d5626bfab Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 3 May 2012 11:49:24 -0700 Subject: CSS Panel - Support showing computed styles --- js/panels/css-panel/styles-view-delegate.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index ec0026a1..ccbfecad 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -49,6 +49,9 @@ exports.StylesViewMediator = Montage.create(Component, { } }, + /// Toolbar Button Actions + /// ----------------------- + ///// Add rule button action handleAddAction : { value: function(e) { @@ -82,6 +85,24 @@ exports.StylesViewMediator = Montage.create(Component, { } }, + handleComputedAction : { + value: function(e) { + var container = this.ownerComponent, + panelToShow = (container.contentPanel === "computed") ? "rules" : "computed"; + + ///// Handle showing and hiding of the add button + if(panelToShow === "computed") { + container.toolbar.hideButton('add'); + } else { + container.toolbar.showButton('add'); + } + + container.contentPanel = panelToShow; + this.ownerComponent.handleSelectionChange(); + } + }, + + _doesSelectorTargetElement : { value: function doesSelectorTargetElement(selector, element) { var doc = element.ownerDocument, -- cgit v1.2.3 From 62131516247e00be3982d6e8aa562e12965dd795 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 3 May 2012 14:23:00 -0700 Subject: Styles delegate - Clean up --- js/panels/css-panel/styles-view-delegate.js | 40 ++++++++++++++++++++++------- 1 file changed, 31 insertions(+), 9 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index ccbfecad..c3bfdc75 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -21,8 +21,15 @@ exports.StylesViewMediator = Montage.create(Component, { } }, + ///// Selector Actions + //// ------------------------------------- + + ///// Show the targeted elements in the document by applying a class + ///// temporarily handleSelectorHover : { value: function(selector, direction) { + if(!selector) { return false; } + var elements = this.stylesController._activeDocument._document.querySelectorAll(selector), method = (direction === "out") ? "remove" : "add"; @@ -32,11 +39,17 @@ exports.StylesViewMediator = Montage.create(Component, { } }, + ///// Apply new selector to the rule + //// Verify that it applies to the selected elements + //// Remove rule if the selector is deleted handleSelectorChange : { value: function(rule, newSelector, ruleComponent) { if(newSelector === "") { - //debugger; ruleComponent.parentComponent.removeRule(ruleComponent); + this.stylesController.deleteRule(rule); + ///// Remove the hover style + this.handleSelectorHover(rule.selectorText, 'out'); + this._dispatchChange(); return false; } @@ -46,9 +59,20 @@ exports.StylesViewMediator = Montage.create(Component, { return this._doesSelectorTargetElement(newSelector, el); }, this); + this._dispatchChange(); + } + }, + + ///// Returns true if the passed-in selector targets the passed-in element + _doesSelectorTargetElement : { + value: function doesSelectorTargetElement(selector, element) { + var doc = element.ownerDocument, + matchingEls = Array.prototype.slice.call(doc.querySelectorAll(selector)); + return matchingEls.indexOf(element) !== -1; } }, + /// Toolbar Button Actions /// ----------------------- @@ -85,6 +109,7 @@ exports.StylesViewMediator = Montage.create(Component, { } }, + ///// Show/hide computed style sub panel handleComputedAction : { value: function(e) { var container = this.ownerComponent, @@ -102,14 +127,8 @@ exports.StylesViewMediator = Montage.create(Component, { } }, - - _doesSelectorTargetElement : { - value: function doesSelectorTargetElement(selector, element) { - var doc = element.ownerDocument, - matchingEls = Array.prototype.slice.call(doc.querySelectorAll(selector)); - return matchingEls.indexOf(element) !== -1; - } - }, + ///// Style event handlers + //// ------------------------------------- ///// Enable/Disable Style when checkbox is clicked handleStyleToggle : { @@ -250,6 +269,9 @@ exports.StylesViewMediator = Montage.create(Component, { } }, + ///// Utilities + //// ------------------------------------- + _dispatchChange : { value: function(property, value) { this.application.ninja.stage.updatedStage = true; -- 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/styles-view-delegate.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index c3bfdc75..71b4a8dd 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -184,7 +184,8 @@ exports.StylesViewMediator = Montage.create(Component, { if(nextFocus) { nextFocus.propertyField.start(); } else { - style.treeView.parentComponent.addNewStyleAfter(style); + //style.parentComponent.parentComponent.addNewStyleAfter(style); + style.parentComponent.parentComponent.addNewStyle(); style.editingNewStyle = false; setTimeout(function() { style.getSiblingStyle('next').propertyField.start(); @@ -253,7 +254,7 @@ exports.StylesViewMediator = Montage.create(Component, { this._dispatchChange(property, browserValue); if(style.editingNewStyle) { - style.treeView.parentComponent.addNewStyleAfter(style); + style.parentComponent.parentComponent.addNewStyle(); style.editingNewStyle = false; } } -- 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/styles-view-delegate.js | 109 ++++++++++++++-------------- 1 file changed, 54 insertions(+), 55 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 71b4a8dd..3f29ba27 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -72,61 +72,6 @@ exports.StylesViewMediator = Montage.create(Component, { } }, - - /// Toolbar Button Actions - /// ----------------------- - - ///// Add rule button action - handleAddAction : { - value: function(e) { - var selector, - newRule, - applies = true; - - ///// Get selection prefix - if(this.ruleListContainer.displayedList.selection.length > 1) { - selector = this.stylesController.generateClassName(null, true); - } else { - selector = this.stylesController.generateClassName(this.newClassPrefix); - } - - ///// Create the rule with generated selector - newRule = this.application.ninja.stylesController.addRule('.'+selector, ' { }'); - - ///// Add the generated class to each element in selection - ///// and check whether it applies to the element - this.ruleListContainer.displayedList.selection.forEach(function(el) { - this.stylesController.addClass(el, selector); - - if(applies) { - applies = (this._doesSelectorTargetElement('.'+selector, el)); - } - },this); - - ///// Add rule directly to the rule list - this.ruleListContainer.displayedList.component.addRule(newRule).applied = applies; - - } - }, - - ///// Show/hide computed style sub panel - handleComputedAction : { - value: function(e) { - var container = this.ownerComponent, - panelToShow = (container.contentPanel === "computed") ? "rules" : "computed"; - - ///// Handle showing and hiding of the add button - if(panelToShow === "computed") { - container.toolbar.hideButton('add'); - } else { - container.toolbar.showButton('add'); - } - - container.contentPanel = panelToShow; - this.ownerComponent.handleSelectionChange(); - } - }, - ///// Style event handlers //// ------------------------------------- @@ -270,6 +215,60 @@ exports.StylesViewMediator = Montage.create(Component, { } }, + /// Toolbar Button Actions + /// ----------------------- + + ///// Add rule button action + handleAddAction : { + value: function(e) { + var selector, + newRule, + applies = true; + + ///// Get selection prefix + if(this.ruleListContainer.displayedList.selection.length > 1) { + selector = this.stylesController.generateClassName(null, true); + } else { + selector = this.stylesController.generateClassName(this.newClassPrefix); + } + + ///// Create the rule with generated selector + newRule = this.application.ninja.stylesController.addRule('.'+selector, ' { }'); + + ///// Add the generated class to each element in selection + ///// and check whether it applies to the element + this.ruleListContainer.displayedList.selection.forEach(function(el) { + this.stylesController.addClass(el, selector); + + if(applies) { + applies = (this._doesSelectorTargetElement('.'+selector, el)); + } + },this); + + ///// Add rule directly to the rule list + this.ruleListContainer.displayedList.component.addRule(newRule).applied = applies; + + } + }, + + ///// Show/hide computed style sub panel + handleComputedAction : { + value: function(e) { + var container = this.ownerComponent, + panelToShow = (container.contentPanel === "computed") ? "rules" : "computed"; + + ///// Handle showing and hiding of the add button + if(panelToShow === "computed") { + container.toolbar.hideButton('add'); + } else { + container.toolbar.showButton('add'); + } + + container.contentPanel = panelToShow; + this.ownerComponent.handleSelectionChange(); + } + }, + ///// Utilities //// ------------------------------------- -- 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/styles-view-delegate.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 3f29ba27..aba8c042 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -246,7 +246,9 @@ exports.StylesViewMediator = Montage.create(Component, { },this); ///// Add rule directly to the rule list - this.ruleListContainer.displayedList.component.addRule(newRule).applied = applies; + this.ruleListContainer.displayedList.component.addRule(newRule, null, applies, function(ruleComponent) { + ruleComponent.selectorField.start(); + }); } }, -- cgit v1.2.3 From d4ce8c2fe42fcbfc36cf4b20ef8de67c6471c241 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 14 May 2012 23:44:47 -0700 Subject: CSSPanel - Add mutli-selection and adding classes to groups of elements --- js/panels/css-panel/styles-view-delegate.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index aba8c042..1b21f460 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -267,7 +267,7 @@ exports.StylesViewMediator = Montage.create(Component, { } container.contentPanel = panelToShow; - this.ownerComponent.handleSelectionChange(); + container.handleSelectionChange(); } }, -- cgit v1.2.3 From 73e98aef1ffa370c196c9c752d58dd4ed5f4faff Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 16 May 2012 14:13:27 -0700 Subject: CSS Panel - Fix issue with adding new style and activating property field --- js/panels/css-panel/styles-view-delegate.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 1b21f460..0b09f2a6 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -78,6 +78,7 @@ exports.StylesViewMediator = Montage.create(Component, { ///// Enable/Disable Style when checkbox is clicked handleStyleToggle : { value: function(rule, enable, style) { + debugger; if(enable) { this.stylesController.setStyle(rule, style.propertyText, style.browserValue, style.priority); } else { @@ -112,7 +113,7 @@ exports.StylesViewMediator = Montage.create(Component, { }, handleValueStop: { value: function(e, style) { - var key, nextFocus + var key, nextFocus; console.log("Handle Value Stop"); console.log("Editing new style: ", style.editingNewStyle); @@ -125,11 +126,11 @@ exports.StylesViewMediator = Montage.create(Component, { if(e._event.detail.shiftKey) { style.propertyField.start(); } else { + nextFocus = style.getSiblingStyle('next'); if(nextFocus) { nextFocus.propertyField.start(); } else { - //style.parentComponent.parentComponent.addNewStyleAfter(style); style.parentComponent.parentComponent.addNewStyle(); style.editingNewStyle = false; setTimeout(function() { @@ -247,7 +248,11 @@ exports.StylesViewMediator = Montage.create(Component, { ///// Add rule directly to the rule list this.ruleListContainer.displayedList.component.addRule(newRule, null, applies, function(ruleComponent) { - ruleComponent.selectorField.start(); + var rC = ruleComponent; + setTimeout(function() { + rC.selectorField.start(); + },50); + }); } -- cgit v1.2.3 From 62a47c22cf5fb76289a50be8e73de1ae8c55c78f Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 16 May 2012 14:59:43 -0700 Subject: CSS Panel - Fix toggling style on/off. --- js/panels/css-panel/styles-view-delegate.js | 9 --------- 1 file changed, 9 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 0b09f2a6..04d0ca09 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -78,7 +78,6 @@ exports.StylesViewMediator = Montage.create(Component, { ///// Enable/Disable Style when checkbox is clicked handleStyleToggle : { value: function(rule, enable, style) { - debugger; if(enable) { this.stylesController.setStyle(rule, style.propertyText, style.browserValue, style.priority); } else { @@ -93,8 +92,6 @@ exports.StylesViewMediator = Montage.create(Component, { value: function(e, style) { var key, nextFocus; - console.log("Handle Style Stop"); - if(e._event.detail.type === 'keydown') { key = e._event.detail.keyCode; @@ -114,8 +111,6 @@ exports.StylesViewMediator = Montage.create(Component, { handleValueStop: { value: function(e, style) { var key, nextFocus; - console.log("Handle Value Stop"); - console.log("Editing new style: ", style.editingNewStyle); if(e._event.detail.type === 'keydown') { key = e._event.detail.keyCode; @@ -163,8 +158,6 @@ exports.StylesViewMediator = Montage.create(Component, { ///// Mark style as invalid if the browser doesn't accept it style.invalid = (browserValue === null); - console.log("BrowserValue: ", browserValue, rule); - this._dispatchChange(property, browserValue); } }, @@ -195,8 +188,6 @@ exports.StylesViewMediator = Montage.create(Component, { ///// Mark style as invalid if the browser doesn't accept it style.invalid = (browserValue === null); - console.log("BrowserValue: ", browserValue, rule); - this._dispatchChange(property, browserValue); if(style.editingNewStyle) { -- cgit v1.2.3 From d278cae39955e9897404f20c22bab567977ac685 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 17 May 2012 16:00:10 -0700 Subject: CSS Panel - comment out paste handler for now --- js/panels/css-panel/styles-view-delegate.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 04d0ca09..e00d7fca 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -199,11 +199,11 @@ exports.StylesViewMediator = Montage.create(Component, { handlePaste : { value: function(e) { - var text = document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text")).trim(); - - if(text.matches(/([a-zA-Z-]+:[a-zA-Z-]+){,1}/)) { - - } +// var text = document.execCommand('insertHTML', null, e._event.clipboardData.getData("Text")).trim(); +// +// if(text.matches(/([a-zA-Z-]+:[a-zA-Z-]+){,1}/)) { +// +// } } }, -- cgit v1.2.3 From 7f0dad901bef6512357a7a768fda1cb3106ac864 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 17 May 2012 19:55:18 -0700 Subject: CSS Panel - Fix style declaration interaction --- js/panels/css-panel/styles-view-delegate.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index e00d7fca..38b0fcc6 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -125,7 +125,7 @@ exports.StylesViewMediator = Montage.create(Component, { nextFocus = style.getSiblingStyle('next'); if(nextFocus) { nextFocus.propertyField.start(); - } else { + } else if(style.dirty) { style.parentComponent.parentComponent.addNewStyle(); style.editingNewStyle = false; setTimeout(function() { @@ -189,11 +189,6 @@ exports.StylesViewMediator = Montage.create(Component, { style.invalid = (browserValue === null); this._dispatchChange(property, browserValue); - - if(style.editingNewStyle) { - style.parentComponent.parentComponent.addNewStyle(); - style.editingNewStyle = false; - } } }, -- cgit v1.2.3 From 13da56e791b7478ad3dbb8162a583a6b2c8c4b6b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 18 May 2012 17:27:31 -0700 Subject: Style Declaration - Handle removing styles Removed sorting and had to put a null check in the style component because the valueText was being set to undefined and causing an error. Check with montage on why that is happening. --- js/panels/css-panel/styles-view-delegate.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 38b0fcc6..b5efc18c 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -145,14 +145,16 @@ exports.StylesViewMediator = Montage.create(Component, { return false; } + ///// Remove old property + this.stylesController.deleteStyle(rule, oldProperty); + if(property === '') { - style.remove(); + style.parentComponent.parentComponent.removeStyle(style.source); this._dispatchChange(oldProperty, browserValue); return false; } - ///// Remove old property and add new one - this.stylesController.deleteStyle(rule, oldProperty); + // now add new property browserValue = this.stylesController.setStyle(rule, property, value); ///// Mark style as invalid if the browser doesn't accept it @@ -166,7 +168,9 @@ exports.StylesViewMediator = Montage.create(Component, { var browserValue, units; if(value === '') { - style.remove(); + ///// Remove old property + this.stylesController.deleteStyle(rule, property); + style.parentComponent.parentComponent.removeStyle(style.source); this._dispatchChange(property, browserValue); return false; } -- cgit v1.2.3 From 9b396f3f4ff51efcabcf218f11f7ead2e85469d2 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 21 May 2012 10:10:03 -0700 Subject: Style Declaration - Fix - if deleting style, don't focus next field --- js/panels/css-panel/styles-view-delegate.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index b5efc18c..79ae35d1 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -92,7 +92,7 @@ exports.StylesViewMediator = Montage.create(Component, { value: function(e, style) { var key, nextFocus; - if(e._event.detail.type === 'keydown') { + if(e._event.detail.type === 'keydown' && !style.deleting) { key = e._event.detail.keyCode; if(key === Keyboard.ENTER || key === Keyboard.TAB) { @@ -112,7 +112,7 @@ exports.StylesViewMediator = Montage.create(Component, { value: function(e, style) { var key, nextFocus; - if(e._event.detail.type === 'keydown') { + if(e._event.detail.type === 'keydown' && !style.deleting) { key = e._event.detail.keyCode; if(key === Keyboard.ENTER || key === Keyboard.TAB) { @@ -149,6 +149,7 @@ exports.StylesViewMediator = Montage.create(Component, { this.stylesController.deleteStyle(rule, oldProperty); if(property === '') { + style.deleting = true; style.parentComponent.parentComponent.removeStyle(style.source); this._dispatchChange(oldProperty, browserValue); return false; @@ -169,6 +170,7 @@ exports.StylesViewMediator = Montage.create(Component, { if(value === '') { ///// Remove old property + style.deleting = true; this.stylesController.deleteStyle(rule, property); style.parentComponent.parentComponent.removeStyle(style.source); this._dispatchChange(property, browserValue); -- cgit v1.2.3 From 1e6f46ba556ca3270c89fb848d93856804dd1cc8 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 21 May 2012 12:40:05 -0700 Subject: CSS Style Component - Moved unit identification to local change handler instead of delegate --- js/panels/css-panel/styles-view-delegate.js | 10 ---------- 1 file changed, 10 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 79ae35d1..a187a702 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -177,16 +177,6 @@ exports.StylesViewMediator = Montage.create(Component, { return false; } - ///// Auto-fill units if not provided and units - ///// not previously stored - units = style.getUnits(value); - if(style.units && units === null && parseInt(value)) { - value += style.units; - style.valueField.value = value; - } else if (value !== '0') { - style.units = units; - } - ///// update value browserValue = this.stylesController.setStyle(rule, property, value); style.browserValue = browserValue; -- cgit v1.2.3 From 154423e60899569a8a0033b2fedca05f3041e3f9 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 21 May 2012 14:48:46 -0700 Subject: CSS Style Declaration - Handle deleting empty style --- js/panels/css-panel/styles-view-delegate.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index a187a702..56727d40 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -142,6 +142,11 @@ exports.StylesViewMediator = Montage.create(Component, { var browserValue; if(style.editingNewStyle) { + if(property === '') { + style.propertyField.value = 'property'; + style.propertyField.isDirty = false; + style.editingNewStyle = false; + } return false; } -- cgit v1.2.3 From 6686f2f0bc3ea1b4f589409c78a99bd07a41e7c3 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 22 May 2012 09:24:39 -0700 Subject: CSS Panel - Add Rule - apply new class after use specifies selector --- js/panels/css-panel/styles-view-delegate.js | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 56727d40..583eb0ba 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -53,6 +53,19 @@ exports.StylesViewMediator = Montage.create(Component, { return false; } + if(!ruleComponent.firstChangeHappened) { + var lastClass = newSelector.substring(newSelector.lastIndexOf('.')+1); + + if(lastClass !== newSelector) { + ///// Add the generated class to each element in selection + ///// and check whether it applies to the element + this.ruleListContainer.displayedList.selection.forEach(function(el) { + this.stylesController.addClass(el, lastClass); + },this); + } + ruleComponent.firstChangeHappened = true; + } + rule.selectorText = newSelector; ruleComponent.applied = this.ruleListContainer.displayedList.selection.every(function(el) { @@ -225,13 +238,13 @@ exports.StylesViewMediator = Montage.create(Component, { ///// Add the generated class to each element in selection ///// and check whether it applies to the element - this.ruleListContainer.displayedList.selection.forEach(function(el) { - this.stylesController.addClass(el, selector); - - if(applies) { - applies = (this._doesSelectorTargetElement('.'+selector, el)); - } - },this); +// this.ruleListContainer.displayedList.selection.forEach(function(el) { +// this.stylesController.addClass(el, selector); +// +// if(applies) { +// applies = (this._doesSelectorTargetElement('.'+selector, el)); +// } +// },this); ///// Add rule directly to the rule list this.ruleListContainer.displayedList.component.addRule(newRule, null, applies, function(ruleComponent) { -- 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/styles-view-delegate.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 583eb0ba..919f6034 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -8,7 +8,7 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, Keyboard = require("js/mediators/keyboard-mediator").Keyboard; -exports.StylesViewMediator = Montage.create(Component, { +exports.StylesViewDelegate = Montage.create(Component, { newClassPrefix : { value: "new-class" }, elementOutlineClass : { value: "nj-element-highlight" }, -- 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 --- js/panels/css-panel/styles-view-delegate.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 919f6034..1644460a 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -53,17 +53,17 @@ exports.StylesViewDelegate = Montage.create(Component, { return false; } - if(!ruleComponent.firstChangeHappened) { - var lastClass = newSelector.substring(newSelector.lastIndexOf('.')+1); + if(ruleComponent.addClassNameOnChange) { + var lastClass = this._getClassNameFromSelector(newSelector); - if(lastClass !== newSelector) { + if(lastClass) { ///// Add the generated class to each element in selection ///// and check whether it applies to the element this.ruleListContainer.displayedList.selection.forEach(function(el) { this.stylesController.addClass(el, lastClass); },this); } - ruleComponent.firstChangeHappened = true; + ruleComponent.addClassNameOnChange = false; } rule.selectorText = newSelector; @@ -75,6 +75,13 @@ exports.StylesViewDelegate = Montage.create(Component, { this._dispatchChange(); } }, + _getClassNameFromSelector : { + value: function(selectorText) { + var results = /.*\.([A-Za-z0-9_-]+)\:?[A-Za-z0-9_"=-]*$/.exec(selectorText); + + return (results) ? results[1] : null; + } + }, ///// Returns true if the passed-in selector targets the passed-in element _doesSelectorTargetElement : { @@ -249,6 +256,9 @@ exports.StylesViewDelegate = Montage.create(Component, { ///// Add rule directly to the rule list this.ruleListContainer.displayedList.component.addRule(newRule, null, applies, function(ruleComponent) { var rC = ruleComponent; + + rC.addClassNameOnChange = true; + setTimeout(function() { rC.selectorField.start(); },50); -- cgit v1.2.3 From 041c7e125386c1add7653ec90f5b882ffa82530d Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 22 May 2012 15:15:28 -0700 Subject: CSS Panel - Fix applying selector to element when selector not changed --- js/panels/css-panel/styles-view-delegate.js | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) (limited to 'js/panels/css-panel/styles-view-delegate.js') diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index 1644460a..5229b92e 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -78,7 +78,6 @@ exports.StylesViewDelegate = Montage.create(Component, { _getClassNameFromSelector : { value: function(selectorText) { var results = /.*\.([A-Za-z0-9_-]+)\:?[A-Za-z0-9_"=-]*$/.exec(selectorText); - return (results) ? results[1] : null; } }, @@ -243,24 +242,16 @@ exports.StylesViewDelegate = Montage.create(Component, { ///// Create the rule with generated selector newRule = this.application.ninja.stylesController.addRule('.'+selector, ' { }'); - ///// Add the generated class to each element in selection - ///// and check whether it applies to the element -// this.ruleListContainer.displayedList.selection.forEach(function(el) { -// this.stylesController.addClass(el, selector); -// -// if(applies) { -// applies = (this._doesSelectorTargetElement('.'+selector, el)); -// } -// },this); - ///// Add rule directly to the rule list this.ruleListContainer.displayedList.component.addRule(newRule, null, applies, function(ruleComponent) { var rC = ruleComponent; + // TODO: use stop event to apply class to element rC.addClassNameOnChange = true; setTimeout(function() { rC.selectorField.start(); + rC.selectorField._preEditValue = ""; },50); }); -- cgit v1.2.3