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