diff options
author | Jonathan Duran | 2012-03-01 20:01:36 -0800 |
---|---|---|
committer | Jonathan Duran | 2012-03-01 20:01:36 -0800 |
commit | b8fad971d8cf82cdc182160aa72d0c8e69800f76 (patch) | |
tree | e7791aacc4b4d59127600ad3e99bbb042b6506b0 /js/panels/Panel.reel | |
parent | 28befbc159399f70f00034f52e56a60dae0a3ba1 (diff) | |
parent | ff0a956f33df034e9a009cfcb8999e469456a4b5 (diff) | |
download | ninja-b8fad971d8cf82cdc182160aa72d0c8e69800f76.tar.gz |
Merge branch 'refs/heads/NINJAmaster' into Timeline
Diffstat (limited to 'js/panels/Panel.reel')
-rwxr-xr-x | js/panels/Panel.reel/Panel.html | 116 | ||||
-rwxr-xr-x | js/panels/Panel.reel/Panel.js | 279 |
2 files changed, 210 insertions, 185 deletions
diff --git a/js/panels/Panel.reel/Panel.html b/js/panels/Panel.reel/Panel.html index 7556952c..04e2930a 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,28 @@ | |||
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 | |||
37 | "owner": { | 116 | "owner": { |
38 | "module": "js/panels/Panel.reel", | 117 | "module": "js/panels/Panel.reel", |
39 | "name": "Panel", | 118 | "name": "Panel", |
40 | "properties": { | 119 | "properties": { |
41 | "element": {"#": "panel"}, | 120 | "element": {"#": "panel"}, |
42 | "resizer": {"@": "resizer1"}, | 121 | "resizer": {"@": "Resizer"}, |
43 | "panelContent": {"@": "slot1"} | 122 | "panelContent": {"@": "slot1"} |
44 | |||
45 | } | 123 | } |
46 | } | 124 | } |
47 | } | 125 | } |
@@ -50,11 +128,11 @@ | |||
50 | </head> | 128 | </head> |
51 | <body> | 129 | <body> |
52 | 130 | ||
53 | <article id="panel"> | 131 | <article id="panel" class="panel" draggable="draggable"> |
54 | <div id="head" class="head"> | 132 | <div id="head" class="head"> |
55 | <span class="arrowIcon"></span> | 133 | <span id="btnCollapse" class="arrowIcon"></span> |
56 | <span class="panelTitle">Panel</span> | 134 | <span id="panelTitle" class="panelTitle">Panel</span> |
57 | <span class="closeBtn"></span> | 135 | <span id="btnClose" class="closeBtn"></span> |
58 | </div> | 136 | </div> |
59 | <div class="panelBody"> | 137 | <div class="panelBody"> |
60 | <div class="panelBodyContent"> | 138 | <div class="panelBodyContent"> |
@@ -63,7 +141,7 @@ | |||
63 | </div> | 141 | </div> |
64 | </div> | 142 | </div> |
65 | </div> | 143 | </div> |
66 | <div data-montage-id="resizeBar" class="resizeBar"></div> | 144 | <div id="resizeBar" class="resizeBar"></div> |
67 | </article> | 145 | </article> |
68 | 146 | ||
69 | </body> | 147 | </body> |
diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index c8dd0456..e0bf3f18 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js | |||
@@ -9,227 +9,174 @@ 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: { value: "Panel" }, | |
13 | reelDidLoad: { | 13 | collapsedHeight: {value: 26}, |
14 | value: function() { | 14 | _collapsed: {value: false}, |
15 | } | 15 | _height: { value: 200 }, |
16 | }, | 16 | minHeight: {value: 200 }, |
17 | 17 | maxHeight: { value: null}, | |
18 | collapsedHeight: { | 18 | flexible: {value: true}, |
19 | value:26 | 19 | _locked: { value: false}, |
20 | }, | 20 | isResizing: {value: false }, |
21 | 21 | resizer: {value: null }, | |
22 | _isFirstDraw: { | 22 | modulePath: {value: null}, |
23 | value:false | 23 | moduleName: {value: null}, |
24 | }, | 24 | _contentComponent: {value: null}, |
25 | 25 | ||
26 | _panelBase: { | 26 | contentComponent: { |
27 | value: null | 27 | get: function() { |
28 | }, | 28 | return this._contentComponent; |
29 | |||
30 | panelBase: { | ||
31 | get: function() | ||
32 | { | ||
33 | return this._panelBase; | ||
34 | }, | 29 | }, |
35 | set: function(value) | 30 | set: function(val) { |
36 | { | 31 | if (val !== null && val !== this._contentComponent) { |
37 | this._panelBase = value; | 32 | this.panelContent.content = val; |
38 | this.needsDraw = true; | 33 | this.panelContent.needsDraw = true; |
34 | this._contentComponent = val; | ||
35 | } | ||
39 | } | 36 | } |
40 | }, | 37 | }, |
41 | 38 | ||
42 | _panelContent: { | 39 | collapsed: { |
43 | value: null | 40 | get: function() { |
44 | }, | 41 | return this._collapsed; |
45 | |||
46 | panelContent: { | ||
47 | get: function() | ||
48 | { | ||
49 | return this._panelContent; | ||
50 | }, | 42 | }, |
51 | set: function(value) | 43 | set: function(val) { |
52 | { | 44 | if (this._collapsed !== val) { |
53 | if (this._panelContent === value) { | 45 | this._collapsed = val; |