aboutsummaryrefslogtreecommitdiff
path: root/js/panels/presets
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/presets')
-rw-r--r--js/panels/presets/content.reel/content.css58
-rw-r--r--js/panels/presets/content.reel/content.html66
-rw-r--r--js/panels/presets/content.reel/content.js79
-rw-r--r--js/panels/presets/default-style-presets.js72
-rw-r--r--js/panels/presets/default-transition-presets.js93
-rw-r--r--js/panels/presets/presets-panel.js15
-rw-r--r--js/panels/presets/style-presets.reel/style-presets.css5
-rw-r--r--js/panels/presets/style-presets.reel/style-presets.html59
-rw-r--r--js/panels/presets/style-presets.reel/style-presets.js79
-rw-r--r--js/panels/presets/transitions-presets.reel/transitions-presets.css5
-rw-r--r--js/panels/presets/transitions-presets.reel/transitions-presets.html58
-rw-r--r--js/panels/presets/transitions-presets.reel/transitions-presets.js46
12 files changed, 635 insertions, 0 deletions
diff --git a/js/panels/presets/content.reel/content.css b/js/panels/presets/content.reel/content.css
new file mode 100644
index 00000000..c0ccbad4
--- /dev/null
+++ b/js/panels/presets/content.reel/content.css
@@ -0,0 +1,58 @@
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.presetsPanel {
8 display: -webkit-box;
9 text-shadow: 1px 1px 1px #000;
10 -webkit-box-orient: vertical;
11 -webkit-box-flex: 1;
12}
13.presetsPanel .treeRoot {
14 margin: 0 8px;
15}
16.tab-bar {
17 -webkit-box-flex: 0;
18 background-color: #282828;
19 color: #FFF;
20 display: -webkit-box;
21 font-size: 12px;
22 -webkit-box-orient: horizontal;
23}
24
25.tab-bar div {
26 -webkit-box-flex: 0;
27 border-top-right-radius: 2px;
28 border-top-left-radius: 2px;
29 background-color: #474747;
30 background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.2) 0,rgba(0,0,0,0) 3px);
31 border-top: 1px solid rgb(100, 100, 100);
32 border-left: 1px solid rgba(100, 100, 100, 0.3);
33 border-right: 1px solid rgba(100, 100, 100, 0.3);
34 padding: 4px 9px;
35 cursor: pointer;
36 opacity: 0.6;
37 white-space: nowrap;
38 text-overflow: ellipsis;
39 overflow: hidden;
40 position: relative;
41 z-index: 999;
42}
43.tab-bar div.active-tab {
44 background-image: none;
45 box-shadow: 0 -5px 2px 3px rgba(0,0,0,0.2);
46 position: relative;
47 opacity: 1;
48 text-overflow: clip;
49 z-index: 1001;
50}
51
52.librarySlot {
53 -webkit-box-flex: 1;
54 overflow: auto;
55 background-color: #474747;
56 position: relative;
57 z-index: 1000;
58} \ 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 @@
1<!DOCTYPE html>
2<!-- <copyright>
3This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4No 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="content.css" type="text/css">
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module" : "js/panels/presets/content.reel",
15 "name" : "Content",
16 "properties" : {
17 "element" : {"#" : "presetsPanel"},
18 "activeTabIndex": 0,
19 "tabBar" : {"#": "tab-bar" },
20 "tabs" : [
21 {"key":"styles", "tab": {"#": "styles" }},
22 {"key":"transitions", "tab": {"#": "transitions" }}
23 ]
24 }
25 },
26 "substitution": {
27 "module": "montage/ui/substitution.reel",
28 "name": "Substitution",
29 "properties": {
30 "element": {"#": "librarySlot"},
31 "switchComponents": {
32 "styles": {"@": "stylesLibrary"},
33 "transitions": {"@": "transitionsLibrary"}
34
35 }
36 },
37 "bindings": {
38 "switchValue": {
39 "boundObject": {"@": "owner"},
40 "boundObjectPropertyPath": "contentPanel",
41 "oneway": true
42 }
43 }
44 },
45 "stylesLibrary": {
46 "module": "js/panels/presets/style-presets.reel",
47 "name": "StylesLibrary"
48 },
49 "transitionsLibrary": {
50 "module": "js/panels/presets/transitions-presets.reel",
51 "name": "TransitionsLibrary"
52 }
53
54 }
55 </script>
56</head>
57<body>
58 <section id="presetsPanel" class="presetsPanel">
59 <nav id="tab-bar" class="tab-bar">
60 <div id="styles">Style Library</div>
61 <div id="transitions">Transitions Library</div>
62 </nav>
63 <div id="librarySlot" class="librarySlot"></div>
64 </section>
65</body>
66</html> \ 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..c43c593c
--- /dev/null
+++ b/js/panels/presets/content.reel/content.js
@@ -0,0 +1,79 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No 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
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component;
9
10exports.content = Montage.create(Component, {
11 hasTemplate: {
12 value: true
13 },
14 contentPanel : {
15 value: null
16 },
17 templateDidLoad : {
18 value: function() {
19 var storedTabIndex = window.localStorage.presetsTabIndex;
20 if(storedTabIndex) {
21 this.activeTabIndex = storedTabIndex;
22 }
23 }
24 },
25 prepareForDraw : {
26 value: function() {
27 this.activeTab = this.tabs[this.activeTabIndex];
28 this.tabBar.addEventListener('click', this, false);
29 }
30 },
31 handleClick : {
32 value: function(e) {
33 var tabObject = this.tabs.filter(function(item) {
34 return item.tab === e._event.target;
35 });
36
37 if(tabObject[0]) {
38 this.activeTab = tabObject[0];
39 }
40
41 }
42 },
43 _activeTab : {
44 value: null,
45 enumerable: false
46 },
47 activeTab : {
48 get: function() {
49 return this._activeTab;
50 },
51 set: function(tabObject) {
52 this.contentPanel = tabObject.key;
53 window.localStorage.presetsTabIndex = this.tabs.indexOf(tabObject);
54 this._tabToDeactivate = this._activeTab;
55 this._activeTab = tabObject;
56
57 this.needsDraw = this._needsTabSwitch = true;
58 }
59 },
60 _tabToDeactivate : {
61 value: null,
62 enumarable: false
63 },
64 _needsTabSwitch : {
65 value: null,
66 enumerable: false
67 },
68 draw : {
69 value: function() {
70 if(this._needsTabSwitch) {
71 if(this._tabToDeactivate) {
72 this._tabToDeactivate.tab.classList.remove('active-tab');
73 }
74
75 this._activeTab.tab.classList.add('active-tab');
76 }
77 }
78 }
79});
diff --git a/js/panels/presets/default-style-presets.js b/js/panels/presets/default-style-presets.js
new file mode 100644
index 00000000..3677d976
--- /dev/null
+++ b/js/panels/presets/default-style-presets.js
@@ -0,0 +1,72 @@
1/* <copyright>