diff options
author | Jose Antonio Marquez | 2012-03-09 13:36:41 -0800 |
---|---|---|
committer | Jose Antonio Marquez | 2012-03-09 13:36:41 -0800 |
commit | 9a03f869ff4520431da3ac8c64b748b5fbb60339 (patch) | |
tree | dad948f012cbc7d65e0dccde273667a389ff1c6d /js/panels/Panel.reel | |
parent | b0b4a1ee6792d98f06cbd8ecf5291e66db8a4eef (diff) | |
parent | b4eb2f6cc1208fe5c18aa1f02a85adda25075d81 (diff) | |
download | ninja-9a03f869ff4520431da3ac8c64b748b5fbb60339.tar.gz |
Merge branch 'refs/heads/Ninja-Internal' into Color
Diffstat (limited to 'js/panels/Panel.reel')
-rwxr-xr-x | js/panels/Panel.reel/Panel.html | 136 | ||||
-rwxr-xr-x | js/panels/Panel.reel/Panel.js | 283 |
2 files changed, 241 insertions, 178 deletions
diff --git a/js/panels/Panel.reel/Panel.html b/js/panels/Panel.reel/Panel.html index 7556952c..43b87940 100755 --- a/js/panels/Panel.reel/Panel.html +++ b/js/panels/Panel.reel/Panel.html | |||
@@ -8,22 +8,86 @@ | |||
8 | <head> | 8 | <head> |
9 | <script type="text/montage-serialization"> | 9 | <script type="text/montage-serialization"> |
10 | { | 10 | { |
11 | "resizer1": { | 11 | "Resizer": { |
12 | "module": "js/panels/Resizer", | 12 | "module": "js/panels/resize-composer", |
13 | "name": "Resizer", | 13 | "name": "ResizeComposer", |
14 | "properties": { | 14 | "properties": { |
15 | "element": {"#": "resizeBar"}, | 15 | "element": {"#": "resizeBar"}, |
16 | "panel": {"#": "panel"}, | 16 | "component": {"@": "owner"} |
17 | "isVertical": true, | ||
18 | "willSave": false | ||
19 | }, | 17 | }, |
20 | "bindings": { | 18 | "listeners": [ |
21 | "ownerId": { | 19 | { |
22 | "boundObject": {"@": "owner"}, | 20 | "type": "resizeStart", |
23 | "boundObjectPropertyPath": "panelBase.panelName", | 21 | "listener": {"@": "owner"} |
24 | "oneway": true | 22 | }, |
23 | { | ||
24 | "type": "resizeMove", | ||
25 | "listener": {"@": "owner"} | ||
26 | }, | ||
27 | { | ||
28 | "type": "resizeEnd", | ||
29 | "listener": {"@": "owner"} | ||
25 | } | 30 | } |
26 | } | 31 | ] |
32 | }, | ||
33 | |||
34 | "DragDrop": { | ||
35 | "module": "js/panels/drag-drop-composer", | ||
36 | "name": "DragDropComposer", | ||
37 | "properties": { | ||
38 | "element": {"@": "panelTitle"}, | ||
39 | "component": {"@": "owner"} | ||
40 | }, | ||
41 | "listeners": [ | ||
42 | { | ||
43 | "type": "dragStart", | ||
44 | "listener": {"@": "owner"} | ||
45 | }, | ||
46 | { | ||
47 | "type": "dropHover", | ||
48 | "listener": {"@": "owner"} | ||
49 | }, | ||
50 | { | ||
51 | "type": "dropped", | ||
52 | "listener": {"@": "owner"} | ||
53 | }, | ||
54 | { | ||
55 | "type": "dropEnd", | ||
56 | "listener": {"@": "owner"} | ||
57 | } | ||
58 | ] | ||
59 | }, | ||
60 | |||
61 | "btnCollapse": { | ||
62 | "module": "montage/ui/toggle-button.reel", | ||
63 | "name": "ToggleButton", | ||
64 | "properties": { | ||
65 | "element": {"#": "btnCollapse"}, | ||
66 | "pressedClass": "hide", | ||
67 | "identifier": "btnCollapse" | ||
68 | }, | ||
69 | "listeners": [ | ||
70 | { | ||
71 | "type": "action", | ||
72 | "listener": {"@": "owner"} | ||
73 | } | ||
74 | ] | ||
75 | }, | ||
76 | |||
77 | "btnClose": { | ||
78 | "module": "montage/ui/button.reel", | ||
79 | "name": "Button", | ||
80 | "properties": { | ||
81 | "element": {"#": "btnClose"}, | ||
82 | "pressedClass": "hide", | ||
83 | "identifier": "btnClose" | ||
84 | }, | ||
85 | "listeners": [ | ||
86 | { | ||
87 | "type": "action", | ||
88 | "listener": {"@": "owner"} | ||
89 | } | ||
90 | ] | ||
27 | }, | 91 | }, |
28 | 92 | ||
29 | "slot1": { | 93 | "slot1": { |
@@ -34,14 +98,43 @@ | |||
34 | } | 98 | } |
35 | }, | 99 | }, |
36 | 100 | ||
101 | "panelTitle": { | ||
102 | "module": "montage/ui/dynamic-text.reel", | ||
103 | "name": "DynamicText", | ||
104 | "properties": { | ||
105 | "element": {"#": "panelTitle"} | ||
106 | }, | ||
107 | "bindings": { | ||
108 | "value": { | ||
109 | "boundObject": {"@": "owner"}, | ||
110 | "boundObjectPropertyPath": "name", | ||
111 | "oneway": true | ||
112 | } | ||
113 | } | ||
114 | }, | ||
115 | |||
116 | "disabledCondition": { | ||
117 | "module": "montage/ui/condition.reel", | ||
118 | "name": "Condition", | ||
119 | "properties": { | ||
120 | "element": {"#": "disabledCondition"} | ||
121 | }, | ||
122 | "bindings": { | ||
123 | "condition": { | ||
124 | "boundObject": {"@": "owner"}, | ||
125 | "boundObjectPropertyPath": "disabled", | ||
126 | "oneway": true | ||
127 | } | ||
128 | } | ||
129 | }, | ||
130 | |||
37 | "owner": { | 131 | "owner": { |
38 | "module": "js/panels/Panel.reel", | 132 | "module": "js/panels/Panel.reel", |
39 | "name": "Panel", | 133 | "name": "Panel", |
40 | "properties": { | 134 | "properties": { |
41 | "element": {"#": "panel"}, | 135 | "element": {"#": "panel"}, |
42 | "resizer": {"@": "resizer1"}, | 136 | "resizer": {"@": "Resizer"}, |
43 | "panelContent": {"@": "slot1"} | 137 | "panelContent": {"@": "slot1"} |
44 | |||
45 | } | 138 | } |
46 | } | 139 | } |
47 | } | 140 | } |
@@ -50,20 +143,19 @@ | |||
50 | </head> | 143 | </head> |
51 | <body> | 144 | <body> |
52 | 145 | ||
53 | <article id="panel"> | 146 | <article id="panel" class="panel" draggable="draggable"> |
54 | <div id="head" class="head"> | 147 | <div id="head" class="head"> |
55 | <span class="arrowIcon"></span> | 148 | <span id="btnCollapse" class="arrowIcon"></span> |
56 | <span class="panelTitle">Panel</span> | 149 | <span id="panelTitle" class="panelTitle">Panel</span> |
57 | <span class="closeBtn"></span> | 150 | <span id="btnClose" class="closeBtn"></span> |
58 | </div> | 151 | </div> |
59 | <div class="panelBody"> | 152 | <div class="panelBody"> |
60 | <div class="panelBodyContent"> | 153 | <div class="panelBodyContent"> |
61 | <div id="panelObject" class="panelObjects"> | 154 | <div id="disabledCondition" class="panelDisabled"></div> |
62 | 155 | <div id="panelObject" class="panelObjects"></div> | |
63 | </div> | ||
64 | </div> | 156 | </div> |
65 | </div> | 157 | </div> |
66 | <div data-montage-id="resizeBar" class="resizeBar"></div> | 158 | <div id="resizeBar" class="resizeBar"></div> |
67 | </article> | 159 | </article> |
68 | 160 | ||
69 | </body> | 161 | </body> |
diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index c8dd0456..33f9b3a7 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js | |||
@@ -9,227 +9,198 @@ var Component = require("montage/ui/component").Component; | |||
9 | 9 | ||
10 | exports.Panel = Montage.create(Component, { | 10 | exports.Panel = Montage.create(Component, { |
11 | 11 | ||
12 | 12 | name: { | |
13 | reelDidLoad: { | 13 | value: "Panel" |
14 | value: function() { | ||
15 | } | ||
16 | }, | 14 | }, |
17 | 15 | ||
18 | collapsedHeight: { | 16 | _collapsed: { |
19 | value:26 | 17 | value: false |
20 | }, | 18 | }, |
21 | 19 | ||
22 | _isFirstDraw: { | 20 | _height: { |
23 | value:false | 21 | value: 200 |
24 | }, | 22 | }, |
25 | 23 | ||
26 | _panelBase: { | 24 | minHeight: { |
27 | value: null | 25 | value: 200 |
28 | }, | 26 | }, |
29 | 27 | ||
30 | panelBase: { | 28 | maxHeight: { |
31 | get: function() | ||
32 | { | ||
33 | return this._panelBase; | ||
34 | }, | ||
35 | set: function(value) | ||
36 | { | ||
37 | this._panelBase = value; | ||
38 | this.needsDraw = true; | ||
39 | } | ||
40 | }, | ||
41 | |||
42 | _panelContent: { | ||
43 | value: null | 29 | value: null |
44 | }, |