1 files changed, 2885 insertions, 0 deletions

diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
new file mode 100644
index 00000000..ae7e5c14
--- /dev/null
+++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
@@ -0,0 +1,2885 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var cssPropertyNameList      = require("js/panels/CSSPanel/css-property-name-list").cssPropertyNameList,
+    cssCompletionMap         = require("js/panels/CSSPanel/css-value-completion-map").cssValueCompletionMap,
+    CSS_SHORTHAND_MAP        = require("js/panels/CSSPanel/css-shorthand-map").CSS_SHORTHAND_MAP,
+    keyboardModule           = require("js/mediators/keyboard-mediator").Keyboard,
+    nj                       = require("js/lib/NJUtils.js").NJUtils;
+
+
+
+var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {
+    prepareForDraw: {
+        value: function() {
+            var self = this;
+
+            this.sections = {
+                sheets : {
+                    container : nj.$('nj-section-stylesheets'),
+                    heading   : nj.$('nj-css-sheets-header'),
+                    arrow     : nj.$('nj-css-sheets-arrow'),
+                    doc       : null,
+                    listEl    : nj.$('nj-sheet-list'),
+                    docNameEl : nj.$('nj-current-doc-name'),
+                    collapsed : false,
+                    toolbar   : nj.$('nj-css-stylesheet-toolbar'),
+                    addSheetEl: nj.$('nj-css-add-stylesheet')
+                },
+                styles : {
+                    container : nj.$('nj-section-styles'),
+                    heading   : nj.$('nj-css-styles-header'),
+                    statusMsg : nj.$('nj-status-heading'),
+                    arrow     : nj.$('nj-css-styles-arrow'),
+                    listEl    : nj.$('nj-css-rule-list'),
+                    elNameEl  : nj.$('nj-current-element-name'),
+                    collapsed : false,
+                    currentEl : null,
+                    toolbar   : nj.$('nj-css-styles-toolbar'),
+                    addRuleEl : nj.$('nj-css-add-rule'),
+                    showComputedEl : nj.$('nj-css-show-computed'),
+                    numItemsEl     : nj.$('nj-num-items')
+                }
+            };
+
+            ///// Set up collapsible sub sections
+            ['sheets', 'styles'].forEach(function(section) {
+                var s = section;                
+                self.sections[s].heading.addEventListener('click', function(e) {
+                    self.toggleSectionCollapse(s);
+                }, false);
+            });
+
+            //// Hook into selection manager
+
+            this.eventManager.addEventListener("selectionChange", this, true);
+            this.eventManager.addEventListener("elementChange", this, true);
+            this.eventManager.addEventListener("openDocument", this, true);
+
+            if(this.application.ninja.currentDocument) {
+                this.captureOpenDocument();
+            }
+
+            this.addEventListener('webkitTransitionEnd', this, false);
+            ['sheets', 'styles'].forEach(function(section) {
+                this.sections[section].container.style.height = 'auto';
+                // //console.log('setting height to auto for section "' + section + '".');
+            }.bind(this));
+
+            this._setUpStyleEditMode();
+            this._setUpToolbars();
+        }
+    },
+    captureOpenDocument : {
+        value : function(e) {
+            this.populateStyleSheetList();
+        }
+    },
+    handleWebkitTransitionEnd : {
+        value: function(e) {
+            //console.log('transition end at panel base');
+            e.stopPropagation();
+        }
+    },
+
+    populateStyleSheetList: {
+        value: function() {
+            this.sections.sheets.doc = this.application.ninja.currentDocument._document;
+            var styleTagCount = 0,
+                sect          = this.sections.sheets,
+                sheetsArray   = nj.toArray(sect.doc.styleSheets),
+                listEl        = sect.listEl,
+                contEl        = sect.container,
+                userDocName   = nj.getFileNameFromPath(sect.doc.defaultView.location.href),
+                self          = this;
+            
+            ///// Set current document name in Stylesheets section header
+            nj.empty(sect.docNameEl).appendChild(nj.textNode(' - ' + userDocName));
+            
+            ///// LOOP through stylesheet list
+            ///// -------------------------------------------------------
+            sheetsArray.forEach(function(sheet, index) {
+                var isStageStyleSheet = (sheet.ownerNode.id === this._stageStyleSheetId),
+                    isDefaultStyleSheet = (sheet.ownerNode.id === this._defaultStyleSheetId),
+                    sheetObj;
+                    
+                if(!isStageStyleSheet) {
+                    sheetObj = new NJStyleSheet(sheet, index);
+                    if(isDefaultStyleSheet) {
+                        sheetObj.isProtected = sheetObj.isCurrent = true;
+                        this.currentStyleSheet = this.defaultStyleSheet = sheetObj;
+                    }                 
+                    
+                    //// Add Default stylesheet selection
+                    sheetObj.sheetNameEl.addEventListener('click', function(e) {
+                        //console.log('clicking sheet');
+                        e.preventDefault();
+                        //e.stopPropagation();
+                        self.currentStyleSheet = sheetObj;
+                    }, false);
+                    
+                    sheetObj.deleteEl.addEventListener('click', function(e) {
+                        if(sheetObj.isCurrent) {
+                            self.defaultStyleSheet.makeCurrent();
+                        }
+                    }, false);
+                    
+                    sheetObj.render(listEl);
+                }
+
+                
+            }, this);
+            ///// ________________________________________________________
+            
+            ///// save height of content, and convert height from "auto" to pixels
+            //sect.height = contEl.style.height = nj.height(contEl);
+            
+            
+            
+            //contEl.style.webkitTransition = 'all 0.15s ease-out';
+            
+        }
+    },
+    clearStyleSheetList : {
+        value: function() {
+            nj.empty(this.sections.sheets.listEl);
+        }
+    },
+    _preventAdvanceToNext : { // don't advance if there's an error on stop edit
+        value: false
+    },
+    _setUpStyleEditMode: {
+        value: function() {
+            var self = this;
+            ///// Add onchange event to NJCSSStyle
+            NJCSSStyle.prototype.onStyleChange.push(function() {
+                self._stageUpdate();
+            });
+            
+            ///// Add some NJEditable functionality
+            NJEditable.prototype.onStartEdit.push(function(e) {
+                if(this.isSelector && this.el.nodeContent === 'element.style') {
+                    return;
+                }
+                var njStyle = this.el.parentNode.njcssstyle;
+                // //console.log('added start edit');
+                this.el.parentNode.classList.add('nj-editing');
+                if(this.el.nodeName === "DD") {                    
+                    this.el.parentNode.classList.add('nj-editing-val'); // controls wrapping of text
+                    if(cssCompletionMap[njStyle.property]) {
+                        this.suggestions = cssCompletionMap[njStyle.property];
+                    }
+                }
+            });
+            NJEditable.prototype.onStopEdit.push(function(e) {
+                var nextEl      = this.el,
+                    isAddButton = false,
+                    autoSuggestArray = null,
+                    nextEditable, sibling, njStyle, isAddBtn;
+
+                this.el.parentNode.classList.remove('nj-editing');
+                this.el.parentNode.classList.remove('nj-editing-val');
+
+                if(this.isSelector) {
+                    if(e && [9,13].indexOf(e._event.keyCode) !== -1) {
+                        // console.log('selector onStopEdit function');
+                        var propertyEl = nj.children(this.el.nextSibling.firstChild, function(item){
+                            return item.nodeName === 'DT';
+                        })[0];
+                        if(propertyEl.parentNode.njcssstyle.activate) {
+                            ///// still the Add button
+                            propertyEl.parentNode.njcssstyle.activate.bind(propertyEl)();
+                            delete propertyEl.parentNode.njcssstyle.activate;
+                        } else {
+                            nextEditable = propertyEl.njedit || new NJEditable(propertyEl, null, self.CSS_PROPERTY_NAMES);
+                            nextEditable.startEditable();
+                        }
+
+                    }
+                    return false;
+                }
+
+                ////console.log('NJEditable onStopEdit callback');
+                       
+                if(e && [9,13,186].indexOf(e._event.keyCode) !== -1) { // if the user is tabbing between styles
+                    e.preventDefault();
+                    sibling = (e._event.keyCode === 9 && e._event.shiftKey) ? ['previousSibling', 'lastChild'] : ['nextSibling', 'firstChild'];
+                    // //console.log('enter pressed - skip to next editable.');
+                    // move to the next editable dt/dd elements