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.html116
-rwxr-xr-xjs/panels/Panel.reel/Panel.js279
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
10exports.Panel = Montage.create(Component, { 10exports.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;
54 return; 46 this.needsDraw = true;
55 } 47 }