OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
6 Code distributed by Google as part of the polymer project is also | |
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
8 --> | |
9 | |
10 <!-- | |
11 `core-drawer-panel` contains a drawer panel and a main panel. The drawer | |
12 and the main panel are side-by-side with drawer on the left. When browser | |
13 window size is smaller than the `responsiveWidth`, `core-drawer-panel` | |
14 changes to narrow layout. In narrow layout, the drawer will be stacked on top | |
15 of the main panel. The drawer will be slided in/out to hide/reveal the main | |
16 panel. | |
17 | |
18 Use the attribute `drawer` to indicate the element is a drawer panel and | |
19 `main` to indicate is a main panel. | |
20 | |
21 Example: | |
22 | |
23 <core-drawer-panel> | |
24 <div drawer> Drawer panel... </div> | |
25 <div main> Main panel... </div> | |
26 </core-drawer-panel> | |
27 | |
28 The drawer and the main panels are not scrollable. You can set CSS overflow | |
29 property on the elements to make them scrollable or use `core-header-panel`. | |
30 | |
31 Example: | |
32 | |
33 <core-drawer-panel> | |
34 <core-header-panel drawer> | |
35 <core-toolbar></core-toolbar> | |
36 <div> Drawer content... </div> | |
37 </core-header-panel> | |
38 <core-header-panel main> | |
39 <core-toolbar></core-toolbar> | |
40 <div> Main content... </div> | |
41 </core-header-panel> | |
42 </core-drawer-panel> | |
43 | |
44 To position the drawer to the right, add `rightDrawer` attribute. | |
45 | |
46 <core-drawer-panel rightDrawer> | |
47 <div drawer> Drawer panel... </div> | |
48 <div main> Main panel... </div> | |
49 </core-drawer-panel> | |
50 | |
51 @group Polymer Core Elements | |
52 @element core-drawer-panel | |
53 @homepage github.io | |
54 --> | |
55 | |
56 <link rel="import" href="../core-media-query/core-media-query.html"> | |
57 <link rel="import" href="../core-selector/core-selector.html"> | |
58 | |
59 <polymer-element name="core-drawer-panel" touch-action="auto"> | |
60 <template> | |
61 | |
62 <link rel="stylesheet" href="core-drawer-panel.css"> | |
63 | |
64 <core-media-query query="max-width: {{responsiveWidth}}" queryMatches="{{query
Matches}}"></core-media-query> | |
65 | |
66 <core-selector class="{{ {'narrow-layout' : queryMatches, transition : transit
ion, dragging : dragging, 'right-drawer': rightDrawer} | tokenList }}" valueattr
="id" selected="{{selected}}"> | |
67 | |
68 <div id="main" _style="left: {{ narrow || rightDrawer ? '0' : drawerWidth }}
; right: {{ rightDrawer ? (narrow ? '' : drawerWidth) : '' }};"> | |
69 <content select="[main]"></content> | |
70 <div id="scrim" on-tap="{{togglePanel}}"></div> | |
71 </div> | |
72 | |
73 <div id="drawer" _style="width: {{ drawerWidth }}"> | |
74 <content select="[drawer]"></content> | |
75 </div> | |
76 | |
77 </core-selector> | |
78 | |
79 </template> | |
80 <script> | |
81 | |
82 Polymer('core-drawer-panel', { | |
83 /** | |
84 * Fired when the narrow layout changes. | |
85 * | |
86 * @event core-responsive-change | |
87 * @param {Object} detail | |
88 * @param {boolean} detail.narrow true if the panel is in narrow layout. | |
89 */ | |
90 | |
91 publish: { | |
92 | |
93 /** | |
94 * Width of the drawer panel. | |
95 * | |
96 * @attribute drawerWidth | |
97 * @type string | |
98 * @default '256px' | |
99 */ | |
100 drawerWidth: '256px', | |
101 | |
102 /** | |
103 * Max-width when the panel changes to narrow layout. | |
104 * | |
105 * @attribute responsiveWidth | |
106 * @type string | |
107 * @default '640px' | |
108 */ | |
109 responsiveWidth: '640px', | |
110 | |
111 /** | |
112 * The panel that is being selected. `drawer` for the drawer panel and | |
113 * `main` for the main panel. | |
114 * | |
115 * @attribute selected | |
116 * @type string | |
117 * @default null | |
118 */ | |
119 selected: {value: null, reflect: true}, | |
120 | |
121 /** | |
122 * The panel to be selected when `core-drawer-panel` changes to narrow | |
123 * layout. | |
124 * | |
125 * @attribute defaultSelected | |
126 * @type string | |
127 * @default 'main' | |
128 */ | |
129 defaultSelected: 'main', | |
130 | |
131 /** | |
132 * Returns true if the panel is in narrow layout. This is useful if you | |
133 * need to show/hide elements based on the layout. | |
134 * | |
135 * @attribute narrow | |
136 * @type boolean | |
137 * @default false | |
138 */ | |
139 narrow: {value: false, reflect: true}, | |
140 | |
141 /** | |
142 * If true, position the drawer to the right. | |
143 * | |
144 * @attribute rightDrawer | |
145 * @type boolean | |
146 * @default false | |
147 */ | |
148 rightDrawer: false, | |
149 | |
150 /** | |
151 * If true, swipe to open/close the drawer is disabled. | |
152 * | |
153 * @attribute disableSwipe | |
154 * @type boolean | |
155 * @default false | |
156 */ | |
157 disableSwipe: false | |
158 }, | |
159 | |
160 eventDelegates: { | |
161 trackstart: 'trackStart', | |
162 trackx: 'trackx', | |
163 trackend: 'trackEnd' | |
164 }, | |
165 | |
166 transition: false, | |
167 | |
168 edgeSwipeSensitivity : 15, | |
169 | |
170 dragging : false, | |
171 | |
172 domReady: function() { | |
173 // to avoid transition at the beginning e.g. page loads | |
174 // NOTE: domReady is already raf delayed and delaying another frame | |
175 // ensures a layout has occurred. | |
176 this.async(function() { | |
177 this.transition = true; | |
178 }); | |
179 }, | |
180 | |
181 /** | |
182 * Toggles the panel open and closed. | |
183 * | |
184 * @method togglePanel | |
185 */ | |
186 togglePanel: function() { | |
187 this.selected = this.selected === 'main' ? 'drawer' : 'main'; | |
188 }, | |
189 | |
190 /** | |
191 * Opens the drawer. | |
192 * | |
193 * @method openDrawer | |
194 */ | |
195 openDrawer: function() { | |
196 this.selected = 'drawer'; | |
197 }, | |
198 | |
199 /** | |
200 * Closes the drawer. | |
201 * | |
202 * @method closeDrawer | |
203 */ | |
204 closeDrawer: function() { | |
205 this.selected = 'main'; | |
206 }, | |
207 | |
208 queryMatchesChanged: function() { | |
209 if (this.queryMatches) { | |
210 this.selected = this.defaultSelected; | |
211 } | |
212 this.narrow = this.queryMatches; | |
213 this.setAttribute('touch-action', | |
214 this.narrow && !this.disableSwipe ? 'pan-y' : ''); | |
215 this.fire('core-responsive-change', {narrow: this.narrow}); | |
216 }, | |
217 | |
218 // swipe support for the drawer, inspired by | |
219 // https://github.com/Polymer/core-drawer-panel/pull/6 | |
220 trackStart : function(e) { | |
221 if (this.narrow && !this.disableSwipe) { | |
222 this.dragging = true; | |
223 | |
224 if (this.selected === 'main') { | |
225 this.dragging = this.rightDrawer ? | |
226 e.pageX >= this.offsetWidth - this.edgeSwipeSensitivity : | |
227 e.pageX <= this.edgeSwipeSensitivity; | |
228 } | |
229 | |
230 if (this.dragging) { | |
231 this.width = this.$.drawer.offsetWidth; | |
232 this.transition = false; | |
233 e.preventTap(); | |
234 } | |
235 } | |
236 }, | |
237 | |
238 trackx : function(e) { | |
239 if (this.dragging) { | |
240 var x; | |
241 if (this.rightDrawer) { | |
242 x = Math.max(0, (this.selected === 'main') ? this.width + e.dx : e.dx)
; | |
243 } else { | |
244 x = Math.min(0, (this.selected === 'main') ? e.dx - this.width : e.dx)
; | |
245 } | |
246 this.moveDrawer(x); | |
247 } | |
248 }, | |
249 | |
250 trackEnd : function(e) { | |
251 if (this.dragging) { | |
252 this.dragging = false; | |
253 this.transition = true; | |
254 this.moveDrawer(null); | |
255 | |
256 if (this.rightDrawer) { | |
257 this.selected = e.xDirection > 0 ? 'main' : 'drawer'; | |
258 } else { | |
259 this.selected = e.xDirection > 0 ? 'drawer' : 'main'; | |
260 } | |
261 } | |
262 }, | |
263 | |
264 moveDrawer: function(translateX) { | |
265 var s = this.$.drawer.style; | |
266 s.webkitTransform = s.transform = | |
267 translateX === null ? '' : 'translate3d(' + translateX + 'px, 0, 0)'; | |
268 } | |
269 | |
270 }); | |
271 | |
272 </script> | |
273 </polymer-element> | |
OLD | NEW |