From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001 From: Pierre Frisch Date: Thu, 22 Dec 2011 07:25:50 -0800 Subject: First commit of Ninja to ninja-internal Signed-off-by: Valerio Virgillito --- js/panels/CSSPanel/CSSPanel.js | 53 + .../CSSPanel/CSSPanelBase.reel/CSSPanelBase.css | 464 ++++ .../CSSPanel/CSSPanelBase.reel/CSSPanelBase.html | 64 + .../CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | 2885 ++++++++++++++++++++ .../ComputedStyleSubPanel.html | 48 + .../ComputedStyleSubPanel.js | 192 ++ .../computed-style-sub-panel.css | 62 + js/panels/CSSPanel/css-property-name-list.js | 336 +++ js/panels/CSSPanel/css-shorthand-map.js | 77 + js/panels/CSSPanel/css-value-completion-map.js | 404 +++ 10 files changed, 4585 insertions(+) create mode 100644 js/panels/CSSPanel/CSSPanel.js create mode 100644 js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css create mode 100644 js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html create mode 100644 js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js create mode 100644 js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html create mode 100644 js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js create mode 100644 js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css create mode 100644 js/panels/CSSPanel/css-property-name-list.js create mode 100644 js/panels/CSSPanel/css-shorthand-map.js create mode 100644 js/panels/CSSPanel/css-value-completion-map.js (limited to 'js/panels/CSSPanel') diff --git a/js/panels/CSSPanel/CSSPanel.js b/js/panels/CSSPanel/CSSPanel.js new file mode 100644 index 00000000..94860b30 --- /dev/null +++ b/js/panels/CSSPanel/CSSPanel.js @@ -0,0 +1,53 @@ +/* +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, + PanelBase = require("js/panels/PanelBase").PanelBase; + +var CSSPanelBase = require("js/panels/CSSPanel/CSSPanelBase.reel").CSSPanelBase; + +exports.CSSPanel = Montage.create(PanelBase, { + id : {value : "cssPanel", writable:true, enumerable:true, configurable:true}, + panelName : {value : "CSS", writable:true, enumerable:true, configurable:true}, + panelHeaderID : {value : "cssPanelHeader", writable:true, enumerable:true, configurable:true}, + disclosureIconID : {value : "cssPanelDisclosureIcon", writable:true, enumerable:true, configurable:true}, + closeButtonID : {value : "cssPanelCloseButton", writable:true, enumerable:true, configurable:true}, + panelContentID : {value : "cssPanelContent", writable:true, enumerable:true, configurable:true}, + + init : { + enumerable:true, + value : function (){ + this.minHeight = 300; + this.contentHeight = 300; + this.defaultHeight= 300; + + /* OLD WAY -- Removing the temporary div + // TODO: Remove this comment once this is tested. + + var panelContainer = document.createElement("div"); + this._cssPanelBase = CSSPanelBase.create(); + this._cssPanelBase.element = panelContainer; + + this.content = this._cssPanelBase; + this._cssPanelBase.needsDraw = true; + */ + //debugger; + this.content = CSSPanelBase.create(); + } + }, + reinit : { + value : function() { + this._cssPanelBase.clearStyleSheetList(); + this._cssPanelBase.clearCSSRules(); + this._cssPanelBase.populateStyleSheetList(); + } + }, + _cssPanelBase : { + enumerable: true, + value: null, + writable:true + } +}); \ No newline at end of file diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css new file mode 100644 index 00000000..ff70b5b6 --- /dev/null +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css @@ -0,0 +1,464 @@ +/* + 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. + */ + +.css_panel { + background-color: #FFF; + display: -webkit-box; + -webkit-box-orient: vertical; + height:100%; +} +.nj-section-header { + background-color: #333; + border-top: 1px solid #3D3D3D; + color: #FFF; + cursor: default; + font-size: 12px; + font-weight: normal; + height: 16px; + margin: 0; + padding: 4px 0 2px 10px; + vertical-align: top; + -webkit-box-flex: 0; + -webkit-user-select: none; +} +#nj-status-heading { + color: #CCC; + float: right; + margin-right: 15px; +} +#nj-css-styles-header { + box-shadow: 0 1px 4px rgba(0,0,0,0.25); + position: relative; +} +#nj-section-stylesheets { + -webkit-box-flex: 0; + background-color: #474747; + color: #FFF; + max-height: 68px; + overflow-y: scroll; +} +#nj-section-styles { + background-color: #FFF; + font-family: monospace; + overflow-y: scroll; + -webkit-box-orient: vertical; +} +.nj-sub-panel { + color: #333; + padding: 0; + overflow: hidden; + opacity: 1; + -webkit-box-flex: 1; +} +.nj-sub-panel.closed { + opacity: 0; +} +.panelDisclosureIcon { + position: relative; + top: -2px; +} +.panelDisclosureIcon.closed { + -webkit-transform: rotate(-90deg); +} +.nj-sub-panel ul { + list-style-type: none; + margin: 4px 0 5px; + padding: 0; +} +/* ---------------------------------------- + CSS Stylesheet List +---------------------------------------- */ +#nj-sheet-list li { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89%2BbN%2FrXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz%2FSMBAPh%2BPDwrIsAHvgABeNMLCADATZvAMByH%2Fw%2FqQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf%2BbTAICd%2BJl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA%2Fg88wAAKCRFRHgg%2FP9eM4Ors7ONo62Dl8t6r8G%2FyJiYuP%2B5c%2BrcEAAAOF0ftH%2BLC%2BzGoA7BoBt%2FqIl7gRoXgugdfeLZrIPQLUAoOnaV%2FNw%2BH48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl%2FAV%2F1s%2BX48%2FPf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H%2FLcL%2F%2Fwd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s%2BwM%2B3zUAsGo%2BAXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93%2F%2B8%2F%2FUegJQCAZkmScQAAXkQkLlTKsz%2FHCAAARKCBKrBBG%2FTBGCzABhzBBdzBC%2FxgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD%2FphCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8%2BQ8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8%2BxdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR%2BcQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI%2BksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG%2BQh8lsKnWJAcaT4U%2BIoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr%2Bh0uhHdlR5Ol9BX0svpR%2BiX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK%2BYTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI%2BpXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q%2FpH5Z%2FYkGWcNMw09DpFGgsV%2FjvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY%2FR27iz2qqaE5QzNKM1ezUvOUZj8H45hx%2BJx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4%2FOBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up%2B6Ynr5egJ5Mb6feeb3n%2Bhx9L%2F1U%2FW36p%2FVHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm%2Beb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw%2B6TvZN9un2N%2FT0HDYfZDqsdWh1%2Bc7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc%2BLpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26%2FuNu5p7ofcn8w0nymeWTNz0MPIQ%2BBR5dE%2FC5%2BVMGvfrH5PQ0%2BBZ7XnIy9jL5FXrdewt6V3qvdh7xc%2B9j5yn%2BM%2B4zw33jLeWV%2FMN8C3yLfLT8Nvnl%2BF30N%2FI%2F9k%2F3r%2F0QCngCUBZwOJgUGBWwL7%2BHp8Ib%2BOPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo%2Bqi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt%2F87fOH4p3iC%2BN7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi%2FRNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z%2Bpn5mZ2y6xlhbL%2BxW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a%2FzYnKOZarnivN7cyzytuQN5zvn%2F%2FtEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1%2B1dT1gvWd%2B1YfqGnRs%2BFYmKrhTbF5cVf9go3HjlG4dvyr%2BZ3JS0qavEuWTPZtJm6ebeLZ5bDpaql%2BaXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO%2FPLi8ZafJzs07P1SkVPRU%2BlQ27tLdtWHX%2BG7R7ht7vPY07NXbW7z3%2FT7JvttVAVVN1WbVZftJ%2B7P3P66Jqun4lvttXa1ObXHtxwPSA%2F0HIw6217nU1R3SPVRSj9Yr60cOxx%2B%2B%2Fp3vdy0NNg1VjZzG4iNwRHnk6fcJ3%2FceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w%2B0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb%2B%2B6EHTh0kX%2Fi%2Bc7vDvOXPK4dPKy2%2BUTV7hXmq86X23qdOo8%2FpPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb%2F1tWeOT3dvfN6b%2FfF9%2FXfFt1%2Bcif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v%2B3Njv3H9qwHeg89HcR%2FcGhYPP%2FpH1jw9DBY%2BZj8uGDYbrnjg%2BOTniP3L96fynQ89kzyaeF%2F6i%2FsuuFxYvfvjV69fO0ZjRoZfyl5O%2FbXyl%2FerA6xmv28bCxh6%2ByXgzMV70VvvtwXfcdx3vo98PT%2BR8IH8o%2F2j5sfVT0Kf7kxmTk%2F8EA5jz%2FGMzLdsAAAAgY0hSTQAAeiUAAICDAAD5%2FwAAgOkAAHUwAADqYAAAOpgAABdvkl%2FFRgAAAKJJREFUeNrUU7ERwyAMfOU8BDUrxNukcCf3HsQ96SgyiqnwCq69xadKLtiYAqr8nQr%2BBNKLl5BEC25oRPMDXXJagek1FTXNj1lw%2FyFIfkNVuSwLc1BVMhKMTO50xwrGGGzbVikBwL7v2cRhGDA%2BRzp1cjlEp0689w1DPEip%2BsZSFx8Z1T7IdXUpwVp74kIIJ06SXViBfuyLRoouJkaS%2F1%2Bm9wA1r162GS72SwAAAABJRU5ErkJggg%3D%3D); + background-position: 0 3px; + background-repeat: no-repeat; + border-bottom: 1px solid #505050; + margin: 1px 0 1px 10px; + padding: 4px 0 3px; +} +#nj-sheet-list input[type="checkbox"] { + margin: 1px 3px 0 2px; +} +#nj-sheet-list .nj-css-disabled input[type="checkbox"] { + margin-top: 2px; +} +#nj-sheet-list .nj-css-sheetname { + color: #FFF; + display: inline-block; + margin-right: 4%; + width: 30%; + white-space: nowrap; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; +} +.nj-css-default-sheet .nj-css-sheetname { + font-weight: bold; +} +#nj-sheet-list label { + float: right; + margin-right: 4px; +} +#nj-sheet-list input[type="text"] { + margin-top: -2px; + float: right; + height: 11px; + width: 29%; +} +.nj-sheet-delete { + color: #FFF; + float: right; + height: 12px; + margin-left: 5px; + text-decoration: none; + width: 12px; +} +.nj-css-protected-sheet .nj-sheet-delete { + visibility: hidden; +} +.nj-sheet-delete:after { + content: "\2716"; + opacity: 0.7; +} +.nj-sheet-delete:hover:after { + opacity: 1; +} +#nj-sheet-list li:hover, #nj-sheet-list .nj-css-disabled { + background: none; +} +#nj-sheet-list li .nj-css-dirty-marker { + color: #BF3B3B; + visibility: hidden; +} +#nj-sheet-list li span.nj-css-dirty { + visibility: visible; +} +/* ---------------------------------------- + CSS Rule List +---------------------------------------- */ +.nj-css-rule-list { + -webkit-box-flex: 1; +} +.nj-css-rule-list li { + border-top: 1px solid #CCC; + padding: 6px; +} +.nj-css-rule-list li:first-child { + padding-top: 0; + border-style: none; +} + +.nj-css-rule-list li:after { + content: "}"; +} +.nj-css-rule-list li.nj-css-rule-unapplied { + background-color: #F4F4F4; + text-shadow: 0 1px 0 #FFF; +} +.nj-css-rule-list li.nj-css-rule-unapplied .nj-css-selector:not(.nj-editable-focus) { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAMtJREFUGJV1kM0KAXEUxc/SWh7MM0zJE3gQCxM2EpJ8bEiNjWHhBWYjYkUkRdQoGde5f2Q03PrV6ZzTrXuB0MgQiU0ba0U1/k3gwBYXoqj+WeKG2LaBgwxYJEbTixa7yMyLLPlLw6xATS9SXDWx25cZ7sYG1ep9b3OR8h3cTyUWtyMylnMNcqGn2WdbHQs94FqFnPtxg2r1NHsfkTx0EMiEG7IMpy2D0fSOPWbsgD/zzEtoik323hP75THTDvJpVHIW5I1t4aaEPe08AF+CuEXWXJtHAAAAAElFTkSuQmCC); + background-repeat: no-repeat; + background-position: 0 1px; + padding-left: 12px; +} +.nj-css-rule-list dt:hover, .nj-css-rule-list dd:hover { + background-color: #FFDECC; +} +.nj-css-rule-list .nj-editable-focus:hover { + background: transparent; +} +/* ---------------------------------------- + CSS Style List +---------------------------------------- */ +.nj-css-style-list { + padding: 0; + margin: 0; +} +.nj-css-style-list > div { + overflow: hidden; + /*padding-left: 14px;*/ + text-overflow: ellipsis; + white-space: nowrap; +} +.nj-css-style-list dt, .nj-css-style-list dd { + border: 1px solid rgba(0,0,0,0); + border-radius: 2px; + margin: 0; + outline: none; + padding: 0 2px; +} +.nj-css-style-list dt { + display: inline-block; + color: rgb(200,0,0); + max-width: 68%; + overflow: hidden; + text-overflow: ellipsis; +} +.nj-css-style-list dd { + display: inline; +} + +/* ---------------------------------------- + Selector Styles +---------------------------------------- */ +.nj-css-selector { + display: inline-block; + font-weight: bold; + padding: 0 2px; + outline: none; +} +.nj-css-selector:after { + content: " {"; + font-weight: normal; +} +.nj-css-selector.nj-editable-focus { + position: relative; +} +.nj-css-rule-list .nj-css-selector.nj-editable-focus:after { + position: absolute; +} + + +#nj-section-styles dt:after { + color: #333; + content: ":"; +} +#nj-section-styles dd:after { + content: ";"; +} +.nj-sheet-link { + color: #333; + float: right; + margin-left: 15px; + position: relative; + top: -2px; +} +.nj-sheet-link:hover { + color: #666; +} +.nj-css-rule-list input[type="checkbox"], #nj-sheet-list input[type="checkbox"] { + float: left; + height: 8px; + vertical-align: middle; +} +.nj-css-rule-list input[type="checkbox"]:checked, +#nj-sheet-list input[type="checkbox"]:checked, +.nj-css-rule-list dl div.nj-css-error input[type="checkbox"], +.nj-css-rule-list dl div.nj-css-no-checkbox input[type="checkbox"] { + visibility: hidden; +} +.nj-css-rule-list dl > div:hover [type="checkbox"], #nj-sheet-list li:hover input[type="checkbox"] { + visibility: visible; +} +.nj-css-disabled { + opacity: 0.5; +} +.nj-css-rule-list .nj-css-add-style *:not(dt) { + opacity: 0; +} +.nj-css-rule-list .nj-css-add-style { + margin-bottom: -2px; +} +#nj-section-styles .nj-css-rule-list .nj-css-add-style dt { + background-color: #EAEAEA; + border: 1px solid #CCC; + border-radius: 7px; + box-shadow: inset 0 0 1px #FFF; + color: #333; + cursor: pointer; + display: inline-block; + font-family: 'Droid Sans', sans-serif; + margin: 0 7px 0 2px; + padding: 1px 5px 0; + text-align: center; + text-shadow: 0 1px #FFF; + width: 30px; +} +.nj-css-rule-list .nj-css-add-style dt:after { + display: none; +} +#nj-section-styles .nj-css-add-style dt:hover { + background-color: #F2F2F2; + box-shadow: inset 0 0 5px #FFF; +} +#nj-section-styles .nj-css-add-style dt:active { + background-color: #DDD; + box-shadow: inset 0 0 5px #BFBFBF; + border-color: #AAA; +} +#nj-section-styles .nj-css-add-style.trans * { + -webkit-transition: all .09s ease-out; +} +#nj-section-styles .nj-css-add-style.trans dt { + background-color: #FFF; + border-radius: 2px; + border: 1px solid #999; + box-shadow: 1px 1px 1px #CCC; + width: 51px; + font-family: monospace; + -webkit-animation-name: morph; + -webkit-animation-duration: .09s; + -webkit-animation-direction: alternate; + -webkit-animation-timing-function: ease-out; + -webkit-transform: translateZ(0) + text-overflow: clip; +} +.nj-css-rule-list .nj-css-add-style.trans dt:after { + opacity: 1; +} +.nj-css-rule-list .nj-css-add-style.trans *:not(dt) { + opacity: 1; +} +/* ---------------------------------------- + Toolbar Styles +---------------------------------------- */ +.nj-css-toolbar { + background-color: #474747; + height: 22px; + -webkit-box-flex: 0; + border-top: 1px solid #505050; + border-bottom: 1px solid #333; + position: relative; +} +.nj-css-toolbar.nj-css-computed-on, #nj-css-stylesheet-toolbar { + box-shadow: 0 4px 8px 0px rgba(0,0,0,0.75); /*0 -1px 1px 0px #333;*/ +} +.nj-css-toolbar > a { + background-repeat: no-repeat; + border-radius: 4px; + height: 16px; + margin: 3px 5px 0 0; + padding: 0 2px; + opacity: .85; + text-indent: -9999999px; + width: 16px; +} +.nj-css-toolbar #nj-css-add-rule, .nj-css-toolbar #nj-css-add-stylesheet { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1%2BjfqAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8%2FL5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N%2BQWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE%2BCDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9%2FNocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A%2FhXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V%2FpHDBYY1hrFGNuayJsym740u2C%2B02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT%2F%2FID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs%2BZmX8xlz7PPryjYVPiuWLskq3RV2ZsK%2FcqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta%2Bx%2F%2B5Em0mzJ%2F%2BdGj%2Ft8AyNmf2zvs9JmHt6vvmCpYtEFrcu%2BbYsc%2Fm9lSGrTq9xWbtvveWGbZtMNm%2FZarJt%2Bw6rnft3u%2B45uy9s%2F4ODOYd%2BHmk%2FJn58xUnrU%2BfOJJ%2F9dX7SRe1LR68kXv13fc5Nm1t379TfU75%2F4mHeY7En%2B59lvhB5efB1%2Flv5dxc%2BNH0y%2Ffzq64Lv4T8Ffp360%2FrP8f9%2FAA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA%2Bf8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADPSURBVHjadNC7TQNREIXh75oNCIlWG0JC7BJoAmrAIVAAIkRCog9ThFtwCYTrtS2vBBKbDcG%2BbLD%2F5GpGc885M8nAItZga5YcYx4tD6Fw3ncn40Aa36mLIwM94YRC%2FFHqqkVshCRwCz6QhGRjloZo%2F1nFYygmTlC1ptNsbOTgy7czsJYosq2nLuK1e%2Fx4o0u1Qza7cuMS5s%2BVXC68v4xWmUbZFzkqiUatAWWmtmzPkrpoqC27b82BQoU1NEqfvcXeJV%2FB7mDdvYG7Ie4%2BvwMA%2BFNeHV16KUYAAAAASUVORK5CYII%3D); + float: right; +} +.nj-css-toolbar > a:hover { + opacity: 1; +} +#nj-css-show-computed { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMTYyOTg1RURFNTIxMUUwQkQyRkUwNDk1QUNCRDQ2NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMTYyOTg1RkRFNTIxMUUwQkQyRkUwNDk1QUNCRDQ2NiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAxNjI5ODVDREU1MjExRTBCRDJGRTA0OTVBQ0JENDY2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxNjI5ODVEREU1MjExRTBCRDJGRTA0OTVBQ0JENDY2Ii8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BQa86dAAAAgdJREFUeNpiZmBgEABiFSAWAuIfQPwPKsYPZf9mIAAM9u%2Ff%2F3%2Fp0qV3oQbxFBQU5M6dO%2FcQkG0BxFz4NDNBbWP48eMHN5CSBGLhFy9eyCkpKdlOmDBhNpCvh88QkAF%2FQQw2NjZuX1%2FfxNDQ0AIREREbkJi%2Bvr7OxIkTZwGZaiAl2AxgBGLtVatW7RMVFRXDZcvBgwcnNDQ01AKZX9DlmIH417Vr186ws7NzPn78%2BNW9e%2Feevnz5kkFGRgYUiAyXLl26XFFR0QBkvoC5FpsrOIFYHIjlQX4OCgqaAgrYvr6%2B60C%2BHRBzQ73LAqVRwuA%2FEH8H4pdA%2FBCI7wO98%2FjRo0dPgE4%2FYmJi8hcalXxxcXG2QFoKOTyYsTnpPxCIiYkZRkREBL5%2B%2FfruuXPnzgKFJSorK5cpKCioHDt27BqQ%2FwnkJSYs%2Bn8DNTyFuozh7du3skBKEZRGvn37xuft7Z2Ym5sLChMlkEtYsDkAFLDMzMx%2FQBwzMzMvHR0d3d%2B%2Ff3Pw8vKCUisDMIzCgfK%2FgemkghFHzAkkJSXlxsbGNuGK2p9A4OHhoc%2BCQ%2F7LvHnz5j98%2BPCepKSk1r9%2F%2F5g%2Ff%2F4sBkxkYbKystzAVPt7ypQpIMPfEUrmHKDQhyZ3mwULFjzZsWPHTy8vrxogXxpXJOACSsAMdxro%2FwJkzYwkGMANdc0PWBSCBAECDAAwy7PLmtswugAAAABJRU5ErkJggg%3D%3D); + background-position: 2px 0; + float: left; + margin-left: 7px; +} +#nj-css-show-computed:hover { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMTYyOTg1QURFNTIxMUUwQkQyRkUwNDk1QUNCRDQ2NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMTYyOTg1QkRFNTIxMUUwQkQyRkUwNDk1QUNCRDQ2NiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc3QzUzRkVCREUzQTExRTBCRDJGRTA0OTVBQ0JENDY2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc3QzUzRkVDREUzQTExRTBCRDJGRTA0OTVBQ0JENDY2Ii8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bz4s2nAAAAfxJREFUeNpiZmBgEABiFSAWAuIfQPwPKsYPZf9mIAAM%2FgPBnTt37kIN4pk2bVruxYsXDwHZFkDMhU8zE9Q2hm%2FfvnEDKUkgFr5%2F%2F76cnp6e7YEDB2YD%2BXr4DGEB4r8gBjs7O3d6enoiNzf3R2lpaZDNDPb29joHDx6cBaTjgNxrQPwLmyHajx8%2FfvkfD1i9enU%2FyGvYNDODTD1x4sQZLi4uzps3b766dOnS04cPHzKoqamBApHh0KFDl728vBqAzBcw16IDRiDmBGJxIJYH%2BTkvL28KyOa9e%2FdeB%2FLtgJgbGl4sUBolEP8D8XcgfgnED4H4PjAMHt%2B4cePJmjVrjri6uv6FRiVfXV2dLZCWAmI2fDHD5uzsbLty5cqDIFe0tbVVAcV4gVjtwYMHN2fPnj0PyNaAGcKExYDfQKc%2FZWRkBLmM4dmzZ7JAShGURj5%2F%2FsyXkpKSOGnSJFCYKIEMYcFiAEjjLxYWlj8gjoeHh5e1tbXuz58%2FOQQFBUGplSE3NzccKP87KyurApc3BJqbm2vxRS0w4YGSvToLDgO%2B1NbWzr9%2B%2Ffo9RUVFrb9%2F%2FzK%2Ff%2F9erLCwMExdXZ3769evvwsKCpqA6t4RSuYcoNCHJneba9euPQFq%2FpmcnFwD5EtD0xHRQAmY4U4D%2FV%2BArJmRBAO4oa4B%2Bf0TLFUCBBgAl%2BPsxjsfdQgAAAAASUVORK5CYII%3D); +} +.nj-css-computed-on #nj-css-show-computed { + background-color: #FFF; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGNzdGMTE3NDA3MjA2ODExOEM4MkNBNkQxMjVDNUMyNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCMjFERUZFRUYzOTgxMUUwOEFFMERCQzg5QzU1MTcxOCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCMjFERUZFREYzOTgxMUUwOEFFMERCQzg5QzU1MTcxOCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Rjg3RjExNzQwNzIwNjgxMThDODJDQTZEMTI1QzVDMjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc3RjExNzQwNzIwNjgxMThDODJDQTZEMTI1QzVDMjciLz4gPC9yZGY6RGVzY3JpcHRpb24%2BIDwvcmRmOlJERj4gPC94OnhtcG1ldGE%2BIDw%2FeHBhY2tldCBlbmQ9InIiPz6NVRQbAAAAxElEQVR42qRTgQ3DIAxrqh3QD9YTdgK7ZOyTfUJ3Cftg%2B6T7gMVVmKKKAFIjGaWIOMahlFIajsSIhYgSI%2BZNzh0jdBMY4XtITiqf0FnyiyIZ%2BJp3k0E8eCOtwONcCbQtRBMOQYXwnuUbsTQV7MHhpHOwOmfUTHwxnqIuT2fuVYCih6hwaj%2Fu%2FRiNa30rygIr8aUxWnFT450VCRotpjnKSAvrdq7msHR0Cvm9rHhsTYICYdTFrTGWAuZeufDzH%2B3R3%2FknwAAmA%2B6aswJo8wAAAABJRU5ErkJggg%3D%3D); +} +/* ---------------------------------------- + Editable Styles +---------------------------------------- */ +#nj-section-styles dl > div.nj-editing-val { + white-space: normal; +} +#nj-section-styles dl > div.nj-editing .nj-css-clean { + color: rgba(0,0,0,.4); +} +#nj-section-styles dl > div.nj-editing-val dd { + margin-left: 17px; +} +#nj-section-styles dl > div.nj-editing-val dt { + margin-right: -17px; +} +#nj-section-styles .nj-editable-focus { + border: 1px solid #999; + box-shadow: 1px 1px 1px #CCC; + color: #333; + display: inline-block; + margin-right: 7px; + /*margin-bottom: -1px;*/ + max-width: none; + overflow: visible; + -webkit-user-select: text; +} +.nj-css-rule-list .nj-editable-focus:after { + position: relative; + margin-right: -7px; + right: -1px; +} +#nj-section-styles dd.nj-editable-focus:after { + content: none; +} +.nj-css-rule-list .nj-editing-val + .nj-css-add-style { + /*margin-top: 3px;*/ +} +.nj-editable-suggest { + opacity: 0.45; +} + +.nj-css-error:not(.nj-css-no-error) { + background-repeat: no-repeat; + background-position: 3px 2px; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAMtJREFUGJV1kM0KAXEUxc/SWh7MM0zJE3gQCxM2EpJ8bEiNjWHhBWYjYkUkRdQoGde5f2Q03PrV6ZzTrXuB0MgQiU0ba0U1/k3gwBYXoqj+WeKG2LaBgwxYJEbTixa7yMyLLPlLw6xATS9SXDWx25cZ7sYG1ep9b3OR8h3cTyUWtyMylnMNcqGn2WdbHQs94FqFnPtxg2r1NHsfkTx0EMiEG7IMpy2D0fSOPWbsgD/zzEtoik323hP75THTDvJpVHIW5I1t4aaEPe08AF+CuEXWXJtHAAAAAElFTkSuQmCC); + opacity: 0.5; +} +.nj-editing.nj-css-error { + opacity: 1; +} +/* ---------------------------------------- + Util classes +---------------------------------------- */ +.nj-get-height { + visibility: hidden; + position: absolute; +} +.nj-pre-slide { + overflow: hidden; + height: 0; + padding: 0; + position: static; + visibility: visible; + -webkit-transition-property: height,padding-top, padding-bottom; + -webkit-transition-duration: .13s, .13s, .13s; + -webkit-transition-timing-function: ease-in, ease-in, ease-in; + -webkit-transform: translateZ(0) +} +.nj-css-panel-hide { + display: none; +} + +/* ---------------------------------------- + Animations +---------------------------------------- */ +@-webkit-keyframes morph { + 0% { + color: rgba(0,0,0,0); + } + 75% { + color: rgba(0,0,0,0); + } + 100% { + color: #333; + } +} +@-webkit-keyframes shake { + 0% { + -webkit-transform: translate(6px); + } + 33% { + -webkit-transform: translate(-3px); + } + 67% { + -webkit-transform: translate(1px); + } + 100% { + -webkit-transform: translate(0px); + } +} +.nj-css-shake { + -webkit-animation-name: shake; + -webkit-animation-duration: 0.2s; + -webkit-animation-direction: alternate; + -webkit-animation-timing-function: ease-out; +} diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html new file mode 100644 index 00000000..5d6273b6 --- /dev/null +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.html @@ -0,0 +1,64 @@ + + + + + + + + + +
+ +

+
+ Stylesheets +

+
+
    +
    +
    + Add Rule +
    + +

    +
    + Styles + + 0 elements selected + +

    +
    +
    + +
    + +
    + + \ No newline at end of file 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 @@ +/* +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 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 + do { + if(nextEl[sibling[0]]) { + nextEl = nextEl[sibling[0]]; + } else { + + if(!nextEl.parentNode[sibling[0]]) { // no next style element + /// get njcssrule and create add button, + /// and activate it if the new styles isn't dirtied + // //console.log('reached the end'); + njStyle = nextEl.parentNode.njcssstyle; + if(njStyle.isNewStyle) { + njStyle.container.classList.remove('nj-css-no-error'); + if(nextEl.njedit) { + nextEl.njedit.onRevert.length = 0; + } + } + // //console.log('Prototype onStopEdit - creating Add button'); + addStyleBtn = njStyle.njRule.createAddButton(); + // bind the element as 'this', emulating the 'click' event's context + addStyleBtn.activate.bind(addStyleBtn.propEl)(); + nextEl = false; + break; + } else { + nextEl = (nextEl.parentNode[sibling[0]]) ? + nextEl.parentNode[sibling[0]][sibling[1]]: + nextEl.parentNode.parentNode[sibling[1]][sibling[1]]; + } + } + njStyle = njStyle || nextEl.parentNode.njcssstyle; + } + while (!isEditableNode(nextEl)); + + if(nextEl) { + if(!self._preventAdvanceToNext) { + if (nextEl.nodeName === 'DT') { + autoSuggestArray = self.CSS_PROPERTY_NAMES; + if(njStyle.activate) { /// if the next style is the Add button + isAddButton = true; + } + } else if(nextEl.nodeName === 'DD' && cssCompletionMap[njStyle.property]) { + autoSuggestArray = cssCompletionMap[njStyle.property]; + } + nextEditable = nextEl.njedit || new NJEditable(nextEl, null, autoSuggestArray); + if(isAddButton) { + njStyle.activate.bind(nextEl)(); + } else { + nextEditable.startEditable(); + } + } else{ + self._preventAdvanceToNext = false; + } + } + } + + function isEditableNode(n) { + return n && n.nodeType === 1 && (n.nodeName === 'DT' || n.nodeName === 'DD'); + } + }); + + NJEditable.prototype.onChange.push(_onEditableChange); + + ///// Event delegation for editable nodes + this.sections.styles.container.addEventListener('click', function(e) { + if(!this.njedit && (this.nodeName === 'DT' || this.nodeName === 'DD') && !self._inComputedStyleMode) { + if(this.parentNode.className.indexOf('nj-css-style-add') === -1) { + // //console.log('set up editable node!'); + var edit = new NJEditable(this, null, self.CSS_PROPERTY_NAMES); // TODO: window.propertyKeywords); + edit.startEditable(); + } + } + }, false); + + function _onEditableChange(val, oldVal) { + if(this.isSelector) { + ////console.log('selector val = ' + val); + return false; + } + + var parent = this.el.parentNode, + oldValue = oldVal, + edit = this, + style, propName, propVal, isNewStyle, modifyCommand; + + ///// Find NJCSSRule corresponding to this NJEditable element + ///// (the style container has reference to NJCSSStyle object) + while (!style) { + if(parent.njcssstyle) { + style = parent.njcssstyle; + } else { + parent = parent.parentNode; + } + } + + // //console.log("Found style obj!"); + // //console.log(style); + + isNewStyle = style.isNewStyle; + + //// remove semi-colons + val = val.trim().replace(';',''); + this.val(val); + + ///// set up command for undo/redo + modifyCommand = Object.create(Object.prototype, { + description: { value: "Style Change" }, + //receiver: { value: receiver }, + execute: { + value: function() { + //console.log('updating to property name to ' + val); + style.updateProperty(val); + return this; + } + }, + unexecute: { + value: function() { + //console.log('Undo property name change back to ' + oldVal); + if(isNewStyle) { + style.remove(false, true); + } + style.updateProperty(oldVal); + } + } + }); + + ///// is this an edit to the prop or val? + if(this.el.nodeName === 'DT') { + //// property name was edited + if(val) { + modifyCommand.execute(); + NJevent("sendToUndo", modifyCommand); + } else { + ///// let the remove method take care of Undo/Redo + style.updateProperty(val); + } + + } else if (this.el.nodeName === 'DD') { + //// property value was edited + if(!style.updateValue(val, isNewStyle)) { + if(isNewStyle) { + //console.log('is new style : true'); + style.container.classList.remove('nj-css-no-error'); + this.onRevert.length = 0; + style.isNewStyle = false; + } else { + self._preventAdvanceToNext = true; + parent.addEventListener('webkitAnimationEnd', function njShake(e) { + this.classList.remove('nj-css-shake'); + ///// and revert value back to original value + edit.revert(null, true); + edit.startEditable(); + this.removeEventListener('webkitAnimationEnd', njShake, false); + }, false); + parent.classList.add('nj-css-shake'); + } + } + + } + } + } + }, + _stageStyleSheetId : { + value: 'nj-stage-stylesheet', + enumerable: false + }, + _defaultStyleSheetId : { + value: 'nj-default-stylesheet', + enumerable: false + }, + _defaultStyleSheet : { + value: null, + enumerable: false + }, + _userContentContainerId : { + value: '#UserContent', + enumarable: false + }, + _styleTagCount : { + value: 0 + }, + _setUpToolbars : { + value: function() { + var self = this, + command; + + this.sections.sheets.addSheetEl.addEventListener('click', function(e) { + var doc = self.sections.sheets.doc, + handleRemoval, + njSheet; + + handleRemoval = function(njSheet) { + if(njSheet.isCurrent) { + self.currentStyleSheet = self.defaultStyleSheet; + } + if(self._currentRuleList) { + self._currentRuleList.update(); + } + }; + + var rec = { + addSheet : function() { + ////console.log('Add Sheet'); + njSheet = self.createStyleSheet(new String(++self._styleTagCount)); + self.scrollTo('bottom', self.sections.sheets.container); + //// Add Default stylesheet selection + njSheet.sheetNameEl.addEventListener('click', function(e) { + //console.log('clicking sheet'); + e.preventDefault(); + //e.stopPropagation(); + self.currentStyleSheet = njSheet; + }, false); + + njSheet.deleteEl.addEventListener('click', function(e) { + handleRemoval(njSheet); + }, false); + + self.currentStyleSheet = njSheet; + }, + removeSheet : function() { + ////console.log('Remove Sheet'); + handleRemoval(njSheet); + njSheet.remove(); + } + }; + + command = Object.create(Object.prototype, { + description: { value: "Add Stylehsset" }, + receiver: { value: rec }, + execute: { + value: function() { + this.receiver.addSheet(); + ////console.log('execute'); + return this; + } + }, + unexecute: { + value: function() { + ////console.log('unexecute'); + this.receiver.removeSheet(); + } + } + }); + command.execute(); + NJevent("sendToUndo", command); + + }); + + this.sections.styles.addRuleEl.addEventListener('click', function(e) { + var selectorText, addRuleCommand, newNJRule; + + e.preventDefault(); + + selectorText = (self._inMultiSelectMode) ? self._userContentContainerId + ' .newClass' : null; + + addRuleCommand = Object.create(Object.prototype, { + description: { value: "Add Rule" }, + //receiver: { value: rec }, + execute: { + value: function() { + newNJRule = self._currentRuleList.initNewRule(self._currentStyleSheet, selectorText); + ////console.log('execute'); + return this; + } + }, + unexecute: { + value: function() { + ////console.log('unexecute'); + var list = self._currentRuleList, + elements = (list.el.length) ? list.el : [list.el]; + + newNJRule.delete(); + + if(list.addedClassName) { + elements.forEach(function(el) { + el.classList.remove(list.addedClassName); + }); + } + } + } + }); + + if(!self._currentStyleSheet) { + self.currentStyleSheet = self.createStyleSheet('Temp'); + } + + self._currentStyleSheet.dirty(); + + //self._currentRuleList.initNewRule(self._currentStyleSheet, selectorText); + addRuleCommand.execute(); + NJevent("sendToUndo", addRuleCommand); + }, false); + + this.sections.styles.showComputedEl.addEventListener('click', function(e) { + var computedStyleList; + e.preventDefault(); + self.inComputedStyleMode = !self.inComputedStyleMode; + }); + } + }, + captureSelectionChange: { + value: function(event) { + //console.log('capture selection change'); + var items = this.application.ninja.selectedElements, + itemIndex = -1, + currentEl, currentRuleList, nextEl, nextRuleList, commonRules; + + if(items.length > 1) { + this.clearCSSRules(); + this._inMultiSelectMode = true; + this.inComputedStyleMode = false; // No computed styles mode for multiple items + + ///// if multiple items are selected, then show common rules + var elements = items.map(function(item) { + return item._element; + }); + + ///// show toolbar, but hide computed style button + this.sections.styles.toolbar.style.display = ''; + this.sections.styles.showComputedEl.classList.add('nj-css-panel-hide');// .style.display = 'none'; + this._currentRuleList = new NJCSSRuleList(elements, this); + this.sections.styles.statusMsg.classList.remove('nj-css-panel-hide'); + nj.empty(this.sections.styles.numItemsEl).appendChild(nj.textNode(items.length)); + this._currentRuleList.render(this.sections.styles.container); + + } else if(items.length === 1) { + //console.log('Selection change: One element selected'); + this._inMultiSelectMode = false; + this.sections.styles.statusMsg.classList.add('nj-css-panel-hide'); + this.sections.styles.showComputedEl.classList.remove('nj-css-panel-hide');// .style.display = ''; + this.sections.styles.toolbar.style.display = ''; + this.showStylesForElement(items[0]._element, null); + } else { + this.sections.styles.statusMsg.classList.add('nj-css-panel-hide'); + this._inMultiSelectMode = false; + this.sections.styles.toolbar.style.display = 'none'; + ///// If no elements are selected, clear styles + this.computedStyleSubPanel.hide(); + this.clearCSSRules(); + } + + } + }, + captureElementChange:{ + value:function(event){ + if(this._ignoreElementChangeEventOnce) { + ///// TODO: Change this by having the event object have a custom flag + ///// for identifying events originating from this panel + this._ignoreElementChangeEventOnce = false; + return false; + } + //console.log('capture element change'); + var items = this.application.ninja.selectedElements; + if(items.length === 0 && event._event.eventType === 'style') { + //// stage style has changed + if(event._event.item.ownerDocument.styleSheets[0].njStyleSheet) { + event._event.item.ownerDocument.styleSheets[0].njStyleSheet.dirty(); + } else { + // TODO: Need a way of identifying the changing CSS rule (Stylesheet Manager) + ////console.log('could not find njStyleSheet'); + } + } else if(event._event.eventType === 'style' && items.length === 1) { + this.showStylesForElement(this.sections.styles.currentEl, event._event.data); + } + } + }, + _ignoreElementChangeEventOnce : { + value: false, + enumerable: false + }, + _currentRuleList : { + value : null, + enumerable: false + }, + _currentComputedStyleList : { + value : null, + enumerable: false + }, + _currentStyleSheet : { + value: null, + enumerable: false + }, + currentStyleSheet : { + get: function() { + return this._currentStyleSheet; + }, + set: function(njStyleSheet) { + if(this._currentStyleSheet) { + this._currentStyleSheet.unMakeCurrent(); + } + njStyleSheet.makeCurrent(); + this._currentStyleSheet = njStyleSheet; + } + }, + setDefaultSheet : { + value: function(njSheet) { + this._currentStyleSheet = njSheet; + } + }, + _inMultiSelectMode : { + value: false, + enumerable: false + }, + _inComputedStyleMode : { + value: false, + enumerable: false + }, + inComputedStyleMode : { + get : function() { + return this._inComputedStyleMode; + }, + set : function(turnOn) { + var btnOnClass = 'nj-css-computed-on', + hideClass = 'nj-css-panel-hide'; + + if(turnOn) { + ///// Turn ON computed style mode + //console.log('Turning ON computed style mode'); + this.computedStyleSubPanel.declaration = this._currentRuleList.computed; + this.computedStyleSubPanel.show(); + this.sections.styles.container.classList.add(hideClass); + this.sections.styles.addRuleEl.classList.add(hideClass); + this.sections.styles.showComputedEl.parentNode.classList.add(btnOnClass); + } else { + ///// Turn OFF computed style mode + //console.log('Turning OFF computed style mode'); + this.computedStyleSubPanel.hide(); + this.sections.styles.container.classList.remove(hideClass); + this.sections.styles.addRuleEl.classList.remove(hideClass); + this.sections.styles.showComputedEl.parentNode.classList.remove(btnOnClass); + } + + this._inComputedStyleMode = turnOn; + } + }, + createStyleSheet : { + value : function(title) { + var listEl = this.sections.sheets.listEl, + sheet, njSheet; + + title = title || ''; + + sheet = nj.make('style', { + type : 'text/css', + id : title, + media : 'screen', + title : 'Temp' + }); + + this.sections.sheets.doc.head.appendChild(this.sections.sheets.doc.createComment('User-added stylesheet number ' + title)); + this.sections.sheets.doc.head.appendChild(sheet); + + njSheet = new NJStyleSheet(sheet.sheet, title); // TODO: Fix index + njSheet.render(listEl); + + return njSheet; + } + }, + showStylesForElement : { + value: function(el, updateList, preventUpdate) { + var sect = this.sections.styles, + contEl = sect.container, + elNameEl = sect.elNameEl, + identifier, njRuleList, computedHeight; + + ///// Save current DOM element to section object + ///// so that it is retrievable by elementChange + sect.currentEl = el; + + ///// Show element name in panel header + identifier = el.nodeName.toLowerCase(); + if(el.id) { + // use append id if avail + identifier += '#'+el.id; + } else if (el.className) { + // or, use combined class +// identifier += '.' + el.className.trim().replace(' ', '.'); + } + + this.clearCSSRules(); ///// Clear css styles subsection + + ///// set new element name in header + //nj.empty(elNameEl); + elNameEl.appendChild(nj.textNode(' - ' + identifier)); + + if(el.njcssrulelist) { + ///// use the existing NJCSSRuleList object +// // //console.log('user existing njcssrulelist object'); + this._currentRuleList = njRuleList = el.njcssrulelist; + if(!preventUpdate) { + njRuleList.update(updateList); + } + njRuleList.show(); + } else { + ///// Create list of css rules from selected element + this._currentRuleList = njRuleList = new NJCSSRuleList(el, this); + // Render rule list (pass in container) + njRuleList.render(contEl); + } + + if(this._inComputedStyleMode) { + ////console.log('in computed style mode'); + this.computedStyleSubPanel.declaration = el; + this.computedStyleSubPanel.show(); + return; + } else { + this.computedStyleSubPanel.hide(); + } + + + ///// set height to "" (empty) to capture computed height and remove transition + contEl.style.webkitTransition = ''; + contEl.style.height = ''; + computedHeight = nj.height(contEl); + + //// re-apply transition + sect.height = contEl.style.height = 'auto'; + //contEl.style.webkitTransition = 'all 0.15s ease-out'; + } + }, + clearCSSRules : { + value: function(callback) { + + if(this._currentRuleList) { + this._currentRuleList.hide(); + } + nj.empty(this.sections.styles.elNameEl); + + } + }, + _stageUpdate : { + value: function() { + this._ignoreElementChangeEventOnce = true; + //documentControllerModule.DocumentController.DispatchElementChangedEvent(this.application.ninja.selectedElements); + // TODO: might need to remove this + } + }, + toggleSectionCollapse : { + value: function(section) { + var isClosed = this.sections[section].collapsed, + action = (isClosed) ? 'expandSection' : 'collapseSection'; + + this[action](section).collapsed = !isClosed; + } + }, + collapseSection : { // returns section object literal + value: function(sect) { + var section = this.sections[sect], + contEl = section.container, + arrow = section.arrow, + cssClass = 'closed'; + + if(sect === 'styles' && this._inComputedStyleMode) { + contEl = this.computedStyleSubPanel.element; + } + + contEl.addEventListener('webkitTransitionEnd', function njCollapse(e) { + e.stopPropagation(); + e.preventDefault(); + this.style.webkitTransition = ''; + this.removeEventListener('webkitTransitionEnd', njCollapse, false); + }, false); +