diff options
Diffstat (limited to 'js/panels/Panel.reel/Panel.html')
| -rwxr-xr-x | js/panels/Panel.reel/Panel.html | 136 |
1 files changed, 114 insertions, 22 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> |