From 1c528b42f9b1c9be9197921586388c3a3bdc5c17 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 22 Feb 2012 23:16:23 -0800 Subject: CSS Panel Update - Adding montage objects for css panel --- .../css-panel/style-sheet.reel/style-sheet.js | 52 ++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 js/panels/css-panel/style-sheet.reel/style-sheet.js (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js') diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js new file mode 100644 index 00000000..daa614c2 --- /dev/null +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -0,0 +1,52 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.StyleSheet = Montage.create(Component, { + deserializedFromTemplate : { + value: function() { + console.log("style sheet view - deserialized"); + } + }, + prepareForDraw : { + value: function() { + console.log("style sheet view - prepare for draw"); + } + }, + draw : { + value: function() { + console.log("styles sheet view - draw"); + } + }, + _name: { + value: null + }, + name : { + get: function() { + return this._name; + }, + set: function(text) { + this._name = text; + } + }, + _styleSheet : { + value: null + }, + styleSheet : { + get: function() { + return this._styleSheet; + }, + set: function(sheet) { + if(sheet.href) { + this.name = sheet.href.substring(sheet.href.lastIndexOf('/')); + } else { + this.name = 'Style Tag'; + } + } + } +}); \ No newline at end of file -- cgit v1.2.3 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/panels/css-panel/style-sheet.reel/style-sheet.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js') 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 -- cgit v1.2.3 From 1433f2bdf2e5b8c5c18fed5e9c17fd983ab3606d Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 2 Mar 2012 10:55:51 -0800 Subject: CSS Panel - Updating components, created toolbar components, and small changes to styles controller --- js/panels/css-panel/style-sheet.reel/style-sheet.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js') 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 a4fe5960..5caf69a4 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -21,8 +21,15 @@ exports.StyleSheet = Montage.create(Component, { draw : { value: function() { console.log("styles sheet view - draw"); + + this.mediaInput.value = this._source.media.mediaText; } }, + + mediaInput: { + value: null + }, + _name: { value: null }, @@ -44,7 +51,7 @@ exports.StyleSheet = Montage.create(Component, { set: function(sheet) { console.log('sheet being set'); if(sheet.href) { - this.name = sheet.href.substring(sheet.href.lastIndexOf('/')); + this.name = sheet.href.substring(sheet.href.lastIndexOf('/')+1); } else { this.name = 'Style Tag'; } -- cgit v1.2.3 From 30e3f3d6c19025c37694127ac148146277681994 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 3 Apr 2012 14:43:52 -0700 Subject: CSS Panel - Stylesheet edit mode --- .../css-panel/style-sheet.reel/style-sheet.js | 44 +++++++++++++++++++++- 1 file changed, 42 insertions(+), 2 deletions(-) (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js') 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 5caf69a4..2396d625 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -13,9 +13,15 @@ exports.StyleSheet = Montage.create(Component, { console.log("style sheet view - deserialized"); } }, - prepareForDraw : { + willDraw : { value: function() { - console.log("style sheet view - prepare for draw"); + console.log("style sheet view - will draw"); + + if(this.editing) { + document.body.addEventListener('click', this, false); + } else { + document.body.removeEventListener('click', this, false); + } } }, draw : { @@ -23,6 +29,40 @@ exports.StyleSheet = Montage.create(Component, { console.log("styles sheet view - draw"); this.mediaInput.value = this._source.media.mediaText; + + if(this.editing) { + this.editView.classList.add('expanded'); + } else { + this.editView.classList.remove('expanded'); + } + } + }, + + handleEditButtonAction: { + value: function(e) { + console.log('handle edit button action'); + this.editing = true; + } + }, + _editing : { + value: null + }, + editing : { + get: function() { + return this._editing; + }, + set: function(enterEditingMode) { + this._editing = enterEditingMode; + this.needsDraw = true; + } + }, + + handleClick : { + value: function(e) { + console.log("handle click"); + if(e.target !== this.editView) { + this.editing = false; + } } }, -- cgit v1.2.3 From 72061f2cf3858f48a90f8cb21c5e7d766cb9552b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 5 Apr 2012 17:26:03 -0700 Subject: Style Sheets - Style update for edit view --- .../css-panel/style-sheet.reel/style-sheet.js | 26 +++++++++++++--------- 1 file changed, 16 insertions(+), 10 deletions(-) (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js') 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 2396d625..4f9ad21f 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -8,36 +8,42 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.StyleSheet = Montage.create(Component, { - deserializedFromTemplate : { - value: function() { - console.log("style sheet view - deserialized"); - } + _translateDistance: { + value: null }, + willDraw : { value: function() { console.log("style sheet view - will draw"); if(this.editing) { - document.body.addEventListener('click', this, false); + document.body.addEventListener('mousedown', this, false); + this._translateDistance = this._element.offsetWidth - this.editButton._element.offsetWidth; + } else { - document.body.removeEventListener('click', this, false); + document.body.removeEventListener('mousedown', this, false); } } }, draw : { value: function() { + var transStr = '-webkit-transform'; console.log("styles sheet view - draw"); this.mediaInput.value = this._source.media.mediaText; if(this.editing) { this.editView.classList.add('expanded'); + this.editView.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)'); } else { this.editView.classList.remove('expanded'); + this.editView.style.removeProperty(transStr); } } }, + + handleEditButtonAction: { value: function(e) { console.log('handle edit button action'); @@ -57,10 +63,10 @@ exports.StyleSheet = Montage.create(Component, { } }, - handleClick : { + handleMousedown : { value: function(e) { - console.log("handle click"); - if(e.target !== this.editView) { + console.log("handle mousedown"); + if(e.target !== this.editView && e.target !== this.editButton) { this.editing = false; } } @@ -89,7 +95,7 @@ exports.StyleSheet = Montage.create(Component, { return this._source; }, set: function(sheet) { - console.log('sheet being set'); + console.log('sheet being set: ', sheet.ownerNode); if(sheet.href) { this.name = sheet.href.substring(sheet.href.lastIndexOf('/')+1); } else { -- cgit v1.2.3 From afcaa157f7bc067cf00de91b43b2a71e9b64b7b3 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 9 Apr 2012 15:43:10 -0700 Subject: Style sheet - Style update --- .../css-panel/style-sheet.reel/style-sheet.js | 162 ++++++++++++++++++--- 1 file changed, 138 insertions(+), 24 deletions(-) (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js') 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 4f9ad21f..9ad48a62 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -14,8 +14,6 @@ exports.StyleSheet = Montage.create(Component, { willDraw : { value: function() { - console.log("style sheet view - will draw"); - if(this.editing) { document.body.addEventListener('mousedown', this, false); this._translateDistance = this._element.offsetWidth - this.editButton._element.offsetWidth; @@ -28,7 +26,6 @@ exports.StyleSheet = Montage.create(Component, { draw : { value: function() { var transStr = '-webkit-transform'; - console.log("styles sheet view - draw"); this.mediaInput.value = this._source.media.mediaText; @@ -39,17 +36,64 @@ exports.StyleSheet = Montage.create(Component, { this.editView.classList.remove('expanded'); this.editView.style.removeProperty(transStr); } + + if(this._readOnly) { + this._element.classList.add('ss-locked'); + this.importButton.element.classList.remove('ss-invisible'); + } else { + this._element.classList.remove('ss-locked'); + this.importButton.element.classList.add('ss-invisible'); + } + } }, + /* ------ Events------ */ + handleMousedown : { + value: function(e) { + var nonBlurringElements = [ + this.editView, + this.deleteButton.element, + this.disableButton.element, + this.importButton.element]; + + console.log("handle mousedown"); + + if(nonBlurringElements.indexOf(e.target) === -1) { + this.editing = false; + } + } + }, handleEditButtonAction: { value: function(e) { - console.log('handle edit button action'); this.editing = true; } }, + + handleImportButtonAction: { + value: function(e) { + e.stopPropagation(); + } + }, + + handleDisableButtonAction: { + value: function(e) { + e.stopPropagation(); + this.disabled = !this.disabled; + } + }, + + handleDeleteButtonAction : { + value: function(e) { + e.stopPropagation(); + debugger; + } + }, + + /* ------ State properties ------ */ + _editing : { value: null }, @@ -63,21 +107,9 @@ exports.StyleSheet = Montage.create(Component, { } }, - handleMousedown : { - value: function(e) { - console.log("handle mousedown"); - if(e.target !== this.editView && e.target !== this.editButton) { - this.editing = false; - } - } - }, - - mediaInput: { - value: null - }, - _name: { - value: null + value: "Style Tag", + distinct: true }, name : { get: function() { @@ -87,6 +119,37 @@ exports.StyleSheet = Montage.create(Component, { this._name = text; } }, + _readOnly : { value: null }, + readOnly : { + get: function() { + return this._readOnly; + }, + set: function(isReadOnly) { + this._readOnly = isReadOnly; + this.needsDraw = true; + } + }, + + _disabled : { + value: null + }, + disabled: { + get: function() { + return this._disabled; + }, + set: function(disable) { + var label = (disable) ? "Enable" : "Disable"; + this._source.ownerNode.disabled = disable; + this.disableButton.label = label; + + this._disabled = disable; + } + }, + + external : { + value: null + }, + _source : { value: null }, @@ -95,13 +158,64 @@ exports.StyleSheet = Montage.create(Component, { return this._source; }, set: function(sheet) { - console.log('sheet being set: ', sheet.ownerNode); - if(sheet.href) { - this.name = sheet.href.substring(sheet.href.lastIndexOf('/')+1); - } else { - this.name = 'Style Tag'; - } + console.log('sheet being set: ', this); + + this._extractData(sheet.ownerNode); this._source = sheet; } + }, + + _extractData : { + value: function(sheetNode) { + var data = sheetNode.dataset, key; + + for(key in data) { + this[key] = data[key]; + } + } + }, + + /* ------ Data Attribute Properties ------ */ + + _ninjaExternalUrl: { value: null }, + ninjaExternalUrl : { + get: function() { return this._ninjaExternalUrl; }, + set: function(url) { + this.external = true; + this._ninjaExternalUrl = url; + } + }, + + _ninjaFileName: { value: null }, + ninjaFileName : { + get: function() { return this._ninjaFileName; }, + set: function(fileName) { + this.name = fileName; + this._ninjaFileName = fileName; + } + }, + + _ninjaFileUrl: { value: null }, + ninjaFileUrl : { + get: function() { return this._ninjaFileUrl; }, + set: function(fileUrl) { + this._ninjaFileUrl = fileUrl; + } + }, + + _ninjaFileReadOnly: { value: null }, + ninjaFileReadOnly : { + get: function() { return this._ninjaFileReadOnly; }, + set: function(isReadOnly) { + this._ninjaFileReadOnly = this.readOnly = isReadOnly === "true"; + } + }, + + _ninjaUri: { value: null }, + ninjaUri : { + get: function() { return this._ninjaUri; }, + set: function(uri) { + this._ninjaUri = uri; + } } }); \ No newline at end of file -- cgit v1.2.3 From af4dac82d2e76fe90191d6c085740d855bf961f3 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 8 May 2012 09:43:57 -0700 Subject: Style sheets - Added default stylesheet selection --- .../css-panel/style-sheet.reel/style-sheet.js | 29 ++++++++++++++++++++++ 1 file changed, 29 insertions(+) (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js') 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 9ad48a62..3ddd8454 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -12,6 +12,12 @@ exports.StyleSheet = Montage.create(Component, { value: null }, + prepareForDraw : { + value: function() { + this.nameText.element.addEventListener('click', this, false); + } + }, + willDraw : { value: function() { if(this.editing) { @@ -45,6 +51,12 @@ exports.StyleSheet = Montage.create(Component, { this.importButton.element.classList.add('ss-invisible'); } + if(this.default) { + this._element.classList.add('default-style-sheet'); + } else { + this._element.classList.remove('default-style-sheet'); + } + } }, @@ -66,6 +78,12 @@ exports.StyleSheet = Montage.create(Component, { } }, + handleClick : { + value: function(e) { + this.parentComponent.parentComponent.defaultStyleSheet = this.source; + } + }, + handleEditButtonAction: { value: function(e) { this.editing = true; @@ -130,6 +148,17 @@ exports.StyleSheet = Montage.create(Component, { } }, + _default : { value: null }, + default : { + get: function() { + return this._default; + }, + set: function(value) { + this._default = value; + this.needsDraw = true; + } + }, + _disabled : { value: null }, -- cgit v1.2.3 From b5439f436cac405c4bbf7e01ead9cee5dbc71a73 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 16 May 2012 16:04:00 -0700 Subject: CSS Panel - Style sheets dirty flag added --- js/panels/css-panel/style-sheet.reel/style-sheet.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js') 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 3ddd8454..0ff195d5 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -57,6 +57,12 @@ exports.StyleSheet = Montage.create(Component, { this._element.classList.remove('default-style-sheet'); } + if(this.dirty) { + this.nameText.element.classList.add('ss-dirty'); + } else { + this.nameText.element.classList.remove('ss-dirty'); + } + } }, @@ -137,6 +143,21 @@ exports.StyleSheet = Montage.create(Component, { this._name = text; } }, + _dirty : { + value: null + }, + dirty : { + get: function() { + return this._dirty; + }, + set: function(value) { + if(value === this._dirty) { return false; } + + this._dirty = value; + this.needsDraw = true; + } + }, + _readOnly : { value: null }, readOnly : { get: function() { -- cgit v1.2.3 From 197a7646e472fcea616764685c8d03c6063e66f5 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 18 May 2012 14:05:06 -0700 Subject: CSS Panel - Add support for deleting style sheets --- js/panels/css-panel/style-sheet.reel/style-sheet.js | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js') 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 0ff195d5..a3326275 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -11,6 +11,10 @@ exports.StyleSheet = Montage.create(Component, { _translateDistance: { value: null }, + viewContainer : { + value: null, + serializable: true + }, prepareForDraw : { value: function() { @@ -43,14 +47,6 @@ exports.StyleSheet = Montage.create(Component, { this.editView.style.removeProperty(transStr); } - if(this._readOnly) { - this._element.classList.add('ss-locked'); - this.importButton.element.classList.remove('ss-invisible'); - } else { - this._element.classList.remove('ss-locked'); - this.importButton.element.classList.add('ss-invisible'); - } - if(this.default) { this._element.classList.add('default-style-sheet'); } else { @@ -73,10 +69,7 @@ exports.StyleSheet = Montage.create(Component, { var nonBlurringElements = [ this.editView, this.deleteButton.element, - this.disableButton.element, - this.importButton.element]; - - console.log("handle mousedown"); + this.disableButton.element]; if(nonBlurringElements.indexOf(e.target) === -1) { this.editing = false; @@ -112,7 +105,7 @@ exports.StyleSheet = Montage.create(Component, { handleDeleteButtonAction : { value: function(e) { e.stopPropagation(); - debugger; + this.parentComponent.parentComponent.handleDeleteAction(this); } }, @@ -208,6 +201,8 @@ exports.StyleSheet = Montage.create(Component, { return this._source; }, set: function(sheet) { + if(!sheet || sheet === this._source) { return; } + console.log('sheet being set: ', this); this._extractData(sheet.ownerNode); -- cgit v1.2.3 From e196cb6fb32eba15156488938c8289568a6e2b88 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 18 May 2012 14:05:31 -0700 Subject: Style Sheet component - Remove un-used property --- js/panels/css-panel/style-sheet.reel/style-sheet.js | 4 ---- 1 file changed, 4 deletions(-) (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js') 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 a3326275..7afe977f 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -11,10 +11,6 @@ exports.StyleSheet = Montage.create(Component, { _translateDistance: { value: null }, - viewContainer : { - value: null, - serializable: true - }, prepareForDraw : { value: function() { -- cgit v1.2.3 From fbdfb46071c5f1c081f3703ddf35ef009decf167 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 21 May 2012 09:39:11 -0700 Subject: Style sheet - Added disabled style to sheet item --- js/panels/css-panel/style-sheet.reel/style-sheet.js | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js') 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 7afe977f..98e20b2c 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -55,6 +55,12 @@ exports.StyleSheet = Montage.create(Component, { this.nameText.element.classList.remove('ss-dirty'); } + if(this.disabled) { + this.element.classList.add('ss-disabled'); + } else { + this.element.classList.remove('ss-disabled'); + } + } }, @@ -182,6 +188,7 @@ exports.StyleSheet = Montage.create(Component, { this.disableButton.label = label; this._disabled = disable; + this.needsDraw = true; } }, -- cgit v1.2.3 From d56af1a4716445db28d343182c8bfaf211eb6ab7 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 22 May 2012 11:15:47 -0700 Subject: CSS Panel - Remove console logs --- js/panels/css-panel/style-sheet.reel/style-sheet.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'js/panels/css-panel/style-sheet.reel/style-sheet.js') 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 98e20b2c..cb69d25b 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -206,8 +206,6 @@ exports.StyleSheet = Montage.create(Component, { set: function(sheet) { if(!sheet || sheet === this._source) { return; } - console.log('sheet being set: ', this); - this._extractData(sheet.ownerNode); this._source = sheet; } -- cgit v1.2.3