@polymer/polymer
Version:
The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to
337 lines (315 loc) • 7.3 kB
HTML
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer.html">
<dom-module id="x-foo">
<template>
<style>
#div {
height: 40px;
background: red;
}
</style>
<div id="div"></div>
</template>
<script>
Polymer({
is: 'x-foo',
listeners: {
tap: 'tapHandler'
},
tapHandler: function(e) {
this._testLocalTarget = e.target;
this._testRootTarget = e.composedPath()[0];
}
});
</script>
</dom-module>
<dom-module id="x-app">
<template>
<x-foo id="foo"></x-foo>
</template>
<script>
Polymer({
is: 'x-app',
listeners: {
tap: 'tapHandler'
},
tapHandler: function(e) {
this._testLocalTarget = e.target;
this._testRootTarget = e.composedPath()[0];
}
});
</script>
</dom-module>
<dom-module id="x-setup">
<template>
<div id="inner" on-tap="handler" on-track="handler" on-down="handler"
on-up="handler"></div>
</template>
<script>
Polymer({
is: 'x-setup',
listeners: {
tap: 'handler',
track: 'handler',
down: 'handler',
up: 'handler'
},
handler: function() {
}
});
</script>
</dom-module>
<dom-module id="x-dynamic">
<script>
Polymer({
is: 'x-dynamic',
handler: function(){},
setup: function() {
this.listen(this, 'tap', 'handler');
},
teardown: function() {
this.unlisten(this, 'tap', 'handler');
}
});
</script>
</dom-module>
<script>
var EventCaptureBehavior = {
properties: {
stream: {
type: Array,
value: function() {
return [];
}
}
},
handle: function(e) {
this.stream.push(e);
}
};
</script>
<dom-module id="x-prevent">
<script>
Polymer({
listeners: {
'down': 'prevent',
'up': 'handle',
'tap': 'handle',
'track': 'handle'
},
behaviors: [EventCaptureBehavior],
is: 'x-prevent',
prevent: function(e, detail) {
detail.prevent('tap');
detail.prevent('track');
e.preventDefault();
this.handle(e);
}
});
</script>
</dom-module>
<dom-module id="x-buttons">
<script>
Polymer({
is: 'x-buttons',
listeners: {
'down': 'handle',
'up': 'handle',
'tap': 'handle',
'track': 'handle'
},
behaviors: [EventCaptureBehavior]
});
</script>
</dom-module>
<dom-module id="x-document-listener">
<script>
Polymer({
is: 'x-document-listener',
setup: function() {
this.listen(document, 'down', 'handle');
},
teardown: function() {
this.unlisten(document, 'down', 'handle');
},
behaviors: [EventCaptureBehavior]
});
</script>
</dom-module>
<dom-module id="x-nested-child-prevent">
<script>
Polymer({
is: 'x-nested-child-prevent',
listeners: {
tap: 'handle'
},
behaviors: [EventCaptureBehavior]
});
</script>
</dom-module>
<dom-module id="x-nested-prevent">
<template>
<style>
:host {
position: absolute;
display: block;
background: orange;
height: 100px;
width: 100px;
}
#child {
position: relative;
display: block;
background: blue;
height: 50px;
width: 50px;
margin-top: 25px;
margin-left: 25px;
}
</style>
<x-nested-child-prevent id="child"></x-nested-child-prevent>
</template>
<script>
Polymer({
is: 'x-nested-prevent',
listeners: {
track: 'handle'
},
behaviors: [EventCaptureBehavior]
});
</script>
</dom-module>
<dom-module id="x-imperative">
<script>
Polymer({
is: 'x-imperative',
behaviors: [EventCaptureBehavior]
});
</script>
</dom-module>
<dom-module id="x-native-label">
<template>
<label id="label" for="check"></label>
<input id="check" type="checkbox">
</template>
<script>
class XNativeLabel extends Polymer.Element {
static get is() {
return 'x-native-label';
}
}
customElements.define(XNativeLabel.is, XNativeLabel);
</script>
</dom-module>
<dom-module id="x-native-label-nested">
<template>
<label id="label">
<input id="check" type="checkbox">
</label>
</template>
<script>
class XNativeLabelNested extends Polymer.Element {
static get is() {
return 'x-native-label-nested';
}
}
customElements.define(XNativeLabelNested.is, XNativeLabelNested);
</script>
</dom-module>
<script>
class XDisabled extends Polymer.Element {
static get is() {
return 'x-disabled';
}
static get properties() {
return {
disabled: {
type: Boolean,
reflectToAttribute: true
}
};
}
constructor() {
super();
this.disabled = true;
}
}
customElements.define(XDisabled.is, XDisabled);
</script>
<dom-module id="x-disabled-tap">
<template>
<button id="disabled" on-tap="tap" disabled></button>
<div disabled>
<button id="nested" on-tap="tap"></button>
</div>
<x-disabled id="disabledEl" on-tap="tap"></x-disabled>
</template>
<script>
class XDisabledTap extends Polymer.GestureEventListeners(Polymer.Element) {
constructor() {
super();
this.taps = [];
}
static get is() {
return 'x-disabled-tap';
}
tap(e) {
const target = e.target;
this.taps.push(`${target.localName}${target.id ? '#' + target.id : ''}`);
}
}
customElements.define(XDisabledTap.is, XDisabledTap);
</script>
</dom-module>
<dom-module id="all-disabled">
<template>
<button></button>
<!-- MDN lists as obsolete -->
<!-- <command></command> -->
<fieldset></fieldset>
<input>
<!-- MDN lists as obsolete -->
<!-- <keygen> -->
<select>
<optgroup>
<option></option>
</optgroup>
</select>
<textarea></textarea>
</template>
<script>
class AllDisabled extends Polymer.GestureEventListeners(Polymer.Element) {
static get is() {
return 'all-disabled';
}
constructor() {
super();
this.taps = [];
}
tap(e) {
this.taps.push(e.target.localName);
}
ready() {
super.ready();
this.shadowRoot.querySelectorAll('*').forEach((el) => {
el.setAttribute('disabled', '');
Polymer.Gestures.addListener(el, 'tap', (e) => this.tap(e));
});
}
tapAll() {
this.shadowRoot.querySelectorAll('*').forEach((el) => {
el.click();
});
}
}
customElements.define(AllDisabled.is, AllDisabled);
</script>
</dom-module>