| OLD | NEW |
| (Empty) | |
| 1 <!-- |
| 2 @license |
| 3 Copyright (c) 2017 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.txt |
| 9 --> |
| 10 |
| 11 <link rel="import" href="../utils/boot.html"> |
| 12 <link rel="import" href="../mixins/property-effects.html"> |
| 13 <link rel="import" href="../mixins/mutable-data.html"> |
| 14 <link rel="import" href="../mixins/gesture-event-listeners.html"> |
| 15 |
| 16 <script> |
| 17 |
| 18 (function() { |
| 19 'use strict'; |
| 20 |
| 21 /** |
| 22 * @constructor |
| 23 * @implements {Polymer_PropertyEffects} |
| 24 * @implements {Polymer_OptionalMutableData} |
| 25 * @implements {Polymer_GestureEventListener} |
| 26 * @extends {HTMLElement} |
| 27 */ |
| 28 const domBindBase = |
| 29 Polymer.GestureEventListeners( |
| 30 Polymer.OptionalMutableData( |
| 31 Polymer.PropertyEffects(HTMLElement))); |
| 32 |
| 33 /** |
| 34 * Custom element to allow using Polymer's template features (data binding, |
| 35 * declarative event listeners, etc.) in the main document without defining |
| 36 * a new custom element. |
| 37 * |
| 38 * `<template>` tags utilizing bindings may be wrapped with the `<dom-bind>` |
| 39 * element, which will immediately stamp the wrapped template into the main |
| 40 * document and bind elements to the `dom-bind` element itself as the |
| 41 * binding scope. |
| 42 * |
| 43 * @extends HTMLElement |
| 44 * @mixes Polymer.PropertyEffects |
| 45 * @memberof Polymer |
| 46 * @summary Custom element to allow using Polymer's template features (data |
| 47 * binding, declarative event listeners, etc.) in the main document. |
| 48 */ |
| 49 class DomBind extends domBindBase { |
| 50 |
| 51 static get observedAttributes() { return ['mutable-data'] } |
| 52 |
| 53 // assumes only one observed attribute |
| 54 attributeChangedCallback() { |
| 55 this.mutableData = true; |
| 56 } |
| 57 |
| 58 connectedCallback() { |
| 59 this.render(); |
| 60 } |
| 61 |
| 62 disconnectedCallback() { |
| 63 this.__removeChildren(); |
| 64 } |
| 65 |
| 66 __insertChildren() { |
| 67 this.parentNode.insertBefore(this.root, this); |
| 68 } |
| 69 |
| 70 __removeChildren() { |
| 71 if (this.__children) { |
| 72 for (let i=0; i<this.__children.length; i++) { |
| 73 this.root.appendChild(this.__children[i]); |
| 74 } |
| 75 } |
| 76 } |
| 77 |
| 78 /** |
| 79 * Forces the element to render its content. This is typically only |
| 80 * necessary to call if HTMLImports with the async attribute are used. |
| 81 */ |
| 82 render() { |
| 83 let template; |
| 84 if (!this.__children) { |
| 85 template = template || this.querySelector('template'); |
| 86 if (!template) { |
| 87 // Wait until childList changes and template should be there by then |
| 88 let observer = new MutationObserver(() => { |
| 89 template = this.querySelector('template'); |
| 90 if (template) { |
| 91 observer.disconnect(); |
| 92 this.render(template); |
| 93 } else { |
| 94 throw new Error('dom-bind requires a <template> child'); |
| 95 } |
| 96 }) |
| 97 observer.observe(this, {childList: true}); |
| 98 return; |
| 99 } |
| 100 this.root = this._stampTemplate(template); |
| 101 this.$ = this.root.$; |
| 102 this.__children = []; |
| 103 for (let n=this.root.firstChild; n; n=n.nextSibling) { |
| 104 this.__children[this.__children.length] = n; |
| 105 } |
| 106 this._enableProperties(); |
| 107 } |
| 108 this.__insertChildren(); |
| 109 this.dispatchEvent(new CustomEvent('dom-change', { |
| 110 bubbles: true, |
| 111 composed: true |
| 112 })); |
| 113 } |
| 114 |
| 115 } |
| 116 |
| 117 customElements.define('dom-bind', DomBind); |
| 118 |
| 119 })(); |
| 120 |
| 121 </script> |
| OLD | NEW |