1 files changed, 97 insertions, 19 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 @@
 <head>
    <script type="text/montage-serialization">
        {
-            "resizer1": {
+            "Resizer": {
-                "module": "js/panels/Resizer",
+                "module": "js/panels/resize-composer",
-                "name": "Resizer",
+                "name": "ResizeComposer",
                "properties": {
                    "element": {"#": "resizeBar"},
-                    "panel": {"#": "panel"},
+                    "component": {"@": "owner"}
-                    "isVertical": true,
-                    "willSave": false
                },
-                "bindings": {
+                "listeners": [
-                    "ownerId": {
+                    {
-                        "boundObject": {"@": "owner"},
+                        "type": "resizeStart",
-                        "boundObjectPropertyPath": "panelBase.panelName",
+                        "listener": {"@": "owner"}
-                        "oneway": true
+                    },
+                    {
+                        "type": "resizeMove",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "resizeEnd",
+                        "listener": {"@": "owner"}
                    }
-                }
+                ]
+            },
+            "DragDrop": {
+                "module": "js/panels/drag-drop-composer",
+                "name": "DragDropComposer",
+                "properties": {
+                    "element": {"@": "panelTitle"},
+                    "component": {"@": "owner"}
+                },
+                "listeners": [
+                    {
+                        "type": "dragStart",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "dropHover",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "dropped",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "dropEnd",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+            },
+            "btnCollapse": {
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
+                "properties": {
+                    "element": {"#": "btnCollapse"},
+                    "pressedClass": "hide",
+                    "identifier": "btnCollapse"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+            },
+            "btnClose": {
+                "module": "montage/ui/button.reel",
+                "name": "Button",
+                "properties": {
+                    "element": {"#": "btnClose"},
+                    "pressedClass": "hide",
+                    "identifier": "btnClose"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
            },
            "slot1": {
@@ -34,14 +98,28 @@
                }
            },
+            "panelTitle": {
+                "module": "montage/ui/dynamic-text.reel",
+                "name": "DynamicText",
+                "properties": {
+                    "element": {"#": "panelTitle"}
+                },
+                "bindings": {
+                    "value": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "name",
+                        "oneway": true
+                    }
+                }
+            },
            "owner": {
                "module": "js/panels/Panel.reel",
                "name": "Panel",
                "properties": {
                    "element": {"#": "panel"},
-                    "resizer": {"@": "resizer1"},
+                    "resizer": {"@": "Resizer"},
                    "panelContent": {"@": "slot1"}
                }
            }
        }
@@ -50,11 +128,11 @@
        </head>
 <body>
-<article id="panel">
+<article id="panel" class="panel" draggable="draggable">
    <div id="head" class="head">
-        <span class="arrowIcon"></span>
+        <span id="btnCollapse" class="arrowIcon"></span>
-        <span class="panelTitle">Panel</span>
+        <span id="panelTitle" class="panelTitle">Panel</span>
-        <span class="closeBtn"></span>
+        <span id="btnClose" class="closeBtn"></span>
    </div>
    <div class="panelBody">
        <div class="panelBodyContent">
@@ -63,7 +141,7 @@
            </div>
        </div>
    </div>
-    <div data-montage-id="resizeBar" class="resizeBar"></div>
+    <div id="resizeBar" class="resizeBar"></div>
 </article>
 </body>

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>