aboutsummaryrefslogtreecommitdiff
path: root/js/panels/presets/style-presets.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/presets/style-presets.reel')
-rw-r--r--js/panels/presets/style-presets.reel/style-presets.css0
-rw-r--r--js/panels/presets/style-presets.reel/style-presets.html58
-rw-r--r--js/panels/presets/style-presets.reel/style-presets.js119
3 files changed, 177 insertions, 0 deletions
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
--- /dev/null
+++ b/js/panels/presets/style-presets.reel/style-presets.css
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..58af617f
--- /dev/null
+++ b/js/panels/presets/style-presets.reel/style-presets.html
@@ -0,0 +1,58 @@
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="style-presets.css" type="text/css">
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module" : "js/panels/presets/style-presets.reel",
15 "name" : "StylesLibrary",
16 "properties" : {
17 "element" : {"#" : "stylesLibrary"},
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": "data2"
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 "showRoot" : false
44 }
45 },
46 "branch" : {
47 "module" : "js/components/treeview/ninja-branch.reel",
48 "name" : "Branch"
49 }
50 }
51 </script>
52</head>
53<body>
54<section id="stylesLibrary" class="stylesLibrary">
55 <div id="libraryContainer"></div>
56</section>
57</body>
58</html> \ 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 @@
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
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component;
9
10exports.StylesLibrary = Montage.create(Component, {
11 hasTemplate: {
12 value: true
13 },
14 contentPanel : {
15 value: "presets" // get from local storage
16 },
17 templateDidLoad : {
18 value: function() {
19 console.log('deserialized');
20 }
21 },
22 treeList : {
23 value : null
24 },
25 data2: {
26 value: {
27 "text": "styles",
28 "children": [{
29 "text": "Box Styles",
30 "children": [
31 {
32 "text": "Border-Radius",
33 "classNameBase" : "border-radius",
34 "styles" : {
35 "border-radius": "100px",
36 "border" : "1px solid #333"
37 }
38 },
39 {
40 "text": "Drop Shadow",
41 "classNameBase" : "drop-shadow",
42 "styles" : {
43 "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)",
44 "border" : "1px solid #CCC"
45 }
46 },
47 {
48 "text": "Fancy Box",
49 "classNameBase" : "fancy-box",
50 "styles" : {
51 "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333",
52 "border" : "1px solid #FFF",
53 "border-radius": "30px",
54 "background-color": "#7db9e8",
55 "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)"
56 }
57 }]
58 }, {
59 "text": "Text Styles",
60 "children": [
61 { "text": "Italic" },
62 { "text": "Text Shadow" },
63 { "text": "Text Color" } ]
64 }, {
65 "text": "Color Styles",
66 "children": [
67 { "text": "Background Gradient" },
68 { "text": "Background Color" },
69 { "text": "Text Highlight" } ]
70 }]
71 }
72 },
73 didDraw: {
74 value : function() {
75 console.log('Presets Panel prepare for draw.');
76// this.treeList.items.push({
77// label : "Box Style",
78// type : 'leaf'
79// });
80 }
81 },
82 applyPresetSelection : {
83 value: function(presetData) {
84 var selection = this.application.ninja.selectedElements,
85 self = this;
86
87 function setStopRuleSelector(selector) {
88 self.application.ninja
89 .currentDocument.documentRoot
90 .elementModel.controller
91 .changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector);
92 }
93
94 selection.forEach(function(el) {
95 el._element.style.webkitTransition = "all 450ms linear";
96
97 el._element.addEventListener("webkitTransitionEnd", function(e) {
98 console.log("calling transition end");
99 setStopRuleSelector("*");
100 });
101
102 setStopRuleSelector("transitionStopRule");
103
104 this.application.ninja.stylesController.setElementStyles(el._element, presetData.styles);
105 }, this);
106
107 }
108 },
109 shouldChangeSelection : {
110 value : function(controller, newSelection, oldSelection) {
111 //
112 //debugger;
113 console.log('1Handle should change selection');
114 return false;
115 }
116 }
117
118
119});
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-20 00:06:00 +0000