mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
Manually merge changes from #5418
This commit is contained in:
Steven Orvell
@@ -30,316 +30,348 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</dom-module>
|
||||
|
||||
<script type="module">
|
||||
import { Polymer, html } from '../../polymer-legacy.js';
|
||||
window.BehaviorA = {
|
||||
properties: {
|
||||
import { Polymer, html } from '../../polymer-legacy.js';
|
||||
window.BehaviorA = {
|
||||
properties: {
|
||||
|
||||
label: {
|
||||
type: String,
|
||||
observer: '_labelChanged'
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
observer: '_labelChanged'
|
||||
},
|
||||
|
||||
hasOptionsA: {
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
hasOptionsA: {
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
overridableProperty: {
|
||||
value: false
|
||||
},
|
||||
overridableProperty: {
|
||||
value: false
|
||||
},
|
||||
|
||||
overridablePropertyB: {
|
||||
value: false
|
||||
},
|
||||
overridablePropertyB: {
|
||||
value: false
|
||||
},
|
||||
|
||||
hasBehaviorA: {
|
||||
value: true
|
||||
},
|
||||
hasBehaviorA: {
|
||||
value: true
|
||||
},
|
||||
|
||||
computeADependency: {
|
||||
value: true
|
||||
},
|
||||
computeADependency: {
|
||||
value: true
|
||||
},
|
||||
|
||||
computeA: {
|
||||
computed: '_computeProp(computeADependency)'
|
||||
}
|
||||
},
|
||||
computeA: {
|
||||
computed: '_computeProp(computeADependency)'
|
||||
}
|
||||
},
|
||||
|
||||
_simpleProperty: 'A',
|
||||
_simpleProperty: 'A',
|
||||
|
||||
hostAttributes: {
|
||||
behavior: 'A',
|
||||
element: 'A',
|
||||
user: 'A'
|
||||
},
|
||||
hostAttributes: {
|
||||
behavior: 'A',
|
||||
element: 'A',
|
||||
user: 'A'
|
||||
},
|
||||
|
||||
listeners: {
|
||||
change: '_changeHandler'
|
||||
},
|
||||
listeners: {
|
||||
change: '_changeHandler'
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
this.__readyA = true;
|
||||
},
|
||||
ready: function() {
|
||||
this.__readyA = true;
|
||||
},
|
||||
|
||||
_labelChanged: function(label) {
|
||||
this.__label = label;
|
||||
},
|
||||
_labelChanged: function(label) {
|
||||
this.__label = label;
|
||||
},
|
||||
|
||||
_changeHandler: function(e) {
|
||||
this.__change = e.detail.value;
|
||||
},
|
||||
_changeHandler: function(e) {
|
||||
this.__change = e.detail.value;
|
||||
},
|
||||
|
||||
_computeProp: function(a) {
|
||||
return a;
|
||||
}
|
||||
};
|
||||
_computeProp: function(a) {
|
||||
return a;
|
||||
}
|
||||
};
|
||||
|
||||
window.BehaviorB = {
|
||||
properties: {
|
||||
window.BehaviorB = {
|
||||
properties: {
|
||||
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: '_disabledChanged'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: '_disabledChanged'
|
||||
},
|
||||
|
||||
hasOptionsB: {
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
hasOptionsB: {
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
hasBehaviorB: {
|
||||
value: true
|
||||
},
|
||||
hasBehaviorB: {
|
||||
value: true
|
||||
},
|
||||
|
||||
overridablePropertyB: {
|
||||
value: true
|
||||
},
|
||||
overridablePropertyB: {
|
||||
value: true
|
||||
},
|
||||
|
||||
computeADependencyDependency: {
|
||||
value: 'hi'
|
||||
},
|
||||
computeADependencyDependency: {
|
||||
value: 'hi'
|
||||
},
|
||||
|
||||
computeADependency: {
|
||||
computed: '_computeProp(computeADependencyDependency)'
|
||||
}
|
||||
computeADependency: {
|
||||
computed: '_computeProp(computeADependencyDependency)'
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
hostAttributes: {
|
||||
behavior: 'B',
|
||||
element: 'B',
|
||||
user: 'B'
|
||||
},
|
||||
hostAttributes: {
|
||||
behavior: 'B',
|
||||
element: 'B',
|
||||
user: 'B'
|
||||
},
|
||||
|
||||
_simpleProperty: 'B',
|
||||
_simpleProperty: 'B',
|
||||
|
||||
_disabledChanged: function(disabled) {
|
||||
this.__disabled = disabled;
|
||||
},
|
||||
_disabledChanged: function(disabled) {
|
||||
this.__disabled = disabled;
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
this.__readyB = true;
|
||||
},
|
||||
};
|
||||
ready: function() {
|
||||
this.__readyB = true;
|
||||
},
|
||||
};
|
||||
|
||||
window.BehaviorC = {
|
||||
window.BehaviorC = {
|
||||
|
||||
properties: {
|
||||
properties: {
|
||||
|
||||
hasBehaviorC: {
|
||||
value: true
|
||||
}
|
||||
hasBehaviorC: {
|
||||
value: true
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
_simpleProperty: 'C'
|
||||
};
|
||||
_simpleProperty: 'C'
|
||||
};
|
||||
|
||||
window.BehaviorD = {
|
||||
window.BehaviorD = {
|
||||
|
||||
properties: {
|
||||
properties: {
|
||||
|
||||
hasBehaviorD: {
|
||||
value: true
|
||||
}
|
||||
hasBehaviorD: {
|
||||
value: true
|
||||
}
|
||||
|
||||
},
|
||||
_simpleProperty: 'D'
|
||||
},
|
||||
_simpleProperty: 'D'
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
Polymer({
|
||||
is: 'single-behavior',
|
||||
Polymer({
|
||||
is: 'single-behavior',
|
||||
|
||||
behaviors: [
|
||||
window.BehaviorA
|
||||
],
|
||||
behaviors: [
|
||||
window.BehaviorA
|
||||
],
|
||||
|
||||
properties: {},
|
||||
observers: [],
|
||||
hostAttributes: {},
|
||||
listeners: {}
|
||||
});
|
||||
properties: {},
|
||||
observers: [],
|
||||
hostAttributes: {},
|
||||
listeners: {}
|
||||
});
|
||||
|
||||
Polymer({
|
||||
is: 'multi-behaviors',
|
||||
Polymer({
|
||||
is: 'multi-behaviors',
|
||||
|
||||
behaviors: [
|
||||
window.BehaviorA,
|
||||
window.BehaviorB
|
||||
],
|
||||
behaviors: [
|
||||
window.BehaviorA,
|
||||
window.BehaviorB
|
||||
],
|
||||
|
||||
hostAttributes: {
|
||||
element: 'element'
|
||||
},
|
||||
hostAttributes: {
|
||||
element: 'element'
|
||||
},
|
||||
|
||||
properties: {
|
||||
properties: {
|
||||
|
||||
foo: {
|
||||
type: String,
|
||||
reflectToAttribute: true,
|
||||
readOnly: true,
|
||||
observer: '_fooChanged'
|
||||
},
|
||||
foo: {
|
||||
type: String,
|
||||
reflectToAttribute: true,
|
||||
readOnly: true,
|
||||
observer: '_fooChanged'
|
||||
},
|
||||
|
||||
overridableProperty: {
|
||||
value: true
|
||||
}
|
||||
overridableProperty: {
|
||||
value: true
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
_fooChanged: function(foo) {
|
||||
this.__foo = foo;
|
||||
},
|
||||
});
|
||||
_fooChanged: function(foo) {
|
||||
this.__foo = foo;
|
||||
},
|
||||
});
|
||||
|
||||
Polymer({
|
||||
is: 'nested-behaviors',
|
||||
Polymer({
|
||||
is: 'nested-behaviors',
|
||||
|
||||
behaviors: [
|
||||
[window.BehaviorB, [window.BehaviorC, window.BehaviorB], window.BehaviorA],
|
||||
[window.BehaviorD]
|
||||
]
|
||||
});
|
||||
behaviors: [
|
||||
[window.BehaviorB, [window.BehaviorC, window.BehaviorB], window.BehaviorA],
|
||||
[window.BehaviorD]
|
||||
]
|
||||
});
|
||||
|
||||
window.registerBehavior1 ={
|
||||
beforeRegister: function() {
|
||||
this._createPropertyObserver('beforeProp', 'beforePropChanged1');
|
||||
this.beforeRegisterCount++;
|
||||
this.beforeRegisterBehaviors = this.behaviors;
|
||||
},
|
||||
registered: function() {
|
||||
this._createPropertyObserver('prop', 'propChanged1');
|
||||
this._createMethodObserver('propChanged2(prop)');
|
||||
this.registeredCount++;
|
||||
this.registeredProps = [this.prop1, this.prop2, this.prop3, this.prop4];
|
||||
this.registeredBehaviors = this.behaviors;
|
||||
},
|
||||
prop1: true,
|
||||
ready: function() {
|
||||
this._ensureAttribute('attr', true);
|
||||
},
|
||||
beforePropChanged1: function() {
|
||||
this.beforePropChangedCalled = true;
|
||||
},
|
||||
propChanged1: function() {
|
||||
this.propChanged1Called = true;
|
||||
},
|
||||
propChanged2: function() {
|
||||
this.propChanged2Called = true;
|
||||
}
|
||||
};
|
||||
window.registerBehavior1 ={
|
||||
beforeRegister: function() {
|
||||
this._createPropertyObserver('beforeProp', 'beforePropChanged1');
|
||||
this.beforeRegisterCount++;
|
||||
this.beforeRegisterBehaviors = this.behaviors;
|
||||
},
|
||||
registered: function() {
|
||||
this._createPropertyObserver('prop', 'propChanged1');
|
||||
this._createMethodObserver('propChanged2(prop)');
|
||||
this.registeredCount++;
|
||||
this.registeredProps = [this.prop1, this.prop2, this.prop3, this.prop4];
|
||||
this.registeredBehaviors = this.behaviors;
|
||||
},
|
||||
prop1: true,
|
||||
ready: function() {
|
||||
this._ensureAttribute('attr', true);
|
||||
},
|
||||
beforePropChanged1: function() {
|
||||
this.beforePropChangedCalled = true;
|
||||
},
|
||||
propChanged1: function() {
|
||||
this.propChanged1Called = true;
|
||||
},
|
||||
propChanged2: function() {
|
||||
this.propChanged2Called = true;
|
||||
}
|
||||
};
|
||||
|
||||
window.registerBehavior2 ={
|
||||
prop2: true,
|
||||
beforeRegister: function() {
|
||||
this.beforeRegisterCount++;
|
||||
},
|
||||
registered: function() {
|
||||
this.registeredCount++;
|
||||
}
|
||||
};
|
||||
window.registerBehavior2 ={
|
||||
prop2: true,
|
||||
beforeRegister: function() {
|
||||
this.beforeRegisterCount++;
|
||||
},
|
||||
registered: function() {
|
||||
this.registeredCount++;
|
||||
}
|
||||
};
|
||||
|
||||
window.registerBehavior3 ={
|
||||
prop3: true,
|
||||
beforeRegister: function() {
|
||||
this.beforeRegisterCount++;
|
||||
},
|
||||
registered: function() {
|
||||
this.registeredCount++;
|
||||
}
|
||||
};
|
||||
window.registerBehavior3 ={
|
||||
prop3: true,
|
||||
beforeRegister: function() {
|
||||
this.beforeRegisterCount++;
|
||||
},
|
||||
registered: function() {
|
||||
this.registeredCount++;
|
||||
}
|
||||
};
|
||||
|
||||
Polymer({
|
||||
behaviors: [
|
||||
window.registerBehavior1,
|
||||
window.registerBehavior2,
|
||||
window.registerBehavior3
|
||||
],
|
||||
prop4: true,
|
||||
beforeRegister: function() {
|
||||
this.beforeRegisterCount++;
|
||||
},
|
||||
registered: function() {
|
||||
this.registeredCount++;
|
||||
},
|
||||
Polymer({
|
||||
behaviors: [
|
||||
window.registerBehavior1,
|
||||
window.registerBehavior2,
|
||||
window.registerBehavior3
|
||||
],
|
||||
prop4: true,
|
||||
beforeRegister: function() {
|
||||
this.beforeRegisterCount++;
|
||||
},
|
||||
registered: function() {
|
||||
this.registeredCount++;
|
||||
},
|
||||
|
||||
beforeRegisterCount: 0,
|
||||
registeredCount: 0,
|
||||
beforeRegisterCount: 0,
|
||||
registeredCount: 0,
|
||||
|
||||
is: 'behavior-registered'
|
||||
});
|
||||
is: 'behavior-registered'
|
||||
});
|
||||
|
||||
window.templateBehavior1 = {
|
||||
_template: html`<div id="from-behavior1"></div>`
|
||||
};
|
||||
window.templateBehavior1 = {
|
||||
_template: html`<div id="from-behavior1"></div>`
|
||||
};
|
||||
|
||||
window.templateBehavior2 = {
|
||||
_template: html`<div id="from-behavior2"></div>`
|
||||
};
|
||||
window.templateBehavior2 = {
|
||||
_template: html`<div id="from-behavior2"></div>`
|
||||
};
|
||||
|
||||
window.templateBehaviorFromRegistered = {
|
||||
registered: function() {
|
||||
this._template = html`<div id="behavior-from-registered"></div>`;
|
||||
}
|
||||
};
|
||||
window.templateBehaviorFromRegistered = {
|
||||
registered: function() {
|
||||
this._template = html`<div id="behavior-from-registered"></div>`;
|
||||
}
|
||||
};
|
||||
|
||||
Polymer({
|
||||
is: 'template-from-registered',
|
||||
registered: function() {
|
||||
this._template = html`<div id="from-registered"></div>`;
|
||||
}
|
||||
});
|
||||
Polymer({
|
||||
is: 'template-from-registered',
|
||||
registered: function() {
|
||||
this._template = html`<div id="from-registered"></div>`;
|
||||
}
|
||||
});
|
||||
|
||||
Polymer({
|
||||
is: 'template-from-base',
|
||||
behaviors: [
|
||||
window.templateBehavior1
|
||||
]
|
||||
});
|
||||
Polymer({
|
||||
is: 'template-from-base',
|
||||
behaviors: [
|
||||
window.templateBehavior1
|
||||
]
|
||||
});
|
||||
|
||||
Polymer({
|
||||
is: 'template-from-behavior',
|
||||
behaviors: [
|
||||
window.templateBehavior1
|
||||
]
|
||||
});
|
||||
Polymer({
|
||||
is: 'template-from-behavior',
|
||||
behaviors: [
|
||||
window.templateBehavior1
|
||||
]
|
||||
});
|
||||
|
||||
Polymer({
|
||||
is: 'template-from-behavior-overridden',
|
||||
behaviors: [
|
||||
window.templateBehavior1,
|
||||
window.templateBehavior2
|
||||
]
|
||||
});
|
||||
Polymer({
|
||||
is: 'template-from-behavior-overridden',
|
||||
behaviors: [
|
||||
window.templateBehavior1,
|
||||
window.templateBehavior2
|
||||
]
|
||||
});
|
||||
|
||||
Polymer({
|
||||
is: 'template-from-behavior-registered',
|
||||
behaviors: [
|
||||
window.templateBehaviorFromRegistered
|
||||
]
|
||||
});
|
||||
|
||||
window.ModifyObserversBehavior = {
|
||||
|
||||
__barChangedCalled: 0,
|
||||
|
||||
beforeRegister: function() {
|
||||
const observers = this.constructor.generatedFrom.observers;
|
||||
this.constructor.generatedFrom.observers = observers.concat([
|
||||
'_barChanged(bar)'
|
||||
]);
|
||||
},
|
||||
|
||||
_barChanged: function() {
|
||||
this.__barChangedCalled++;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Polymer({
|
||||
is: 'modify-observers-via-behavior',
|
||||
__zonkChangedCalled: 0,
|
||||
observers: [
|
||||
'_zonkChanged(zonk)'
|
||||
],
|
||||
behaviors: [
|
||||
window.ModifyObserversBehavior
|
||||
],
|
||||
_zonkChanged: function() {
|
||||
this.__zonkChangedCalled++;
|
||||
}
|
||||
});
|
||||
|
||||
Polymer({
|
||||
is: 'template-from-behavior-registered',
|
||||
behaviors: [
|
||||
window.templateBehaviorFromRegistered
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
<test-fixture id="single">
|
||||
@@ -396,6 +428,12 @@ Polymer({
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="modify-observers-via-behavior">
|
||||
<template>
|
||||
<modify-observers-via-behavior></modify-observers-via-behavior>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script type="module">
|
||||
import { Polymer } from '../../polymer-legacy.js';
|
||||
|
||||
@@ -479,6 +517,14 @@ suite('behavior.beforeRegister', function() {
|
||||
assert.equal(el.beforeRegisterBehaviors, el.behaviors);
|
||||
});
|
||||
|
||||
test('modify element observers', function() {
|
||||
var el = fixture('modify-observers-via-behavior');
|
||||
el.bar = 1;
|
||||
assert.equal(el.__barChangedCalled, 1);
|
||||
el.zonk = 1;
|
||||
assert.equal(el.__zonkChangedCalled, 1);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -18,323 +18,377 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
<body>
|
||||
|
||||
<script type="module">
|
||||
window.LifeCycleBehavior1 = {
|
||||
_calledCreated: 0,
|
||||
_calledAttached: 0,
|
||||
_calledAttributeChanged: 0,
|
||||
window.LifeCycleBehavior1 = {
|
||||
|
||||
properties: {
|
||||
foo: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
properties: {
|
||||
foo: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this._calledCreated++;
|
||||
},
|
||||
created() {
|
||||
this.__createdList = this.__createdList || [];
|
||||
this.__createdList.push('1');
|
||||
},
|
||||
|
||||
attached() {
|
||||
this._calledAttached++;
|
||||
},
|
||||
attached() {
|
||||
this.__attachedList = this.__attachedList || [];
|
||||
this.__attachedList.push('1');
|
||||
},
|
||||
|
||||
attributeChanged() {
|
||||
this._calledAttributeChanged++;
|
||||
}
|
||||
};
|
||||
attributeChanged() {
|
||||
this.__attributeChangedList = this.__attributeChangedList || [];
|
||||
this.__attributeChangedList.push('1');
|
||||
}
|
||||
};
|
||||
|
||||
window.LifeCycleBehavior2 = {
|
||||
created() {
|
||||
this._calledCreated++;
|
||||
},
|
||||
window.LifeCycleBehavior2 = {
|
||||
created() {
|
||||
this.__createdList = this.__createdList || [];
|
||||
this.__createdList.push('2');
|
||||
},
|
||||
|
||||
attached() {
|
||||
this._calledAttached++;
|
||||
},
|
||||
attached() {
|
||||
this.__attachedList = this.__attachedList || [];
|
||||
this.__attachedList.push('2');
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
window.LifeCycleBehavior3 = {
|
||||
created() {
|
||||
this.__createdList = this.__createdList || [];
|
||||
this.__createdList.push('3');
|
||||
}
|
||||
};
|
||||
|
||||
window.BehaviorA = {
|
||||
properties: {
|
||||
window.LifeCycleBehavior4 = {
|
||||
created() {
|
||||
this.__createdList = this.__createdList || [];
|
||||
this.__createdList.push('4');
|
||||
}
|
||||
};
|
||||
|
||||
label: {
|
||||
type: String,
|
||||
observer: '_labelChanged'
|
||||
},
|
||||
window.BehaviorA = {
|
||||
properties: {
|
||||
|
||||
hasOptionsA: {
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
observer: '_labelChanged'
|
||||
},
|
||||
|
||||
overridableProperty: {
|
||||
value: false
|
||||
},
|
||||
hasOptionsA: {
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
overridablePropertyB: {
|
||||
value: false
|
||||
},
|
||||
overridableProperty: {
|
||||
value: false
|
||||
},
|
||||
|
||||
hasBehaviorA: {
|
||||
value: true
|
||||
},
|
||||
overridablePropertyB: {
|
||||
value: false
|
||||
},
|
||||
|
||||
computeADependency: {
|
||||
value: true
|
||||
},
|
||||
hasBehaviorA: {
|
||||
value: true
|
||||
},
|
||||
|
||||
computeA: {
|
||||
computed: '_computeProp(computeADependency)'
|
||||
}
|
||||
},
|
||||
computeADependency: {
|
||||
value: true
|
||||
},
|
||||
|
||||
_simpleProperty: 'A',
|
||||
computeA: {
|
||||
computed: '_computeProp(computeADependency)'
|
||||
}
|
||||
},
|
||||
|
||||
hostAttributes: {
|
||||
behavior: 'A',
|
||||
element: 'A',
|
||||
user: 'A'
|
||||
},
|
||||
_simpleProperty: 'A',
|
||||
|
||||
listeners: {
|
||||
change: '_changeHandler'
|
||||
},
|
||||
hostAttributes: {
|
||||
behavior: 'A',
|
||||
element: 'A',
|
||||
user: 'A'
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
this.__readyA = true;
|
||||
},
|
||||
listeners: {
|
||||
change: '_changeHandler'
|
||||
},
|
||||
|
||||
_labelChanged: function(label) {
|
||||
this.__label = label;
|
||||
},
|
||||
ready: function() {
|
||||
this.__readyA = true;
|
||||
},
|
||||
|
||||
_changeHandler: function(e) {
|
||||
this.__change = e.detail.value;
|
||||
},
|
||||
_labelChanged: function(label) {
|
||||
this.__label = label;
|
||||
},
|
||||
|
||||
_computeProp: function(a) {
|
||||
return a;
|
||||
}
|
||||
};
|
||||
_changeHandler: function(e) {
|
||||
this.__change = e.detail.value;
|
||||
},
|
||||
|
||||
window.BehaviorB = {
|
||||
properties: {
|
||||
_computeProp: function(a) {
|
||||
return a;
|
||||
}
|
||||
};
|
||||
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: '_disabledChanged'
|
||||
},
|
||||
window.BehaviorB = {
|
||||
properties: {
|
||||
|
||||
hasOptionsB: {
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: '_disabledChanged'
|
||||
},
|
||||
|
||||
hasBehaviorB: {
|
||||
value: true
|
||||
},
|
||||
hasOptionsB: {
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
overridablePropertyB: {
|
||||
value: true
|
||||
},
|
||||
hasBehaviorB: {
|
||||
value: true
|
||||
},
|
||||
|
||||
computeADependencyDependency: {
|
||||
value: 'hi'
|
||||
},
|
||||
overridablePropertyB: {
|
||||
value: true
|
||||
},
|
||||
|
||||
computeADependency: {
|
||||
computed: '_computeProp(computeADependencyDependency)'
|
||||
}
|
||||
computeADependencyDependency: {
|
||||
value: 'hi'
|
||||
},
|
||||
|
||||
},
|
||||
computeADependency: {
|
||||
computed: '_computeProp(computeADependencyDependency)'
|
||||
}
|
||||
|
||||
hostAttributes: {
|
||||
behavior: 'B',
|
||||
element: 'B',
|
||||
user: 'B'
|
||||
},
|
||||
},
|
||||
|
||||
_simpleProperty: 'B',
|
||||
hostAttributes: {
|
||||
behavior: 'B',
|
||||
element: 'B',
|
||||
user: 'B'
|
||||
},
|
||||
|
||||
_disabledChanged: function(disabled) {
|
||||
this.__disabled = disabled;
|
||||
},
|
||||
_simpleProperty: 'B',
|
||||
|
||||
ready: function() {
|
||||
this.__readyB = true;
|
||||
},
|
||||
_disabledChanged: function(disabled) {
|
||||
this.__disabled = disabled;
|
||||
},
|
||||
|
||||
};
|
||||
ready: function() {
|
||||
this.__readyB = true;
|
||||
},
|
||||
|
||||
window.BehaviorC = {
|
||||
};
|
||||
|
||||
properties: {
|
||||
window.BehaviorC = {
|
||||
|
||||
hasBehaviorC: {
|
||||
value: true
|
||||
}
|
||||
properties: {
|
||||
|
||||
},
|
||||
hasBehaviorC: {
|
||||
value: true
|
||||
}
|
||||
|
||||
_simpleProperty: 'C'
|
||||
};
|
||||
},
|
||||
|
||||
window.BehaviorD = {
|
||||
_simpleProperty: 'C'
|
||||
};
|
||||
|
||||
properties: {
|
||||
window.BehaviorD = {
|
||||
|
||||
hasBehaviorD: {
|
||||
value: true
|
||||
}
|
||||
properties: {
|
||||
|
||||
},
|
||||
_simpleProperty: 'D'
|
||||
hasBehaviorD: {
|
||||
value: true
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
},
|
||||
_simpleProperty: 'D'
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<dom-module id="single-behavior">
|
||||
<script type="module">
|
||||
import { mixinBehaviors } from '../../lib/legacy/class.js';
|
||||
import { PolymerElement } from '../../polymer-element.js';
|
||||
customElements.define('single-behavior',
|
||||
mixinBehaviors(window.BehaviorA, PolymerElement));
|
||||
</script>
|
||||
import { mixinBehaviors } from '../../lib/legacy/class.js';
|
||||
import { PolymerElement } from '../../polymer-element.js';
|
||||
customElements.define('single-behavior',
|
||||
mixinBehaviors(window.BehaviorA, PolymerElement));
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
<dom-module id="lifecycle-behavior">
|
||||
<script type="module">
|
||||
import { mixinBehaviors } from '../../lib/legacy/class.js';
|
||||
import { PolymerElement } from '../../polymer-element.js';
|
||||
customElements.define('lifecycle-behavior',
|
||||
mixinBehaviors([window.LifeCycleBehavior1,
|
||||
window.LifeCycleBehavior2], PolymerElement));
|
||||
</script>
|
||||
import { mixinBehaviors } from '../../lib/legacy/class.js';
|
||||
import { PolymerElement } from '../../polymer-element.js';
|
||||
customElements.define('lifecycle-behavior',
|
||||
mixinBehaviors([window.LifeCycleBehavior1,
|
||||
window.LifeCycleBehavior2], PolymerElement));
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
<dom-module id="multi-behaviors">
|
||||
<script type="module">
|
||||
import { mixinBehaviors } from '../../lib/legacy/class.js';
|
||||
import { PolymerElement } from '../../polymer-element.js';
|
||||
customElements.define('multi-behaviors',
|
||||
class extends mixinBehaviors(
|
||||
[window.BehaviorA, window.BehaviorB], PolymerElement) {
|
||||
import { mixinBehaviors } from '../../lib/legacy/class.js';
|
||||
import { PolymerElement } from '../../polymer-element.js';
|
||||
customElements.define('multi-behaviors',
|
||||
class extends mixinBehaviors(
|
||||
[window.BehaviorA, window.BehaviorB], PolymerElement) {
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
foo: {
|
||||
type: String,
|
||||
reflectToAttribute: true,
|
||||
readOnly: true,
|
||||
observer: '_fooChanged'
|
||||
},
|
||||
static get properties() {
|
||||
return {
|
||||
foo: {
|
||||
type: String,
|
||||
reflectToAttribute: true,
|
||||
readOnly: true,
|
||||
observer: '_fooChanged'
|
||||
},
|
||||
|
||||
overridableProperty: {
|
||||
value: true
|
||||
}
|
||||
};
|
||||
}
|
||||
overridableProperty: {
|
||||
value: true
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
_fooChanged(foo) {
|
||||
this.__foo = foo;
|
||||
}
|
||||
_fooChanged(foo) {
|
||||
this.__foo = foo;
|
||||
}
|
||||
|
||||
_ensureAttributes() {
|
||||
this._ensureAttribute('element', 'element');
|
||||
super._ensureAttributes();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
_ensureAttributes() {
|
||||
this._ensureAttribute('element', 'element');
|
||||
super._ensureAttributes();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
<dom-module id="nested-behaviors">
|
||||
<script type="module">
|
||||
import { mixinBehaviors } from '../../lib/legacy/class.js';
|
||||
import { PolymerElement } from '../../polymer-element.js';
|
||||
customElements.define('nested-behaviors',
|
||||
class extends mixinBehaviors([window.BehaviorD, window.LifeCycleBehavior1], mixinBehaviors(
|
||||
[
|
||||
[window.BehaviorB, [window.BehaviorC, window.BehaviorB], window.BehaviorA, window.LifeCycleBehavior2],
|
||||
], PolymerElement)) {
|
||||
}
|
||||
);
|
||||
</script>
|
||||
</dom-module>
|
||||
<script type="module">
|
||||
import { mixinBehaviors } from '../../lib/legacy/class.js';
|
||||
import { Polymer } from '../../polymer-legacy.js';
|
||||
import { PolymerElement } from '../../polymer-element.js';
|
||||
|
||||
customElements.define('nested-behaviors',
|
||||
class extends mixinBehaviors([window.BehaviorD, window.LifeCycleBehavior1], mixinBehaviors(
|
||||
[
|
||||
[window.BehaviorB, [window.BehaviorC, window.BehaviorB], window.BehaviorA, window.LifeCycleBehavior2],
|
||||
], PolymerElement)) {
|
||||
});
|
||||
|
||||
var base = Polymer({
|
||||
is: 'sup-element',
|
||||
behaviors: [
|
||||
window.LifeCycleBehavior1,
|
||||
window.LifeCycleBehavior2
|
||||
],
|
||||
created: function() {
|
||||
this.__createdList.push('sup');
|
||||
}
|
||||
});
|
||||
|
||||
class extended extends mixinBehaviors([window.LifeCycleBehavior3,
|
||||
window.LifeCycleBehavior4], base) {
|
||||
|
||||
created() {
|
||||
super.created();
|
||||
this.__createdList.push('sub');
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('extended-behaviors', extended);
|
||||
</script>
|
||||
|
||||
<dom-module id="behavior-registered">
|
||||
<template>
|
||||
<div id="content"></div>
|
||||
</template>
|
||||
<script type="module">
|
||||
import { mixinBehaviors } from '../../lib/legacy/class.js';
|
||||
import { PolymerElement } from '../../polymer-element.js';
|
||||
import { mixinBehaviors } from '../../lib/legacy/class.js';
|
||||
import { PolymerElement } from '../../polymer-element.js';
|
||||
|
||||
window.registerBehavior1 ={
|
||||
registered: function() {
|
||||
this._createPropertyObserver('prop', 'propChanged1');
|
||||
this._createMethodObserver('propChanged2(prop)');
|
||||
this.registeredCount++;
|
||||
this.registeredProps = [this.prop1, this.prop2, this.prop3];
|
||||
this.registeredBehaviors = this.behaviors;
|
||||
},
|
||||
prop1: true,
|
||||
ready: function() {
|
||||
this._ensureAttribute('attr', true);
|
||||
},
|
||||
propChanged1: function() {
|
||||
this.propChanged1Called = true;
|
||||
},
|
||||
propChanged2: function() {
|
||||
this.propChanged2Called = true;
|
||||
}
|
||||
};
|
||||
window.registerBehavior1 ={
|
||||
registeredCount: 0,
|
||||
registered: function() {
|
||||
this._createPropertyObserver('prop', 'propChanged1');
|
||||
this._createMethodObserver('propChanged2(prop)');
|
||||
this.registeredCount++;
|
||||
this.registeredProps = [this.prop1, this.prop2, this.prop3];
|
||||
this.registeredBehaviors = this.behaviors;
|
||||
},
|
||||
prop1: true,
|
||||
ready: function() {
|
||||
this._ensureAttribute('attr', true);
|
||||
},
|
||||
propChanged1: function() {
|
||||
this.propChanged1Called = true;
|
||||
},
|
||||
propChanged2: function() {
|
||||
this.propChanged2Called = true;
|
||||
}
|
||||
};
|
||||
|
||||
window.registerBehavior2 ={
|
||||
prop2: true,
|
||||
registered: function() {
|
||||
this.registeredCount++;
|
||||
}
|
||||
};
|
||||
window.registerBehavior2 ={
|
||||
prop2: true,
|
||||
registered: function() {
|
||||
this.registeredCount++;
|
||||
}
|
||||
};
|
||||
|
||||
window.registerBehavior3 ={
|
||||
prop3: true,
|
||||
registered: function() {
|
||||
this.registeredCount++;
|
||||
}
|
||||
};
|
||||
window.registerBehavior3 ={
|
||||
prop3: true,
|
||||
registered: function() {
|
||||
this.registeredCount++;
|
||||
}
|
||||
};
|
||||
|
||||
class BehaviorRegistered extends mixinBehaviors([
|
||||
window.registerBehavior1,
|
||||
window.registerBehavior2,
|
||||
window.registerBehavior3
|
||||
], PolymerElement) {
|
||||
class BehaviorRegistered extends mixinBehaviors([
|
||||
window.registerBehavior1,
|
||||
window.registerBehavior2,
|
||||
window.registerBehavior3
|
||||
], PolymerElement) {
|
||||
|
||||
static get is() { return 'behavior-registered';}
|
||||
static get is() { return 'behavior-registered';}
|
||||
|
||||
_initializeProperties() {
|
||||
super._initializeProperties();
|
||||
this.registeredCount++;
|
||||
}
|
||||
}
|
||||
_initializeProperties() {
|
||||
super._initializeProperties();
|
||||
this.registeredCount++;
|
||||
}
|
||||
}
|
||||
|
||||
BehaviorRegistered.prototype.registeredCount = 0;
|
||||
customElements.define(BehaviorRegistered.is, BehaviorRegistered);
|
||||
|
||||
customElements.define(BehaviorRegistered.is, BehaviorRegistered);
|
||||
class BehaviorRegisteredExt extends BehaviorRegistered {
|
||||
static get is() { return 'behavior-registered-ext';}
|
||||
}
|
||||
|
||||
class BehaviorRegisteredExt extends BehaviorRegistered {
|
||||
static get is() { return 'behavior-registered-ext';}
|
||||
}
|
||||
|
||||
BehaviorRegisteredExt.prototype.registeredCount = 0;
|
||||
|
||||
customElements.define(BehaviorRegisteredExt.is, BehaviorRegisteredExt);
|
||||
</script>
|
||||
customElements.define(BehaviorRegisteredExt.is, BehaviorRegisteredExt);
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
<script type="module">
|
||||
import { mixinBehaviors } from '../../lib/legacy/class.js';
|
||||
import { PolymerElement } from '../../polymer-element.js';
|
||||
|
||||
var klass = mixinBehaviors([
|
||||
{
|
||||
__fooChangedCalled: 0,
|
||||
beforeRegister: function() {
|
||||
this.constructor.generatedFrom.observers = [
|
||||
'_fooChanged(foo)'
|
||||
];
|
||||
},
|
||||
_fooChanged: function() {
|
||||
this.__fooChangedCalled++;
|
||||
}
|
||||
}
|
||||
], PolymerElement);
|
||||
|
||||
customElements.define('before-register-observers', klass);
|
||||
</script>
|
||||
|
||||
<test-fixture id="single">
|
||||
<template>
|
||||
<single-behavior></single-behavior>
|
||||
@@ -359,12 +413,24 @@ customElements.define(BehaviorRegisteredExt.is, BehaviorRegisteredExt);
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="extended-behaviors">
|
||||
<template>
|
||||
<extended-behaviors></extended-behaviors>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="registered">
|
||||
<template>
|
||||
<behavior-registered></behavior-registered>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="before-register-observers">
|
||||
<template>
|
||||
<before-register-observers></before-register-observers>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="registered-ext">
|
||||
<template>
|
||||
<behavior-registered-ext></behavior-registered-ext>
|
||||
@@ -412,7 +478,7 @@ suite('single behavior element', function() {
|
||||
|
||||
});
|
||||
|
||||
suite('behavior.registered', function() {
|
||||
suite('behavior.registered/beforeRegister', function() {
|
||||
test('can install dynamic properties', function() {
|
||||
var el = fixture('registered');
|
||||
assert.ok(el.$.content);
|
||||
@@ -438,6 +504,12 @@ suite('behavior.registered', function() {
|
||||
assert.deepEqual(el.registeredProps, [true, true, true]);
|
||||
});
|
||||
|
||||
test('add observers via behavior in beforeRegister', function() {
|
||||
var el = fixture('before-register-observers');
|
||||
el.foo = 1;
|
||||
assert.equal(el.__fooChangedCalled, 1);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('behavior lifecycle', function() {
|
||||
@@ -449,9 +521,9 @@ suite('behavior lifecycle', function() {
|
||||
});
|
||||
|
||||
test('lifecycle', function() {
|
||||
assert.equal(el._calledCreated, 2, 'created call count wrong');
|
||||
assert.equal(el._calledAttached, 2, 'attached call count wrong');
|
||||
assert.equal(el._calledAttributeChanged, 1, 'attributeChanged call count wrong');
|
||||
assert.deepEqual(el.__createdList, ['1', '2'], 'created list wrong');
|
||||
assert.deepEqual(el.__attachedList, ['1', '2'], 'attached list wrong');
|
||||
assert.deepEqual(el.__attributeChangedList, ['1'], 'attributeChanged list wrong');
|
||||
});
|
||||
|
||||
});
|
||||
@@ -558,9 +630,9 @@ suite('nested-behaviors element', function() {
|
||||
});
|
||||
|
||||
test('nested-behavior lifecycle', function() {
|
||||
assert.equal(el._calledCreated, 2, 'created call count wrong');
|
||||
assert.equal(el._calledAttached, 2, 'attached call count wrong');
|
||||
assert.equal(el._calledAttributeChanged, 1, 'attributeChanged call count wrong');
|
||||
assert.deepEqual(el.__createdList, ['2', '1'], 'created list wrong');
|
||||
assert.deepEqual(el.__attachedList, ['2', '1'], 'attached list wrong');
|
||||
assert.deepEqual(el.__attributeChangedList, ['1'], 'attributeChanged list wrong');
|
||||
});
|
||||
|
||||
test('nested-behavior overrides ordering', function() {
|
||||
@@ -572,6 +644,21 @@ suite('nested-behaviors element', function() {
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('extended-behaviors', function() {
|
||||
|
||||
var el;
|
||||
|
||||
setup(function() {
|
||||
el = fixture('extended-behaviors');
|
||||
});
|
||||
|
||||
test('lifecycle', function() {
|
||||
assert.deepEqual(el.__createdList, ['1', '2', 'sup', '3', '4', 'sub'], 'created list wrong');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user