From a5ee11857f923d3e49b44c0a8c480e9d0b026d5b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 22 Feb 2012 23:18:12 -0800 Subject: CSS Panel Update --- js/controllers/styles-controller.js | 11 ++++++++-- js/lib/NJUtils.js | 10 +++++---- .../PanelContainer.reel/PanelContainer.js | 4 +++- js/panels/css-panel/css-panel.reel/css-panel.html | 4 ++-- .../css-panel/style-sheet.reel/style-sheet.html | 3 ++- .../css-panel/style-sheet.reel/style-sheet.js | 8 ++++--- .../style-sheets-view.reel/style-sheets-view.html | 25 +++++++++++++++------- .../style-sheets-view.reel/style-sheets-view.js | 8 +++++-- .../styles-view-container.html | 8 ++++--- 9 files changed, 55 insertions(+), 26 deletions(-) diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 44ca50e1..aa5a4e7f 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -94,11 +94,18 @@ var stylesController = exports.StylesController = Montage.create(Component, { // Returns null if sheet not found (as in non-ninja projects) // Setter will handle null case this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID); - - //debugger; + + this.userStyleSheets = nj.toArray(document._document.styleSheets).filter(function(sheet) { + return sheet !== this._stageStylesheet; + }, this); + + NJevent('styleSheetsReady', this); }, enumerable : false }, + userStyleSheets : { + value : null + }, _stageStylesheet : { value : null }, diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index 887743c5..49dfd706 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js @@ -19,16 +19,18 @@ exports.NJUtils = Object.create(Object.prototype, { ///// Quick "getElementById" $ : { - value: function(id) { - return document.getElementById(id); + value: function(id, doc) { + doc = doc || document; + return doc.getElementById(id); } }, ///// Quick "getElementsByClassName" which also returns as an Array ///// Can return as NodeList by passing true as second argument $$ : { - value: function(className, asNodeList) { - var list = document.getElementsByClassName(className); + value: function(className, asNodeList, doc) { + doc = doc || document; + var list = doc.getElementsByClassName(className); return (asNodeList) ? list : this.toArray(list); } }, diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js index b8223471..db0f494b 100755 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js @@ -16,6 +16,7 @@ var ComponentsPanel = require("js/panels/Components/ComponentsPanel").Components var ProjectPanel = require("js/panels/Project/ProjectPanel").ProjectPanel; var MaterialsPanel = require("js/panels/Materials/MaterialsPanel").MaterialsPanel; var PresetsPanel = require("js/panels/presets/presets-panel").PresetsPanel; +var CSSPanelNew = require("js/panels/css-panel/css-panel-container").CSSPanelContainer; exports.PanelContainer = Montage.create(Component, { lastOffset: { @@ -45,7 +46,7 @@ exports.PanelContainer = Montage.create(Component, { }, initPanelOrder: { - value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel'] + value: ['CSSPanelNew','PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel'] }, panelOrder: { @@ -101,6 +102,7 @@ exports.PanelContainer = Montage.create(Component, { this.addEventListener("change@appModel.CSSPanel", this, false); this.addEventListener("change@appModel.MaterialsPanel", this, false); this.addEventListener("change@appModel.PresetsPanel", this, false); + this.addEventListener("change@appModel.CSSPanelNew", this, false); } }, diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html index cc1876c3..86bfbbb7 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.html +++ b/js/panels/css-panel/css-panel.reel/css-panel.html @@ -26,9 +26,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot }, "stylesViewContainer": { "module" : "js/panels/css-panel/styles-view-container.reel", - "name": "StyleSheetView", + "name": "StylesViewContainer", "properties": { - "element": {"#": "css-styles-view" } + "element": {"#": "styles-view-container" } } } } diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html index 4fb94335..43ffec6f 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html @@ -20,7 +20,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "module": "montage/ui/dynamic-text.reel", "name": "DynamicText", "properties": { - "element": {"#": "sheet-name"} + "element": {"#": "sheet-name"}, + "defaultText": "Style sheet" }, "bindings": { "value": { diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js index daa614c2..a4fe5960 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -34,19 +34,21 @@ exports.StyleSheet = Montage.create(Component, { this._name = text; } }, - _styleSheet : { + _source : { value: null }, - styleSheet : { + source : { get: function() { - return this._styleSheet; + return this._source; }, set: function(sheet) { + console.log('sheet being set'); if(sheet.href) { this.name = sheet.href.substring(sheet.href.lastIndexOf('/')); } else { this.name = 'Style Tag'; } + this._source = sheet; } } }); \ No newline at end of file diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html index 78836f21..d1dbfa2b 100644 --- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html @@ -16,22 +16,31 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "element" : {"#" : "style-sheet-view-container"} } }, + "arrayController" : { + "module" : "montage/ui/controller/array-controller", + "name": "ArrayController", + "bindings": { + "content": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "styleSheets", + "oneway": true + } + } + }, "styleSheetList": { "module" : "montage/ui/list.reel", "name": "List", "properties": { - "element": {"#": "sheet-list" } - }, - "bindings": { - "content": { - "boundObject": {"@": "owner" }, - "boundObjectPropertyPath": "styleSheets" - } + "element": {"#": "sheet-list" }, + "contentController": {"@": "arrayController"} } }, "sheet": { "module": "js/panels/css-panel/style-sheet.reel", "name": "StyleSheet", + "properties": { + "element": {"#": "sheet-item"} + }, "bindings": { "source": { "boundObject": {"@": "styleSheetList"}, @@ -61,7 +70,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot