| 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 'use strict'; |
| 12 |
| 13 import ApplyShim from '../src/apply-shim.js' |
| 14 import templateMap from '../src/template-map.js' |
| 15 import {getIsExtends, toCssText} from '../src/style-util.js' |
| 16 import * as ApplyShimUtils from '../src/apply-shim-utils.js' |
| 17 import documentWait from '../src/document-wait.js' |
| 18 import {getComputedStyleValue, updateNativeProperties} from '../src/common-utils
.js' |
| 19 import {CustomStyleInterfaceInterface} from '../src/custom-style-interface.js' /
/ eslint-disable-line no-unused-vars |
| 20 import {nativeCssVariables, nativeShadow} from '../src/style-settings.js' |
| 21 |
| 22 /** @const {ApplyShim} */ |
| 23 const applyShim = new ApplyShim(); |
| 24 |
| 25 class ApplyShimInterface { |
| 26 constructor() { |
| 27 /** @type {?CustomStyleInterfaceInterface} */ |
| 28 this.customStyleInterface = null; |
| 29 documentWait(() => { |
| 30 this.ensure(); |
| 31 }); |
| 32 applyShim['invalidCallback'] = ApplyShimUtils.invalidate; |
| 33 } |
| 34 ensure() { |
| 35 if (this.customStyleInterface) { |
| 36 return; |
| 37 } |
| 38 this.customStyleInterface = window.ShadyCSS.CustomStyleInterface; |
| 39 if (this.customStyleInterface) { |
| 40 this.customStyleInterface['transformCallback'] = (style) => { |
| 41 applyShim.transformCustomStyle(style); |
| 42 }; |
| 43 this.customStyleInterface['validateCallback'] = () => { |
| 44 requestAnimationFrame(() => { |
| 45 if (this.customStyleInterface['enqueued']) { |
| 46 this.flushCustomStyles(); |
| 47 } |
| 48 }); |
| 49 } |
| 50 } |
| 51 } |
| 52 /** |
| 53 * @param {!HTMLTemplateElement} template |
| 54 * @param {string} elementName |
| 55 */ |
| 56 prepareTemplate(template, elementName) { |
| 57 this.ensure(); |
| 58 templateMap[elementName] = template; |
| 59 let ast = applyShim.transformTemplate(template, elementName); |
| 60 // save original style ast to use for revalidating instances |
| 61 template['_styleAst'] = ast; |
| 62 } |
| 63 flushCustomStyles() { |
| 64 this.ensure(); |
| 65 if (!this.customStyleInterface) { |
| 66 return; |
| 67 } |
| 68 let styles = this.customStyleInterface['processStyles'](); |
| 69 if (!this.customStyleInterface['enqueued']) { |
| 70 return; |
| 71 } |
| 72 for (let i = 0; i < styles.length; i++ ) { |
| 73 let cs = styles[i]; |
| 74 let style = this.customStyleInterface['getStyleForCustomStyle'](cs); |
| 75 if (style) { |
| 76 applyShim.transformCustomStyle(style); |
| 77 } |
| 78 } |
| 79 this.customStyleInterface['enqueued'] = false; |
| 80 } |
| 81 /** |
| 82 * @param {HTMLElement} element |
| 83 * @param {Object=} properties |
| 84 */ |
| 85 styleSubtree(element, properties) { |
| 86 this.ensure(); |
| 87 if (properties) { |
| 88 updateNativeProperties(element, properties); |
| 89 } |
| 90 if (element.shadowRoot) { |
| 91 this.styleElement(element); |
| 92 let shadowChildren = element.shadowRoot.children || element.shadowRoot.chi
ldNodes; |
| 93 for (let i = 0; i < shadowChildren.length; i++) { |
| 94 this.styleSubtree(/** @type {HTMLElement} */(shadowChildren[i])); |
| 95 } |
| 96 } else { |
| 97 let children = element.children || element.childNodes; |
| 98 for (let i = 0; i < children.length; i++) { |
| 99 this.styleSubtree(/** @type {HTMLElement} */(children[i])); |
| 100 } |
| 101 } |
| 102 } |
| 103 /** |
| 104 * @param {HTMLElement} element |
| 105 */ |
| 106 styleElement(element) { |
| 107 this.ensure(); |
| 108 let {is} = getIsExtends(element); |
| 109 let template = templateMap[is]; |
| 110 if (template && !ApplyShimUtils.templateIsValid(template)) { |
| 111 // only revalidate template once |
| 112 if (!ApplyShimUtils.templateIsValidating(template)) { |
| 113 this.prepareTemplate(template, is); |
| 114 ApplyShimUtils.startValidatingTemplate(template); |
| 115 } |
| 116 // update this element instance |
| 117 let root = element.shadowRoot; |
| 118 if (root) { |
| 119 let style = /** @type {HTMLStyleElement} */(root.querySelector('style'))
; |
| 120 if (style) { |
| 121 // reuse the template's style ast, it has all the original css text |
| 122 style['__cssRules'] = template['_styleAst']; |
| 123 style.textContent = toCssText(template['_styleAst']) |
| 124 } |
| 125 } |
| 126 } |
| 127 } |
| 128 /** |
| 129 * @param {Object=} properties |
| 130 */ |
| 131 styleDocument(properties) { |
| 132 this.ensure(); |
| 133 this.styleSubtree(document.body, properties); |
| 134 } |
| 135 } |
| 136 |
| 137 if (!window.ShadyCSS || !window.ShadyCSS.ScopingShim) { |
| 138 const applyShimInterface = new ApplyShimInterface(); |
| 139 let CustomStyleInterface = window.ShadyCSS && window.ShadyCSS.CustomStyleInter
face; |
| 140 |
| 141 window.ShadyCSS = { |
| 142 /** |
| 143 * @param {!HTMLTemplateElement} template |
| 144 * @param {string} elementName |
| 145 * @param {string=} elementExtends |
| 146 */ |
| 147 prepareTemplate(template, elementName, elementExtends) { // eslint-disable-l
ine no-unused-vars |
| 148 applyShimInterface.flushCustomStyles(); |
| 149 applyShimInterface.prepareTemplate(template, elementName) |
| 150 }, |
| 151 |
| 152 /** |
| 153 * @param {!HTMLElement} element |
| 154 * @param {Object=} properties |
| 155 */ |
| 156 styleSubtree(element, properties) { |
| 157 applyShimInterface.flushCustomStyles(); |
| 158 applyShimInterface.styleSubtree(element, properties); |
| 159 }, |
| 160 |
| 161 /** |
| 162 * @param {!HTMLElement} element |
| 163 */ |
| 164 styleElement(element) { |
| 165 applyShimInterface.flushCustomStyles(); |
| 166 applyShimInterface.styleElement(element); |
| 167 }, |
| 168 |
| 169 /** |
| 170 * @param {Object=} properties |
| 171 */ |
| 172 styleDocument(properties) { |
| 173 applyShimInterface.flushCustomStyles(); |
| 174 applyShimInterface.styleDocument(properties); |
| 175 }, |
| 176 |
| 177 /** |
| 178 * @param {Element} element |
| 179 * @param {string} property |
| 180 * @return {string} |
| 181 */ |
| 182 getComputedStyleValue(element, property) { |
| 183 return getComputedStyleValue(element, property); |
| 184 }, |
| 185 nativeCss: nativeCssVariables, |
| 186 nativeShadow: nativeShadow |
| 187 }; |
| 188 |
| 189 if (CustomStyleInterface) { |
| 190 window.ShadyCSS.CustomStyleInterface = CustomStyleInterface; |
| 191 } |
| 192 } |
| 193 |
| 194 window.ShadyCSS.ApplyShim = applyShim; |
| OLD | NEW |