From 18f687974273b5ed7374ca5ae440c797064c5d0f Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 7 Feb 2012 13:35:27 -0800
Subject: Presets Panel - Initial commit with panel content
---
js/panels/presets/content.reel/content.css | 55 ++++++++++
js/panels/presets/content.reel/content.html | 66 ++++++++++++
js/panels/presets/content.reel/content.js | 106 ++++++++++++++++++
js/panels/presets/presets-panel.js | 15 +++
.../presets/style-presets.reel/style-presets.css | 0
.../presets/style-presets.reel/style-presets.html | 58 ++++++++++
.../presets/style-presets.reel/style-presets.js | 119 +++++++++++++++++++++
.../transitions-presets.css | 0
.../transitions-presets.html | 58 ++++++++++
.../transitions-presets.js | 67 ++++++++++++
10 files changed, 544 insertions(+)
create mode 100644 js/panels/presets/content.reel/content.css
create mode 100644 js/panels/presets/content.reel/content.html
create mode 100644 js/panels/presets/content.reel/content.js
create mode 100644 js/panels/presets/presets-panel.js
create mode 100644 js/panels/presets/style-presets.reel/style-presets.css
create mode 100644 js/panels/presets/style-presets.reel/style-presets.html
create mode 100644 js/panels/presets/style-presets.reel/style-presets.js
create mode 100644 js/panels/presets/transitions-presets.reel/transitions-presets.css
create mode 100644 js/panels/presets/transitions-presets.reel/transitions-presets.html
create mode 100644 js/panels/presets/transitions-presets.reel/transitions-presets.js
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/content.reel/content.css b/js/panels/presets/content.reel/content.css
new file mode 100644
index 00000000..a6a1545f
--- /dev/null
+++ b/js/panels/presets/content.reel/content.css
@@ -0,0 +1,55 @@
+.presetsPanel {
+ display: -webkit-box;
+ text-shadow: 1px 1px 0 #000;
+ -webkit-box-orient: vertical;
+ -webkit-box-flex: 1;
+}
+.presetsPanel .treeRoot {
+ margin: 0 8px;
+}
+.tab-bar {
+ -webkit-box-flex: 0;
+ background-color: #282828;
+ color: #FFF;
+ display: -webkit-box;
+ font-size: 12px;
+ -webkit-box-orient: horizontal;
+}
+
+.tab-bar div {
+ -webkit-box-flex: 0;
+ border-top-right-radius: 2px;
+ border-top-left-radius: 2px;
+ background-color: #474747;
+ background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.2) 0,rgba(0,0,0,0) 3px);
+ border-top: 1px solid rgb(100, 100, 100);
+ border-left: 1px solid rgba(100, 100, 100, 0.3);
+ border-right: 1px solid rgba(100, 100, 100, 0.3);
+ padding: 4px 9px;
+ cursor: pointer;
+ opacity: 0.6;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ position: relative;
+ z-index: 999;
+}
+.tab-bar div.active-tab {
+ background-image: none;
+ box-shadow: 0 -5px 2px 3px rgba(0,0,0,0.2);
+ position: relative;
+ opacity: 1;
+ text-overflow: clip;
+ z-index: 1001;
+}
+
+.librarySlot {
+ -webkit-box-flex: 1;
+ overflow: auto;
+ background-color: #474747;
+
+ color: #FFF;
+
+ position: relative;
+ z-index: 1000;
+}
\ No newline at end of file
diff --git a/js/panels/presets/content.reel/content.html b/js/panels/presets/content.reel/content.html
new file mode 100644
index 00000000..38de2a6d
--- /dev/null
+++ b/js/panels/presets/content.reel/content.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/panels/presets/content.reel/content.js b/js/panels/presets/content.reel/content.js
new file mode 100644
index 00000000..8ddb3757
--- /dev/null
+++ b/js/panels/presets/content.reel/content.js
@@ -0,0 +1,106 @@
+/*
+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.content = Montage.create(Component, {
+ hasTemplate: {
+ value: true
+ },
+ contentPanel : {
+ value: "presets" // get from local storage
+ },
+ templateDidLoad : {
+ value: function() {
+ console.log('deserialized');
+ }
+ },
+ prepareForDraw : {
+ value: function() {
+ this.activeTab = this.tabs[this.activeTabIndex];
+
+ this.tabBar.addEventListener('click', this, false);
+ }
+ },
+ handleClick : {
+ value: function(e) {
+ var tabObject = this.tabs.filter(function(item) {
+ return item.tab === e._event.target;
+ });
+
+ if(tabObject[0]) {
+ this.activeTab = tabObject[0];
+ }
+
+ }
+ },
+ _activeTab : {
+ value: null,
+ enumerable: false
+ },
+ activeTab : {
+ get: function() {
+ return this._activeTab;
+ },
+ set: function(tabObject) {
+ this.contentPanel = tabObject.key;
+
+ if(this.activeTab) {
+ this._activeTab.tab.classList.remove('active-tab');
+ }
+
+ tabObject.tab.classList.add('active-tab');
+ this._activeTab = tabObject;
+ }
+ },
+ treeList : {
+ value : null
+ },
+ data2: {
+ value: {
+ "meta": "Blah",
+ "status": "OK",
+ "text" : "Root",
+ "data" : {
+ "date": "1.1.01",
+ "text": "Root",
+ "children": [{
+ "date": "3.3.01",
+ "text": "Child 1"
+ },
+ {
+ "date": "3.3.01",
+ "text": "Child 2",
+ "children": [{
+ "date": "3.4.01",
+ "text": "Grand Child 1",
+ "children": [{
+ "date": "4.4.01",
+ "text": "Great Grand Child 1"
+ }]
+ }]
+
+ },{
+ "date": "5.5.01",
+ "text": "Child 3"
+ }]
+ }
+ }
+ },
+
+ didDraw: {
+ value : function() {
+ console.log('Presets Panel prepare for draw.');
+// this.treeList.items.push({
+// label : "Box Style",
+// type : 'leaf'
+// });
+ }
+ }
+
+
+});
diff --git a/js/panels/presets/presets-panel.js b/js/panels/presets/presets-panel.js
new file mode 100644
index 00000000..091c5cb9
--- /dev/null
+++ b/js/panels/presets/presets-panel.js
@@ -0,0 +1,15 @@
+/*
+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;
+var PanelBase = require("js/panels/PanelBase").PanelBase;
+var Content = require("js/panels/presets/content.reel").content;
+
+exports.PresetsPanel = Montage.create(PanelBase, {
+ panelName : { value: "Presets" },
+ minHeight : { value: 200 },
+ content : { value: Content }
+});
\ No newline at end of file
diff --git a/js/panels/presets/style-presets.reel/style-presets.css b/js/panels/presets/style-presets.reel/style-presets.css
new file mode 100644
index 00000000..e69de29b
diff --git a/js/panels/presets/style-presets.reel/style-presets.html b/js/panels/presets/style-presets.reel/style-presets.html
new file mode 100644
index 00000000..5bc83ffa
--- /dev/null
+++ b/js/panels/presets/style-presets.reel/style-presets.html
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js
new file mode 100644
index 00000000..3a71c344
--- /dev/null
+++ b/js/panels/presets/style-presets.reel/style-presets.js
@@ -0,0 +1,119 @@
+/*
+ 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.StylesLibrary = Montage.create(Component, {
+ hasTemplate: {
+ value: true
+ },
+ contentPanel : {
+ value: "presets" // get from local storage
+ },
+ templateDidLoad : {
+ value: function() {
+ console.log('deserialized');
+ }
+ },
+ treeList : {
+ value : null
+ },
+ data2: {
+ value: {
+ "text": "styles",
+ "children": [{
+ "text": "Box Styles",
+ "children": [
+ {
+ "text": "Border-Radius",
+ "classNameBase" : "border-radius",
+ "styles" : {
+ "border-radius": "100px",
+ "border" : "1px solid #333"
+ }
+ },
+ {
+ "text": "Drop Shadow",
+ "classNameBase" : "drop-shadow",
+ "styles" : {
+ "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)",
+ "border" : "1px solid #CCC"
+ }
+ },
+ {
+ "text": "Fancy Box",
+ "classNameBase" : "fancy-box",
+ "styles" : {
+ "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333",
+ "border" : "1px solid #FFF",
+ "border-radius": "30px",
+ "background-color": "#7db9e8",
+ "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)"
+ }
+ }]
+ }, {
+ "text": "Text Styles",
+ "children": [
+ { "text": "Italic" },
+ { "text": "Text Shadow" },
+ { "text": "Text Color" } ]
+ }, {
+ "text": "Color Styles",
+ "children": [
+ { "text": "Background Gradient" },
+ { "text": "Background Color" },
+ { "text": "Text Highlight" } ]
+ }]
+ }
+ },
+ didDraw: {
+ value : function() {
+ console.log('Presets Panel prepare for draw.');
+// this.treeList.items.push({
+// label : "Box Style",
+// type : 'leaf'
+// });
+ }
+ },
+ applyPresetSelection : {
+ value: function(presetData) {
+ var selection = this.application.ninja.selectedElements,
+ self = this;
+
+ function setStopRuleSelector(selector) {
+ self.application.ninja
+ .currentDocument.documentRoot
+ .elementModel.controller
+ .changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector);
+ }
+
+ selection.forEach(function(el) {
+ el._element.style.webkitTransition = "all 450ms linear";
+
+ el._element.addEventListener("webkitTransitionEnd", function(e) {
+ console.log("calling transition end");
+ setStopRuleSelector("*");
+ });
+
+ setStopRuleSelector("transitionStopRule");
+
+ this.application.ninja.stylesController.setElementStyles(el._element, presetData.styles);
+ }, this);
+
+ }
+ },
+ shouldChangeSelection : {
+ value : function(controller, newSelection, oldSelection) {
+ //
+ //debugger;
+ console.log('1Handle should change selection');
+ return false;
+ }
+ }
+
+
+});
diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.css b/js/panels/presets/transitions-presets.reel/transitions-presets.css
new file mode 100644
index 00000000..e69de29b
diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.html b/js/panels/presets/transitions-presets.reel/transitions-presets.html
new file mode 100644
index 00000000..e3bf0aba
--- /dev/null
+++ b/js/panels/presets/transitions-presets.reel/transitions-presets.html
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.js b/js/panels/presets/transitions-presets.reel/transitions-presets.js
new file mode 100644
index 00000000..bc91b3ad
--- /dev/null
+++ b/js/panels/presets/transitions-presets.reel/transitions-presets.js
@@ -0,0 +1,67 @@
+/*
+ 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.TransitionsLibrary = Montage.create(Component, {
+ hasTemplate: {
+ value: true
+ },
+ contentPanel : {
+ value: "presets" // get from local storage
+ },
+ templateDidLoad : {
+ value: function() {
+ console.log('deserialized');
+ }
+ },
+ treeList : {
+ value : null
+ },
+ data2: {
+ value: {
+ "meta": "Blah",
+ "status": "OK",
+ "text" : "Root",
+ "data" : {
+ "date": "1.1.01",
+ "text": "Transitions",
+ "children": [{
+ "date": "3.3.01",
+ "text": "Kid 1"
+ },
+ {
+ "date": "3.3.01",
+ "text": "Kid 2",
+ "children": [{
+ "date": "3.4.01",
+ "text": "Grand Kid 1",
+ "children": [{
+ "date": "4.4.01",
+ "text": "Great Grand Kid 1"
+ }]
+ }]
+
+ },{
+ "date": "5.5.01",
+ "text": "Kid 3"
+ }]
+ }
+ }
+ },
+ didDraw: {
+ value : function() {
+ console.log('Presets Panel prepare for draw.');
+// this.treeList.items.push({
+// label : "Box Style",
+// type : 'leaf'
+// });
+ }
+ }
+
+
+});
--
cgit v1.2.3
From 600dc32b7fbf406443e067eb661758e478049170 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Wed, 8 Feb 2012 16:53:46 -0800
Subject: Presets - fixed some object naming and css for presets tree
---
js/panels/presets/content.reel/content.css | 3 ---
js/panels/presets/style-presets.reel/style-presets.html | 6 +++---
2 files changed, 3 insertions(+), 6 deletions(-)
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/content.reel/content.css b/js/panels/presets/content.reel/content.css
index a6a1545f..d0c8a08a 100644
--- a/js/panels/presets/content.reel/content.css
+++ b/js/panels/presets/content.reel/content.css
@@ -47,9 +47,6 @@
-webkit-box-flex: 1;
overflow: auto;
background-color: #474747;
-
- color: #FFF;
-
position: relative;
z-index: 1000;
}
\ No newline at end of file
diff --git a/js/panels/presets/style-presets.reel/style-presets.html b/js/panels/presets/style-presets.reel/style-presets.html
index 5bc83ffa..58af617f 100644
--- a/js/panels/presets/style-presets.reel/style-presets.html
+++ b/js/panels/presets/style-presets.reel/style-presets.html
@@ -38,14 +38,14 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
"name" : "Treeview",
"properties" : {
"element" : {"#": "libraryContainer"},
- "branchComponent" : {"@": "njbranch" },
+ "branchComponent" : {"@": "branch" },
"contentController": {"@": "presetsController"},
"showRoot" : false
}
},
- "njbranch" : {
+ "branch" : {
"module" : "js/components/treeview/ninja-branch.reel",
- "name" : "NinjaBranch"
+ "name" : "Branch"
}
}
--
cgit v1.2.3
From 586c3f7bbea04e62638e5ed8cdce9933e88c0b67 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 13 Feb 2012 10:27:27 -0800
Subject: Presets - Committing half-baked drag and drop
---
js/panels/presets/style-presets.reel/style-presets.html | 1 +
js/panels/presets/style-presets.reel/style-presets.js | 11 ++++++++++-
2 files changed, 11 insertions(+), 1 deletion(-)
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/style-presets.reel/style-presets.html b/js/panels/presets/style-presets.reel/style-presets.html
index 58af617f..b5c40d9c 100644
--- a/js/panels/presets/style-presets.reel/style-presets.html
+++ b/js/panels/presets/style-presets.reel/style-presets.html
@@ -40,6 +40,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
"element" : {"#": "libraryContainer"},
"branchComponent" : {"@": "branch" },
"contentController": {"@": "presetsController"},
+ "activationEvent" : "dblclick",
"showRoot" : false
}
},
diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js
index 3a71c344..f25c8067 100644
--- a/js/panels/presets/style-presets.reel/style-presets.js
+++ b/js/panels/presets/style-presets.reel/style-presets.js
@@ -79,11 +79,15 @@ exports.StylesLibrary = Montage.create(Component, {
// });
}
},
- applyPresetSelection : {
+ handleNodeActivation: {
value: function(presetData) {
var selection = this.application.ninja.selectedElements,
self = this;
+ if(!selection || !selection.length || selection.length === 0) {
+ return false;
+ }
+
function setStopRuleSelector(selector) {
self.application.ninja
.currentDocument.documentRoot
@@ -106,6 +110,11 @@ exports.StylesLibrary = Montage.create(Component, {
}
},
+ handleDragEnd : {
+ value: function(sourceObject) {
+ console.log(sourceObject);
+ }
+ },
shouldChangeSelection : {
value : function(controller, newSelection, oldSelection) {
//
--
cgit v1.2.3
From 6dc5d31b201d3578bf17b4f1fa7b1b9865d46153 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 13 Feb 2012 13:38:16 -0800
Subject: Style Presets - Separate out the style preset data to new file
---
js/panels/presets/default-style-presets.js | 52 ++++++++++++++++++
.../presets/style-presets.reel/style-presets.html | 2 +-
.../presets/style-presets.reel/style-presets.js | 61 +++-------------------
3 files changed, 59 insertions(+), 56 deletions(-)
create mode 100644 js/panels/presets/default-style-presets.js
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/default-style-presets.js b/js/panels/presets/default-style-presets.js
new file mode 100644
index 00000000..7455ac9f
--- /dev/null
+++ b/js/panels/presets/default-style-presets.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.
+ */
+
+exports.stylePresets = {
+ "text": "Style Presets Library",
+ "children": [{
+ "text": "Box Styles",
+ "children": [
+ {
+ "text": "Border-Radius",
+ "classNameBase" : "border-radius",
+ "styles" : {
+ "border-radius": "100px",
+ "border" : "1px solid #333"
+ }
+ },
+ {
+ "text": "Drop Shadow",
+ "classNameBase" : "drop-shadow",
+ "styles" : {
+ "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)",
+ "border" : "1px solid #CCC"
+ }
+ },
+ {
+ "text": "Fancy Box",
+ "classNameBase" : "fancy-box",
+ "styles" : {
+ "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333",
+ "border" : "1px solid #FFF",
+ "border-radius": "30px",
+ "background-color": "#7db9e8",
+ "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)"
+ }
+ }]
+ }, {
+ "text": "Text Styles",
+ "children": [
+ { "text": "Italic" },
+ { "text": "Text Shadow" },
+ { "text": "Text Color" } ]
+ }, {
+ "text": "Color Styles",
+ "children": [
+ { "text": "Background Gradient" },
+ { "text": "Background Color" },
+ { "text": "Text Highlight" } ]
+ }]
+};
\ No newline at end of file
diff --git a/js/panels/presets/style-presets.reel/style-presets.html b/js/panels/presets/style-presets.reel/style-presets.html
index b5c40d9c..0db4d3c0 100644
--- a/js/panels/presets/style-presets.reel/style-presets.html
+++ b/js/panels/presets/style-presets.reel/style-presets.html
@@ -29,7 +29,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
"bindings": {
"content": {
"boundObject": {"@": "owner"},
- "boundObjectPropertyPath": "data2"
+ "boundObjectPropertyPath": "presetData"
}
}
},
diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js
index f25c8067..0c44e20c 100644
--- a/js/panels/presets/style-presets.reel/style-presets.js
+++ b/js/panels/presets/style-presets.reel/style-presets.js
@@ -5,78 +5,29 @@
*/
var Montage = require("montage/core/core").Montage,
- Component = require("montage/ui/component").Component;
+ Component = require("montage/ui/component").Component,
+ DefaultPresets = require("js/panels/presets/default-style-presets").stylePresets;
exports.StylesLibrary = Montage.create(Component, {
hasTemplate: {
value: true
},
+ presetData : {
+ value : null
+ },
contentPanel : {
value: "presets" // get from local storage
},
templateDidLoad : {
value: function() {
- console.log('deserialized');
+ this.presetData = DefaultPresets;
}
},
treeList : {
value : null
},
- data2: {
- value: {
- "text": "styles",
- "children": [{
- "text": "Box Styles",
- "children": [
- {
- "text": "Border-Radius",
- "classNameBase" : "border-radius",
- "styles" : {
- "border-radius": "100px",
- "border" : "1px solid #333"
- }
- },
- {
- "text": "Drop Shadow",
- "classNameBase" : "drop-shadow",
- "styles" : {
- "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)",
- "border" : "1px solid #CCC"
- }
- },
- {
- "text": "Fancy Box",
- "classNameBase" : "fancy-box",
- "styles" : {
- "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333",
- "border" : "1px solid #FFF",
- "border-radius": "30px",
- "background-color": "#7db9e8",
- "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)"
- }
- }]
- }, {
- "text": "Text Styles",
- "children": [
- { "text": "Italic" },
- { "text": "Text Shadow" },
- { "text": "Text Color" } ]
- }, {
- "text": "Color Styles",
- "children": [
- { "text": "Background Gradient" },
- { "text": "Background Color" },
- { "text": "Text Highlight" } ]
- }]
- }
- },
didDraw: {
value : function() {
- console.log('Presets Panel prepare for draw.');
-// this.treeList.items.push({
-// label : "Box Style",
-// type : 'leaf'
-// });
}
},
handleNodeActivation: {
--
cgit v1.2.3
From 370ab8af406d70dc56e7a21ea7f7253f03e607e0 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Wed, 15 Feb 2012 21:42:35 -0800
Subject: Presets - Add external json file with transition data
---
js/panels/presets/default-transition-presets.js | 93 +++++++++++++++++++++++++
1 file changed, 93 insertions(+)
create mode 100644 js/panels/presets/default-transition-presets.js
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js
new file mode 100644
index 00000000..00873231
--- /dev/null
+++ b/js/panels/presets/default-transition-presets.js
@@ -0,0 +1,93 @@
+/*
+ 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.
+ */
+
+exports.transitionPresets = {
+ "text": "Transition Presets Library",
+ "children": [{
+ "text": "Opacity Transitions",
+ "children": [
+ {
+ "text": "Fade In",
+ "selectorBase" : "fade-in",
+ "rules" : [{
+ "selectorSuffix": "",
+ "styles" : {
+ "opacity": "0.25",
+ "-webkit-transition": "all 0.4s ease-in"
+ }
+ }, {
+ "selectorSuffix" : ":hover",
+ "styles" : {
+ "opacity": "1"
+ }
+ }]
+ },
+ {
+ "text": "Fade Out",
+ "selectorBase" : "fade-out",
+ "rules" : [{
+ "selectorSuffix": "",
+ "styles" : {
+ "opacity": "1",
+ "-webkit-transition": "all 0.4s ease-in"
+ }
+ }, {
+ "selectorSuffix" : ":hover",
+ "styles" : {
+ "opacity": "0"
+ }
+ }]
+ }]
+ }, {
+ "text": "Transform Transitions",
+ "children": [
+ {
+ "text": "Slide Right",
+ "selectorBase" : "slide-right",
+ "rules" : [{
+ "selectorSuffix": "",
+ "styles" : {
+ "-webkit-transition": "all 0.4s ease-in"
+ }
+ }, {
+ "selectorSuffix": ":hover",
+ "styles" : {
+ "-webkit-transform": "translateX(300px)"
+ }
+ }]
+ },
+ {
+ "text": "Slide Left",
+ "selectorBase" : "slide-left",
+ "rules" : [{
+ "selectorSuffix": "",
+ "styles" : {
+ "-webkit-transition": "all 0.4s ease-in"
+ }
+ }, {
+ "selectorSuffix" : ":hover",
+ "styles" : {
+ "-webkit-transform": "translateX(-300px)"
+ }
+ }]
+ },
+ {
+ "text": "Rotate",
+ "selectorBase" : "rotate",
+ "rules" : [{
+ "selectorSuffix" : "",
+ "styles" : {
+ "-webkit-transition": "all 0.4s ease-in"
+ }
+ }, {
+ "selectorSuffix" : ":hover",
+ "styles" : {
+ "-webkit-transform": "rotate(180deg)"
+ }
+ }]
+ }]
+ }]
+};
\ No newline at end of file
--
cgit v1.2.3
From 20321291a2dd44787a460d956163383cd040314c Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Wed, 15 Feb 2012 21:43:09 -0800
Subject: Presets - Modify structure of preset data
---
js/panels/presets/default-style-presets.js | 76 +++++++++++++++++++-----------
1 file changed, 48 insertions(+), 28 deletions(-)
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/default-style-presets.js b/js/panels/presets/default-style-presets.js
index 7455ac9f..3677d976 100644
--- a/js/panels/presets/default-style-presets.js
+++ b/js/panels/presets/default-style-presets.js
@@ -11,42 +11,62 @@ exports.stylePresets = {
"children": [
{
"text": "Border-Radius",
- "classNameBase" : "border-radius",
- "styles" : {
- "border-radius": "100px",
- "border" : "1px solid #333"
- }
+ "selectorBase" : "border-radius-preset",
+ "rules" : [{
+ "selectorSuffix" : "",
+ "styles" : {
+ "border-radius": "100px",
+ "border" : "1px solid #333"
+ }
+ }]
},
{
"text": "Drop Shadow",
- "classNameBase" : "drop-shadow",
- "styles" : {
- "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)",
- "border" : "1px solid #CCC"
- }
+ "selectorBase" : "drop-shadow",
+ "rules" : [{
+ "selectorSuffix" : "",
+ "styles" : {
+ "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)",
+ "border" : "1px solid #CCC"
+ }
+ }]
},
{
"text": "Fancy Box",
- "classNameBase" : "fancy-box",
- "styles" : {
- "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333",
- "border" : "1px solid #FFF",
- "border-radius": "30px",
- "background-color": "#7db9e8",
- "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)"
- }
+ "selectorBase" : "fancy-box",
+ "rules" : [{
+ "selectorSuffix" : "",
+ "styles" : {
+ "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333",
+ "border" : "1px solid #FFF",
+ "border-radius": "30px",
+ "background-color": "#7db9e8",
+ "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)"
+ }
+ }]
}]
}, {
- "text": "Text Styles",
+ "text": "Font Styles",
"children": [
- { "text": "Italic" },
- { "text": "Text Shadow" },
- { "text": "Text Color" } ]
- }, {
- "text": "Color Styles",
- "children": [
- { "text": "Background Gradient" },
- { "text": "Background Color" },
- { "text": "Text Highlight" } ]
+ {
+ "text": "Italic",
+ "selectorBase" : "italicize",
+ "rules" : [{
+ "selectorSuffix" : "",
+ "styles" : {
+ "font-style": "italic"
+ }
+ }]
+ },
+ {
+ "text": "Text Shadow",
+ "selectorBase" : "italicize",
+ "rules" : [{
+ "selectorSuffix" : "",
+ "styles" : {
+ "text-shadow": "1px 1px 3px #333"
+ }
+ }]
+ }]
}]
};
\ No newline at end of file
--
cgit v1.2.3
From 98b3083849b71155a8cb37d300b216150db0dcb5 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Wed, 15 Feb 2012 21:44:01 -0800
Subject: Presets - Modify application of preset classes for new json structure
---
.../presets/style-presets.reel/style-presets.js | 30 ++++-----
.../transitions-presets.html | 6 +-
.../transitions-presets.js | 71 ++++++++--------------
3 files changed, 43 insertions(+), 64 deletions(-)
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js
index 0c44e20c..7871683e 100644
--- a/js/panels/presets/style-presets.reel/style-presets.js
+++ b/js/panels/presets/style-presets.reel/style-presets.js
@@ -15,25 +15,17 @@ exports.StylesLibrary = Montage.create(Component, {
presetData : {
value : null
},
- contentPanel : {
- value: "presets" // get from local storage
- },
templateDidLoad : {
value: function() {
this.presetData = DefaultPresets;
}
},
- treeList : {
- value : null
- },
- didDraw: {
- value : function() {
- }
- },
handleNodeActivation: {
value: function(presetData) {
var selection = this.application.ninja.selectedElements,
- self = this;
+ stylesController = this.application.ninja.stylesController,
+ selectorBase = presetData.selectorBase,
+ self = this, className;
if(!selection || !selection.length || selection.length === 0) {
return false;
@@ -46,19 +38,27 @@ exports.StylesLibrary = Montage.create(Component, {
.changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector);
}
+ selectorBase = stylesController.generateClassName(selectorBase);
+
+ presetData.rules.forEach(function(rule) {
+ stylesController.addRule('.'+selectorBase + rule.selectorSuffix, rule.styles);
+ }, this);
+
selection.forEach(function(el) {
el._element.style.webkitTransition = "all 450ms linear";
el._element.addEventListener("webkitTransitionEnd", function(e) {
- console.log("calling transition end");
+ el._element.style.webkitTransition = '';
setStopRuleSelector("*");
- });
-
+ }, true);
setStopRuleSelector("transitionStopRule");
+ el._element.classList.add(selectorBase);
+
+ //// Keep track of elements with presets and don't add duplicates
- this.application.ninja.stylesController.setElementStyles(el._element, presetData.styles);
}, this);
+
}
},
handleDragEnd : {
diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.html b/js/panels/presets/transitions-presets.reel/transitions-presets.html
index e3bf0aba..c22ed351 100644
--- a/js/panels/presets/transitions-presets.reel/transitions-presets.html
+++ b/js/panels/presets/transitions-presets.reel/transitions-presets.html
@@ -22,7 +22,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
"module": "js/controllers/tree-controller",
"name": "TreeController",
"properties" : {
- "rootKey" : "data",
"branchKey" : "children",
"labelKey" : "text",
"delegate": {"@": "owner" }
@@ -30,7 +29,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
"bindings": {
"content": {
"boundObject": {"@": "owner"},
- "boundObjectPropertyPath": "data2"
+ "boundObjectPropertyPath": "presetData"
}
}
},
@@ -40,7 +39,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
"properties" : {
"element" : {"#": "libraryContainer"},
"branchComponent" : {"@": "branch" },
- "contentController": {"@": "presetsController"}
+ "contentController": {"@": "presetsController"},
+ "showRoot": false
}
},
"branch" : {
diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.js b/js/panels/presets/transitions-presets.reel/transitions-presets.js
index bc91b3ad..f7d84085 100644
--- a/js/panels/presets/transitions-presets.reel/transitions-presets.js
+++ b/js/panels/presets/transitions-presets.reel/transitions-presets.js
@@ -5,63 +5,42 @@
*/
var Montage = require("montage/core/core").Montage,
- Component = require("montage/ui/component").Component;
+ Component = require("montage/ui/component").Component,
+ DefaultPresets = require("js/panels/presets/default-transition-presets").transitionPresets;
exports.TransitionsLibrary = Montage.create(Component, {
hasTemplate: {
value: true
},
- contentPanel : {
- value: "presets" // get from local storage
+ presetData : {
+ value: null
},
- templateDidLoad : {
+ deserializedFromTemplate : {
value: function() {
- console.log('deserialized');
+ this.presetData = DefaultPresets;
}
},
- treeList : {
- value : null
- },
- data2: {
- value: {
- "meta": "Blah",
- "status": "OK",
- "text" : "Root",
- "data" : {
- "date": "1.1.01",
- "text": "Transitions",
- "children": [{
- "date": "3.3.01",
- "text": "Kid 1"
- },
- {
- "date": "3.3.01",
- "text": "Kid 2",
- "children": [{
- "date": "3.4.01",
- "text": "Grand Kid 1",
- "children": [{
- "date": "4.4.01",
- "text": "Great Grand Kid 1"
- }]
- }]
+ handleNodeActivation: {
+ value: function(presetData) {
+ var selection = this.application.ninja.selectedElements,
+ stylesController = this.application.ninja.stylesController,
+ selectorBase = presetData.selectorBase,
+ self = this;
- },{
- "date": "5.5.01",
- "text": "Kid 3"
- }]
+ if(!selection || !selection.length || selection.length === 0) {
+ return false;
}
- }
- },
- didDraw: {
- value : function() {
- console.log('Presets Panel prepare for draw.');
-// this.treeList.items.push({
-// label : "Box Style",
-// type : 'leaf'
-// });
- }
- }
+ selectorBase = stylesController.generateClassName(selectorBase);
+ presetData.rules.forEach(function(rule) {
+ this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles);
+ }, this);
+
+ selection.forEach(function(el) {
+ el._element.classList.add(selectorBase);
+ }, this);
+
+ }
+ }
});
--
cgit v1.2.3
From af20ca9b11133dd5cefb9275dbe8fb101c3380d0 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Wed, 15 Feb 2012 21:44:53 -0800
Subject: Presets - Get/set active tab from local storage + other improvements
---
js/panels/presets/content.reel/content.js | 73 ++++++++++---------------------
1 file changed, 23 insertions(+), 50 deletions(-)
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/content.reel/content.js b/js/panels/presets/content.reel/content.js
index 8ddb3757..c43c593c 100644
--- a/js/panels/presets/content.reel/content.js
+++ b/js/panels/presets/content.reel/content.js
@@ -12,17 +12,19 @@ exports.content = Montage.create(Component, {
value: true
},
contentPanel : {
- value: "presets" // get from local storage
+ value: null
},
templateDidLoad : {
value: function() {
- console.log('deserialized');
+ var storedTabIndex = window.localStorage.presetsTabIndex;
+ if(storedTabIndex) {
+ this.activeTabIndex = storedTabIndex;
+ }
}
},
prepareForDraw : {
value: function() {
this.activeTab = this.tabs[this.activeTabIndex];
-
this.tabBar.addEventListener('click', this, false);
}
},
@@ -48,59 +50,30 @@ exports.content = Montage.create(Component, {
},
set: function(tabObject) {
this.contentPanel = tabObject.key;
-
- if(this.activeTab) {
- this._activeTab.tab.classList.remove('active-tab');
- }
-
- tabObject.tab.classList.add('active-tab');
+ window.localStorage.presetsTabIndex = this.tabs.indexOf(tabObject);
+ this._tabToDeactivate = this._activeTab;
this._activeTab = tabObject;
+
+ this.needsDraw = this._needsTabSwitch = true;
}
},
- treeList : {
- value : null
+ _tabToDeactivate : {
+ value: null,
+ enumarable: false
},
- data2: {
- value: {
- "meta": "Blah",
- "status": "OK",
- "text" : "Root",
- "data" : {
- "date": "1.1.01",
- "text": "Root",
- "children": [{
- "date": "3.3.01",
- "text": "Child 1"
- },
- {
- "date": "3.3.01",
- "text": "Child 2",
- "children": [{
- "date": "3.4.01",
- "text": "Grand Child 1",
- "children": [{
- "date": "4.4.01",
- "text": "Great Grand Child 1"
- }]
- }]
-
- },{
- "date": "5.5.01",
- "text": "Child 3"
- }]
- }
- }
+ _needsTabSwitch : {
+ value: null,
+ enumerable: false
},
+ draw : {
+ value: function() {
+ if(this._needsTabSwitch) {
+ if(this._tabToDeactivate) {
+ this._tabToDeactivate.tab.classList.remove('active-tab');
+ }
- didDraw: {
- value : function() {
- console.log('Presets Panel prepare for draw.');
-// this.treeList.items.push({
-// label : "Box Style",
-// type : 'leaf'
-// });
+ this._activeTab.tab.classList.add('active-tab');
+ }
}
}
-
-
});
--
cgit v1.2.3
From dcbacf63faa9caaea26883855e3adde37db9bd4f Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Thu, 16 Feb 2012 14:31:05 -0800
Subject: Presets - Minor CSS text-shadow work-around for Windows Chrome
---
js/panels/presets/content.reel/content.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/content.reel/content.css b/js/panels/presets/content.reel/content.css
index d0c8a08a..08e1d53b 100644
--- a/js/panels/presets/content.reel/content.css
+++ b/js/panels/presets/content.reel/content.css
@@ -1,6 +1,6 @@
.presetsPanel {
display: -webkit-box;
- text-shadow: 1px 1px 0 #000;
+ text-shadow: 1px 1px 1px #000;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
--
cgit v1.2.3