aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Panel.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Panel.reel')
-rwxr-xr-xjs/panels/Panel.reel/Panel.html136
-rwxr-xr-xjs/panels/Panel.reel/Panel.js283
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
10exports.Panel = Montage.create(Component, { 10exports.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 }, 30 },
45 31
46 panelContent: { 32 flexible: {
47 get: function() 33 value: true
48 {