diff options
Diffstat (limited to 'js/panels/presets')
10 files changed, 358 insertions, 85 deletions
diff --git a/js/panels/presets/animations-presets.reel/animations-presets.css b/js/panels/presets/animations-presets.reel/animations-presets.css new file mode 100644 index 00000000..0441c1cf --- /dev/null +++ b/js/panels/presets/animations-presets.reel/animations-presets.css | |||
@@ -0,0 +1,5 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ \ No newline at end of file | ||
diff --git a/js/panels/presets/animations-presets.reel/animations-presets.html b/js/panels/presets/animations-presets.reel/animations-presets.html new file mode 100644 index 00000000..c9d752af --- /dev/null +++ b/js/panels/presets/animations-presets.reel/animations-presets.html | |||
@@ -0,0 +1,59 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
7 | <html lang="en"> | ||
8 | <head> | ||
9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
10 | <link rel="stylesheet" href="animations-presets.css" type="text/css"> | ||
11 | <script type="text/montage-serialization"> | ||
12 | { | ||
13 | "owner": { | ||
14 | "module" : "js/panels/presets/animations-presets.reel", | ||
15 | "name" : "AnimationsLibrary", | ||
16 | "properties" : { | ||
17 | "element" : {"#" : "animationsLibrary"}, | ||
18 | "treeList" : {"@" : "treeList"} | ||
19 | } | ||
20 | }, | ||
21 | "presetsController" : { | ||
22 | "module": "js/controllers/tree-controller", | ||
23 | "name": "TreeController", | ||
24 | "properties" : { | ||
25 | "branchKey" : "children", | ||
26 | "labelKey" : "text", | ||
27 | "delegate": {"@": "owner" } | ||
28 | }, | ||
29 | "bindings": { | ||
30 | "content": { | ||
31 | "boundObject": {"@": "owner"}, | ||
32 | "boundObjectPropertyPath": "presetData" | ||
33 | } | ||
34 | } | ||
35 | }, | ||
36 | "presetsContainer" : { | ||
37 | "module" : "js/components/treeview/treeview.reel", | ||
38 | "name" : "Treeview", | ||
39 | "properties" : { | ||
40 | "element" : {"#": "libraryContainer"}, | ||
41 | "branchComponent" : {"@": "branch" }, | ||
42 | "contentController": {"@": "presetsController"}, | ||
43 | "activationEvent" : "dblclick", | ||
44 | "showRoot": false | ||
45 | } | ||
46 | }, | ||
47 | "branch" : { | ||
48 | "module" : "js/components/treeview/ninja-branch.reel", | ||
49 | "name" : "Branch" | ||
50 | } | ||
51 | } | ||
52 | </script> | ||
53 | </head> | ||
54 | <body> | ||
55 | <section id="animationsLibrary" class="animationsLibrary"> | ||
56 | <div id="libraryContainer"></div> | ||
57 | </section> | ||
58 | </body> | ||
59 | </html> \ No newline at end of file | ||
diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js new file mode 100644 index 00000000..6a16da54 --- /dev/null +++ b/js/panels/presets/animations-presets.reel/animations-presets.js | |||
@@ -0,0 +1,28 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component, | ||
9 | DefaultPresets = require("js/panels/presets/default-animation-presets").animationPresets; | ||
10 | |||
11 | exports.AnimationsLibrary = Montage.create(Component, { | ||
12 | hasTemplate: { | ||
13 | value: true | ||
14 | }, | ||
15 | presetData : { | ||
16 | value: null | ||
17 | }, | ||
18 | deserializedFromTemplate : { | ||
19 | value: function() { | ||
20 | this.presetData = DefaultPresets; | ||
21 | } | ||
22 | }, | ||
23 | handleNodeActivation: { | ||
24 | value: function(presetData) { | ||
25 | this.application.ninja.presetsController.applyPreset(presetData); | ||
26 | } | ||
27 | } | ||
28 | }); | ||
diff --git a/js/panels/presets/content.reel/content.css b/js/panels/presets/content.reel/content.css index c0ccbad4..409e1960 100644 --- a/js/panels/presets/content.reel/content.css +++ b/js/panels/presets/content.reel/content.css | |||
@@ -10,9 +10,7 @@ | |||
10 | -webkit-box-orient: vertical; | 10 | -webkit-box-orient: vertical; |
11 | -webkit-box-flex: 1; | 11 | -webkit-box-flex: 1; |
12 | } | 12 | } |
13 | .presetsPanel .treeRoot { | 13 | |
14 | margin: 0 8px; | ||
15 | } | ||
16 | .tab-bar { | 14 | .tab-bar { |
17 | -webkit-box-flex: 0; | 15 | -webkit-box-flex: 0; |
18 | background-color: #282828; | 16 | background-color: #282828; |
diff --git a/js/panels/presets/content.reel/content.html b/js/panels/presets/content.reel/content.html index 38de2a6d..afbdd559 100644 --- a/js/panels/presets/content.reel/content.html +++ b/js/panels/presets/content.reel/content.html | |||
@@ -19,7 +19,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
19 | "tabBar" : {"#": "tab-bar" }, | 19 | "tabBar" : {"#": "tab-bar" }, |
20 | "tabs" : [ | 20 | "tabs" : [ |
21 | {"key":"styles", "tab": {"#": "styles" }}, | 21 | {"key":"styles", "tab": {"#": "styles" }}, |
22 | {"key":"transitions", "tab": {"#": "transitions" }} | 22 | {"key":"transitions", "tab": {"#": "transitions" }}, |
23 | {"key":"animations", "tab": {"#": "animations" }} | ||
23 | ] | 24 | ] |
24 | } | 25 | } |
25 | }, | 26 | }, |
@@ -30,8 +31,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
30 | "element": {"#": "librarySlot"}, | 31 | "element": {"#": "librarySlot"}, |
31 | "switchComponents": { | 32 | "switchComponents": { |
32 | "styles": {"@": "stylesLibrary"}, | 33 | "styles": {"@": "stylesLibrary"}, |
33 | "transitions": {"@": "transitionsLibrary"} | 34 | "transitions": {"@": "transitionsLibrary"}, |
34 | 35 | "animations": {"@": "animationsLibrary"} | |
35 | } | 36 | } |
36 | }, | 37 | }, |
37 | "bindings": { | 38 | "bindings": { |
@@ -49,6 +50,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
49 | "transitionsLibrary": { | 50 | "transitionsLibrary": { |
50 | "module": "js/panels/presets/transitions-presets.reel", | 51 | "module": "js/panels/presets/transitions-presets.reel", |
51 | "name": "TransitionsLibrary" | 52 | "name": "TransitionsLibrary" |
53 | }, | ||
54 | "animationsLibrary": { | ||
55 | "module": "js/panels/presets/animations-presets.reel", | ||
56 | "name": "AnimationsLibrary" | ||
52 | } | 57 | } |
53 | 58 | ||
54 | } | 59 | } |
@@ -57,8 +62,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
57 | <body> | 62 | <body> |
58 | <section id="presetsPanel" class="presetsPanel"> | 63 | <section id="presetsPanel" class="presetsPanel"> |
59 | <nav id="tab-bar" class="tab-bar"> | 64 | <nav id="tab-bar" class="tab-bar"> |
60 | <div id="styles">Style Library</div> | 65 | <div id="styles">Styles</div> |
61 | <div id="transitions">Transitions Library</div> | 66 | <div id="transitions">Transitions</div> |
67 | <div id="animations">Animations</div> | ||
62 | </nav> | 68 | </nav> |
63 | <div id="librarySlot" class="librarySlot"></div> | 69 | <div id="librarySlot" class="librarySlot"></div> |
64 | </section> | 70 | </section> |
diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js new file mode 100644 index 00000000..b12a94b2 --- /dev/null +++ b/js/panels/presets/default-animation-presets.js | |||
@@ -0,0 +1,185 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | exports.animationPresets = { | ||
8 | "text": "Animation Presets Library", | ||
9 | "children": [{ | ||
10 | "text": "Border Animations", | ||
11 | "children": [ | ||
12 | { | ||
13 | "text": "Border Morph", | ||
14 | "selectorBase" : "border-morph", | ||
15 | "rules" : [{ | ||
16 | "styles" : { | ||
17 | "-webkit-animation": "border-morph 2s infinite" | ||
18 | } | ||
19 | }, | ||
20 | { | ||
21 | "isKeyFrameRule": true, | ||
22 | "keys" : [{ | ||
23 | "keyText": "0%", | ||
24 | "styles": { "border-radius": "0" } | ||
25 | }, { | ||
26 | "keyText": "50%", | ||
27 | "styles": { | ||
28 | "border-radius": "100%" | ||
29 | } | ||
30 | }, { | ||
31 | "keyText": "100%", | ||
32 | "styles": { | ||