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 * @group Polymer Mixins | |
12 --> | |
13 | |
14 <link rel="import" href="../polymer/polymer.html"> | |
15 | |
16 <script> | |
17 | |
18 (function(scope) { | |
19 | |
20 /** | |
21 `Polymer.CoreResizable` and `Polymer.CoreResizer` are a set of mixins that can
be used | |
22 in Polymer elements to coordinate the flow of resize events between "resizers"
(elements | |
23 that control the size or hidden state of their children) and "resizables" (ele
ments that | |
24 need to be notified when they are resized or un-hidden by their parents in ord
er to take | |
25 action on their new measurements). | |
26 | |
27 Elements that perform measurement should add the `Core.Resizable` mixin to the
ir | |
28 Polymer prototype definition and listen for the `core-resize` event on themsel
ves. | |
29 This event will be fired when they become showing after having been hidden, | |
30 when they are resized explicitly by a `CoreResizer`, or when the window has be
en resized. | |
31 Note, the `core-resize` event is non-bubbling. | |
32 | |
33 `CoreResizable`'s must manually call the `resizableAttachedHandler` from the e
lement's | |
34 `attached` callback and `resizableDetachedHandler` from the element's `detache
d` | |
35 callback. | |
36 | |
37 @element CoreResizable | |
38 @status beta | |
39 @homepage github.io | |
40 */ | |
41 | |
42 scope.CoreResizable = { | |
43 | |
44 /** | |
45 * User must call from `attached` callback | |
46 * | |
47 * @method resizableAttachedHandler | |
48 */ | |
49 resizableAttachedHandler: function(cb) { | |
50 cb = cb || this._notifyResizeSelf; | |
51 this.async(function() { | |
52 var detail = {callback: cb, hasParentResizer: false}; | |
53 this.fire('core-request-resize', detail); | |
54 if (!detail.hasParentResizer) { | |
55 this._boundWindowResizeHandler = cb.bind(this); | |
56 // log('adding window resize handler', null, this); | |
57 window.addEventListener('resize', this._boundWindowResizeHandler); | |
58 } | |
59 }.bind(this)); | |
60 }, | |
61 | |
62 /** | |
63 * User must call from `detached` callback | |
64 * | |
65 * @method resizableDetachedHandler | |
66 */ | |
67 resizableDetachedHandler: function() { | |
68 this.fire('core-request-resize-cancel', null, this, false); | |
69 if (this._boundWindowResizeHandler) { | |
70 window.removeEventListener('resize', this._boundWindowResizeHandler); | |
71 } | |
72 }, | |
73 | |
74 // Private: fire non-bubbling resize event to self; returns whether | |
75 // preventDefault was called, indicating that children should not | |
76 // be resized | |
77 _notifyResizeSelf: function() { | |
78 return this.fire('core-resize', null, this, false).defaultPrevented; | |
79 } | |
80 | |
81 }; | |
82 | |
83 /** | |
84 `Polymer.CoreResizable` and `Polymer.CoreResizer` are a set of mixins that can
be used | |
85 in Polymer elements to coordinate the flow of resize events between "resizers"
(elements | |
86 that control the size or hidden state of their children) and "resizables" (ele
ments that | |
87 need to be notified when they are resized or un-hidden by their parents in ord
er to take | |
88 action on their new measurements). | |
89 | |
90 Elements that cause their children to be resized (e.g. a splitter control) or
hide/show | |
91 their children (e.g. overlay) should add the `Core.CoreResizer` mixin to their
| |
92 Polymer prototype definition and then call `this.notifyResize()` any time the
element | |
93 resizes or un-hides its children. | |
94 | |
95 `CoreResizer`'s must manually call the `resizerAttachedHandler` from the eleme
nt's | |
96 `attached` callback and `resizerDetachedHandler` from the element's `detached` | |
97 callback. | |
98 | |
99 Note: `CoreResizer` extends `CoreResizable`, and can listen for the `core-resi
ze` event | |
100 on itself if it needs to perform resize work on itself before notifying childr
en. | |
101 In this case, returning `false` from the `core-resize` event handler (or calli
ng | |
102 `preventDefault` on the event) will prevent notification of children if requir
ed. | |
103 | |
104 @element CoreResizer | |
105 @extends CoreResizable | |
106 @status beta | |
107 @homepage github.io | |
108 */ | |
109 | |
110 scope.CoreResizer = Polymer.mixin({ | |
111 | |
112 /** | |
113 * User must call from `attached` callback | |
114 * | |
115 * @method resizerAttachedHandler | |
116 */ | |
117 resizerAttachedHandler: function() { | |
118 this.resizableAttachedHandler(this.notifyResize); | |
119 this._boundResizeRequested = this._boundResizeRequested || this._handleRes
izeRequested.bind(this); | |
120 var listener; | |
121 if (this.resizerIsPeer) { | |
122 listener = this.parentElement || (this.parentNode && this.parentNode.hos
t); | |
123 listener._resizerPeers = listener._resizerPeers || []; | |
124 listener._resizerPeers.push(this); | |
125 } else { | |
126 listener = this; | |
127 } | |
128 listener.addEventListener('core-request-resize', this._boundResizeRequeste
d); | |
129 this._resizerListener = listener; | |
130 }, | |
131 | |
132 /** | |
133 * User must call from `detached` callback | |
134 * | |
135 * @method resizerDetachedHandler | |
136 */ | |
137 resizerDetachedHandler: function() { | |
138 this.resizableDetachedHandler(); | |
139 this._resizerListener.removeEventListener('core-request-resize', this._bou
ndResizeRequested); | |
140 }, | |
141 | |
142 /** | |
143 * User should call when resizing or un-hiding children | |
144 * | |
145 * @method notifyResize | |
146 */ | |
147 notifyResize: function() { | |
148 // Notify self | |
149 if (!this._notifyResizeSelf()) { | |
150 // Notify requestors if default was not prevented | |
151 var r = this.resizeRequestors; | |
152 if (r) { | |
153 for (var i=0; i<r.length; i++) { | |
154 var ri = r[i]; | |
155 if (!this.resizerShouldNotify || this.resizerShouldNotify(ri.target)
) { | |
156 // log('notifying resize', null, ri.target, true); | |
157 ri.callback.apply(ri.target); | |
158 // logEnd(); | |
159 } | |
160 } | |
161 } | |
162 } | |
163 }, | |
164 | |
165 /** | |
166 * User should implement to introduce filtering when notifying children. | |
167 * Generally, children that are hidden by the CoreResizer (e.g. non-active | |
168 * pages) need not be notified during resize, since they will be notified | |
169 * again when becoming un-hidden. | |
170 * | |
171 * Return `true` if CoreResizable passed as argument should be notified of | |
172 * resize. | |
173 * | |
174 * @method resizeerShouldNotify | |
175 * @param {Element} el | |
176 */ | |
177 // resizeerShouldNotify: function(el) { } // User to implement if needed | |
178 | |
179 /** | |
180 * Set to `true` if the resizer is actually a peer to the elements it | |
181 * resizes (e.g. splitter); in this case it will listen for resize requests | |
182 * events from its peers on its parent. | |
183 * | |
184 * @property resizerIsPeer | |
185 * @type Boolean | |
186 * @default false | |
187 */ | |
188 | |
189 // Private: Handle requests for resize | |
190 _handleResizeRequested: function(e) { | |
191 var target = e.path[0]; | |
192 if ((target == this) || | |
193 (target == this._resizerListener) || | |
194 (this._resizerPeers && this._resizerPeers.indexOf(target) < 0)) { | |
195 return; | |
196 } | |
197 // log('resize requested', target, this); | |
198 if (!this.resizeRequestors) { | |
199 this.resizeRequestors = []; | |
200 } | |
201 this.resizeRequestors.push({target: target, callback: e.detail.callback}); | |
202 target.addEventListener('core-request-resize-cancel', this._cancelResizeRe
quested.bind(this)); | |
203 e.detail.hasParentResizer = true; | |
204 e.stopPropagation(); | |
205 }, | |
206 | |
207 // Private: Handle cancellation requests for resize | |
208 _cancelResizeRequested: function(e) { | |
209 // Exit early if we're already out of the DOM (resizeRequestors will alrea
dy be null) | |
210 if (this.resizeRequestors) { | |
211 for (var i=0; i<this.resizeRequestors.length; i++) { | |
212 if (this.resizeRequestors[i].target == e.target) { | |
213 // log('resizeCanceled', e.target, this); | |
214 this.resizeRequestors.splice(i, 1); | |
215 break; | |
216 } | |
217 } | |
218 } | |
219 } | |
220 | |
221 }, Polymer.CoreResizable); | |
222 | |
223 // function prettyName(el) { | |
224 // return el.localName + (el.id ? '#' : '') + el.id; | |
225 // } | |
226 | |
227 // function log(what, from, to, group) { | |
228 // var args = [what]; | |
229 // if (from) { | |
230 // args.push('from ' + prettyName(from)); | |
231 // } | |
232 // if (to) { | |
233 // args.push('to ' + prettyName(to)); | |
234 // } | |
235 // if (group) { | |
236 // console.group.apply(console, args); | |
237 // } else { | |
238 // console.log.apply(console, args); | |
239 // } | |
240 // } | |
241 | |
242 // function logEnd() { | |
243 // console.groupEnd(); | |
244 // } | |
245 | |
246 })(Polymer); | |
247 | |
248 </script> | |
OLD | NEW |