3
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7
Code distributed by Google as part of the polymer project is also
8
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
11
<link rel="import" href="../polymer/polymer.html">
15
* `IronResizableBehavior` is a behavior that can be used in Polymer elements to
16
* coordinate the flow of resize events between "resizers" (elements that control the
17
* size or hidden state of their children) and "resizables" (elements that need to be
18
* notified when they are resized or un-hidden by their parents in order to take
19
* action on their new measurements).
21
* Elements that perform measurement should add the `IronResizableBehavior` behavior to
22
* their element definition and listen for the `iron-resize` event on themselves.
23
* This event will be fired when they become showing after having been hidden,
24
* when they are resized explicitly by another resizable, or when the window has been
27
* Note, the `iron-resize` event is non-bubbling.
29
* @polymerBehavior Polymer.IronResizableBehavior
30
* @demo demo/index.html
32
Polymer.IronResizableBehavior = {
35
* The closest ancestor element that implements `IronResizableBehavior`.
39
observer: '_parentResizableChanged'
43
* True if this element is currently notifying its descedant elements of
46
_notifyingDescendant: {
53
'iron-request-resize-notifications': '_onIronRequestResizeNotifications'
57
// We don't really need property effects on these, and also we want them
58
// to be created before the `_parentResizable` observer fires:
59
this._interestedResizables = [];
60
this._boundNotifyResize = this.notifyResize.bind(this);
63
attached: function() {
64
this.fire('iron-request-resize-notifications', null, {
70
if (!this._parentResizable) {
71
window.addEventListener('resize', this._boundNotifyResize);
76
detached: function() {
77
if (this._parentResizable) {
78
this._parentResizable.stopResizeNotificationsFor(this);
80
window.removeEventListener('resize', this._boundNotifyResize);
83
this._parentResizable = null;
87
* Can be called to manually notify a resizable and its descendant
88
* resizables of a resize change.
90
notifyResize: function() {
91
if (!this.isAttached) {
95
this._interestedResizables.forEach(function(resizable) {
96
if (this.resizerShouldNotify(resizable)) {
97
this._notifyDescendant(resizable);
105
* Used to assign the closest resizable ancestor to this resizable
106
* if the ancestor detects a request for notifications.
108
assignParentResizable: function(parentResizable) {
109
this._parentResizable = parentResizable;
113
* Used to remove a resizable descendant from the list of descendants
114
* that should be notified of a resize change.
116
stopResizeNotificationsFor: function(target) {
117
var index = this._interestedResizables.indexOf(target);
120
this._interestedResizables.splice(index, 1);
121
this.unlisten(target, 'iron-resize', '_onDescendantIronResize');
126
* This method can be overridden to filter nested elements that should or
127
* should not be notified by the current element. Return true if an element
128
* should be notified, or false if it should not be notified.
130
* @param {HTMLElement} element A candidate descendant element that
131
* implements `IronResizableBehavior`.
132
* @return {boolean} True if the `element` should be notified of resize.
134
resizerShouldNotify: function(element) { return true; },
136
_onDescendantIronResize: function(event) {
137
if (this._notifyingDescendant) {
138
event.stopPropagation();
142
// NOTE(cdata): In ShadowDOM, event retargetting makes echoing of the
143
// otherwise non-bubbling event "just work." We do it manually here for
144
// the case where Polymer is not using shadow roots for whatever reason:
145
if (!Polymer.Settings.useShadow) {
150
_fireResize: function() {
151
this.fire('iron-resize', null, {
157
_onIronRequestResizeNotifications: function(event) {
158
var target = event.path ? event.path[0] : event.target;
160
if (target === this) {
164
if (this._interestedResizables.indexOf(target) === -1) {
165
this._interestedResizables.push(target);
166
this.listen(target, 'iron-resize', '_onDescendantIronResize');
169
target.assignParentResizable(this);
170
this._notifyDescendant(target);
172
event.stopPropagation();
175
_parentResizableChanged: function(parentResizable) {
176
if (parentResizable) {
177
window.removeEventListener('resize', this._boundNotifyResize);
181
_notifyDescendant: function(descendant) {
182
// NOTE(cdata): In IE10, attached is fired on children first, so it's
183
// important not to notify them if the parent is not attached yet (or
184
// else they will get redundantly notified when the parent attaches).
185
if (!this.isAttached) {
189
this._notifyingDescendant = true;
190
descendant.notifyResize();
191
this._notifyingDescendant = false;